Infinity
Project Overview
Designing a conceptual responsive website for a retail brand going online.
My Role
Methods
Duration
Tools
Stakeholders
Project Background
Infinity started back in 1994 as a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. Their main goal is to make any type of clothing accessible to everyone. It currently has a successful brick-and-mortar model with 400 stores around the world in 32 countries.
Over recent years, they have recognized the benefits of e-commerce for both the business and its customers. The opportunity for an increase in sales is high online. Their customers have also been requesting an online presence as they have faced issues of not finding their size in the store. They also have remaining inventory that is difficult to sell in the store. Creating an online presence would help solve this.
The company wanted a brand refresh which included designing a new modern and neutral logo and a responsive e-commerce website.
Project Scope
The scope of this project is to focus on designing the online purchase journey to increase their sales and provide a pleasant experience for their users.
Problem Statement
get the brand to go online from its offline model?
achieve a brand refresh?
Approach
- Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, style, etc.
- Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
My Design Process
1 Empathize
2 Define
3 Ideate
4 Prototype
5 Test
Empathize
To better understand how to solve the problem, we need to understand our users and delve deeper into their behavior. Conducting research will help us understand the emotional, social, and irrational drivers that affect the way our users behave.
To gain the most out of this phase, a clear research plan was created.
The Research plan has research goals, questions, participants, methodologies and respective timeline.
Secondary Research
40% nearly of online apparel orders are being returned (with 70% of those returns due to problems with fit), costing the retailer anywhere from $3 to $12 per order.”
20% of brands said they’d increased the price of products to cover the cost of returns.
19% of consumers say they “bracket” their purchase, according to studies.
Bracketing is a practice that most online users now follow to reduce frustration of getting the size and fit right.
For online apparel purchases, one way consumers work to ensure their garment fits is by “bracketing,” or buying multiple sizes of the same items, to try the item on at home, keep what fits and return the rest.
AR technology is seen as a big game changer in coming decade in enhancing user’s online shopping experience.
Competitive Analysis
I looked at the sites of Infinity's both direct and indirect competitors to identify the strengths and weaknesses of existing online clothing stores.
Provisinal Perosnas
User Interviews
I conducted user interviews to gather quantitative data and gain insight into the potential users.
5
20-45
Location
Occupation
User Interview Summary
You can access the detailed interview transcript here
User Needs
- Users need better solutions for sizing and fittings.
- Users need better filtering options.
- Users need fast delivery and hassle free returns.
- Users need a better visualization feature on how the clothes would look on them when compared to the standard model photos being shown.
User Pains
- Current size chart not sufficient as standard sizes rarely are accurate to the real body types.
- Participants were frustrated with wrong sizes being delivered where returns could have been avoided.
- Descriptions of the materials not matching the items when delivered.
- Users could not visualize clothes on them, causing them to return items frequently.
Key Insights
- Users expected fast delivery and easy return processes as must haves.
- Most of my participants preferred shopping on websites compared to apps, citing convenience in skimming through collections.
- Fitting and sizing issues were the areas where every participant seemed to struggle.
- Offers and deals influenced most of my participant’s shopping online.
- Two of the main reasons to shop at the store were:
- To get the correct fit of clothing.
- To physically envision how the clothes looked on them before buying.
Define
Now that we have got some key insights from our research phase, we need to understand who is that we are designing for? What our goals will be?
With the insights achieved from the research phase, I created an empathy map & a User Persona to highlight the behaviors, goals, frustrations, and motivations of the user
User Persona
Meet Sarina, a 28-year-old Sales Executive from Atlanta. She is an avid shopper and loves to shop for clothes that are comfortable as well as trendy. She loves shopping online though she ends up returning or exchanging most of the time.
Project Goals
Our next step is to figure out the project goals to chalk out our next steps ahead. For a product to succeed, the business and user goals need to go hand in hand.
Below pictorial representation shows us the user goals (our main hero here!), business goals (we need to create a product that sustains), and technical goals (providing a seamless experience).
Product Feature Roadmap
The next step is to chalk out a list of product features to create a comprehensive product roadmap. The features are sorted into four categories, including Must-have (P1), Nice-to-Have (P2), Delightful (P3), and Can-wait (P4) features.
Approach to our problem
From our research and user interviews, we have our problem statement ready to be solved.
How Might We help users reduce the returns due to size issues and not liking how the clothing looks on them.
From our research until now, we have come across various patterns and tested behaviors that will help us chalk out our solutions to the problem we are trying to solve.
My Approach
We will introduce a feature called TRY-ON which the users can virtually try on, that is, visualize how the piece of clothing will look and fit them using VR and AR technology.
This will help the users reduce their returns due to size or style fit issues.
Let’s now proceed to ideate our solution.
Information Architecture
Our last task for the define stage is to create an information architecture. This is an important step in our process. A detailed Information Architecture will help us visualize the hierarchy and organization of information in our product.
Ideate
Sketches
I kickstarted the ideate stage by sketching my ideas on an iPad before proceeding to create low-fidelity Screens.
Sketching enables me to give my ideas a concrete shape before I proceed to digitize them. I iterated before zeroing in on what fits my goals and research best. Below are the final sketches.
Sketches
Wireframes
Based on the sketches, I created mid-fidelity screens to better define the hierarchy, visual depiction and styles.
Wireframes for Desktop
Wireframes for Virtual trial room
Wireframes for Mobile
You can have a look at all the wireframes here
Branding
Logo
To achieve the goal of brand refresh, I had to work on first designing a logo. When it came to the logo, what I had in mind was to create something that would represent the brand's tagline - "Clothing for all".
The brand catered to clothing for all ages, styles, and occasions. Keeping this in mind, I chose a simple and modern logo.
You can access the sketches of some of the logo variations I tried here.
Below are few options I digitized from my sketches in Figma before making my final choice.
UI Kit
Before we move on to create Hi-Fidelity screens, we created a UI Kit. The UI Kit contains the logo, color palette, typography, and all the UI Elements used. This kit provides a reference for future designs and is handy in collaboration with the design and development team.
Hi-Fidelity Screens
After defining the UI kit, I created the Hi-Fidelity designs. Below you can see the responsive screens for Desktop and mobile.
Desktop Screens
Virtual Try On
Mobile Screens
You can have a look at all the Hi-Fidelity Screens here
Prototype
Below you can watch a quick prototype preview.
Test
Usability Testing
To test if our approach to the problems we defined to solve is right, I created a Usability Test Plan and conducted usability testing with our working prototype.
5
24-60
Location
Occupation
Each participant was asked to imagine a hypothetical scenario and perform related tasks. The testing was conducted via remote and in-person. You can access the detailed Usability Test Findings, here
Tasks to perform
Task 1:
Find a BLUE VERO MODA dress and purchase it.
Task 2:
Find a floral dress from the collection and use the TRY ON feature to see how they look on you and add it to the cart.
Affinity Map
With the test findings, I created an affinity map, as shown below, to understand the pains, gains, and suggestions of the participants.
Priority Revision
Prioritizing the suggestions, pain points, and patterns observed from participants, the following changes were made.
01 - SELECT SIZE BUTTON
Change button appearance of selecting size
02 - CHANGE CONFIRMATION LABEL COLOR
Change color of ORDER CONFIRMED label to intimate user his order is confirmed
03 - REDUCE REDUNDANT SCREENS IN TRY ON PROCESS
Reduce two screens in TRY ON flow to one to reduce redundancy of information and actions.
04 - HIGHLIGHT DELIVERY DATE IN CHECKOUT PROCESS
Highlight delivery date in the checkout proccess
05 - OPTION TO CHANGE SIZE IN TRY ON PROCESS
Figure out a solution to let user change size in the TRY ON process.
Reflections
Key Learnings
I learned a lot through the process, from research to wireframes to final iterations in creating a user-friendly responsive e-commerce site. Next in the process would be a final round of testing the revised screens(based on our usability testing).
Thanks for staying with me to understand what this journey entailed. I appreciated your time.
Next Steps
My next step is to explore different innovative ways to solve the sizing problems.