Skip links

The Soap Dispensary & Kitchen Staples

A website to facilitate a zero waste journey
Icons for: Figma, Illustrator, Photoshop, Miro, Zoom, Optimal Workshop and Useberry

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​

Site Audit + Review​

After an audit and review of their website five key areas for improvement were identified:

The Soap Dispensary current website
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

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.

The Soap Dispensary card sort results table

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.

The Soap Dispensary heatmap images

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.

Checkout wireframes for The Soap Dispensary website
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.

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.

The Soap Dispensary accessibility color contrast

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.