.svg)
The Scope
A designer needs credibility.
As a designer, you build credibility through demonstrated application. True to the definition, as a novice, I didn’t have many demonstrated applications. So, like so many in my generation, I was stuck in the classic need-experience-to-get-experience catch twenty-two.
Nevertheless, I had a solution.
What better way to demonstrate my user-centered design process than to write a case study about designing my portfolio site for you (yes, you!)?
Now the real problem: how do you capture the attention of recruiters and the public, as well as, convince people you’re not full of it?!
My hypothesis: this can be achieved by curating an enjoyable experience for the user while also demonstrating my capabilities as a UX designer, thinker, and person.
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
show me the data
The Research
overview
When designing a digital experience, I look to define the user and their pain points. When designing my portfolio, the logic was the same.
My initial research focused on understanding and empathizing with the individuals who slosh through hundreds of portfolios a week. I was searching for their pain points and where the products (portfolio sites) were falling short.
To do this, I referenced interviews of successful designers and used quotes from articles as my data—consider it secondhand interviewing. I documented suggestions and ridicule, and I began to form a repository of things recruiters praised and criticized.
The full user research report can be referenced here.
Empathy Maps
To organize the data collected, I made empathy maps for each interview I read. This allowed me to highlight reoccurring complaints and preferences. See an example below.
Portfolio Empathy Maps
Pain points
Reoccurring complaints were then broken into three different categories, and pain points were categorized into each.
1
The portfolio lacks focus on the design process.
- Recruiters are not able to understand the capabilities of young designers if the design process is not explained.
- Recruiters are unable to identify how the designer thinks.
- Recruiters are unable to find out why designers choose certain design methods.
- Recruiters are not able to understand the problem behind the design solution.
- Recruiters are unable to learn as much about the process as the final result.
- Recruiters are unable to see before and after images of the redesign.
- Recruiters are unable to identify the impact the designer had on the project.
2
The user has limited time and attention.
- Recruiters have limited time and capabilities when reviewing portfolios and cannot spend long periods of time reading portfolios.
- Portfolios are not designed to allow recruiters to skim easily.
- Recruiters find unnecessary content (animations, images, text, etc.) distracting and cumbersome.
3
The user experiences a poor experience.
- Recruiters are not actively engaged with storytelling.
- Recruiters are frustrated with over-saturated portfolios.
- Recruiters do not find strong visuals and layouts in portfolio sites.
- Recruiters are not convinced that a designer understands basic design principles.
- Recruiters are frustrated when empathy and personal tone are not present in describing design problems.
personas
With these pain points, I developed empathy maps, personas, user stories, and user journeys. Some highlights are shown below.
Creating personas allowed me to model, summarize, and communicate my initial research data, and it ultimately allowed me to have a consumable way to reflect on it. With this, each persona represented different pain points and a different end user could be easily referenced.
This helped to ensure I was designing with the user in mind.
Example of Persona
user journeys
User journeys were drafted to understand the user’s flow and grasp where improvements could be made.
Example of User Journey
user Stories
User journeys were drafted to understand the user’s flow and grasp where improvements could be made.
As a recruiter reading your portfolio, I want to be told a story about your design processes so that I understand how you think (and am entertained).
As a recruiter using your portfolio, I want to feel like you created a user-centered product so that I can understand that you practice what you preach.
As a recruiter reading your portfolio, I want to read about the challenges you faced, so that I can understand how you overcame them.
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Ideation
Competitive Audit
I didn’t want to reinvent the wheel with my portfolio, just combine all the good parts of other people's.
So, I performed a sort of competitive audit on other portfolio sites. This audit primarily consisted of noting features and practices I liked or disliked. I referenced a total of ten different sites.
In combination with the initial user research I had done, I combined my data and produced a list of features I wanted to include in my site. You can view the full list on Medium.
The list is too extensive to fully share, but here are some of the key takeaways.
Leave an impression
Utilize the initial screen with a biography that leaves an impression—embed personality and information about yourself that leaves the reader curious.
Orientate the user
Utilize a secondary navigation bar for each project to help orient the user and find sections they are interested in.
Display real-world outcomes
Demonstrate real results and how your product influenced the original problem statement.
Emphasize how you think
Demonstrate the process, not just the end result.
Ensure the user can skim
Utilize features that assist your users in skimming.
site map
When designing the information architecture of my own portfolio site, I wanted to make navigating the site as seamless as possible. To do this, I ensured that the navigation of my site aligned with the user’s mental model of how a portfolio site should be laid out. This involved following standard practices for portfolios and resulted in a simple site map.
Portfolio Site Map
To allow users to navigate with ease around the site, I utilized a sticky main navigation bar to ensure that it was always accessible.
Additionally, I added a secondary navigation system to each project page. The secondary navigation bar allows users to navigate to sections of their choice without scrolling.
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating
The Design Process
ideation cycle
My design process was broken into two cycles: the Ideation Cycle and the Testing Cycling. The Ideation Cycle went back and forth between sketching and creating digital wireframes in Figma.
Each instrument had its own benefits and drawbacks. Sketching allowed me to quickly illustrate my thoughts and ideas, whereas creating digital wireframes resulted in cleaner results.
The two worked together to lay the groundwork for the site.
sketch
Sketching consisted of building the information architecture, developing the hierarchy, and considering the layout. This manifested itself in sketches, scribbles, and wireframes.
Initial Sketches and Paper Wireframes
digital wireframes
Digital wireframes involved building the site layout inside of Figma. This focused on executing layout and hierarchy.
Final Digital Wireframe
testing cycle
The Testing Cycle focused on iterating through user-generated feedback. I gathered user-generated feedback by conducting two rounds of usability studies. By testing the prototype, I gathered insights through the user’s interactions. These insights fueled actions that were used to improve the design.
testing
A usability study plan was written for each usability study done. Within this plan, I outlined the research questions, key performance indicators (KPIs), methodologies, and information pertinent to each participant.
Excerpt from Usability Study
Once the plan was established, I outlined a script to be delivered during the usability study. The script included an introduction, an explanation of the usability study, a scenario, and various prompts. This was created to ensure all the questions given to participants were consistent.
Each session was recorded through a voice memo application. After each usability study, I transcribed the recordings into actions to be done for the next iteration. I organized these actions into a table that categorized each by the specific page they affected, the urgency, and the type of correction. As I went through the iterations, these were either marked as "Completed" or "Left as is".
Excerpt from Observations
iterating
At the end of the testing cycle, I had an improved prototype. This would then lead to another testing cycle to further improve the site. After three usability studies, the pain points were few and far between.
Mock-Ups after First Usability Study
Mock-Ups after Second Usability Study
design solutions
Designing a portfolio site is intimidating. It involves juggling your identity and who you are as a designer, while making a consumable product that users enjoy interacting with. With this, there were various hurdles to address.
the design process
One of the major complaints made by recruiters in the initial research was that young designers don’t showcase their design process as much as the final result. As I began to create my portfolio, it became obvious that I needed to showcase how I thought. However, this becomes tricky—recruiters want to see your design process, but they also don’t have a lot of time.
How do you balance these user pain points and create something that meets both?
The solution I came up with was to showcase my design process in steps that were easily accessible. For this very reason, I implemented a secondary navigation system. This allowed certain recruiters to navigate to the segment of their choosing quickly and easily.
Additionally, there were two key principles that were incorporated to make the report more user-friendly: storytelling and visual interest.
storytelling
I am going to be honest. I have always been extremely self-conscious about my writing. I hated writing for a long time.
And then—I started my career in UX design, I started a blog, and I learned that I actually really liked writing. The problem had been on my approach to writing, UX design taught me that the approach should always be to tell a story.
I don't care what you're reading; people want to be entertained when they read.
This was repeated over and over again in the initial research. Users wanted to be enthralled and wooed!
They didn’t want to read some research paper that regurgitates UX jargon back at them. They wanted to read something with personality and depth.
So, I approached my portfolio with the intent of making my case studies interesting. I attempted to implement a story arc into each. Each case study open with a scope section which addresses the problem. The plot thickens with the research, ideation, and design sections that represent rising action. The climax is reached in the final product section where the solution is reached. And finally, the conclusion section ends with a cathartic conversation that looks back on the journey and ends in resolution.
visual interest
A lot of information needs to be fit into a portfolio site. However, users have limited time and attention, so inherently, all your users will skim the site. So, how do you create a portfolio that explains your design process and showcases how you think when your user is just skimming the site?
Utilizing various visual elements, such as this emphasized text, helps to create a distinct hierarchy that the user can easily identify as more important.
I implemented a variety of font styles, visual elements, and color differentiators to ease the user through the information and draw attention to specific elements. This was done utilizing visual contrast between objects and the principle of Gestalt principles.
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
Conclusions
When I decided to switch my career from mechanical engineering to UX design, I knew I had a long journey ahead of me. This process was transformative and grew my design skills tremendously.
next steps
Now that the site is published and live, I will continue to upkeep and improve it. My goal with this site has always been to represent me, so as I grow as a designer, my intention is to watch the site grow with me.
With that, the site is not static, so if you, the user, have complaints or even just comments, reach out to me. All feedback and comments are appreciated.
reflections
As a novice designer, I am quick to recognize my faults. However, in this instance, some praise is well-deserved. The self-motivation and dedication this project took were tremendous. When there’s no deadline and you’re your own boss, it's easy to lose track of what you’re doing and fall off schedule. However, my ability to stay committed to my goals is truly just a testament to how much I enjoy designing and learning about design.
With all the good that I did, there is some things that could have been improved.
1
User Testing
User testing is somewhat only valuable when your end user is testing the site. I don’t know any recruiters, so it was tricky, and I had to get creative. I utilized my close friends and experienced UX designers to help shape the site. A huge thank you to the individuals who read through it and provided feedback.
2
Don’t dwell on the details
I spent way too long looking at colors on this site. I was obsessed with finding a color that embodied me. Finally, after weeks of toggling through colors and fonts, in a fit of despair, I decided to forget about color and just start sketching the site. Within 10 minutes, I was inspired, and the color choice seemed obvious. I had been focusing too much on visual details when I needed to instead be focusing on my end goals.
