MIRROR •

E-COMMERCE

OVERVIEW

Mirror is a fictional clothing store that was assigned to me. The brief stated that this fictional brand has over 400 stores around the world & that they are in need of an E-commerce website. Online shopping is not available for this fictional brand which is restricting its ability to sell full inventories as customers have issues finding their specific clothing sizes within store locations. My goal is to increase revenue by creating an E-commerce site that customers can easily navigate to successfully find their size & fit. I also aim to create a new updated logo that pushes the brand’s identity & image forwards.

Role

UX/UI Designer
UX Researcher
App Design
Icon Design

Tools

Figma
Photoshop
Maze

Time Span

year 2021
4 Weeks

Home Screen
Best Sellers is presented with category options to highlight products that current user’s are responding to the most. This benefits sales by both sustaining & building on the momentum of high selling products. Next, products are suggested based on having positive user reviews.

Towards the bottom of the page I offer products based on instagram posts from fellow user’s. My interview participants stressed that most of their shopping is encouraged through instagram & additionally, they also want to see products worn by people they can relate to (fellow users).
Product Screens
Product Browsing:
Users can easily browse & pinpoint products based on their unique shopping preferences. Additionally, products can be “liked” by clicking on the heart. This adds products to a “likes” list that can be used to tailor suggestions towards the user’s preferences.  

Product Page:
‍Relying on my interviews & competitor analysis, I designed this page to include fitting metrics that invite participation from users. Reviews are available to provide transparency regarding fit & quality. “Find Your Size” option is available to users who want to have a size suggested to them based on their own unique measurements & fit preferences.   
• Process Overview •

01 •

RESEARCH

User Interviews.

I interviewed 5 participants with the goal of understanding their key motivations to purchase clothing online (Who / why & when?). I also wanted to understand what reasons prevented them from shopping online & what their personal frustrations were with the E-Commerce clothes shopping process.

///   Research  001   ///   user  interviews   ///   competitor  analyses   
///   Research  001   ///   user  interviews   ///   competitor  analyses   
///   Research  001   ///   user  interviews   ///   competitor  analyses   
///   Research  001   ///   user  interviews   ///   competitor  analyses   
///   Research  001   ///   user  interviews   ///   competitor  analyses   
///   Research  001   ///   user  interviews   ///   competitor  analyses   
User's primary Goals
1. More information regarding the fit & quality of products. 
2. Quick shipping. 
3. Flexible return & exchange policies.
4. Brand must have social media profiles & ads Sales & or discount promotions. 
5. Offer “Slim”, “Petite” & “Tall” fits.
‍Who / why? Overall my participants expressed that they are predominately drawn to shop online from brands that provide modern basic affordable styles that are adaptable to both work & casual settings. Anything that is more expensive or stylish they would prefer to buy in person as those types of purchases carry a higher risk of not working out & needing to be returned, which can be costly both in their time & money. 

‍When? Participants expressed that they shop online when there is a type of sale or promotion available. They stated that they almost never buy clothes at full price & that they will wait until the items they want are on discount. Another motivation is to buy clothes to fulfill a need (work interview, replace worn-out clothes, change in season, for new hobbies eg. yoga classes & for vacations). The more urgent this need is, the more likely a participant will break their first rule of not buying items at a full price. It was also emphasized that social media played a huge role in motivating participants to shop. They acknowledged that they are more likely to shop from a brand that has ads & posts on Instagram. These ads/posts would notify users of new looks & specific sale styles that are targeted towards the user’s preferences. 
‍
Why Not? Participants expressed that they would pass up on an online purchase if the garment is not well represented in the way it fits. They also express frustrations with brands that don’t offer “slim”, “tall”  & or “petite” fits. If the shipping time is too long then users will either pass up on purchasing the item online, buy the item in-store instead, or opt for in-store pick up for the online purchase instead. If a brand doesn’t offer flexible return policies then the participants would opt out of purchasing products online.
• Competitor Analysis •
Competitor
Summary
Competitor E-commerce clothing sites now include more comprehensive fitting options & details. It's more common now for customers to be able to leave reviews on specific products regarding fit & quality. These features can help Mirror to adapt to customer feedback quickly & to reduce customer returns due to fit issues.

Return policies & return time frames are longer/more flexible & allow customers to arrange shipping returns. Companies like Amazon offer free 2-day shipping and free returns. This makes long shipping times & costly return policies less acceptable to customers.

Clothing brands have increased their social media presence & advertising. It's now common for brands to have social media profiles and ads on Instagram that quickly redirect customers to online shopping.  E-commerce sites now suggest products & or categories that the user may be interested in based on the user’s previous site activities & searches.

02 •

Synthesize

Insights from Research

I establish the essential design goals & key features based on the research data gathered from my interviews & competitor analyses. These will become my focus points when planning the designs for this project.

///   synthesize  002   ///   key features   ///   User needs   ///   user motivations   
///   synthesize  002   ///   key features   ///   User needs   ///   user motivations   
///   synthesize  002   ///   key features   ///   User needs   ///   user motivations   
///   synthesize  002   ///   key features   ///   User needs   ///   user motivations   
///   synthesize  002   ///   key features   ///   User needs   ///   user motivations   
• Key Features •
Needs
• Site advertises sales & promotions.
• Have New Arrivals, Best Sellers & Top Reviewed @ homepage. 
• Contain instagram posts of fellow customers wearing products. 
• Have profiles & award members points for purchases & referrals. 
• Offer written reviews of products from customers.
• Offer comprehensive "find your fit" system that suggests product sizes based on the User's preferences & measurements. 
• Easy to use search & browsing filters.
• Suggest products based on user's past search & purchase history. 
Motivation
• Convenient to have products shipped to me. 
• Easily find products that I want & need based on my preferences.
• Sign up & get rewards for purchases & referrals.
• Get emails & social media notifications when there are deals. 
• clear size metrics & indications.
• Pictures of fellow User's wearing products.
• Transparent reviews from fellow customers. 

03 •

IDEATE

Acquiring & Structuring Data

Because I used an open card sort it made the task of categorizing cards difficult for my participants & led to a few people giving up. Also, using an open card sort on a small test group of 8 made it nearly impossible to generate any useful consistent patterns within the resulting data. Next time I will provide the categories for the card sort when there is a small test group.

///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
///   ideate  003   ///   card sorting   ///   site map   ///   user task flow    
Creating a Blueprint
Site Map
To make up for the lack of tangible data from my card sorting exercise I created a site map that covered the essential navigation paths based on the architecture of competitor websites from my competitor analysis. I was mainly interested in covering the essentials with the addition of a “favorites” feature. I value this feature since it gives the user an opportunity to tell us what they like. We can then tailor the shopping experience towards their unique preferences & increase overall E-commerce sales.
Predicting the Flow
user Task Flow chart
When making the following User Task Flow I referenced my recorded interviews to extract how a typical user would come to the website & how they would navigate to find & purchase a product. I included instances of the user finding additional products when “suggested additional items” are presented during the shopping bag stage. This provides an opportunity to sell the user more products based on their preferences before they complete the checkout. A log-in / sign up option is also included within the checkout stages to help speed up the purchasing process for brand members & to also provide users the opportunity to sign up right before they complete their purchase & leave the site. This can also be a great opportunity to encourage new user’s to become members by offering them sign-up promotions. Increasing members can have the benefit of increasing overall E-Commerce sales.

04 •

UI Design

Generating Sketches & Prototype

I wanted to create a unisex simple Logo that can be used on multiple background types & is easy to recognize / remember. Generaly I chose to stick with grays & neutral colors that would not distract from the products & For the pop color, I chose a fluorescent green as I thought it would be a nice contrast. I then created low-fi sketches based on the above site map & user task flow.

///   ui design 004   ///   logo design   ///   low-fi sketch   ///   style tile   
///   ui design 004   ///   logo design   ///   low-fi sketch   ///   style tile   
///   ui design 004   ///   logo design   ///   low-fi sketch   ///   style tile   
///   ui design 004   ///   logo design   ///   low-fi sketch   ///   style tile   
• Logo Design, Low-Fi Sketches & Style Tile •

05 •

testing

Testing Remotely

Using Figma I created a prototype based around the task flow of finding & purchasing a men’s T-Shirt.

The goal was to test the efficiency of the site’s paths from product search to checkout & to test the effectiveness of CTAs in guiding the user’s decision making.

Due to the limitations of Covid-19 I administered my testing remotely using Maze. Maze is an online prototyping tool that syncs with Figma & measures how the test participants interact with the prototype. It helps to identify navigation patterns & where users have the most miss-clicks. 

During the first round of testing 70% of participants completed the prototype. After reviewing the data & making corrections the completion rate was 100%.

///   testing  005   ///   testing groups  ///   interactive prototype   ///   fINAL SCreens   ///   Conclusion   
///   testing  005   ///   testing groups  ///   interactive prototype   ///   fINAL SCreens   ///   Conclusion   
///   testing  005   ///   testing groups  ///   interactive prototype   ///   fINAL SCreens   ///   Conclusion   
///   testing  005   ///   testing groups  ///   interactive prototype   ///   fINAL SCreens   ///   Conclusion   
• Test Results •
• Interactive Prototype •

• Final Screens •

Home Screen
Best Sellers is presented with category options to highlight products that current user’s are responding to the most. This benefits sales by both sustaining & building on the momentum of high selling products. Next, products are suggested based on having positive user reviews.

Towards the bottom of the page I offer products based on instagram posts from fellow user’s. My interview participants stressed that most of their shopping is encouraged through instagram & additionally, they also want to see products worn by people they can relate to (fellow users).
Product Screens
Product Browsing:
Users can easily browse & pinpoint products based on their unique shopping preferences. Additionally, products can be “liked” by clicking on the heart. This adds products to a “likes” list that can be used to tailor suggestions towards the user’s preferences.  

Product Page:
‍Relying on my interviews & competitor analysis, I designed this page to include fitting metrics that invite participation from users. Reviews are available to provide transparency regarding fit & quality. “Find Your Size” option is available to users who want to have a size suggested to them based on their own unique measurements & fit preferences.   
Check Out
The Check out is simply guides the user through the process of entering their personal information & choosing a shipment option. Additional products based on the User's "Likes" & past browsing history "You Might Also Like" are also suggested at both the shopping cart & the final receipt screen.

Conclusion

Designing a fashion E-Commerce site was a great learning experience. The biggest challenge was in arranging the product screen & accounting for the various button states that would guide the User towards completing their purchase. My biggest mistake was in making the prototype overly intricate which caused it to perform very slowly & at some points even crash when I had Users test it. For my next projects, I will simplify my prototypes so that they are more efficient even if they are less esthetically pleasing. I really enjoyed designing the Mirror logo, It was a difficult hurdle, but I worked through it until I made a breakthrough in creating a logo that I felt was original & unique. I started not confident in my logo designing skills but this experience reassured me that logo design is a skill that I do in fact have. Overall I am happy that I chose to design an E-Commerce site for my first project as the skills & insights I developed will serve me well for future projects.  
Need a designer?

Let's work together!

BrunoGivDesign@gmail.com
Copyright 2022 - Bruno Givotovsky, All rights reserved.