Klaudia Simon - Senior Product Designer

Product overview

UXfol.io is a web-based platform helping designers build their case study-focused portfolios. I contributed to early research and helped define the product’s direction, later taking over its design a year after its initial release.

Problem

Users felt their portfolio pages were hindering their ability to stand out and land a new job.

Solution

We introduced customisable portfolio templates, allowing personalisation to help them showcase their individuality.

My contribution

Researched user needs through interviews, usability tests, and community feedback
Designed the portfolio template MVP and its editor functions end-to-end
Shipped further features: prototype embeds, UI gallery, password protection and multiple portfolios

Year

2019

Platforms

Web

Team

1 designer, 2 devs

Role

Design, Research

Tools

Sketch, Axure

The problem

Users’ perception didn’t match our product

We imagined ourselves as a case study-centric Behance or Dribbble (i.e. as a platform having profiles and case studies), however, it became clear that users saw us differently. Our users felt the lack of portfolio customisability hurt their interview chances; we were focused on simplifying case study writing, not anything else surrounding it—a huge oversight on our part.

Portfolios on the platform have two main parts:

We called the first one profile but our users called it homepage. And the difference in perception was the core problem: While you wouldn’t want to customise a profile, you definitely want to make your homepage unique.

It was clear we needed to change how we treat the profile page. However, this shift was about to introduce unanticipated development efforts, turning our roadmap upside-down, so stakeholder buy-in was a challenge.

The process

Building a case for stakeholder buy-in

UXfol.io was a tiny team and besides design, I was responsible for user research, took part in customer support and monitored our community. I kept seeing this user problem so I had to make sure the team is as exposed to this user pain as I was.

I highlighted this user need whenever it came up: interviews, tests, community posts etc.
I started a spreadsheet where I had the team collect all feature requests and quantified the results

I want to add a contact form to my home page Not enough font variations Can’t change theme colors I want to change fonts on my home page I want to add my own unique colors

I want to reorder my portfolio page Need more font choices I can’t change my home page layout I’m restricted to default colors

I don’t want to display a profile image How do I change the colour of my headings I need more color options to make my portfolio unique I want to change my home page layout

User feedback from various channels

In just a couple of weeks it was evident: customisation swept the board. The latter eliminated the recency bias, which also helped me make sure this project was worth fighting for.

Additionally, the product already having an editor for the case studies helped in the campaign: we don't have to build something from scratch, we just needed to adapt existing functionality.

Launching the portfolio template MVP

Continuous exposure to the subject and the numbers did the trick: the portfolio template project was greenlit. I had a highly flexible homepage editor in mind, because I knew that no matter how many different templates we create, it won't solve the core issue of wanting to stand out fully. However, we needed to ship an MVP to validate the portfolio template idea and fuel later iterations:

With these restrictions I designed 2 new responsive portfolio templates. I kept the design minimal to let the work of our designers' work shine but injected a bit more personality than our current 'profile page' had.

Designing for scale

While the launched MVP was very rigid, I designed them knowing they could be editable in the future. I expanded the design system with specific content blocks and UI elements and set generic rules font styles and colour palettes for each template. With this approach developers could prepare for future editable capabilities and it also helped eliminate guesswork when designing new templates.

The release

Instant positive feedback from users

The majority of our active users switched to one of the new templates shortly after release and most of our new users started with one of the new ones. The user reception also helped propel this feature further: we kept on adding new templates and adding features to each, slowly reaching my initial idea of the homepage editor.

Portfolio Template - Customised Portfolio

Iterating on the MVP

In the second template release we added 4 more, and expanding the number of templates helped users find a design they resonate with. We also added the template selection to the onboarding process, which helped users connect to their portfolio better even before putting any real work into it.

Reflection

Okay, let’s retro…

UXfol.io was my very first non-client product and I have come a long way since. Research mostly meant interviews and usability tests, since we lacked structured product metrics and usage analytics.

What I’d do differently, this time around:

before the project

Survey active users to:

Quantify the need quicker, and more reliably
Uncover further needs to build a feature roadmap

After Launch

Measure the impact by:

% of users switching to a new template
% of new users starting with a new template
Number of portfolio shares
Change in NPS score
Launching a satisfaction survey

Personalisation options made possible later, reaching the initial vision for the portfolio templates

Something extra ✨

Other projects during my time at UXfol.io

We always kept tabs on features users kept requesting, and there were projects I initiated by monitoring published portfolios on the platform to identify features to build.

We added prototype embed capabilities, because we knew none of our competitors offered this feature, and it made portfolios more interactive.
We released a modular UI gallery feature, to cut the time spent preparing visuals for each case study.
Users raised concerns about privacy and NDA restrictions, so implementing password protection was a no-brainer.
Lastly, UXfol.io was a huge proponent of making tailored applications so we gave users the ability to create multiple portfolios to easily select which case studies to showcase for each application.

Each of these features is still live and loved by the users on the platform.

Homepage editor showing template customisation options

Ability to customise the layout of projects and their appearance