top of page

The Refillery 


5 weeks. March 2023

Skills Utilized

User Research
Qualitative Testing
Digital Prototyping
Visual Design


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 


The current existing website of the shop is hard to navigate and makes it difficult for users to understand how the shopping process works.  ​


Screenshot 2023-03-20 at 11.09.31 PM.png


The website is rebranded for a coherent layout and made easy to navigate


The onboarding experience is revamped to deliver a 58% faster access speed without sacrificing accuracy. 


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. 


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.


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. 


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. 


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

bottom of page