TEAM: Self-directed with feedback from mentor and peers

ROLE: Lead UX+UI Designer (Research, Information Architecture, Visual Design, Interaction Design)

TOOLS: Sketch, Illustrator, Photoshop, InVision

CHALLENGE

Established in 1994, Mirror is a successful brick and mortar clothing store with over 400 locations across 32 countries that sells mid-quality clothing for everyone in any occasion. Types of clothing include casual, business, sport, party, formal, etc. clothing for men, women, and children at competitively affordable prices. Competitors with similar products and demographics include Old Navy and H&M. Mirror is looking to revivify their branding with a fresh new look and new logo design, as well as build a responsive e-commerce website where they can sell their products online.

PROCESS

MARKET RESEARCH

I began my process conducting secondary research on the e-commerce clothing market and (since Mirror has 400 physical locations, I needed to consider this omni-channel advantage) the traditional brick-and-mortar clothing store market to identify key shopping metrics and statistics. This early research gave me a foundational perspective regarding the industry and some of the possible needs and motivations of their shoppers. Some of my findings included the following:

COMPETITIVE ANALYSIS

After gathering some key statistics and metrics I focused my attention on some of Mirror’s direct and indirect competitors and analyzed some of their strengths and weaknesses. These findings would help me to better understand customer expectations and determine some existing patterns to utilize or to possibly avoid in our own design and thereby capitalize on some market gaps we could take advantage of.

CONTEXTUAL INQUIRY: ONE-ON-ONE INTERVIEWS

In order to better empathize with online clothing store customers I conducted one-on-one interviews with 5 participants via video calls. It was imperative that I ask questions that garnered good qualitative data and didn’t lead them or potentially interject any bias on my part throughout the duration of the interview, so I drafted a series of open-ended questions regarding their in-store and online clothing shopping experiences. With their consent, I recorded each interview so that during which I could give them my full attention and respect and then afterword I would be able to review the recordings and ensure I didn’t miss any vital details for my findings.

SCREENING CRITERIA

• Adult

• Owns and computer or mobile device connected to the internet

• Has purchased clothing online at least once in the past 6 months

INTERVIEWEES

• Number of Participants: 5

• Gender: 4 females, 1 male

• Age: 35 - 40 years old

EMPATHY MAP

Now that I had collected qualitative data from my one-on-one interviews, I needed to gather all of this data and organize it in a way that would better help me empathize with the customer. To accomplish this I constructed an empathy map by identifying key takeaways from each interviewee’s answers and converting them into single-sentence observations. I chose a different colored sticky note to represent each participant and then wrote a single-sentence observation on each. I then grouped these observations into categories that would allow me to suss out patterns and identify insights and needs.

Each of these groupings were used to identify insights, or patterns, that were common across the majority of participants. These insights were then distilled into one-to-one needs, which are attributed directly to the creation of our persona (seen below in the next section).

INSIGHTS

1. INFORMATION: Shoppers show a strong consensus in seeking out information about the products they shop for.

2. SALES: Shoppers interviewed expressed unanimously that they were highly motivated by sales promotions.

3. CONVENIENCE: As competition invents new ways to accommodate them, shoppers show a tendency to expect increasing levels of convenience.

4. CONFIDENCE: Shoppers show they need to possess confidence in a company that wants to ensure their repeat business.

NEEDS

1. INFORMATION: Users need to understand the products they are buying.

2. SALES: Users need to feel that they are getting a good deal.

3. CONVENIENCE: Users need to journey a path of least resistance to complete a purchase.

4. CONFIDENCE: Users need to develop trust in a company that wishes to earn their loyalty.

PERSONA

In order to ensure that our e-commerce transition is designed for Mirror’s target shoppers, we used our secondary research and the insights and needs derived from our Empathy Map to create a persona; a fictitious shopper, named Alicia Jacobs, comprised of the most common goals, needs, frustrations, and motivations of e-commerce clothing store customers. It would be for “Alicia” that we would be focusing our design.

STORYBOARD

Storyboarding is a method used to further empathize with and understand our users. Referencing our persona, we created a scenario centered around “Alicia” to illustrate a possible frustration or motivation she has and how Mirror’s new online clothing store could address these and solve her problem.

CARD SORTING

This technique is useful for determining a user’s expectations and mental model for organizing information. There are two types of card sorting classifications - open and closed. In open card sorting the participants are asked to group cards into categories and name them as they think best. The data gathered from this open card sorting is useful for making your site more intuitive. In closed card sorting sessions, the categories are predetermined and the participants are asked to group the cards into these fixed categories. Closed sorting is useful when the content structure is already determined or you are adding content to an existing site.

SITEMAP

Using the results of the Card Sorting activity and existing patterns found on competitor e-commerce sites as a guide, I generated a sitemap to visualize the content structure of our own design. The sitemap serves as a blueprint of sorts that allows us to develop user and task flows that are intuitive and simple to navigate for the user.

USER FLOW

As requested, I am to ensure that the website allows for shoppers to find and filter products easily for women, men, or kids. To help accomplish this I created a couple of user flows which delineate the steps needed for a user to arrive at the homepage, add items to their shopping bag, and complete the checkout process. Creating the user flow diagram will help me to determine and organize which screens I will need to create to both satisfy the user’s objectives and to produce a functional prototype that can be used for testing during the Iterate phase of the design process.

SKETCHES

In order to quickly and cheaply explore some possible page layouts, I first drafted a series of wireframe sketches for Mirror’s homepage. This gave me the opportunity to consider several different design directions before designing a digital version.

WIREFRAMES

Once I had reviewed the sketches and decided on how I wanted to proceed, I created digital wireframes of key pages informed by the user flows that I drafted during the Ideate phase. These early wireframes will serve as a foundation for a higher fidelity design and prototype demonstrating how a shopper might arrive on the homepage, search and filter for a product, add the item to their shopping bag, and complete the checkout process.

RESPONSIVE DESIGN

A critical requirement for this project was to ensure the e-commerce website is responsively designed. These wireframes of the Mirror homepage were created as a means to show how the content and layout of the page might adjust dynamically from one device to another. It is very important to have a seamless user experience, because the website needs to remain as familiar and as frictionless as possible regardless of which device the shopper is using at the time. Below are three different device sizes: desktop, tablet, and mobile.

BRANDING

To accompany Mirror’s transition to an e-commerce platform, a new logo and a revitalized branding schema was still needed. I began by creating a mood board to gather influential typography, colors, logos, and imagery that matched the brand attributes I had defined and focus my design efforts. With my creative direction more clearly defined, I sketched a series of logos and then digitized a couple of the ones I liked best. After getting feedback from stakeholders and settling on a logo, I created a style guide consisting of the brand attributes, logo, typography, color palette, buttons and links, and some photo examples - so that Mirror’s new look would remain uniform and cohesive throughout.

USER TESTING

Usability testing is one of the most important steps in the design process as it validates or disproves any and all of our design decisions made thus far. The results of the testing will be synthesized and used in the Iterate phase to improve and temper the design to better serve the persona (and the client). To begin user testing, I created a detailed testing plan with test objectives, a script explaining the purpose and scope of the test, a scenario that explains the participants role, a series of tasks for the participant, and test goals. Using the Facebook and Nextdoor apps to recruit willing volunteers in my area that met my screening parameters, I conducted one-on-one interviews and, after presenting a scenario to them for context, asked the participants to test the Mirror prototype by completing 5 tasks, culminating in the completed purchase of a dress. As in previous interviews, I recorded the participant as well as the screen to review afterwords and ensure a thorough report of my findings.

SCENARIO 01

A social media fashion personality you follow online recently modeled some “cold shoulder” midi dresses that you liked from a new online clothing store you’ve never been to before, called Mirror. The social media post had a link to the website and a promo code (MIRROR10) to use for an additional 10% off. Intrigued, you follow the link to the website to see if you can find a deal on a new dress.

USER TASKS

1. From the homepage, scroll down through the page and verbally describe what you see, think, and/or feel about Mirror’s website.

2. Find a Womens “cold shoulder” belted midi dress for under $50 dollars.

3. Peruse the product page of the dress you find and, when ready, add it to your shopping bag.

4. Review the contents of your shopping bag and proceed to checkout as a guest.

5. During the checkout process, apply the promo code, MIRROR10, and then complete the purchase of the dress as a guest.

SUMMARY OF TEST

Overall, participants needed very little time to complete tasks, with the only significant point of confusion being tied to a possible limitation of InVision (or perhaps more accurately, a lack of applicable knowledge on the part of the designer to properly configure InVision in this case). Some key observations from the testing were as follows:

1. Four out of five participants failed to complete Task 4 (review the contents of your shopping bag and proceed to checkout as a guest).

2. Two participants did not complete Task 1 (from the homepage, scroll down through the page and verbally describe what you see)

3. Resulting Average Task Completion Rate: 74%

AFFINITY MAP

Much like the Empathy Map, we use this technique to synthesize our Usability Test findings in order to identify any reoccurring points of friction, frustration, failures, and negative or positive feedback with the prototype. With this information I drew fresh insights from which to inform our recommended revisions. From this point, I considered the recommended revisions and prioritized them before iterating on the next version of the prototype design, which would undergo another round of testing.

PRIORITY REVISIONS

Lastly, after synthesizing the usability test findings and reviewing the recommended revisions, I Iterated on the prototype and tempered the design accordingly. I added visual indicators to show what filters are applied when browsing products so that the user does not need to remember what selections they have made. Then I updated the header navigation menu by re-arranging the order of some of the categories to better reflect the mental models of online clothing shoppers and match the patterns found on competitor’s websites.

UI KIT

In order to make sure that elements and patterns remain consistent and current from one design iteration to another, I created a UI Kit. This will serve as a living document, demonstrating proper uses and guidelines to stakeholders and developers.

CONCLUSION

REFLECTION

While Mirror’s decision to transition to a fully developed e-commerce website was behind many of its competitors, the existing features and patterns for successful clothing and fashion websites were already well established, giving them the advantage of examining what already works and implementing many best practices that are based on a plethora of e-commerce consumer data. 

With the concept of purchasing clothing online based on trust (without being in physical contact with the product first) having largely gained consumer acceptance, the investment to transition to a fully-featured e-commerce business model was not only necessary, but perhaps even optimal in some ways. Because I was able to examine the patterns being used on competitor websites and the insights derived from statistics surrounding mobile and online purchases, I was able to make effective design decisions more quickly and therefore more cheaply. 

Once released “into the wild”, as it were, the maintenance of Mirror’s e-commerce store will certainly need to be attended to regularly, but moreover improved upon in perpetuity in order to maintain a competitive edge in the online fashion business. However, by leveraging the lessons learned from its competitors, Mirror has taken decisive and pragmatic steps to quickly cover the gap and position itself in a manner that will allow it to compete on a more level playing field.

NEXT STEPS

• Apply priority revisions to address findings from the first round of usability testing

• Continue to iterate upon the design based on feedback from further usability testing

• Prototype new features based on the persona’s needs

• Design mobile and tablet UI and prototypes and conduct testing for each

• Hand-off the design specs and UI Kit to developers and stakeholders