THINK
Responsive e-commerce for apparel brand
About the project
THINK is a successful apparel brand around the world with brick and mortar stores. They decided to launch an online store during the pandemic. I spearheaded end-to-end design for their first e-commerce website.
*Disclaimer: This is a fictional project at Designlab.
| Client | : | THINK (Design Lab UX Academy) |
| Role | : | UI/UX design, Research, Brading |
| Duration | : | 4 weeks |
| Tools | : | Figma, Whimsical, Photoshop |
The Challenge
- THINK sells over 300+ items from tops for maternity women to shoes for kids.
- The main challenge was allowing users to find the right item most efficiently. The secondary goal was to build a strong brand and provide a consistent look and feel whatever they are looking for.
The solution
I designed an e-commerce with the best categorization working for most users by doing a card sorting. I researched important information (Size, Discount, and In-stock) for online clothing shopping and made sure to show them clearly. In order to build a strong brand, I created a logo and UI Kit.
Here’s how i solved the problem
RESEARCH
Interviewed with users who often buy clothes online and created a persona
IDEATION
Made a storyboard and user flows to design the best solution
PROTOTYPING
Made a bunch of wireframes and hosted usability test
RESEARCH
Online Shopping is time consuming especially when it comes to shopping clothes
Interview with users who often buy clothes online
I conducted user interviews with 4 people who bought clothes online in the past 30 days. Users are frustrated if the website doesn’t tell them the following things.
- Discount: Find the best deal quickly. They search for available coupons before check-out.
- Size: Knowing the right size is really important.
- Availability: They believe all items shown on the website are in-stock.
May users sped much time to find above things and hidden information related to them cause more frustration. For example, 1 participant showed me how to find discount code/coupon before checkout. Another interviewee used chat support to make sure if the size fits her body shape.
Making sure to show these 3 information upfront is the most important.
Persona
I created a persona based on the research. She spends lots of time on finding the right size and best deal when she shops online.
She is also interested in supporting local stores and choosing clothes using sustainable materials.
Competitor Analysis
I analyzed 3 big apparel websites. Interestingly, each online store has its own categorization. Users need to learn their categorization every time they visit a new clothing website.
I needed to find the best categorization for THINK because there was no industrial standard yet.
I conducted card sorting with 5 people who often buy clothes online. Most participants preferred gender/body type categorization on top.
Here is a sitemap for THINK:
IDEATION
Design the e-commerce to allow users
to find the right item as quickly as possible
Storyboard
I created a storyboard so that I can list up all required features and pages.
This storyboard activity made it clear that our persona doesn’t hesitate to buy her favorite brands online because she knows the quality. However she needs advices to confirm her size before buying items. Even though the store accepts free return, she feels bad if she purchases a wrong size.
User Flows
I created User Flows to identify user journeys and better navigation.
I realized that homepage is very important since users tend to click the campaign banner or hero image if these look interesting. If not, navigation/category menu need to be visible enough.
PROTOTYPING
Explored the important information
for home page and each page
Paper Sketch
I sketched some ideas for the homepage on paper. I originally tried to have a fixed customer support button (chat button), but took out by group crits feedback that the chat button hides the important elements of the page.
Wireframe
Once I decided the direction, I made a digital wireframe for main pages such as home page, category page, and item page.
Home page
Category page
Item page
Branding
The client wanted to rebrand at the launch of the online store. Perceptions of the brands were disjointed by each branch because store managers owned all operations without central guidelines.
I made a brand statement for THINK as below. Based on the user interview, our persona cares about sustainability and believes in THINK’s quality.
Brand Statement
“THINK is an ethical and sustainable apparel brand making everyone accessible for high-quality clothes at a reasonable price”
Mood board
UI kit
User Testing
I conducted a usability test with 5 people and group interviews with 10 people to validate the prototype. Here are insights I found:
- Showing more items on top increases the trustworthy of the website
- Want to browse sale items first
- Navigation works for all participants
Based on the usability test, I revised the top page as below.
BEFORE
AFTER
Hi-Fi Prototype
After some usability testings, I finalized the hi-fi prototype as below. All participants could complete a main task (add a peplum T-shirt to a shopping bag).
Home page
Category page
Item page
TAKEAWAYS
I found it interesting that people have different preferences for online clothing shopping. Some people really love browsing what’s out there while others feel browsing around is wasting time.
I focused on users who go to the website to find a specific item (clothing category) at this time. If I had more time, I would like to explore how the browsing journey looks like and how I should improve the home page and campaign page for it.
Related Projects
