menu icon

Retail Store UX

w/online tailoring
retail store ux - customization sequence - mobile screens
UX Research – UX Design

Retail Store UX

w/online tailoring

UX Research
UX Design

retail store ux - customization sequence - mobile screens
Retail Store UX

Goal

Flag icon

Determine elements and user flow for customizing garments online.

Challenges

  • Garments ordered online during pandemic do not fit

  • Determine how people order clothing that fits

  • Determine customization flow based on user needs
DATE

Sep 2021 – Nov 2021

role

UX Research
UX Design

research

Competitive audit
User interviews
Moderated usability study
Personas
Journey maps

deliverables

Responsive UI
Design system

Empathize

Early user studies

user research icon
5 users, remote

I needed to understand the elements and correct order to create a clear and simple garment customization flow.

  • Users feel lost in the sequential flow
  • Users need to know how many steps are remaining.
  • Users feel overwhelmed with options.

The personas

Paul Y.

Age: 35
Education: PhD
Hometown: Vancouver
Family: boyfriend + pets
Occupation: Hospital administrator

Paul Y. is a busy hospital administrator who needs his online clothing purchases tailored because he does not have time to make a special trip to the tailor and ‘off the rack’ does not fit his muscular body. 

“”Loves clothing and design.  Enjoys sharing what he buys with his friends on Instagram.”

Mark M.

Age: 45
Education: BA Arts
Hometown: Toronto
Family: Single
Occupation: Marketing

Mark M. is a busy marketing specialist and art lover who needs his clothing, purchased online, tailored because he wants special details and a good fit, and he needs to avoid crowded stores during the pandemic due to underlying health issues. 

“Fun loving and into the arts, Mark can’t wait for the pandemic to end so he can spend more time with friends.”

Competitive audit

audit icon

3 direct, 2 indirect 

I see the following opportunities:

  • Do not overwhelm users with options
  • Clear sequence and sense of place
  • User can exit garment customization at any time
  • Use standardized design components/patterns

Ideate

I created a site map, journey maps, paper and low-fi wireframes and used these to think about how our personas might interact with the website.

Sitemap

sitemap icon
Hierarchical + Sequential

Journey map

journey map icon
Tailoring sequence added to order
journey map - retail store

Digital wireframes

digital wireframe icon
Mobile + desktop

Sitemap

sitemap icon
Hierarchical + Sequential

Journey map

journey map icon
Tailoring sequence added to order
journey map - retail store

Digital
wireframes

digital wireframe icon
Mobile + desktop

Prototype

noun-prototype

I created a prototype to demonstrate the customization user flow.

  • I chose standardized components and clear CTAs
  • Design and layout that offers customization without overwhelming the user
  • Clear navigation within the customization sequence

Confirm the initial challenges were met

3/5 users in the moderated usability study had difficulty understanding the customization flow.

Ensure clear sequential steps

Use images and colours to reduce cognitive load

Result: Users understand where they are in the customization sequence and what the options are.

4 out of 5 users wanted to know how many steps were left in the customization user flow.

Help the user understand where they are in the customization sequence and allow them to exit at any time.

Result: Users have visual indications of what is already done and how to exit the customization sequence.

Style guide

noun-style-guide-2999084

Final design

Further details: Case study .pdf

Take aways

  • There are pro users (familiar with ordering from a tailor) and regular users  …. customization needs to work for both user groups
  • Offer users the ability to customize only the details they want, have default options
  • Limit the number of options initially presented to reduce cognitive overload
  • Include illustrations to aid user comprehension
  • Allow user to end sequential customization flow at any time

 

Next case study >