OVERVIEW
Variety is very successful brick and mortar clothing chain with over 400 stores around the world in 32 countries. They have apparel for everyone and for every occasion. Their clothes are made of good quality and sell at low prices. Now they’re looking to expand their business online to meet the customer demand, increase their global reach and sales revenue.
THE CHALLENGE: To design a responsive e-commerce website that is easy to browse through product, inform the user of any sale events. Also, to rebrand the logo for the company. Making it more modern and fresh.
MY ROLE & DURATION: UX/UI designer with the following key responsibilities:
A total of 80 hours
RESEARCH
To understand what makes an apparel e-commerce website easy and efficient to navigate for their customers to browse through product and promote their latest sale items research needed to be conducted to uncover the needs and pain points users may have when shopping online for clothes.
RESEARCH GOALS: Gain insights on the market and on the key competitors in the industry. Understand what are user goals and pain points are when shopping online for clothes.
USER INTERVIEWS: For these interviews I recruited 5 participants (3 females and 2 males) ages 29-35 yrs old. Over the course of two days I conducted these 1 : 1 interviews over the phone. Through these interviews I was able to uncover some commonalities in user goals, needs, motivations, and pain points when shopping for clothes online.
COMMON GOALS: All interviewees said the main driving forces to shop online is convenience and to save time. They all want to be able to browse through the product as easy as possible and to able to catch the latest sales or discount opportunities.
COMMON NEEDS: Most wanted the checkout process to be seamless. They appreciate when the product has good details like photos, product descriptions and reviews. Majority need the customer service to be reliable and readily available when needed. They need to feel and to know when making a purchase that it is secured. Another, common need for these interviewees is relaxed return policy that meant free return shipping.
COMMON PAINS: When it came to the pains with online shopping most said they did not like when their size was unavailable or sold out. Another big pain of shopping online was the expensive shipping costs involved and when the purchase is made some were afraid the package were going to get lost in transit or stolen.
PERSONA:
Based on the research and the 1:1 interview findings I formed a persona for a way to identify the different users that shop online. Meet Corene here.
EMPATHY MAP
To further empathize with users I put together an empathy map of the persona to reveal the attitudes and to paint a picture of what we know about a particular user.
DEFINE & IDEATE
Once I uncovered the users needs, I then set to evaluate how the website is structured and how the information is organized.
PROJECT GOALS
Before I organize the website I first set out to document what the business and customer goals are so that I understood what the desired outcomes were for the website.
CARD SORTING
To help me understand how to organize the content on the website I conducted a 30 card sort exercise of different types of clothing with 15 participants to uncover how users would categorize them. My findings on the data did not yield any strong patterns among the participants card sorting results. After analyzing the results it was clear that the card list provided to the participants was too broad. However, I was able to break down the data and extract some usable organizable information.
SITE MAP
After validating how the website should be structured and organized through the combination of the research and to a lesser extent the card sorting exercise I was able to create the site map of the website listing out all the pages.
INFORMATION ARCHITECTURE
After defining the structural design of the website I moved into determining how a user would navigate through the website to accomplish their goals and begin ideating those interactions.
TASK FLOW
The first interaction I sought out to determine is a specific task a typical user would do within the website. Here is a simple flow that a user would go through when shopping for a pair of jeans.
USER FLOW
Next up using the site map and task flow in mind I created the user flow diagram to show the happy path a user would take to purchase a pair mens jeans within the website.
LO-FI WIREFRAME SKETCHES
Sketching out multiple homepage layouts allowed me to brainstorm which layout best fitted the content that needed to be displayed.
RESPONSIVE HOMEPAGE WIREFRAMES
After choosing a homepage layout to proceed with I continued with designing the same layout on tablet and mobile frames.
ADDITIONAL DESKTOP WIREFRAMES
Next, I designed the other pages identified on the user flow which were the category, product listing, and product pages.
USER INTERFACE DESIGN
Prior to designing the high fidelity wireframes, a project goal that still needed to be address the rebranding of the logo. Afterwards creating a UI Kit that will help aid in the development of the website.
BRAND LOGO: Taking into account the brand message of having it to be neutral, modern and fresh we came up with the following.
SKETCHING A FEW ROUGH IDEAS
NARROWING AND REFINING THOSE IDEAS BASED ON FEEDBACK
FINALIZED REBRANDED LOGO
UI KIT: Afterwards, we started the the visual design of the user interface with creating a UI kit complete with design elements and components.
HIGH FIDELITY RESPONSIVE WIREFRAMES
ADDITIONAL HIGH FIDELITY DESKTOP WIREFRAMES
After finishing the first set of high fidelity wireframes I conducted the first round usability tests on the design to validate the usability. The usability test was done on a prototype created in Figma and moderated through Zoom. For this test I recruited 6 participants (3 females and 3 males) that are between 25-40 yrs old.
TASK DETAILS
To find a pair of mens slim fit jeans with a deep wash in dark navy that is priced under $70 and add it to the shopping bag.
TASK COMPLETION RATE
100%
ERROR FREE RATE
TASK OBJECTIVES
90%
• Can the user find the information they need?
• Can the user complete the assigned task?
• Can the user make an informed purchase
decision?
• Is the user interface smooth, and the process
fast and easy?
• Which errors occur for the users while
performing a specific task?
AFFINITY MAP: Shows the commonalities of the test findings between the participants to give us the insights on how delightful and effective our design is and what areas that need revisiting in the next iteration.
PROTOTYPE & USABILITY TEST
NEXT STEPS
• Continue to ideate and refine the UI prototype.
• Continue to design other pages that's on the site map.
• Continue to design other components needed for expanded user flows, starting
with highest priority features on the roadmap.
• Conduct further testing as more components and features are added.
PROJECT REFLECTIONS
This project has taught me that proper research is absolutely crucial to designing an effective product. That we are task to be problem solvers. That empathizing with the users will take the product design to new creative heights solving users problems. The design we have built up to this point has proven to be effective to complete certain tasks but is no where to be completed and will never be. In time with further iterations Variety's e-commerce website I believe will fulfill the business and customer goals. It's the process I look forward and excited to continue by adding more value and making it more desirable.
MORE PROJECTS
A responsive e-commerce website for a new airliner
Enhance the connection with friends