Portfolio Site Development
- My Role: Full-stack UX Designer
- Timeline: August 2018 - September 2018 (1 month in total)
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.