With over 400 stores in 32 countries, Mirror is a well-established global clothing chain parring that of Old Navy and H&M. But in the online world, the retailer’s business (while growing) still remains in its’ infantry. This is the story of how I introduced a responsive, user-centered e-commerce space and subsequently closed the retail innovation gap for Mirror.
01. Project Details
Challenge | Design an e-commerce clothing website
Client | Mirror (fictitious project)
Duration | 8 weeks
Role | Lead UI UX Designer: Design Researcher, IxDesigner, Visual Designer
02. Design Goals
Deliver a strong, responsive web experience across multiple device platforms
Re-brand company identity
Create an intuitive, smooth experience for shoppers by leveraging existing design patterns and user expectations
03. Tools Used
Research | Industry Research, Competitive Audit, User Interviews
Synthesis | Empathy Map, Trello, Persona Development
Product Strategy + Ideation | Whiteboard, POV + HMWs, Goal Mapping, Site Map, LucidChart
Interaction Design + Testing | Pen + Paper, Task Flow, Illustrator, Photoshop, MarvelApp, Apowersoft Recorder
Delivery | Zeplin
Research & Synthesis
01. Industry Research
With strong desire to optimize Mirror’s online retail strategy, I extensively explored e-commerce trends during my initial research phase. Knowing full well that the fashion industry is an over-saturated market, success or failure hinges on our ability to jump aboard the latest online shopping trends as they crest. Market trend analysis garnered 3 major takeaways:
Insight #1: There still remains a fairly equal split between shopping in physical stores vs. online retailers.
Mirror should unify channel strategies and maintain an omnichannel, “best-of-both worlds” approach.
Insight #2: Shoppers are more fickle with their brands than ever before.
Retailers like Mirror should provide compelling loyalty programs and return logistics to secure and retain consumers.
Insight #3: Young and digitally savvy, millennials lead the way in the e-commerce and mobile space.
Mirror should place heavy emphasis on both social experiences and mobile support.
02. Competitive Analysis & Provisional Persona
With this initial information, I focused on uncovering existing yet obscure user expectations, behaviors, and perceptions in the fashion space. I compiled an e-commerce snapshot of notable fast fashion retailers (both competing and analogous), and surveyed for trend implementations, areas of success + failure, and user expectations — so to know where best to invest our resources. In order to facilitate future design decisions, I aggregated and interpreted the data results into provisional personas, relatable, representational customer profiles (archetypes), focusing heavily on user behavior and motivation.
03. User Interviews
"One must first assume something to discover something." Driven by curiosity in learning more about my users, the development of my interview questions was built upon a foundation of working assumptions and unknowns. To better understand online shoppers and to test my assumptions, I conducted 4 user interviews with participants who fell within the aforementioned archetypes. I recruited 4 individuals to speak with in-person (2 male, 2 female, within the age range of 18–50, employed, who have shopped online within the past 6 months.) These participants were asked about their shopping habits and preferences. They were also asked to walk me through the process of browsing for an article of clothing using a store of their choice.
- Customers know what they want & roughly how much it should cost.
- Shoppers will be more stringent when shopping online, expecting prices to be cheaper versus in store.
- Online shopping is more a personalized experience versus in-store.
- What motivates a customer to purchase clothes online as opposed to in store?
- What are their typical shopping processes from product searching to product purchasing?
04. Empathy Mapping / Persona / Storyboarding
While the supply amount of data garnered during discovery was substantial, I was able to surmount difficulties through various information defining techniques. Exploring information in a visual way makes it easier to spot behavioral patterns and to synthesize user needs.
Empathy mapping summed up our learning from user engagements and synthesized insights from our observed user’s needs. From it, we discovered strong desire for personal and social integrations in the online space.
My empathy map functioned as a backbone for persona construction. From the composite of my research findings emerged Jamie. Due to professional obligations, time is a limited resource. Thus, she values a quick, efficient shopping experience so that time can be allotted elsewhere— spending more time with family and friends.
Storyboarding captured my user’s emotional evolution as he / she goes about shopping for articles of clothing. By illustrating a potential key path scenario, we understand how Mirror fits into our user’s daily lives when needs are triggered.
Point of Tension
- While users enjoy and rely on upon the convenience of online shopping, all prioritize fit as the first thing that they look for, and all found it frustrating to predict the quality and fit of garments.
- All users care about shipping and returns, favoring stores that offer leniency and or offer free returns and free shipping.
- All users agree (even exclusive in store shoppers) that shopping online saves time, provides a wider selection of clothes, and is oftentimes cheaper, as opposed to shopping in person.
- All users expect intuitive and personalized features that help to quickly narrow down options as they browse.
What Surprised Me
While market analysis research asserts mobile shopping to be on the rise, interviewed users preferred completing transactions via desktop not mobile because of frustration with small screen sizes.
Defining And Ideation
01. POV Statements / HMW Questions
Amalgamated data from our visualization techniques reveals a composite user (Jamie) who desires to maximize on information searching avenues, Eg. lessen the overall time spent shopping for an exact item mid a pool of options, while also being able to minimize on the risk(s) of receiving an inadequate product. Ill-fitting garments, non-comprehensive product descriptions, and costly (in both time and money) return processes appear to be huge areas of frustration.
This compounded insight informed the HMW Question, crafted to guide my design: “How might we organize, structure, and label Mirror’s content so that Jamie can quickly find and purchase clothing that she is searching for, all while feeling confident about her selections?”
01. Business And User Goals
Prior to design, I shaped the direction of my product via a clear strategy. Wanting the outcome to be customer and market-driven, I defined the high-level business objectives and key customer attributes necessary to achieve success. Identifying overlaps within Jamie’s and Mirror’s goals (while mindful of technical considerations) defined the inclusive features that benefit desires from both parties. It also informed the entire brand experience — from messaging to imagery to site content.
02. Feature Roadmap
I then generated a comprehensive list of features with implementation prioritized by 1. degree of importance to both business and users, and 2. level of time and resource investment.
03. Card Sorting
To understand how users perceive product categories, an open-ended card sort (online with 10 participants) was conducted. A set of 30 clothing items were provided to participants and they were asked to group them. Results confirmed user expectations to be strongly influenced by existing fast fashion site patterns, which then helped to inform the organization of clothing categories and subcategories on Mirror’s site.
04. Site Mapping & Task / User Flow Maps
Insights from our feature roadmap and card sort set the foundation for Mirror’s site architecture. With the content foundation, I moved into ideation. I crafted task and user flows to empathize with how users navigate pages to complete linear tasks, and how users journey to checkout via different entry points and paths. Constructing these flows ultimately informs the creation of what key pages and features to design for user testing.
Before moving to digital wire-frames, I quickly conceptualized layouts using trusty pen and paper. I wanted to map out the site information in a simple intuitive way that satisfied both business and user needs. I settled on version 1 (left) as it proved to be the most modern and intuitive design. With my choice set, I moved on to building mid and high fidelity wire-frames of responsive key pages that meet my primary user flow.
02. Mid Fidelity Wire-framing
Below are responsive mid fidelity frames for Mirror's homepage and for the category listing page.
03. High Fidelity Wire-framing
Afterwards I added design into all of my elements and elements to create high fidelity frames that is to be used for usability testing.
User Interface Design
01. Mood Board
Informed by my user research, I had set out to develop a longstanding brand that is on par with rival fashion sites. The name itself — Mirror, primed my aesthetic vision. I found much inspiration in the form of “mirror images.”
From those images, surfaced 4 central site characteristics.
- Modern and Simple
- Transparent and Trustworthy
- Sleek and Stylish
- Diverse … with just a hint of playfulness
(to keep the layout from seeming too sterile.)
02. Logo Design
The logo is a reflective word-play of the name itself. While I had explored innumerable ideas on the concept of reflection, one design rose above the rest in its distinction, simplicity, and modernity. The coral pink hue and the boldness from the logo’s font perfectly counterbalanced the daintiness of the rest of the site, aiding in a sense of playfulness. View my entire logo design process here.
03. Style Tile & UI Kit
I opted for a vibrant palette, filled with shades and tints of coral-pink, bluish-teal, grey-black, and white-grey. Bold hues were used sparingly, only to draw attention to important elements, whilst blue, white, and grey were strategically picked to represent the fresh reflective colors associated with mirrors. Tastefully positioning elements while leaving just the right amount of white space in between helped to organize layout in a clean, uncluttered way.
My style-tile is a "snippet" representation of my brand vision for Mirror, which of course, ultimately informed the site design. When final high fidelity frames were completed, I aggregated all the design elements and housed them in a UI Kit so that designers and developer can refer to them during future stages of iteration.
I then brought all my high fidelity frames and key elements into Invision to prepare for usability testing. Unfortunately, this prototype had been archived. Below is a video recording of a user (Elizabeth) running through all major task flows. Audio has been removed, as I do not have Elizabeth's permission to share with the public.
- Task # 1: Shop for a women’s, size 4, white blouse, and add it to your shopping bag. Then view your shopping bag to ensure item details are correct.
- Task # 2: After adding your blouse to the shopping cart, stay on the blouse product page. From there, shop for a blue, Matt & Nat clutch, and add to the wish list for contemplation.
- Task # 3: Navigate to your wish list, edit the clutch color from blue to white, and add the clutch to your shopping bag. From your shopping bag, checkout your purchase.
Usability Testing & Validation
01. Usability Testing
In order to validate my solution, I spent the afternoon at a coffee shop filled with millennials with 4 major testing goals in mind:
- Observe and note pain points, areas of uncertainty, and/or dissatisfaction with any missing features
- (In)validate key assumptions
- Assess the usability and functionality of Mirror’s navigation, hierarchy, and information architecture.
- Discover which path is preferred if there are multiple ways for accomplishing a particular tasks.
5 participants (3 male, 2 female) were recruited. All participants were asked to walk through the prototype, performing the 3 aforementioned tasks flows.
02. Affinity Mapping
Using an affinity map, we methodically organized interview responses to obtain insights and suggestions for improvement including which features should be given priority over others during stages of re-design.
- Test Completion: Findings suggest that users expect certain conventions in terms of information architecture. Most of these conventions had been followed through on my first implementation, and therefore, led to fairly successful test results.
- Task Flow: What surprised me most was the overwhelming amount of users who preferred navigation over search bar to find their product of choice. All participants expressed that the search-bar would be fruitless (and an inefficient management of time) without an exact description of the desired item.
- Pain Points: While the navigation throughout the buying, wish-listing, and carting process proved to be successful and the image driven content impressed users, there were still some points of friction that we need to address in our design. Surface level improvements in font size and elemental hierarchy can be made, including upping the font size of particular links for easier visibility, rethinking the labeling of "wishlist editing," and revising the hierarchical placement of social media icons.
Final High Fidelity Prototype
Corrections have been integrated with a second iteration, alongside a change in color scheme (albeit unnecessary as the color scheme would change according to the types of products offered), as some male users preferred a more gender neutral palette - confirmed during usability testing. View the prototype here.
Final High Fidelity Frames
Takeaways & Next Steps
Leveraging existing design patterns and user expectations within the e-commerce space allowed for me to build upon the successes and failures of others. By doing so there’s the added benefit of:
- minimal effort, cost-effective improvements for tried problems, and
- efficiency, which enables us to invest our resources elsewhere — to explore newer avenues of information searching and alternative risk minimization features so that we can be distinguished from the rather massive fashion world.
02. Next Steps
With efficiency as an added benefit, our next steps should focus on innovative, rising e-commerce trends (Eg. virtual fitting room). Doing so will help distinguish and place Mirror at a competitive advantage.