Portfolio Website Case Study

Published: Monday, February 25, 2019

This case study was built for a project in my User Experience Design course at Eastern Washington University. It is the final write-up of the creation process of a Portfolio Website. It is partly based on the original motivations for this website, ethanholman.com.

The need for this site is to show off the work I've done to potential employers, and anyone who is interested in the content/projects themselves. For example, there may be technical articles I write that could be of use to other software developers. Additionally, I'd like a place to showcase other stuff such as my photography work, as well as hobby-related things like RC airplanes.

I started by wireframing several different ideas for the layout of this website. For each part of the site, I drew out multiple design layout ideas. Roughly 15 minutes were spent drawing out on paper 8 initial designs for the homepage layout. From there, I chose 4 of the best ideas and refined them over the next 5 minutes. After that, I chose one design and spent the last period of time (3 minutes) to further refine a final homepage layout wireframe. The purpose of these timed intervals was to simulate the phases in designing real-world solutions on a smaller scale.

Next, I collaborated with a small group on making the detail page wireframes of the portfolio website. It was basically the same process as described above (for the homepage), but we all provided each other with feedback on our designs. In the second to last design interval, we voted together on the best four designs and spent our time each refining those. For the final interval, we all worked to refine the design we judged to be "best" from the previous interval. This final wireframe design was what we ended up all using for our detail pages. I used it for the "photography detail" page in this case study, with the modification of adding a footer.

Based on the requirements for my portfolio website, I required the following parts (features):

  • Main Homepage: showcase of all parts of the site
  • Photography Detail: showcasing my photography work
  • Article Detail: for technical articles or code samples on my Computer Science
  • About Me Detail: geared towards potential employers, to focus on my professional background

Below are scans of my inital wireframe "charrettes" created during our collaborative periods in class:

Home Page 1 Home Page 1 Home Page 1
Charrette scans from in-class wireframing sessions

Previously in class, we were introduced to Atomic Design Methodology. In a nutshell, this common web-focused design methodology emphasises design by using individual elements ("atoms") to build larger, more functional sub-components ("molecules"). From there, these molecules can be combined to form features ("organisms") that are used to build pages that we all can see and use. There's a lot more about Atomic Design on Brad Frost's website.

Atomic Design Example
An example of Atomic Design applied to Instagram. Credit: Atmoic Design - Brad Frost

After creating the wireframes, I used Atomic Design Principles to break things down. A spreadsheet outline was created in Google Sheets to plan out what "organisms" would be necessary in order to build the final page mockups.

The bulk of the work in creating this Website Portfolio was designing in Figma. Building a design system framework was the first design step. This is where I chose a color palette and typefaces. I went with 'Merriweather' as the font for headings, and 'Ubuntu' for standard text, buttons, inputs, and such.

Design system framework

The next step in creating mockups was creating atomic design components following the established design system framework. I based sizing on a 1440px-wide desktop/laptop screen and iPhone 8 viewports. For my purposes, I don't need buttons or text inputs at this time. I created navigation link components, image pickers, code snippet containers, and the headers and footers. Due to having several viewports, I had to slightly modify the size for some of these components -- particularly the header and footer.

Using the components, I then built out pages in Figma. This process was a matter of arranging the components I had already created to build the layouts. In a few cases, I had to modify the sizing of text in the components. From there, I customized the text to fit each kind of page. Creating prototypes was the final step, where I linked pages together to give the user an interactive experience. You can see the Figma pages here.

Figma files for Portfolio Website