Creating My Portfolio Website

Duration

Summer 2019

Roles

UX Design, UI Design, Information Architecture, Front-End Development

About

Summer of 2018 - I created a portfolio website to showcase some of my selected work. This includes designing the website, learning how to code (HTML5, CSS), and then coding it.

In the summer of 2019 - I revamped the website. I redesigned it and then worked with an engineer to build it. This process included technical discussions, adopting a mobile-first approach, learning to communicate design specifications effectively.


Mobile

Desktop

2018 Summer: Version 1

This is a compilation of screenshots taken from the live site of my previous (now archived) website portfolio that I put together in Figma. This feature is best viewed on the desktop.

You can interact with this compilation to navigate to one project. Start by clicking "Physical Design" > *scroll down to find an image tile of a bike* > *scroll down to view project*. Alternatively, you can click anywhere to view the clickable blue boxes.

2019 Summer: Version 2

It was time for a change!

Although I had prior knowledge of HTML/CSS, Summer 2018 was my first time coding a production-level website. As such, there were many flaws (rectified by patch work) and design limitations (limited knowledge of coding and short timeframe).

I overcame many of these shortcomings during the redesign process by collaborating with an engineer. I was able to focus solely on design and did not have to worry about technical limitations.

Feedback

Before I dived into the redesign, I spoke to a couple of designers and friends to see what they thought of Portfolio Website Version 1. Amongst other feedback, these are 4 points that I wanted to focus on:

  • There was a lack of personality. The first version of the website was mostly in greyscale. Although that was the style I was aiming for, many commented that the website looked like it was permanently under construction.
  • "Who are you? Where's your face?" - A friend commented that he would have liked to see a photograph of me, so that he can add a face to the work that he sees.
  • Simpler Navigation. A designer commented that she felt that there was too much navigation required before she could view a project or understand who I am. This might make viewers lose interest quickly.
  • Optimize for mobile first. The viewing experience on mobile was not pleasant because some elements of the website were not designed/coded with screen breakpoints in mind. For version 2, I designed for mobile first, as recommended by TailwindCSS.

Process

Wireframe

I started with quick and rough sketches on paper. Ideating on paper allows me to generate many ideas, in a short period of time, that focuses on functionality and user experience. It also allows me to visualize my thoughts and share ideas with people around me without having to commit a lot of time to an idea.

Wireframe in Figma

I translated a couple of the initial ideas from my sketches on paper into Figma. Figma allows me to more accurately visualize the layout of the website. I then did further refinements here.

You can see what I did on Figma by navigating the embedded Figma screen above.

Style Guide

Part of my design process for this website was creating a style guide. This guide served 2 main purposes in this project:

  • It minimized ambiguity between the design and coding. The example use cases and specifications allowed all parties to understand how the components look and how they are used without the need for extra clarification.
  • Reusable components can be created in both Design/Figma and coding. Using these components makes it easier to maintain consistency through the website and designs because they can be updated from one central location.

Zoom into the embedded Figma screen to take a closer look at the style guide!

Closing Thoughts

Through this project that has span over the past 2 years, I gained technical knowledge of coding, learned to design extensively for a product that will be shipped, and learned how to collaborate effectively with an engineer.

I think I did a pretty good job addressing all the feedback and concerns from Version 1 that I wanted to, and I'm really happy about that. If you have any additional feedback, please feel free to let me know what they are.