portrait52 case study

Roles: UX Design, UI Design, Branding, Copywriting, Display Font Design

Background

The portrait52 brand started as a one year long drawing project. For a period of 52 weeks, I drew one portrait a week and wrote a blog article about the portrayed persons. These were inspiring people from different areas of public life: actors, artists, politicians, writers, thinkers. With a couple of friends, we decided to build a fashion brand that would incorporate the core values these people represented: sustainability, social engagement, fairness, inclusion and diversity. You can check out the project on portrait52.com. Please consider the fact that it is no longer an active project.

Task

The focus of the website was on the blog until the launch of the products through a crowdfunding. We planned to build an online store after the crowdfunding and switch the focus from the blog to the products, which were t-shirts and face masks.

Challenge

There were a lot products to be integrated: 51 portrait t-shirts, 4 statement t-shirts and 4 mask designs. This product quantity was overwhelming and made the buying decision difficult. My goal was to lead the customer to the desired product in just a few steps, so they could find it and ordered it much faster that during the crowdfunding.

own. share. inspire

portrait52 tagline. Works like a charm for good UX as well.

Design Process

Empathize

During the crowdfunding we got feedback that it was difficult to order because there were too many product options and the platform had no ways of filtering.

Customer pain points

Customers had difficulties finding out which portraits they could order.

The ordering process was too complex, because they had to input a lot of data, which also took too much time.

There were way too many products from the begin with. Talking about poor UX design choices. We should have adapted to the platform’s restricted options and offered just a handful of of products. Customers were overwhelmed, felt frustrated and left the project.

Methods

I led customer interviews and had lightning talks with the team.

Define

In this stage I understood we had to offer a simplified configuration process that makes ordering easy and would reduce the the amount of order cancellations.

Methods

Golden Path, User Journey Map

Ideate

We compared a few online stores that offered sustainable clothing to see how they categorized their products. I decided to introduce a filtering system that should considerably reduce the number of different configuration possibilities. We gathered ideas for different filtering categories, talked about their advantages and disadvantages and voted for the final categories.

Methods

Comparable Problem, Solution Sketches, Dot Vote

Prototype - Test - Iterate

I did a simplified user flow and a LoFi prototype in Figma, which I tested with the team and with some of our users who had supported us during the crowdfunding. After a few iterations and some tweaking, I also did a few mobile only screens of the HiFi prototype, although I knew that we wouldn’t develop the online store anymore due to lack of financial resources. But I figured it would make a good case study one day.

Screenshot of the homepage of the portrait52 shop's homepage

Screenshot of the portrait52 shop's homepage under the fold

Screenshot of the statement t-shirts landing page from the portrait52 shop

Screenshot of a product page from the portrait52 shop

A selection of further UX considerations

For the website

Adding links to blog articles of portraits from similar categories in the order confirmation emails.

For the order related emails

Adding 2 links to the products in the blog: 1. to the portrait t-shirt and 2. to the corresponding statement t-shirt.

For the store

Recommending the statement t-shirt and the mask that would correspond to the t-shirt added in the stopping cart.

Some Insights

1. Don't sacrifice simplicity for story telling

We had a beautiful story to tell. But it was too long and too complex. It would have worked well as a blog only. But the moment we decided to build a sellable product, the story didn't work anymore. We couldn't get those people hooked who didn't want to spend the time learning about the whole story.

2. Keep the buying process as smooth and short as possible

When people decided they actually wanted to buy something, the crowdfunding platform didn't provide the easy buying process a good shopping experience should provide. We lost many backers that way.

3) Keep your product range very digestible

We had 55 t-shirt designs and 4 mask designs in total. This was overwhelming for the user. A good filtering system would have helped to offer only small groups of products, making it easy to browse. It would have simplified the storytelling as well.