(Re)Building My UX Portfolio Site: A Case Study

Self-promoting for the self-promotion adverse

Project Overview

There’s always been one type of design that I struggled with: the personal portfolio. As a lifelong introvert, self-promotion was something I always avoided when possible, but when it comes to getting a job in the UX field, having a portfolio is essentially a requirement. While I had looked at options like Wix or Adobe Portfolio, I felt that designing and coding my own site would give me more control over its functionality and ultimately serve as an example of my abilities as a UX designer.

The current design for this case study is actually a redesign of an older portfolio site that I had created, but because I had done so before knowing about responsive web design and the mobile-first approach, I ended up scrapping it in favor of building something much more device agnostic. As such, my process here is a bit different from my other projects, but still follows the general research->wireframe->render process that I’ve been doing. Unlike my other projects, which were done to showcase my abilities and thought processes as a UX designer, this project is essentially my first project with a more practical goal: to get a job.

Process

Research: The main research component of this project was to canvas some of the most popular and successful modern UX portfolio sites. Using different search engines, portfolio review articles, and sites that had a large UX/UI designer presence (e.g. Dribbble and Behance), I examined dozens of portfolios to gain inspiration for how I’d like to approach my own. As this was a redesign of an earlier concept that I had created, I looked more towards other portfolios that had a similar design or theme in order to better refine my own original design.

Moving forwards, I picked out three different designs that resonated with me the most: Owltastic (Megan Fisher Couldwell) for her site’s general structure, Kuon Yagi’s site for his aesthetics, and Ivo Mynttinen’s site for his simple and direct feel.

Information Architecture: From the start, I had already settled on a single-page web design, meaning everything that I would include had to flow smoothly from one section to the next. The order of the sections that I made were largely based on Owltastic’s site, which began with an introductory masthead, followed by her work, process, and contact call-to-action.

The only addition I made to this structure was a Skills section, which was inspired by Kuon Yagi. While his implementation of skill bars were a bit odd (each bar was the same length despite his skills listing different values), I felt the style would serve to allow visitors of my portfolio to quickly scan my skills while representing my enthusiasm for gaming. While there were some conflicting views on whether or not a Skills section should be incorporated into a portfolio site, I felt it was particularly important for me as my main target audience would be recruiters from UX/UI design studios rather than general clients.

The end result led to the establishment of 5 thematic sections:

• Introduction
• Recent Work/Portfolio Showcase
• Process
• Skills
• Contact

Wireframe: While I had an initial design to base the present design off of, I set out to create wireframes for each of the 5 thematic sections based on a mobile-first, single column approach. Unlike my initial design, I followed the general principles laid out by Material Design to organize each section and its relative contents. The overall result is something simple, clean, and familiar yet distinctively unique.

The Home page stands out as the most distinct section as the main content is centered on the screen with a simple tagline, a short descriptor, and calls-to-action for visitors to either see my work or to contact me. The former would open up a blank tab to my Behance account (which is where I compile my best work), while the latter would scroll to the Contact section of the page.

The remaining sections all begin with a similar header format, with the general theme in a small text, a tagline that captures each theme in larger text, and a three-line descripton.

For the Recent Work section, I settled on limiting my portfolio showcase to my 3 best works. This follows a similar structure to a previous project, which allows each piece to take up more screen estate for better clarity while not overloading visitors with too many choices.

The Process section is the wordiest of all the sections, therefore it was important to make each subsection distinct yet uniform. The initial design that I settled on was to follow a similar motif as the Section Headers, but with a more direct writing style.

The Skills section incorporated skill bars that pay homage to classic Pokemon health bars, with the name of the skill on the top left, values on the top right, and a visual indicator across the bottom. This style of skill bar also falls in line with Material Design, which makes for something clean and easily scannable. A Tools subsection was also added, as many recruiters often post job descriptions that outline ideal tool proficiencies.

Lastly, the Contact section contains a form and centralizes all of the social media links and contact information that a visitor would need to contact me. The form is a fairly simple 3-input form, which would be the simplest and fastest way a visitor could reach me for any inquiries, while visitors can also follow my work via my social media links to gain a more in-depth understanding of my style of work or to contact me via external platforms.

Render: When forming the initial render, I made sure to follow established dark theme/mode conventions; the main background is more of a dark gray than a pure black, plenty of whitespace is used between text for clarity, and colors used against the dark background have a good contrast ratio.

Any aesthetic choices also serve a functional purpose. The background art for the Home section sets the tone for the rest of the site as well as representing my values of minimalism and simplicity in UX/UI design. Key words were also highlighted in different colors to contribute to the scannability of the site by differentiating the 4 main content sections.

Coding: Having a render to work off of, I set out to code the site using HTML and CSS. As the initial design followed a single-column format, differentiating each section for <div> or section specific tags was relatively simple and straightforwards.

Throughout the coding process, however, there were a few design changes that I made to better optimize the site’s performance and streamline the overall experience. The list below highlights each of the changes that I made:

• The hamburger menu icon on the Home page was removed since scrolling through the site was easy enough. While I could implement it later on, it didn’t feel like it was necessary for the current build.
• The main background image for the masthead was tweaked a bit to allow for further expansion. Using a mobile-first approach, the background would grow increasinly more complex as screen widths became larger, with the largest image accomodating for 1440px screens.

Background image variations for smartphones (top left), tablets (bottom left), and desktops (right).

• In the Recent Work section, a hover effect for an overlay was added to each portfolio piece, which displays the piece’s name and tells visitors where they would be redirected to (i.e. the respective case study).
• Each of the subsections in the Process section were given colored gradients to improve scannability as well as to add a bit more color to the text-heavy section. To better differentiate “Usability” in the title from the rest of the subsection headers, I changed its color to a light purple.
• The Tools subsection of the Skills section was removed as it felt cramped on screen. This change also allowed the skill bars to be a bit larger and clearer.
• The Contact section was mostly removed and redesigned to be more of a footer. While coding for the form was completed, I had a bit of difficulty with implementing the necessary PHP elements and couldn’t test it before launching the site, therefore I opted for a more conventional route of just displaying links to my contact information. To leverage this change, however, I made my e-mail into a hyperlinked CTA, therefore clicking on it would open up the visitor’s default e-mail app.

Conclusions

This portfolio site was the first site that I successfully coded in HTML and CSS, as well as being the hardest designs that I’ve created. It was an incredible learning experience, and by figuing out how to code my initial rendered design, I was also able to better understand some of the obstacles that web developers had to face to make optimizations to the site that makes it faster and more responsive regardless of the browser and device.

This portfolio site is essentially the culmination of what I had learned during the past 6 months when I decided to transition from academic research psychology to UX design. While promoting myself in this way is still a bit foreign to me, the overall experience has helped me to better organize how I present myself to potential employers and prospective recruiters.

Patch Notes

This section will mainly be used to describe some of the changes I’ve made to the site since receiving feedback from various users across the AdobeXD, LinkedIn, and Twitter platforms.

Sept. 27, 2020

• For displays with a minimum width of 1401px, content has been organized to run horizontally rather than placed on the right vertically.
• For displays with a minimum width of 1401px, portfolio pieces in the “Recent Work” section were given some static descriptors, which includes the title of the work and a brief description.
• Text for displays with a minimum width of 953px have been drastically increased to allow for better clarity.
• The “See My Work” button has been revised as a ghost button to provide more focus on the “Let’s Connect” button. Additionally, the button now explicity refers to its destination (Behance).
• A slight grammar fix for the opening section. Colors that highlight “Empathy” and “Research” were also swapped, as the original intention was to have the cherry blossom pink color reflect imagery of a heart, while the gold color is synonmymous with the colors used to represent science within academia.
• An ongoing issue invovles Apple devices clipping an end off of the icon element in the header. This was replicated on an iPad Pro as well as brought up by someone who viewed it on an iPhone. It doesn’t seem like it’s due to the browser, as Chrome on Windows displays the image as intended while Chrome on iPad does not, therefore I’ll be looking to implement a solution soon.
• The “Hello World” portfolio image appears to be taking the longest to load in. Looking at the file size, it’s roughly 3 times bigger (10 MB) more than the other portfolio images (running about 2–3 MB each). Minimizing and optimizing the svg file for web doesn’t seem to do anything to reduce the file size any further, but I’ll be exploring other methods to create a smaller image file.
• Thanks goes to Jos van Weesel from the Adobe XD Discord, Alicia Fremling from Twitter, and Ankit Passi from LinkedIn for providing some valuable feedback to improve the effectiveness of the portfolio site.