Taking the guesswork out of that online swimsuit purchase.
A UX usability study
Empathize
Summer is fast approaching, and you’re faced with the daunting reality you may need a new swimsuit. To many of us, the thought of showing some skin at the beach or pool is more uncomfortable than a sunburn.
For this five week study at the School of Visual concepts, I began with user interviews, to establish if I was the only one who found it hard to buy a swimsuit that fit well online.
Here were my qualitative questions to test if the hypothesis had meat on its bones.
How do you feel about having to buy a new bathing suit?
Have you ever shopped for a bathing suit online?
If so, why did you choose to shop online?
What sites have you shopped before?
How did you find the experience?
Were there frustrations?
How would you define success?
I organized my interview notes and started to group the data and identify the takeaways.
Pain points galore started bubbling to the surface.
“It’s the worst.”
“I’d rather go to the dentist.”
“Why is it so tough to find one that actually fits well?”
Key Insights were that users shop online to save time and avoid the potential embarrassment of browsing and trying-on in public.
Frustrations
Difficult to understand sizing.
Fit was other than expected.
Default to their “normal size” was often too small or large.
Returns were likely and bothersome.
Success
Finding a suit they liked the look of.
Fit their body type.
Wanted to keep.
Felt excited to hit the beach or pool in.
Define the Problem
Limited sizing options rarely address the actual fit issues many people experience when choosing swimwear, especially online.
I focused on the flow of purchasing a women’s bathing suit from an online retailer. I catalogued the filters used by top sites mentioned during my initial user interviews.
The table above illustrates how non-standard filters can be across the swimwear shopping experience. For instance, “Swim solutions” actually filters by what body part you would like to hide/diminish. “Active” spoke to suits suited for racing. “Petite” was only available on one website, while “Tall” was available on two. In fact, the only two filters that were standard at all were “Shop by Style” and “Regular” sized.
My idea after that was to create similar filtering on a paper prototype to better understand the fit breakdown and how users might engage with filtering options for better success. I based my system on the top three filters found in my analysis. Regular Sized, Style, and Bra Cup.
Initial Usability idea- Paper Prototype
Would shoppers engage with Bra sized or Shop by Style filter?
Test filter behaviors
First user task
Can you show me how you would shop for a swimsuit online?
I ran the test in person with five users. The results were interesting. People loved the shop by style filter. All five participants used it. Not one engaged with the bra sized filter. Perhaps my user sample was too small, there was embarrassment factor testing in person, or the filter itself wasn’t tested by the online companies that were employing it to validate its priority level as part of their filtering system.
Secondary usability task
To witness what further filters my users would employ once they hit the product page to discover fit options.
Second user task
How would you determine if this suit might fit you well?
3 of 5 clicked on Fit Guide.
4 of 5 clicked on reviews.
1 clicked on bra/cup size.
3 clicked on “You may also like” carousel.
Shoppers felt the filters helped, but were not wowed.
The carousel was included as a design element, but interesting to witness users choosing to interact with it during a task related to establishing fit. This was an unexpected validation on a concept I was not meaning to test yet, but when asked why it was chosen, users liked the novelty of a curated experience. I now had a bonus finding to move forward with for the next round of design. Carousels should be included in the “Shop by item” page design.
Prototype Iteration
Moving to a digital prototype, I started thinking about body type illustrations, and how that may be helpful in the swimsuit purchasing arena. This was sparked by how interested users were in the reviews section. When asked why, I learned users find it helpful when buyers describe their body type, weight, height and how this particular item fit them. It allows the new buyer to imagine wearing the item successfully themselves. This seemed a powerful insight I could build upon.
I decided to create a new user needs statement…
How might the experience of a filtered “shop by body type” icon guide the user to success in finding a perfect suit?
This was my original “shop by body type” icon located on the swim category page.
I ran this prototype in Invision on my phone with four people. Three out of four activated the body type icon filter first upon landing on the product page.
Exit interviews shared they found it a fun and creative way to search for a suit that would fit them well.
“Loved the graphic of diff women’s shapes, seemed like it might take some of the guesswork out of shopping for a suit.” -Linette
Pain points were 4 out of 4 felt the graphic was crowded and hard to “click” on their shape choice.
They also felt the left hand filters felt small and also crowded. Finally, one participant said the term “stumpy” for one of the body types was funny, but a diff user might find it offensive and abandon this site.
This was a great intro to me about the issues of accessibility in your design both with language and touch points on a small surface like a phone.
Shop by Body Type version two.
Users were very interested in interacting with the graphic, all five jumped on it first.
Pain points
“I wasn’t sure which body type I would be.”
“Didn’t really see myself in the graphic.”
“Are there other body type options somewhere else”?
Next Iteration
I waffled between adding a link to further explain what being an:
Apple
Pear
Triangle
Ruler
Hourglass
but had concerns over slowing down user flow by linking to another page.
I instead moved forward with a new graphic. But which graphic?
To quickly test it I went Guerrilla…
A captive audience of potential users would be at my yoga class. I created this page and asked the good ladies there which graphic resonated as the best illustration for a fit guide to purchasing a bathing suit.
Six takers. Four voted for graphic one. Done.
Validate
Final Task. Users were asked to search for a suit they liked, determine if it would be a good fit, and then purchase it.
Feedback showed the new graphic was a success. 5 or 6 users engaged with it, found it very helpful, and had no pain points understanding their body type.
They delighted in seeing a curated selections of suits appear upon activating the body type filter.
When moving to the product page they fully explored user reviews, and added fit guide, and the “you may also like” carousel. Exit interview insights were that the different paths to finding fit information were both fun and helpful, and that they felt optimistic about their purchasing experience.
Quote from a happy shopper-
“This was such a creative and complete way to get to shop for something I’m not usually excited about. Wish this site were real.” -MJ
Learn
As my first full scope usability test, it was really interesting how easy it was to have personal bias sneak into your initial design.
If I were to expand this project, I would include:
Designing a men’s swimsuit flow. Several of my original interviews were with men, and they expressed their own pain points in the swimwear process that I feel have not yet been addressed by many companies.
I would address accessibility in my design, especially since touch targets on a phone can make final design challenging with filters.
Learn more about how best to write red lines for the dev team to make sure the filters were being coded correctly for screen readers and the extra filtering elements were accessible for all.