Portfolio Design + Development Process

As a computer science student interested in UX Design, it is essential for me to create a portfolio. Not only does it showcase my skills and interests, but it provides a key platform for employers and clients to gauge my work and to gain insight into my design and development process.


I began the process with an informal competitive analysis of the best UX portfolios online to find out what exactly makes up a quality portfolio. Some of my favorite examples include:

Problem & Solution

Most of the examples I’ve found were from UXers who are already well established in the industry. As an undergraduate student however, the problem at hand that I set out to solve was:

How do I best showcase my skills and aspirations, with little industry experience?

Evidenced by the examples above, great UX portfolios highlight each UXer’s specialties and provide in-depth details on their design process. Furthermore, each portfolio had a sense of branding that was unique to each individual page. With that being said, I derived the following solution:

  1. Highlight my skills and qualifications — with little industry experience, my greatest asset is my knowledge of the design process and modern technologies. Therefore, it is important for me to establish that I have the necessary soft and technical skills to bring value to potential employers.
  2. Provide in-depth details of my past projects — Recruiters not only want to know that I have the technical chops necessary for the job, but that I understand the design and development process as well.
  3. Create a strong sense of branding — Employers look at dozens of portfolios everyday. Quality visual design and effective branding are necessary to appeal to recruiters and to ensure that they remember me.


I began designing the user interface using good ol’ pen and paper. As a firm believer of “Pen before Pixel”, sketching on paper allows me to get my ideas across in the most effective and efficient manner. Furthermore, I chose to design my portfolio with a Mobile First approach.

Home & Skills — mobile
Projects & Contact— Mobile
Mobile Prototype
Home & Skills — Desktop/Tablet

Why Mobile First?

Mobile first allows designers to build quality products that scale up to any sized viewport. The common issue with designing for desktop first is that often times, the power and ability of the desktop viewport does not translate well to smaller screen sizes. With over 200 Million mobile users in the U.S (Statista) alone, it is becoming more and more important to optimize functionality on the mobile viewport and to scale up, not down.

That being said, I wanted to take the mobile first approach in order to best showcase my skills. Recruiters are always on the go and will inevitably view my work through mobile devices, making it essential for me to optimize my portfolio for smaller screens.


As a student marketing myself on the ability to both design and develop, using templates or website creators were obviously out of the question. Developing my own site allows me to fully implement my designs and to showcase my skills as well. Technologies I used to develop were:

  • HTML
  • CSS
  • Twitter Bootstrap — For the grid-system and its intuitive mobile-first approach
  • Javascript/JQuery — For the scroll-to-anchor animation
  • Atom — My go-to text editor :)


Overall, I feel that I was able to successfully design and develop a quality portfolio that served all my needs listed above. By taking a mobile-first approach, I implemented a clean and functional design that will hopefully (fingers-crossed) attract potential employers. More updates on that to come!

You can check out my portfolio at http://edngai.com/

Like what you read? Give Ed Ngai a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.