E-commerce Web Design
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
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.
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
GOAL: Understand the current trends and audience of the e-commerce space
DELIVERABLES: Market Research, Competitive Analysis, 1-on-1 Contextual Inquiry Interviews
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.
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.
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
GOAL: Identify the target user of the brand and their needs, wants, frustrations, and goals
DELIVERABLES: Empathy Map, Persona, Storyboard
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.
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
To efficiently return items
To be informed enough to purchase an item
To be assisted in finding what they are looking for
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.
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.
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.
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
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.
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.
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.
GOAL: Design the branding and UI of the MIRROR website
DELIVERABLES: Sketches, Mid-fidelity Wireframes, and Brand Style Tile
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.
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.
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.
GOAL: Create 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.
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
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
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.
GOAL: Iterate on the designs based on the usability feedback
DELIVERABLES: Affinity Map, Revised High-fidelity Wireframes + Prototype, UI Kit
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.
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:
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.
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.
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