Project Overview
Design&Shop is a platform that allows customers to customize clothing with the design of their choice and make shopping fun, fast and easy. It is designed for the users aged between 12-40 year men, women and kids. A website that can compete in the market while also trying to solve issues faced by the online shoppers.
Role
UX designer leading the responsive website design from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
Customers enjoy how simple it is to order clothing online, but they find it frustrating how the final style or design differs from what they had anticipated. They have to search for a specific pattern or style of apparel they want. Many customers want their choice of designs incorporated into the apparel they wish to purchase.
Online websites for shopping personalised clothing have a poor system for browsing products, difficulty to customise the clothing, and have a cumbersome checkout process. There are limited options to choose from while personalizing the product.
The goal was to create a responsive, user-friendly website with easy navigation and a quick checkout process for shopping customise apparel.
Design Process
Empathize
In the first phase of design process, I empathetically understood the problem that needs to be solved by observing user's experiences and behavior by conducting one-to-one interviews to discover users' goals, needs and pain points.
User Research - Qualitative Research
In order to determine the needs and pain points of the users, I conducted user interviews in which the participants were required to respond to a few open-ended questions. Participants between ages of 18-50 who have ordered customized clothing online and frequently order online were interviewed.
Interview Questions:
How often do you shop online?
Which device do you use frequently to shop online-mobile, tablet or desktop?
Would you love to customize and shop clothing online?
Which would you choose: customize clothes based on your choice or purchasing from the options offered?
How would you describe the typical online shopping experience?
What is your one of the main reason of returning clothes?
Define
The next phase in the design process is to define. It involves combining and analyzing the information I gathered throughout the empathize phase by conducting research, to define the main problem that needs to be solved.
Persona, Empathy Maps, User Journey
After the user research, I created one persona to keep my focus on who my users are and to better understand their goals and frustration areas.
I designed an Empathy Map to better understand about the user's behavior, thoughts and feeling. This helped me to examine problem from user's perspective.
The user journey of Riya's experience using the online shopping website to help identify the areas for improvements before starting the ideation phase.
Problem Statement:
How might we design a shopping website for those who want to customize and shop online with effective and error-free experience?
Ideate
Now that I am aware of the goals and needs of the users, it's the time to come up with creative solutions to the defined problem, by creating information architecture, user flows, wireframes, and design mock-ups.
Crazy Eight
I sketched few designs based on my ideas on how can I solve user problems and make it easy for them to use and navigate through the website. Main focus was on how to make it easy and less-cluttered to personalize the product online based on their choices.
Sitemap
Before starting with wireframing, the main purpose to create the sitemap was to improve the overall website navigation for the users and also keeping track of all screens that is to be included in the design.
Sketches, Wireframes, Design mockups
With an idea of all the screens to be included, I starting sketching paper wireframes to get an idea how exactly it would look like. I sketched paper wireframes for desktop version.
Iterated few paper wireframes for Home Screen.
I used the paper wireframes I had previously developed to guide my digital wireframe creation in Figma.
Home
Categories to select from
Payment method
Personalize apparel
Cart
Then I created design mockups for each wireframe using design elements like typography, iconography and images.
Prototype
In the next phase in the design process is to make a clickable prototype to test with users in order to determine whether or not the solution is effective and usable for them.
The clickable prototype: Prototype
Test
In the final phase, the focus is on testing the prototype with the users by conducting usability testing to gather feedback and pinpoint any challenges, difficulties users have encountered.
Usability Testing
I conducted unmoderated usability study using the high-fidelity prototype. The usability test was conducted to determine whether the design solves user needs and pain points that were identified during the research phase. Each participant has to complete the task and by reviewing the feedback I received, I can identify the major takeaways.
Parameters
Study type: Unmoderated usability study
Location: India, remote
Participants: 5 participants
Length: 20-25 minutes
Final Design Mockups
High-fidelity prototype
Based on the user feedback I gathered throughout the usability testing, I made changes to the design mockups and prototype.
On click you can interact with the prototype: High Fidelity Prototype
Accessibility considerations
I maintained the heading and the text content with different sized text for clear visual hierarchy.
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Use of icons and images to make it easy for the users to understand, navigate and maintain the user flow.
Maintained the order in which sentences and paragraphs are presented by the app preserves continuity and does not change the meaning of the content.
What I learned
Despite the fact that the problem I was attempting to solve was large, I discovered that following each phase of the design process and aligning with specific user needs helped me come up with solutions that were both realistic and useful.
I learnt that interviews, usability study are great to get feedback to make design and experience much better and user-driven.
Despite the fact that I designed a product to solve the given problem statement, there may still be opportunities and ways to enhance the user experience with fresh technology developments.
Next steps
Conduct a research on how successful the website has been in achieving users’ needs.
Including the policy for damaged and incorrect order received.
Adding a feature of personalizing the preowned clothing.