The Refillery
Duration
5 weeks. March 2023
Skills Utilized
User Research
Qualitative Testing
Digital Prototyping
Visual Design
Summary
This project seeks to enhance the customer online experience for a local refillery that promotes zero waste and sustainable shopping practices. To achieve this, the project team will focus on establishing a consistent branding system and creating a new onboarding experience that is user-friendly, while also promoting sustainability values.
Snapshot of the Final Prototype
What is The Refillery?
Located in Pittsburgh, The Refillery is a type of “zero-waste” store where you bring empty containers to reuse & refill with personal & home essentials. You choose the amount you want and then you pay by weight.
01 Problem & Solution
Problem
The current existing website of the shop is hard to navigate and makes it difficult for users to understand how the shopping process works.
Solution
1
The website is rebranded for a coherent layout and made easy to navigate.
2
The onboarding experience is revamped to deliver a 58% faster access speed without sacrificing accuracy.
3
The newly implemented interactive game improves user engagement and understanding of the processes, boosting users' confidence in making purchases.
02 Preliminary Survey
Initial Survey Result
More than 90% of the respondents have never heard of the idea or are unfamiliar with the process.
After a quick introduction to the concept, 90% of them appreciate the uniqueness and expressed their desire to learn more about the experience and try it out for themselves.
Takeaway
Lack of awareness: most users are not familiar with the concept
Strong interests but lack of proper resources: a user-friendly onboarding experience would help users adapt more easily to the platform and understand its features and functions.
03 Design & Prototype
Original Website
Home Page
How Does It Work Page
Issues with the website
-
Typefaces with low readability are utilized
-
Absence of layout and imagery consistency
-
Indistinct hierarchy
-
Inadequate utilization of negative space
-
Excessive text density
-
Overwhelming information presentation
First Iteration
Option 1
Navigate to Tutorial Page from the navigation bar. Scroll downwards and hover to reveal text.
Observation
The participants encountered some technical difficulties navigating through the page, with some of them having to go back and forth repeatedly, resulting in a less than smooth process.
Option 2
Scroll down to reveal the tutorial page. Scroll left to reveal each step.
Observation
Participants were able to navigate through the page and understand the process quickly. The horizontal scroll was particularly intuitive.
Option 3
Interactive game to simulate a shopping experience.
Observation
Some participants experienced moments of uncertainty and needed to go back and review the instructions. Additionally, a few fast readers found that the "Next" button appeared too slowly, causing some slight delays in their progress.
04 User Testing
After conducting 10 AB tests, the results indicate the following preferences among users:
-
90% of users prefer option 2 due to its simplicity, straightforwardness, convenient placement on the homepage, and high efficiency.
-
10% of users prefer option 3 for its interactive nature and engaging practice activities.
-
All users expressed a dislike for option 1 due to its challenging navigation and the need to repeatedly hover and unhover to reveal text.
Average time spent by users to browse each page:
-
60 - Second Original Website: "How does it work" Page
-
38 - Second Option 1: Hover & Scroll Tutorial Page
-
25 - Second Option 2: Horizontal Scroll Tutorial Page
-
54 - Second Option 3: Interactive Game
Compared to the original website, the new design option 2 allows a 58% faster access speed without sacrificing accuracy.
05 Improved Final Prototype
Based on the results and feedback gathered from user testing, I have decided to integrate options 2 and 3 into a combined prototype for further development.
Redesigned Homepage
Embeded in the homepage, the tutorial section allows the users to choose to read a quick tutorial or play an interactive game.
Interactive Game - Teach the users to bring a clean container instead of a dirty one.
Improvement - Action words like "Pick", "Click" are bolded to help users quickly pickup and understand the instruction.
Interactive Game - "Next" button pops up faster and ensures a smoother transition for fast readers.
Website UI Guidelines
The website's visual identity features earthy neutral tones with orange accents that exude sophistication, warmth, reliability, and comfort. The imagery is simple and contemporary, and the website's overall appearance is clean and welcoming.
06 Conclusion
Through the process of prototyping and iterative revisions, I was able to enhance the overall visual consistency of the website and communicate a polished and inviting brand identity that aligns with the sustainability theme of the store.
Despite the time and scope constraints, I was successful in improving the website's usability and achieving short-term benefits such as enhanced access speed and increased user engagement.
If I were to be given additional time, it would be beneficial to conduct further analyses, including evaluating the percentage of users who engage with the various tutorial options and conducting in-store surveys to determine whether new customers can effectively complete the refilling process independently after reviewing the tutorials.
Final Prototype Created with Figma