Mirror

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.

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?

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 .

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?”

“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.

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.

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.

I continued my navigation exploration within an user flow to illustrate the alternative paths, key user actions, and decision points a user might face.

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.

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.

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.

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.

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:

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.

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.

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.

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.

Users thought there was too much scrolling involved. I rescaled to allow users to see more in one view.

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.

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.

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

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.