TOP

Portfolio Site Development

1. Overview

  • My Role: Full-stack UX Designer
  • Timeline: August 2018 - September 2018 (1 month in total)
  • Tools: HTML, CSS, JavaScript, Figma (for editing image files)

After completing UI design course on August 2018, I felt the neccessity of understanding developers' language. Here, the main reason was to collaborate better with developers, understanding how each design element can be shown on the real screen.

Thus, I decided to learn front-end development, as the last part of Certified UX Designer course at CareerFoundry. In the course, I was assigned to build my portfolio website (this website) using HTML, CSS and JavaScript.

2. Overall Design Guideline

At the time, I already had an online portfolio, which I designed using Wix. Therefore, I decided to maintain the design of my WIX portfolio, using the same colour schemes, but changing only the font.

Old-version portfolio website

Wix Portfolio

3. Contents

I concluded to maintain the list of projects which were uploaded on the WIX portfolio, only adding the case study of this portfolio page. Also, to let the recruiters check both the brief design information and detailed design processs on my portfolio, I separated the design page and the case study page of some projects - such as FitJet and VELA.

Wix Portfolio - My Works

4. HTML and Basic Structure

Before moving onto 'real coding' stage, I firstly learned basic principles of web and how to inspect website using Chrome (using Inspector or Developer Tool). I also took a look at some websites to check the ways, in which each site consists of. I could gain knowledge about what types of HTML tags I need to use for the basic structure of my portfolio website. Then, with the help and advice of my mentor, I built HTML structure, including a header, a hero section and a footer.

HTML Tags

5. CSS and Styling

After making the foundation of the website using HTML, I added some styling to it, such as colours, boxes, buttons and hyperlinks. CSS tags were used in this stage, of course. In this part, it took a while to understand how each tag and class within CSS consists and works. Also, as I did not want to apply the same styling to every page, I spent extra time to add some new tags, including IDs and classes.

Meanwhile, some micro-interactions were added to show each action (e.g. clicking a button) is properly done and make users relieved.

CSS Tags

In addition, to let users check my works from various devices, I made the website responsive, using different CSS tags for each device - making the website approachable from desktops, tablet PCs and mobile phones.

Responsive Design

6. JavaScript & jQuery

After finishing the initial styling using CSS, I decided to add more detailed interaction on the home screen of the online portfolio. Spefically, I wanted to let users see what each project page describes - during the hovered status of each project tile on the home screen.

Thus, I firstly added HTML tags which include brief description about each project, making it linked to the detailed project description. Then, I styled the form of interaction using CSS tags, and connected it to JavaScript tags. Here, there was a challenge how to use tags properly to connect JavaScript, HTML and CSS in the form that I had originally intended.

To solve the issue, I got help from my mentor, and researched tags and examples of hover/overlay effects. After the process, I could made the interaction as follows:

Before and After Hover

7. Usability Testing

Considering the user experience of viewers, I planned usability testing to find whether each information (e.g. project description, contact information, etc.) is displayed straightforward enough. 5 people were interviewed for the session.

Overall, no serious usability issue was found. However, there were several comments that it was difficult to find my profile within the website and it would be better add my CV. Based on the comments, I added some extra buttons and revised the navigation part. Also, on the footer, I added an extra social media icon for email above 'Drop Me a Line' button to let users find how to contact me via email easier and more convenient.

Even after the usability testing and revision, there were several challenges - for some product design pages. After checking the challenges, I debugged the codes, including HTML, CSS and JavaScripts and removed the tags which were duplicated or not needed at all.

Revision after Usability Test

8. Lesson from the Project

As a beginner who needed to start learning how to code from scratch, it was a big challenge to cover the whole details. Nevertheless, I could learn how the UX and UI design assets can be shown on the real screen - through coding processes.

Also, I could realise attention to detail is necessary for coding processes, to make design assets work without no problem on the screen and the server. Most importantly, as I learned the language of developers through this project, I became confident to communicate with developers more efficiently, understanding the limitation of front-end languages and listening to their feedback regarding my design during the coding process.

view the github page