Head to Toe
An online store and subscription service for hygiene essentials
UI Design,
Branding
Web
Platform
Role
Timeline
Tools
Adobe XD,
Balsamiq
4 weeks
About
Head to Toe
In our fast-paced lives, we often forget to replenish our stock of hygiene essentials. How many times have you forgotten to add things like toothpaste, shampoo, or body wash to your shopping list?
Head to Toe remembers for you. Shoppers can choose from a wide variety of personal hygiene products, curate their own box for recurring shipments, and even get suggestions for new products based on their purchases.
I was tasked with designing the UI and branding guidelines for a responsive web app and online store, based on provided user stories and other specific deliverable requirements.
Help everyone find products quickly and easily to match their particular needs
Objective
For people who want to shop for key items without going into a physical store
Who
A responsive website, web app, and/or mobile app that shows users the inventory and can be filtered in particular ways depending on their needs
What
Why
Users don’t have the time or ability to visit physical stores and would rather buy their goods on the go or from home.
“…I want to be able to save my favorite products, so I can easily find them again.”
“…I want to see ratings and reviews, so I can better judge whether an item is right for me.”
Usability Testing
I asked participants to test the flow of the mid-fidelity prototype. I chose one key flow, based on the user stories, and explained a scenario in which the they would be using the app. I asked them to login to their account and return an item.
-
You are a return user and have purchased products from Head to Toe before. You recently tried a new item, but decided it wasn’t for you. You want to return the item and get your money back. Please login to your account and submit the return.
-
The mid-fidelity prototype was tested with 5 users (3 female, 2 male) ranging from 29 to 47 years old. All testers either currently use or have previously used online shopping and/or online subscription services.
-
• I successfully returned my item. It was pretty straightforward.
• I thought that everything was easy to find.
• I like that there are categories to choose from but I can also search for something if I already know what I’m looking for.
• I like that it can be a subscription service. I use a subscription for groceries and baby stuff, but not hygiene items!
-
• Rather than get money back on a credit card, maybe an incentive option for store credit: (i.e. a 10% future discount)
• A free text to add more detail about why the product wasn’t right for me.
• Too many left/right scroll options; maybe take one away and have a “Show More” link instead.
• I found the returns page easily, but I think a FAQ section would be a good addition to my Account.
• I would like to see more info about a product like ingredients and instructions.
#B3DCD6
#F0F5FA
#687482
#D7E8BC
The color palette references fresh, minty and airy colors and scents, like those found in many personal hygiene products, like toothpaste and lotions. The slate gray and fresh white, references clean and modern bathroom styles, while providing contrast for accessibility.
I referred to the usability test feedback to implement any necessary revisions to the high-fidelity screens, such as adding an option to provide more info about a return, an accordion menu that provides more details about an item and a FAQ section on the “Account” screen. I also changed the color of some features to ensure readability.
Takeaways
Having my hands on several aspects of the design process let me explore my creativity and empathize more - from the branding, to the UX and UI design of the product. But next time, I’d love to work on something like this with a team for more expert insight from others.
Animating some features was a bit of a struggle, but with lots of patience, troubleshooting and helpful tutorials, I was able to find a solution.
My initial icon colors didn’t provide enough contrast for readability. I ran the HEX codes through Webaim’s contrast checker, and decided to change the colors completely to ensure accessible design, while sticking to the overall feel and aesthetic.