Mr. Turtle
Designed a website and kiosk interface that empowers users to easily refill sustainable cleaning products and reduce waste.
INTRODUCTION
Every year, 17.6 billion pounds of plastic packaging ends up in our oceans.
Mr. Turtle is a company committed to reducing single-use plastics through refill machines that encourage customers to reuse containers for everyday essentials like laundry detergent, dish soap, and hand soap. Their refill machines are currently installed in retail stores, laundromats, and college campuses.
ROLE
UX Design Lead
TEAM
2 design leads, 4 designers
TOOLS
Figma, Adobe Illustrator, Google Forms
PROBLEM IDENTIFICATION
An outdated kiosk experience deterred potential customers from using the machines.
Despite a strong mission, Mr. Turtle’s refill machines had low engagement due to an outdated kiosk interface. The original design only consisted of four screens which left users unclear about what steps to take when refilling products.
The Existing Interface
The Mr. Turtle team approached my design team at Cal Poly Iter8 (Product Design Agency) with two requests:
-
Redesign their kiosk interface on refill machines: create a playful and intuitive experience, introduce a new rewards system to boost engagement, and reflect the brand’s identity.
-
Redesign their B2B website: refresh the design of their website to look more professional and engaging, with a focus on B2B clients
USER RESEARCH
How can we create a seamless self-service machine?
To better understand user needs, we interviewed 12 participants about their frustrations with self-service kiosks.
The main pain points we gathered were:
-
Lack of product photos made it difficult for users to confirm selections
-
Errors on machines required staff assistance, leading to longer wait times
-
Poor hierarchy and categorization of products made items difficult to find
These insights guided the features and flow for our redesigned experience.
USER JOURNEY
Mapping out the path for new and returning users
We created journey maps for both first-time users and returning customers, ensuring every step, from approaching the machine to completing payment, was clear and guided.
DESIGN PROCESS
Building a foundation for the new experience
We started with low-fidelity wireframes to explore layouts quickly and confirm how screens would flow from one to the next. This allowed us to test the structure of the experience before refining visuals.
DESIGN SYSTEM
Refreshing Mr.Turtle’s playful and sustainable brand identity
Although Mr. Turtle had an existing design system, our clients wanted a refresh that was easily digestible and accessible. We updated colors, typography, and iconography to unify both the kiosk and website.
Additionally, all of these icons were illustrated by me in Adobe Illustrator! These icons were used throughout the kiosk to provide users with a visual guide while using the machine.
USER TESTING
Testing our ideas and learning from real users
At the mid-fidelity stage, we added brand elements and tested our designs with 13 users across different age groups. I conducted think-aloud sessions to understand users’ thoughts as they navigated each screen.
The key findings from my tests were:
-
Popups detailing the ingredients of detergent products were not intuitive
-
A centered button on the welcome screen would make it more clear on where to get started
-
Users were confused about payment confirmation and suggested clearer indicators, like a wireless symbol and displaying the total cost upfront
FINAL DESIGNS
Creating a clearer, more engaging refill experience
Our final kiosk flow guides users step by step, includes the new rewards system, and has clarified product and payment details.
FINAL DESIGNS
Bringing professionalism and trust to B2B partnerships
In parallel with the kiosk work, we also redesigned Mr. Turtle’s website with a cleaner, more professional look. The site highlights the company’s mission while appealing to B2B clients such as retail partners and campus organizations. Read more about the redesign here: Mr. Turtle Website Redesign.
Visit the live site here!
REFLECTION
Results & Lessons Learned
Both of our kiosk and website designs were developed and implemented by the Mr. Turtle team! View the website here!
I had a wonderful time collaborating on this project with the founders and developers at Mr. Turtle. I learned so much from the experience, and these are some of the challenges we faced:
-
Balancing two projects on a tight timeline: Working on both the kiosk and website redesigns limited how often we could test our designs in earlier stages. Therefore, we had to prioritize the most critical usability issues. If given more time, I would’ve done more user testing during the low- and mid-fidelity stages.
-
Keeping Six Designers Aligned on One Vision: With our team of 6 designers, most of our design work was delegated to each team member and completed individually. In the beginning stages of designing, the screens lacked cohesion due to each designer’s distinct style. However, creating a refreshed brand identity helped ensure visual consistency across all of the final deliverables.
A huge thank you to my incredible team at Cal Poly Iter8 for making this project a success! It was a pleasure leading and designing alongside all of you :)
View my other projects!
Pringles Redesign
PACKAGING DESIGN • ILLUSTRATION
Mustang Media Group
EDITORIAL DESIGN • LAYOUT
Guavalanche