The Soap Dispensary & Kitchen Staples
A website to facilitate a zero waste journey
- Project: Website Redesign Student Project
- Team: Erin James + Ashima Mittal
- Roles: UX Researcher/Designer, UI Designer
- Duration: 10 weeks
- Design Toolkit
About
The Soap Dispensary and Kitchen Staples opened in 2011 and is Vancouver's first refill shop, offering minimal impact and package free products from cleaners, body care and food items. The focus of the project was to improve the current website and streamline the shopping experience; ultimately helping and encouraging more people to follow a mindful zero waste lifestyle.
Discover
Introduction
Packaging waste forms the most dominant share in the world’s solid waste pollution, with an estimated 8 million tonnes of plastic entering the world's oceans each year. The Soap Dispensary is helping to change this with their zero waste products. However to be successful they need a strong online presence, and what this project aims to improve upon.
Initial Assumptions
- Zero waste products are more expensive than conventionally packaged ones
- Availability is not sufficient to cater to larger populations, making it extremely inconvenient
- There is limited public awareness around the concept of zero waste and its benefits
Site Audit + Review
After an audit and review of their website five key areas for improvement were identified:
- Inconsistent user experience and visual design
- Overwhelming and confusing navigation
- No education or information about zero waste and its importance
- No clear information on how to shop for refillable products
- Absence of a strong and impactful brand story or unique selling point
DEFINE
Interviews
Interviews were performed with four people from our target audience between the ages of 30-40. They provided valuable feedback to help shape the direction and validated previously identified assumptions.
Interview Validations
- Affordability and convenience were the top dominating customer motivations
- Lack of awareness and clear understanding around the zero waste concept contributed towards a perceived complexity around the subject
- A seamless shopping experience that supports delivery would encourage people to try transitioning to zero waste products
Research + Design Opportunities
Further research was done after the interview process to help define the direction and design opportunities through: competitive analysis, proto and iterated personas, affinity and experience mapping and user flows.
Problem Statement
“How might we motivate and sustain higher customer engagement and increase customer trials through a streamlined shopping experience and impactful education around zero waste?”
Goals + Opportunities
Through the research and analysis the following opportunities were established to assist in solving the core problem at hand:
Seamless Navigation: Re-structure the site content and main navigation to provide clear information and reduce cognitive overload. Add a robust filtering system for customers to narrow down their search removing time consuming frictions.
Affordability: Showcase incentives, rewards, and reduced cost with custom kits and subscriptions to balance overall costs.
Convenience: Provide a simple and easy process for how to shop in-store and online to facilitate and enhance a seamless customer experience.
Education: Educate customers around the subject of zero waste, through statistical and fact based data to build trust and increase motivation.
Trust: Highlight the brand story and the impact The Soap Dispensary is making in the community through testimonials, local brand associations, consistent visual design and encouraging written tone.
DEVELOP
Information Architecture
Moving into the develop phase, a site map was created to better structure the overall site and maximize clarity and ease of use. A large portion of time was focused on restructuring products and product categories to reduce frictions.
Wireframes
With the research and design opportunities established it was time to start sketching out ideas to best map out the site structure. These helped inform the page structures for the low fidelity wireframes which were created with a focus on the core opportunities established.
Usability Testing
Card Sort Testing
20 participants tested the redefined navigation structure using a card sorting test through Optimal Workshop to validate and obtain insights. Results were mainly positive, with minor discrepancies indicating opportunities for more descriptive naming and category reassignment for certain products. The sitemap was updated to reflect these findings.
User Flow Testing
Through Useberry, 10 participants tested the user flow to look for and purchase a refillable shampoo for delivery to their home. 9 out of 10 participants were successful in completing the given task with positive and valuable feedback indicating specific areas for improvement.
Participant Feedback
“The place order button (lower right) feels like a first step maybe? I kept wondering why it was there throughout the process?”
To fix this the prototype was updated to have the button in a disabled state until the final step was complete where it would then become active.
Deliver
Final Solution: Before + Afters
The final website redesign successfully incorporates the primary goals and design recommendations, applying a well defined visual design and creating a cohesive user experience.
Seamless Navigation: The current navigation is overwhelming and makes it hard to locate products. The solution uses progressive disclosure to reduce cognitive overload and create a seamless experience.
Seamless Navigation: Robust filtering and search options on the shop page provide a better user experience. Their current site does not offer this additional search functionality.
Affordability: The creation of custom kits that allow customers to trial products at more affordable rates are showcased. Currently the only cost incentive they have is in the promo banner with 10% off first orders.
Convenience: Provides clear instructions on how to shop in-store and online. This is currently located in a video and only offers information for shopping in-store.
Education: Highlights zero waste and its importance is essential for customers to understand the benefits of shopping at The Soap Dispensary. They currently don’t provide this content.
Trust: Achieved through consistent visual design combined with an inviting and encouraging written tone. Currently their site feels disjointed with inconsistent visual design and user experience.
Accessibility
A focus on accessibility was important for the redesign as the current site has issues, in particular with color and font use. In the redesign colors, font sizing and weight were used to maximize legibility and fix accessibility issues on their website.
Using WebAIM to check the color contrast the footer was brought up from a 2.19 to a 10.31 rating that meets WCAG AAA requirements.
High Fidelity Walkthrough
Next Steps
Overall the final design is effective and provides many opportunities for The Soap Dispensary to stand out and position themselves as a leader in this market. Next steps are to perform additional usability testing, iterations and build out responsive sizes.