E-commerce Web Design

Project Details

CLIENT: MIRROR

TIMELINE: April - May 2019

DELIVERABLES: Desktop deliverable, Branding

TEAM: Self + feedback provided by my design mentor and others

ROLE: UX/UI Designer

TOOLS: Sketch App, Invision, Zeplin, Pencil, Pen, Paper

Background

The client, MIRROR, is a global clothing store chain that has been providing quality affordable clothing for diverse individuals since 1994. Since opening, their offline stores have been successful but they are now interested in expanding into the online space as well. The client seeks to optimize their existing inventory and tap into the huge online retail demand and opportunity to stay current.

Goals

  • Design a logo for the company that is modern and neutral enough to attract all types of people and styles

  • Design a responsive and intuitive e-commerce website experience that is easy to use and that allows customers to browse through all products and filter by size, color, style, and others
     

This is a speculative project and MIRROR is a fictional clothing company

Process

01. Empathize

GOAL: Understand the current trends and audience of the e-commerce space
DELIVERABLESMarket Research, Competitive Analysis, 1-on-1 Contextual Inquiry Interviews

 

MARKET RESEARCH 

To familiarize myself with the space that I would be designing for, I first took to conducting some market research to better understand the trend and pain points of e-commerce websites. This secondary form of research allowed me to gain deeper insights into both the successes and difficulties of online shoppers.

COMPETITIVE ANALYSIS

Given that the e-commerce space has existed already for quite some time, I analyzed several direct and indirect competitors that are well known to identify common trends and opportunities for improvement that could be applied to the final product.  

mirror_competitive_analysis.png

1-ON-1 CONTEXTUAL INQUIRY INTERVIEWS

This primary research methodology allowed me to interface directly with online shoppers and hear their personal thoughts and experiences on shopping. I conducted the research by asking open-ended questions and was able to find common patterns in participants’ perspectives and behaviors. 
 

Number of participants: 5
Gender: 1 male / 4 females
Age range: 20 - 50

02. Define

GOAL: Identify the target user of the brand and their needs, wants, frustrations, and goals
DELIVERABLES
: Empathy Map, Persona, Storyboard

EMPATHY MAP
After collecting all the data from my contextual inquiry interviews, I created an empathy map to visually organize my findings. This helped to observe patterns more easily and extract what the needs of users were.

​INSIGHTS

  • Users want to easily return items

  • Users want to be as informed as possible regarding an item's quality

  • Users want to find what they are looking for

​NEEDS

  • To efficiently return items

  • To be informed enough to purchase an item

  • To be assisted in finding what they are looking for

PERSONA

Using the information gathered from the contextual interviews and empathy map, I created a persona named Mindy Tang. Mindy acts as a guide and reference point throughout the design process to ensure that all design decisions are made through empathizing with our target users.

mirror_persona.png

STORYBOARD

In order to better understand how the target user would exist within the space and interact with the product, a storyboard was created to visualize the persona and her experience shopping online. This deliverable helped to define potential problems the user could be having in the space and how MIRROR’s website could resolve them.

mirror_storyboard.png

03. Ideate

GOAL: Brainstorm ideas for how the site could be best organized by focusing on information architecture.
DELIVERABLES
: Card Sorting, Sitemap, Task Flow, User Flow

CARD SORT EXPERIMENT
An open card sort experiment was conducted with 8 female and 2 male participants with ages ranging from 20-32 to better understand how users organize information mentally when online shopping. The information gathered helped inform effective structuring and categorizing of content for the website. 


Experiment findings:

  • Participants either grouped items by the gender of the item’s intended wearer (e.g. men), by the occasion/dress code (e.g. work attire, casual), or simply item type (e.g. tops), with the latter grouping type the most common

  • Some grouped by labels such as “men’s tops” or “women’s wear”, therefore indicating that it is helpful to have an additional level of separation on top of the various categories listed in the point above

SITEMAP

A sitemap was created based off of the findings gathered from the card sorting experiment and common design patterns found during in the competitive analysis of other websites in the e-commerce space. This deliverable helped to clearly visualize how high-level content would be organized and accessed within the website.

mirror_sitemap.png

TASK FLOW

To better understand how a user would go about interacting with the MIRROR website, a task flow was created. The task flow created demonstrated step-by-step how a user would go about completing the main task of finding an item and purchasing it once landed on the homepage.

mirror_task_flow2.png

USER FLOW

A user flow was created to gather a more comprehensive understanding of the various ways users could go about navigating and interacting with the MIRROR website. This flow helped illustrate which pages would need to be designed and leveraged user behavior to identify relationships pages would have with one another.

mirror_user_flow2.png

04. Design

GOAL: Design the branding and UI of the MIRROR website
DELIVERABLES
: Sketches, Mid-fidelity Wireframes, and Brand Style Tile

 

SKETCHES
Before moving into the digital design of the product, I first began by using pen and paper to brainstorm ideas for different homepage layouts by creating low-fidelity wireframes. This allowed me to quickly and effectively gather feedback on which design direction to go with for the final product.

mirror_lofi_sketches.png

MID-FIDELITY WIREFRAMES

After selecting an option to move forward with, I used Sketch to create mid-fidelity wireframes of the sketch to better define the visual hierarchy of the page layout. By keeping the mid-fidelity wireframes void of any visual styling, I could focus more easily on fine-tuning the elements on each page.

BRANDING

Prior to moving into high-fidelity wireframes, I created a comprehensive brand style tile to act as a guideline embodying the attributes of MIRROR and its products.

mirror_styletile.png

05. Prototype

GOALCreate a functioning prototype of the website from the mockups to obtain usability feedback
DELIVERABLES
High-fidelity Wireframe Prototype, Usability Testing

INITIAL HIGH-FIDELITY WIREFRAMES
Referring to the brand style tile created, I brought the mid-fidelity wireframes to life by adding content and visual styling. I then used Invision to create an interactive prototype of the MIRROR website to help conduct realistic usability testing.

mirror_hifi_responsive_wireframes.png

USABILITY TESTING
Objectives:

  • Test if users are able to successfully find and purchase an item on the site

  • Uncover any areas of confusion or frustration

  • Identify if expectations of online shopping are met through using the site


Tasks:

  • Locate where you would find information regarding the brand’s mission

  • Demonstrate how you would go about finding discount opportunities and how to access them

  • Find a specific dress for an upcoming event and purchase it


Results:
I used the prototype to conduct usability testing with 6 participants who were similar to our persona, Mindy. I was able to gather insightful feedback from users about the successes and opportunities for improvement regarding the site’s usability.

06. Iterate

GOAL: Iterate on the designs based on the usability feedback
DELIVERABLES
Affinity Map, Revised High-fidelity Wireframes + Prototype, UI Kit

AFFINITY MAP
I created an affinity map to help visually organize the observations collected during usability testing with the prototype. The map helped easily identify recurring patterns in both participants’ behaviors and their feedback. The insights and recommendations synthesized from the map highlighted revisions were needed for obtaining the discount and navigating the checkout flow more easily. 

​INSIGHTS
 

  • Users were keen on looking for discounts on the website, however, they preferred more clear and easier ways to retrieve discount codes
     

  • Participants were confused with wording that was vague or unfamiliar such as “promotion” meaning either sale or new items
     

  • Checkout flow had repetitive information displayed in multiple places, causing the user some confusion of what action was required
     

  • Participants found the filters to be very helpful when searching for an item online
     

  • Users liked that the website followed many standard patterns which helped make the flow familiar and easier to complete a purchase 

RECOMMENDATIONS (Highest Priority ↔ Lowest)
 

  • Include the discount code in the promotional banner up top to make it easier for users to apply
     

  • Update copy for promotions and other labels to follow common wording used by other shopping websites for increased clarity
     

  • Move entered information to be all shown at the final review page to better utilize screen real estate in each part of the checkout flow
     

  • Simplify the number of useful filters and order by more commonly used filters to least so users can make the most use out of them

REVISED HIGH-FIDELITY WIREFRAMES + PROTOTYPE

From the recommendations identified from the affinity map, I made revisions to the wireframes and prototype. Feel free to check out the finalized Invision prototype created with the updated high-fidelity wireframes below:

UI KIT
Finally, I curated a UI kit to help organize the various key design components used throughout along with additional information to help act as a guide for future reference. To round out the design process, I used Zeplin to efficiently handoff the designs to engineers.

Reflection

Creating the MIRROR website proved to be efficient given that the e-commerce space has been around for a while and has led to the creation of various common design patterns. This same reason also made it easy to observe patterns in user expectations because online shopping has become so ubiquitous in our daily lives. I found the user research to be most intriguing because of the surprising similarities and differences observed across participants’ behaviors and perspectives on the same subject. This project gave me a deeper insight into what goes into creating an intuitive online shopping experience, as well as greater understanding and appreciation for the e-commerce space.
 


Next Steps
 

  • Conduct additional rounds of usability feedback on the revised prototype

  • Create designs for the mobile and tablet experience

  • Update the UI Kit and high-fidelity wireframes accordingly as revisions are made based on usability feedback

  • Monitor metrics on the website as it is put into production to identify the effectiveness of the designs and any opportunities for improvement

© ALVIN KUANG 2019