Create the perfect outfit

Style Maker is a unique online clothing store that allows customers to create an entire outfit, in their specific size, style and body shape and purchase all items at once.

Shoppers can get advice and suggestions for creating outfits and undertake advanced searches directly from the homepage.

project details

Case study: Design of online marketplace

Client: Stylemaker

Role: Strategy, research, product and visual design, branding

Deliverables: Research, competitor analysis, customer interviews, usability review, personas, scenarios, tasks, feature requirements, information architecture and user flows, prototypes and testing, logo and visual language, responsive website designs

cw_website_p17_stylemaker_images_1320x676_8b

The current challenge with online shopping

When shopping online it’s difficult to know if an item or items will fit properly, or if they will compliment other items you already have in your wardrobe.

In order to guarantee fit, look and feel, a customer might normally search for an item online first, then go to a high street store to try it on. Otherwise, they may take a chance buying it online, have an item shipped out only to find it’s unsuitable, so need to be return it. Either option creates challenges.

Analysing competitors

Had anyone else in the market place already solved these digital aged problems shoppers were experiencing?

I undertook an analysis of leading online stores to see if they’d found a solution, and to see what they were doing effectively or poorly.

Only one out of the top seven sites I reviewed allowed customers to view two or more items together. But, that was only displaying them side by side in a ‘look-book’. Only one had something promoted as allowing customers to ‘try on clothing’ – it was basic and had limited features.

None of the existing sites effectively solved the key problems highlighted above – being able to view a single item or outfit on something resembling the users own body type.

1.sm-research-competitor-analy-
1.sm-research-competitor-analy-2

Validating a hypothesis

It was important to the continuation of the project that I validate my assumptions with customers.
Were the limitations of online shopping (stated above) really a problem for people?

I surveyed 40 shoppers and interviewed a further half dozen to gain a deeper understanding of their existing habits (both online and in a physical store).

I wanted to learn about:

  1. What the benefits and drawbacks of shopping online were
  2. The number of items customers wanted to purchase at the one time
  3. The likelihood of them purchasing more items if they could view them together as an outfit
  4. How likely they would be to purchase an item if they could view it with something they already owned?
stylemaker-research-
1.sm-research-2
1.sm-research-3b

Findings

Unsurprisingly, I found that the greatest disadvantage for people shopping online is not being able to try clothes on before buying. They would indeed buy more if they could view two or more items together as an outfit. And, respondents would be more likely to buy an item if they could view it together with something they already owned.

Usability review

Having a shopper undertake a usability review of a popular site gave me quick insights into pros and cons of a typical online store. I took them through the journey of searching for and purchasing an item of clothing. Plotting a path of their emotional state clearly highlighted pain points and opportunities for the platform.

1.sm-research-usabiltytest1
1.sm-research-usabiltytest2

Identifying trends and sorting features

I ran an affinity mapping exercise with typical online shoppers to uncover themes around shopping which could translate into features for the site. Obvious themes rose to the top, along with a few others that dovetailed with my hypotheses around ‘viewing outfits on themselves or body shapes’ similar to theirs. I then followed that up with a card sorting exercise to solidify groupings and label categories.

affinitymap
1.sm-research-card-sorting

Personas, scenarios, tasks

I uncovered three key personas who represented the:

  1. Young social female shopper;
  2. Discerning older woman;
  3. Early thirties tech savvy male who prefers to shop online than trudge the high street.

Their respective scenarios and tasks advised the situations I would need to cater for, and dictate the most important user journey’s around search, results and viewing multiple items together.

1.sm-research-persona1
1.sm-research-user-scenarioas1
1.sm-research-user-tasks1

Defining and prioritising features

From research I was able to determine both user and business requirements, then prioritise most essential features, and low effort items for an MVP. That said, it was important to solve the pressing problems that would retain Stylemaker’s unique point of difference, and offer a vastly better shopping experience than could be found on existing platforms.

1.sm-research-requirements
1.sm-research-feature-priorb

Information architecture

By linking the key features in a taxonomy I found key areas of opportunity for improvements. These included:

  1. A more detailed member area for saving personal details;
  2. Style help with a social sharing aspect;
  3. More advanced search;
  4. Improved product view
1.sm-design-ia-taxonomyb
1.sm-design-ia-search

User flows and wireframing

I mapped the most important user flows that were unique from existing marketplaces. An established project aim was to display multiple garments together, suggested items with previously purchased ones onto a visualisation of the customers own body shape.

Problems I needed to consider during wireframing:

  1. How would users view multiple items?
  2. How could they easily change between one garment and another?
  3. How could they purchase multiple garments in an outfit?

I had many problems solve within the one screen.

1.sm-design-ia-userflows3
1.sm-design-ia-userflows7b

Prototyping and testing

Before creating polished visuals it was important to validate the proposed designs by testing low-fidelity prototypes. I focused on the key user flows – search, results, selecting and viewing multiple garments together as an outfits. I created a moderation guide, ran testing sessions, derived key insights and iterated on designs.

1.sm-design-ia-userflows3
1.sm-design-testing-2
1.sm-design-testing-b
1.sm-design-ia-userflows4

Visual design

Giving users the power to swipe left and right to create their perfect outfit was the inspiration for the brand and in particular, double-arrowed ‘S’ shaped brand mark. It represented the flexible, empowering nature (and functionality) of Stylemaker, a minimalist brand that brings focus to great clothing and outfits.

cw_website_p17_stylemaker_images_1320x676_2c
cw_website_p17_stylemaker_images_1320x676_5
cw_website_p17_stylemaker_images_1320x676_6
cw_website_p17_stylemaker_images_1320x676_4
Related Projects
Contact Us

We’d love to chat with you about how we can collaborate on your next project.

Not readable? Change text. captcha txt