A clothing brand with stores around the world is looking to take their successful business online.
A quick gratification online shopping experience




The Challenge

Create a digital relationship with customers

Mirror, a clothing brand, is very successful offline but had yet to invest in a digital transformation because they preferred keeping their services in person. Customers have been asking about it for years, citing its convenience and arguing that if they can’t find their size in the shop, they always order clothing online from other stores. Mirror is now wanting an ecommerce responsive website where they can sell their products online.

The Approach

Design a responsive e-commerce platform

Design a new fashion e-commerce website that enables Mirror to evolve with customers and compete with other online fashion sites. A platform that allows customers to quickly and easily shop online.

From research to implementation, our high level goals were to:
  • Create a new digital branding experience to broaden Mirror's customer reach to gain fresh market segments.
  • Optimize speed within navigation flow for ease and convenience.
  • Feature an easy to browse, search and filtering system that will allow users to shop all their different categories fluidly.

The Process

My role: Product Designer
Tools: Figma, Miro, Flowmapp, Optimalsort
Timeline: 4 weeks (Sept 2020)

This project was completed as part of Designlab’s UX Academy program.


Discovery & immersion

Understanding why and how they shopped

I wanted to understand what was behind the human need for shopping online in order to translate concepts into features that addressed customer behaviors.  I framed questions and hypothesized, executing a research plan with methodologies of secondary and primary research.
Analyzing market trends and scoping the competitor field gave us the secondary research we needed to understand the current online retailer market landscape.
I conducted a remote survey and interview with a total of twenty one questions to learn ten participant’s habits, preference, motivations and frustrations.

Why buy online?

What would influence a users decision to buy clothing? Was it the price, style, fit, quality or reviews? What would enable users to purchase online? What would keep them from checking out?
In my high-level summary and conclusions of the research, I was surprised to see that the two categories that had reigned my life as a fashion designer were of little to no value. Product style only touted 10% while fit had zero importance in the users decision to buy. What mattered to the users were quality and price, then reviews and finally style.  I needed to remove my personal biases and assumptions to continue to synthesis.


Information architecture

Defining their ideal shopping experience

Organizing research data to better understand users and their problems. I created a user persona profile to visualize their motivations and frustrations.
Then I wrote and illustrated a storyboard to summarize all my research findings in a human-centered way to better relate to our users and their behaviors .
Mary wakes up and checks her phone. She sees that she has 32 new emails, most of them being promotions.
She likes the dress but thinks maybe it's too tight on her. She takes a selfie to see if her friends agree.
She goes into her rebate app to see if there are additional coupons that could be applied. There are none, but she sees a different store is having sale with additional 25% off coupon if you subscribe to the loyalty membership.
Hmm... 75% off sale styles. She thinks to herself that she could drop by the store close to work during lunchtime.
Mary checks with a salesgirl to see if they have a larger size. The salesgirl says that everything they have is out on the floor but she can try the other location further uptown if she'd like.
Mary checks her final cart to see if the coupon applies correctly and if she's hit the minimums for free shipping before she checks out via Apple pay. She posts that she can't wait for her new dress to arrive on facebook and then gets off the train to walk home.
Mary meets up with a friend for lunch and spies the store across the street. She glances at the window and wonders if she would look cute in the dress on the mannequin.
Mary checks the time. It's getting late and she's due back in the office. She thanks the salesgirl and leaves.
Mary taps that store instead and searches to see if they have a similar dress style. They do and its offered in even more colors! Jackpot! She browses the rest of the site for the kids and texts her husband quickly to see if he needs anything.
She goes inside after her lunch date and looks for the dress in her size. She goes to try it on.
On the trainride home later that night, Mary thinks about the dress again and pulls up the photo she took of herself earlier.
storyboardstoryboardstoryboardstoryboardmysugrboardglucose buddyboardstoryboard
Persuit of a quick and convenient shopping experience
From my initial impressions of the research, I ideated on how to build a site that answered the users search for quality, price, reviews and style. I imagined that meant a prominent search and filtering system to locate their item. A reviews section and perhaps a bestsellers category along with most loved to promote trust in the product quality from other users. And the site should benefit from this approach, surely. But was this really the solution I seeked to my question of why humans needed to shop online? Had I defined the correct problem?

I felt there was more opportunity I had overlooked. I went back through my interviews with the participants carefully. “Why do you enjoy shopping online?”
“Everything is at your fingertips,”
“Convenience,” “It’s quick,” “Saving time.” This was the answer I was looking for. Ease and convenience was why people chose to shop online.  As online shopping became integral to their daily lives, shopper’s expectations had evolved and they expected the experience to shop with quick gratification and minimal effort. Figuring out how to get everything at my users fingertips would be the problem I needed to solve.
Extracting key insights to define the product, I balanced customer needs and business goals on a venn diagram. This led to creating a roadmap to prioritize features for a responsive site.
To quickly grasp how our user categorizes and labels contents, I ran an open cardsort via Optimalsort with thirty cards and ten participants.
I was surprised to see what I considered some strange responses to the open cardsort. Cards that people had difficulty with were categories they didn't know existed. They were not aware there was a kids department. They made the correct assumption there was a mens and a womens but missed the kids descriptives. So, instead they created lifestyle categories that I had not previously envisioned.
Ensuring shoppers saw all the categories the brand carried would be of utmost importance.
Cross listing product between general categories and lifestyle categories could only prove to be beneficial for the user to find what they needed. Making sure shoppers knew all the categories the brand carried would also be of utmost importance as how else would they know to shop through.
General Categories
Lifestyle Categories
I then optimized content structure from the card sort findings to build out a site map, taking first steps towards expressing hierarchy in layout.


Interaction Design

Mapping an easy and intuitive navigation

I continued to ideate on how to build a site that answered the users need for quality, price, reviews and style. From the interviews, my users shopped for what they needed and simply searched for it. I created a task flow of an ideal path a user would take to search and purchase clothing on the Mirror site.
I continued my navigation exploration within an user flow to illustrate the alternative paths, key user actions, and decision points a user might face.
How might I give my users the fast gratification they seeked?
I conceptualized a flow where the user had just enough information to make their decision to purchase, and was able to quick add to their cart directly from browsing. In this way, they didn’t have to leave their current trail of thought and just keep shopping.
Utilizing design patterns to identify interface navigation solutions that will meet user expectations, I sketched low fidelity wireframes to share the vision, design principles and content strategy.
As I laid my mind to paper, I explored what I learnt about my users needs.
How might I prioritize the search function on the homepage?
How might I visually display all the categories the brand carried?
How might I earn the shoppers trust in the product?
How might I use heuristic affordances to gain additional speed?
How might I apply industry trends to add newness to the brand?
Selecting the best sections from sketches led way to digital wireframes where concepts were ironed out, and the flow from landing to checkout was completed. This was then animated into the beginnings of  a working prototype to receive feedback and drive decision making.


User interface design

Bringing it all to life

I envisioned Mirror to be a brand where people enjoyed fashion and enjoyed life to its fullest. I honed in on brand's asthetics with a moodboard and brainstormed to identify Mirror's brand personality by exploring logo ideas, typographic and color choices with a style tile.
Happy. Vibrant. Bold.
I brainstormed to identify Mirror's brand personality by exploring logo ideas, typographic and color choices with a style tile. Yellow was the brand’s color to reflect happiness, and the hue was upped to almost a neon intensity to emulate vibrancy. A graphically strong, clean and modern logo to evoke an image of boldness. A touch of cursive for that handwritten personality to come through in accents.
I then applied all the visual design details from the style tile to the desktop user interface.
And because our user likes to shop anywhere and on all their devices, responsive wireframes were created at the same time as desktop to ensure the vision translated onto the other screens.
I then created a comprehensive UI kit, to anticipathe users eeds in the creation of controls within the interface to pixel perfection, aesthetically consistent design.

Prototype & Iteration

Design execution, validation & refinement

It was the moment of truth. I prepared to conduct a usability test utilizing a high fidelity prototype with clickable buttons, simulated page transitions and animations in hands of three potential users to validate my assumptions and hypotheses.

The goal was to determine if users could:
  • locate a dress
  • navigate the site to checkout without confusion
100% of the users found the item and checked out.
I was happy that the users validated the flow on a high level. However, I was disappointed they did not utilize the search or filter feature I had implemented. Instead they chose to just scroll through the page to look for the dress.

All three participants also had found the hovering product card with the quick add but only one utilized the function. The surprise she had that clicking the size added the product to her bag was delightful. This proved my assumption to persue the quick add function was correct, but it needed fine tuning.
I distilled the actionable insights and communicated findings in an affinity map with potential solutions. Prioritizing feedback to focus on concepts to iterate and refine prototype to test and validate it all over again.
Homepage iterations
I had created revolving homepages for the overarching worlds of womens, mens and kids for immersion since 70% shopped for people other than themselves. Prioritizing the search function on the homepage header. This header became a sticky global navigation bar with dropdown menu that follows the user as they scroll. All general and lifestyle categories visually displayed along with bestsellers and most loved sections with quick add options.
Refine navigation.
Users did not intuitively realize there was more past the first screen nor that the brand offered mens and kids division. I approached this by adding an arrow to pointing below the fold and adding Men and Kids categories to the global nav bar.
Category page iterations
I had designed Category pages with access to filter and sorting. Quick add product cards for convenience of not navigating off page. Recently viewed section for ease of not going back searching for something.
Optimize filtering system for access and browsing speed.
The original page looked clean before filters were clicked open. Then it got too long and took too much scrolling. I reminded myself- everything at fingertips. Explorations led me to moving filter bar horizontally and putting priority style filters up top.
Product card iterations
The product cards featured a Quick Add for convenience of not navigating off page with only the necessary information a User needed to confirm to add a product to their shopping cart.
Optimize quick add for convenience and navigation speed.
I added a quick add to bag icon on product card so users would expect something to happen. Once mouse hovers over anywhere on the card, the card would flip over to reveal additional info and a secondary button with the directive to select size. When users selected size, the CTA would change to Add to Bag button. Finally, an added to bag confirmation would remain on the card.
Product page iterations
On the individual product pages, I designed a layout with large clear photos to take focal point here to show the product. Video of product in action to further show the product up close. "You may also like" and "Wear it with" sections to allow personalization and quick add. Reviews and ratings are accessible 3x on page to show importance and build trust in the product.
Adjust popup review module and resize thumbnails.
Users thought there was too much scrolling involved. I rescaled to allow users to see more in one view.
Checkout process iterations
For Checkout, I prioritized a fast login and checkout utilizing user heuristics and industry design patterns. Distractions of the header and footer were removed throughout the checkout process.
Reformat customer login to increase intuitiveness.
Users had expressed the contact information page was not intuitive that it automatically brought them into a guest checkout mode. I created clear tabs to mark the different choices of sign in, create account and guest checkout instead to increase understanding.
Order confirmation page iterations
The Order confirmation page marked the end of the checkout process and brought the user back into the Mirror site world with the header and footer.
Reconfigure for ease of understanding.
In the original order confirmation page the click link to return to the homepage was small and hard to scan. Continuing the split screen also no longer made sense to the user after the purchase was completed. I centralized the order summary information and created clear CTA's to return shopping.

Wrap up

Next steps and Thank you’s

Test, iterate and repeat.

Continue to work on responsive mobile and tablet prototypes to reflect iterations from desktop website. Test, iterate and repeat all platforms until launch.

Key takeaways and learnings

It was humbling to see that my assumptions about the fashion retailer space from my years of experience in the fashion world were not aligned with what the users actually needed. Removing all bias's really helped me move forward in understanding the user and apply their preferences and pain-points to the end product. I feel that now that I understand the user more, if I could go back to my past life career, it would also prove to be extremely beneficial.

Thank you for reading!

A big thank you to all the participants for taking the journey with me on my first case study. And the utmost appreciation to my mentor, Alicja Suska, UX and UI Designer at Toggl, for holding my hand throughout the process.

Leave a note and say hi!  I'd love to hear from you!
Back Top
return to top
© 2022 LauraLau.Design