THE
DESIGNER'S
PORTFOLIO

The UX of a HUWX Portfolio!

Project brief

Create a Portfolio That Clearly Displays My Skills, Process and Personality:

Possibly the most important product I'll build this year, my aim was to:

  • build a digital UX portfolio
  • enable users to quickly find information about my design process
  • show examples of my product design work
  • enable hirers to contact me easily and invite me for an interview!

Solution:

I created a responsive, mobile-first website using bootstrap. Users have found it very easy to navigate the site and complete scenario-based tasks in the latest iteration of the portfolio.

My Role:

I was solely responsible for all stages of the development process from initial secondary research to the creation of the final website and visuals.

Challenges overcome:

As a personal project undertaken during a global pandemic, with zero budget, the main challenge I faced was to research the user requirements without having the means to visit Hiring mangers and UX professionals for interviews/contextual enquiries.

Process:

I followed a design thinking process in designing the portfolio, with the clear distinct stages 'Empathise', 'Define', 'Ideate', 'Prototype' and 'Test'. This was an iterative process, but for clarity I've displayed the content under the process headings in this case study.

Empathise:

Research:

The function of the portfolio is straightforward, focusing on a few tasks, so I felt that considering each manager's content as an 'interview' should show any behaviour patterns or common requirements.

I decided on a baseline of 5 'interviews', if I hadn't seen a clear pattern then I'd undertake further research or may have needed to rethink my strategy… fortunately I found that the requirements and responses were very similar among the 5 'interviewees'.

A little secondary research lead to a vast amount of content that answered any questions I had about the user requirements and revealed that:

  • UX hiring managers want case studies to tell a story - design is about storytelling
  • a portfolio should contain 2-3 case studies of my best and varied work
  • my portfolio should display my personality and be informally, but professionally, written to stand out
  • UX hiring managers feel that how the portfolio is constructed will reflect a lot about me as a designer - no room for sloppiness!

TL;DR:

Hiring managers are very vocal and offer a wealth of information when building your portfolio, especially if face-to-face interviews aren't feasible!

Define:

Problem statement:

I created a primary persona and mapped their user story and journey in order to synthesise the problem statement from the research:

As a Hiring manager, Reyna wants to be able to view applicants' portfolios on the go and quickly determine the most suitable candidates to invite for an interview.

Personas:

Here are the details of the primary persona used to formulate the problem statement. Thankfully the secondary research provided me with enough information and insight to build the identity of the primary persona for my portfolio.

Meet Reyna Chung:

Personal details:

Name: Reyna Chung

Age: 32

Occupation: Hiring manager

Marital status: Single

Location: Bristol

Characteristics:

Extrovert tendencies
Technical ability
Passion for work

"Having a portfolio I can actually see was made by a person has opinions and passions and a sense of humour, that stuff makes me remember you"

Context and obstacles faced:

Reyna needs to find time in her busy schedule to assess the portfolios of potential candidates.

Obstacles Reyna faces:

  • a lot of varied demands on her time
  • difficult to take time to sit at her desk and look through portfolios, social media and CVs.

Goals and motivations:

  • to shortlist the candidates for a new UX designer hire
  • to find good designers who are passionate about their work
  • to find personalities that would be a good culture fit.

How will she interact with the portfolio?

Questions she will ask:

  • What's different about this portfolio?
  • Does the designer show their process?
  • What skills are they showing?
  • Do they tell the story of the design process?
  • Why is this case study important?

Reyna's story:

"I do have a designated desk in the office - but I rarely get time to sit at it! I seem to be constantly in meetings... I find I often have to squeeze in a few minutes here and there on my phone to view and earmark the portfolios of potential new hires.

As a company we're passionate about design and the product journey, so I find I'll often discuss some of the best portfolios with my colleagues (we're all about collaboration) and show them the stand-out examples over lunch or a quickly-grabbed coffee.

I get a real buzz when I come across a portfolio that shows that the designer just 'gets it' and produces really good work ... especially if it doesn't read like a user's manual! I start to see how they could make a valuable contribution to our design teams."

User Story and Journey Map:

If I want to make it to Reyna's shortlist then I need to ensure that she's engaged with my portfolio.

I mapped Reyna's user story and user journey to highlight her needs and help clarify the problem statement for the project.

Timescale: 1 working day.

Any other actors who might alter experience: Co-workers, friends, wider circle.

7:00: wake up

User goals: to prepare themselves for the day ahead.

Emotional state:

"busy day today! I need to finalise my hiring shortlist as well before this afternoon's meeting... got a hectic schedule this morning though..."

Touchpoints:

8:00: catch train

User goals: to use the time on the train journey to best effect.

Emotional state:

"at least I'll get a chance to flip through some portfolios quickly on the train."

Touchpoints:

10:00: coffee break

User goals: to seek the opinion of a respected colleague.

Emotional state:

"There's Ben, I always respect his opinion on things"

Touchpoints:

12:30: lunch with workmates

User goals: to refuel and informally discuss potential candidate portfolios.

Emotional state:

"I'm really hungry! Lunch will be a good chance to catch up with the guys and see how things are going, I can sound them out about the candidates as well, after all, they'll be working with them even closer than I will!"

Touchpoints:

13:30: at their desk

User goals: to view short-listed portfolios, CVs and social media in greater depth.

Emotional state:

"OK, we all seem to be on the same page about the best portfolios... let's find out some more about their work background and what makes them tick"

Touchpoints:

16:00: meeting with manager

User goals: to formalise the shortlist of candidates with their line manager.

Emotional state:

"I think these are the best candidates... I'm sure they'll agree"

Touchpoints:

Ideate

Examples of some of the initial wireframe sketches created before the first prototype and the rationale behind the designs.

wireframe 1

Wireframe 1

I liked the idea of a card-based approach, but felt this very minimal layout was too sparse for my portfolio.

I also considered a very trendy dark mode as default, but felt that this works best when you want the images to take centre stage and better suited to a photographer's or visual artists' portfolio — mine is content–driven.

wireframe 2

Wireframe 2

I considered an alternative design with a section for each project taking up the width of the screen, but realised that users would need to scroll through to view each project. A card-based layout would provide users with an instant overview of my work.

In this design the same bottom tab bar is used for navigation on mobile and more conventional navigation on desktop with prominent 'call-to-action' buttons.

wireframe 5

Wireframe 3

I considered leaving a column on the left for titles and headers at larger screen sizes, but felt that smaller sections may look a little cluttered.

I also felt that I'd lose the visual hierarchy and the design would be less clear in the sections that expand to make the most of the whole screen (user journey maps etc.).

wireframe 6

Wireframe 4

This is closer to the final design of prototype 1. Content is generally contained in 2 centred columns on larger devices, but allows for hero images/detailed content to make the most of screen space on desktop without losing the visual hierarchy.

Prototype

Prototype 1

Includes a hybrid mixture of real and 'dummy' content. Works like an interactive wireframe and uses the bottom tab bar UI pattern on smaller screens.

Prototype 1 about me page
Prototype 1 projects page
Prototype 1 cv page

Prototype 2

Only uses genuine content. More of a high-fidelity mock up, bottom tab bar is discarded for a conventional hamburger menu on mobile screens.

Prototype 2 home page
Prototype 2 hamburger dropdown menu
Prototype 2 cv page

Test

Prototype 1 Test Results

62.5%

62.5% success rate – clearly room for improvement!

The main pain points appeared to be:

  • Failure to discover the menu options in the bottom bar on mobile.
  • Failure to find/confusion caused by the mixture of filler text (lorum ipsum) and genuine content.

Prototype 2 Test Results

90%

90% success rate – That's more like it!

The main reasons for improvement:

  • Replaced 'app-like' bottom tab bar with hamburger that was more in keeping with the users mental model and expectations.
  • Replaced dummy content with genuine copy, which reduced users' confusion.
  • Added colour and branding, which emphasised the calls to action and navigation.

Takeaway

Lessons learnt:

  • Secondary research can provide a wealth of information about the user in some circumstances, but of course I had to rely on them 'practicing what they preach'. There is no substitute for contextual enquiry in the actual environment where the product is used to gain any real insight, but given the circumstances I could find more information about the hiring managers' portfolio requirements than I originally feared.
  • 'Mixed' fidelity prototypes only confuse the user, in future I'll create a low fidelity prototype initially to test that the flow makes sense to the user, before later adopting a high fidelity prototype of the almost complete product design to carry out scenario-based user testing.
  • Based on the research findings it was important to keep the portfolio content-driven. When making design decisions I needed remember that I am not the target user – hiring managers won't thank me for being too original in my portfolio design if it makes it more difficult to find the relevant information.
  • The bottom tab bar mobile pattern is good to adopt for ease of use on larger mobile devices, but only when it aligns with users' expectations. Need to be mindful in future that some users may not expect the navigation of a webpage to be at the bottom.