updated-modals.jpg

Virtual Showroom Onboarding

Client: Confidential — My Role: UX/UI Consultant — Project Duration: 3 weeks — Platform: responsive
Tools: Sketch, Draw.io, Adobe CC, Google Drive Apps


project overview

My client recently partnered with a famous bridal gown business; their sister site, offering bridesmaid dresses, has a unique Virtual Showroom feature that helps bridal parties share an online shopping and purchasing experience in case members of the party aren’t available to shop together in person. 

Before I was brought aboard, usability tests had focused on gauging the Showroom experience in terms of customer interest rather than ease of use. Upon further testing, I found that the feature was actually frustrating for new users navigating on their own.

For an upcoming sprint to make upgrades to the site, I proposed an onboarding process for the Showrom feature, in the form of a step-by-step tour.


research


Interviews & synthesis 

It’s not a criticism to say that everyone on the team, including myself, came in with preconceived notions about bridal parties.

I interviewed 10 women who had been in weddings in the last two years, either as a bride or bridesmaid. Traditional affinity mapping helped me recognize patterns of behavior related to their experiences.

affinitymap-all.jpg

Questions included:

  • How did you start the shopping journey/process for bridal party dresses?

  • Describe any “rules” you were working with.

  • Tell me about your favorite/least favorite shopping experience.
    Who was there? Where did you go?

  • How did you communicate with the party members?

  • Tell me about your experience shopping online for clothing in general.

Top results:

  • 10/10 described color choice is the most important factor in choosing a dress

  • 7/10 preferred that bridal dress choices to be made by the Bride and/or Maid of Honor alone, avoiding a large group in-person shopping day.

  • 10/10 said they would browse in an app but make purchases on a desktop or laptop

  • 7/10 Interviewees preferred a single line of communication with their party


Personas 

Combining my findings with previous data collected by the team, I created personas for approval by stakeholders, including the Director or Product Development and Brand Managers, to ensure we all understood our customers. Stakeholders also provided me with budget numbers to assign to the appropriate persona.


research to design


existing product usability testing

When I conducted my own tests of brides and bridesmaid interacting with the Showroom feature, I realized that users had previously only successfully navigated the showroom feature because in-person consultants could guide them through it. 

In usability testing where scenarios and tasks were assigned without background or guidance, users weren’t able to navigate the showroom smoothly or confidently. They liked the idea of the virtual showroom, but were too frustrated to make it work.

  • 6/7 did not locate Showroom feature without guidance

  • 7/7 did not understand “My Dress;” assume it is there for them to upload a bridal gown

  • 7/7  frustrated that color swatches don’t act as filter

  • 4/7 did not see commenting option or section

  • 7/7 did not find “Pay for Party” until they’ve looked at Bag, Checkout, Profile settings, then Showroom setting

Two priorities emerged:

  1. Reduce users’ cognitive load for locating and understanding the showroom feature

  2. Design a clear, frictionless introduction to the showroom itself


design


RECOMMENDATION 1:
MENU DROPDOWN

The existing drop-down menu to create or access a Showroom offers little to clarify what exactly the feature does. In testing it also confused users who did not understand that the “Personal Showroom” acts as a Favorites page.

Screen Shot 2018-10-24 at 12.57.32 PM.png

Below, a storyboard I provided to the development team describing proposed changes, including a introductory information, changing “Personal Showroom” to “Favorites,” and the option to retake the tour as needed. 


USER FLOW

I created this chart to advise the Development team of the options available to users from the improved Showroom dropdown.


RECOMMENDATION 2:
onboarding tour

At dessy.com, prior to accessing the showroom, the site automatically runs the user through multiple modals with instructions.

At Azazie.com, the showroom feature is explained in the FAQ on a single page.


Task Flow/Happy Path


MID-FI WIREFRAMES

My initial concept was designed to fit the desktop space. These wireframes show a tour which overlays a dummy showroom and explains each section as the user scrolls down.

I started to sketch out a similar experience for mobile, but our limited resources for the upcoming two-week sprint wouldn’t allow for the creation of two different onboarding experiences.

With this constraint in mind, I re-designed the showroom tour as a series of modals overlaying an empty showroom. They are specified to fully display on the smallest available screen size.


NEXT STEPS

The sprint to make upgrades to the live website is currently scheduled for December 2018. Upon approval, hi-fi wireframes will be produced applying on-brand visuals.

The team works in an agile sprint methodology which incorporates continuous feedback into the sprint process. Alternatively, I would create a quick prototype in InVision to conduct usability tests and see what iterations need to be made to the onboarding tour prior to development.