Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
A UX/UI Project on Bridging Hydration and Business with Smart Design
Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Industry
Drink industry
Drink industry
Drink industry
Duration
9 days
9 days
9 days
This is an ongoing real-world project that I am actively refining and working on with Wonderfill. The following content originates from the pilot project I completed during the IronHack BootCamp. More details will be added soon.
During my time in IronHack bootcamp, I led a project with two other UX designers, Kasia and Jess, to develop a mobile app for Wonderfill (formerly known as Fountain Impact). The primary business objective was to increase the usage of these stations through the app and fit in their new business model of letting users pay for drinks by viewing ads in the app. We were also encouraged to brainstorm a new branding for the company.
This is an ongoing real-world project that I am actively refining and working on with Wonderfill. The following content originates from the pilot project I completed during the IronHack BootCamp. More details will be added soon.
During my time in IronHack bootcamp, I led a project with two other UX designers, Kasia and Jess, to develop a mobile app for Wonderfill (formerly known as Fountain Impact). The primary business objective was to increase the usage of these stations through the app and fit in their new business model of letting users pay for drinks by viewing ads in the app. We were also encouraged to brainstorm a new branding for the company.
About Wonderfill
About Wonderfill
Wonderfill is a Swiss company that aims to reduce single-use plastic waste with smart water refill stations that offer clean water and enhanced drinks with different flavours. The company is co-founded by Alexander Pfyffer and Luca Pfyffer, and they currently have three business models for their fountain machines: B2B business subscription, direct B2C sales through their machines and the latest model - targeted advertising and brand partnerships.
Wonderfill is a Swiss company that aims to reduce single-use plastic waste with smart water refill stations that offer clean water and enhanced drinks with different flavours. The company is co-founded by Alexander Pfyffer and Luca Pfyffer, and they currently have three business models for their fountain machines: B2B business subscription, direct B2C sales through their machines and the latest model - targeted advertising and brand partnerships.
Context
Context
Challenge
Wonderfill aimed to strengthen its market position by addressing two critical business challenges:
Boosting refill rates: The company needed to increase the frequency at which users refill their bottles at the stations.
Building customer engagement: The app needed to serve as a tool to engage users beyond mere transactions, fostering loyalty and recurring usage.
Our challenge was to design a mobile app that not only facilitated easy access to refill stations, but also incentivized and retained users through features that align with Fountain Impact’s business strategy.
Research
To further refine our business approach, we conducted surveys targeting potential users. Insights included:
Consumer Motivation: 74% of respondents indicated they would download the app for the convenience of finding refill stations, with added incentives like discounts and environmental impact tracking.
Market Differentiation: Users showed a strong preference for apps that offer educational content and rewards for sustainable practices, providing a clear opportunity to differentiate Fountain Impact from competitors.
These findings highlighted the importance of integrating features that not only meet user needs but also encourage frequent app usage, thereby driving repeat business and enhancing customer lifetime value.
Challenge
Wonderfill aimed to strengthen its market position by addressing two critical business challenges:
Boosting refill rates: The company needed to increase the frequency at which users refill their bottles at the stations.
Building customer engagement: The app needed to serve as a tool to engage users beyond mere transactions, fostering loyalty and recurring usage.
Our challenge was to design a mobile app that not only facilitated easy access to refill stations, but also incentivized and retained users through features that align with Fountain Impact’s business strategy.
Research
To further refine our business approach, we conducted surveys targeting potential users. Insights included:
Consumer Motivation: 74% of respondents indicated they would download the app for the convenience of finding refill stations, with added incentives like discounts and environmental impact tracking.
Market Differentiation: Users showed a strong preference for apps that offer educational content and rewards for sustainable practices, providing a clear opportunity to differentiate Fountain Impact from competitors.
These findings highlighted the importance of integrating features that not only meet user needs but also encourage frequent app usage, thereby driving repeat business and enhancing customer lifetime value.
Design process
Design process
User Personas & Journey Mapping
We developed user personas to better understand our target market. For instance, our persona, Hans, represents a typical busy teacher in Zurich who values sustainability and wants to be a better role model for his students.
This persona informed several business-critical features:
Push Notifications: Reminders to bring a bottle, driving both app engagement and refill station usage.
Refill Station Locator: A feature that prioritizes nearby stations, enhancing user convenience and increasing usage rates.
Environmental Impact Tracking: Real-time updates on how each refill contributes to reducing plastic waste, fostering a sense of purpose and loyalty.
By mapping Hans’ journey, we identified key opportunities to enhance user experience while also driving business outcomes, such as increased station visits and app engagement.
Problem Statement
Our research led to a clear problem statement for our users that guided the ideation process: Thirsty city folks need to find a way to be hydrated easily and sustainably because they want to minimize their plastic footprint. We also then created a problem tree for our business objectives:
Main Business Objective: Increase the frequency and volume of refill station usage through an engaging, user-friendly app.
Sub-Objectives:
Drive App Adoption: Encourage users to download and regularly use the app.
Enhance User Retention: Implement features that incentivize repeat usage and build brand loyalty.
Monetize User Engagement: Explore opportunities for sponsored content and partnerships within the app.
Feature Prioritisation & User Flow
We prioritized features using the MoSCoW method, ensuring a balance between user needs and business goals.
Critical features included the refill station map, impact tracking, and user-friendly sponsored content, all of which are designed to drive core business objectives.
Once we had the features prioritised, we created a user flow to illustrate users can use the app to use the different functions and ultimately get rewards to encourage next purchase.
Sitemap
Having the user flow in hand, creating the sitemap was simple.
Mid-Fi Wireframe
Here we have our first mid-fi wireframe and prototype. Our prototype focused on the loading screen, home page which includes sponsored article and water intake settings, map for searching a Fountain refill station as well as normal water fountains, reward page, scanning page and settings.
User Personas & Journey Mapping
We developed user personas to better understand our target market. For instance, our persona, Hans, represents a typical busy teacher in Zurich who values sustainability and wants to be a better role model for his students.
This persona informed several business-critical features:
Push Notifications: Reminders to bring a bottle, driving both app engagement and refill station usage.
Refill Station Locator: A feature that prioritizes nearby stations, enhancing user convenience and increasing usage rates.
Environmental Impact Tracking: Real-time updates on how each refill contributes to reducing plastic waste, fostering a sense of purpose and loyalty.
By mapping Hans’ journey, we identified key opportunities to enhance user experience while also driving business outcomes, such as increased station visits and app engagement.
Problem Statement
Our research led to a clear problem statement for our users that guided the ideation process: Thirsty city folks need to find a way to be hydrated easily and sustainably because they want to minimize their plastic footprint. We also then created a problem tree for our business objectives:
Main Business Objective: Increase the frequency and volume of refill station usage through an engaging, user-friendly app.
Sub-Objectives:
Drive App Adoption: Encourage users to download and regularly use the app.
Enhance User Retention: Implement features that incentivize repeat usage and build brand loyalty.
Monetize User Engagement: Explore opportunities for sponsored content and partnerships within the app.
Feature Prioritisation & User Flow
We prioritized features using the MoSCoW method, ensuring a balance between user needs and business goals.
Critical features included the refill station map, impact tracking, and user-friendly sponsored content, all of which are designed to drive core business objectives.
Once we had the features prioritised, we created a user flow to illustrate users can use the app to use the different functions and ultimately get rewards to encourage next purchase.
Sitemap
Having the user flow in hand, creating the sitemap was simple.
Mid-Fi Wireframe
Here we have our first mid-fi wireframe and prototype. Our prototype focused on the loading screen, home page which includes sponsored article and water intake settings, map for searching a Fountain refill station as well as normal water fountains, reward page, scanning page and settings.
Validation
Validation
User testing
The prototype was then tested with users to ensure they aligned with both user expectations and business goals. We received great feedback from both our users and stakeholders, thus the following key changes were made:
Defined Homepage: On our homepage, our users found the water tracker confusing and the automated slider distracting. Our stakeholders also pointed out that we should emphasise the scan function as well as the coins display, to focus on the business objectives. Thus, we removed the animation on the impact banner, removed the water intake function completely as it is not our main focus of the app, and placed the coins, scanning and redeeming function on the top banner to bring more attention to them.
Enhanced Rewards Page: On the coins page, we got feedback that the current coin amount is not noticeable as it is quite small on the right corner. Our stakeholders also mentioned that the 'previous actions' display is too flashy and would like to bring more focus to the redeem button instead. Therefore, we made the current coin amount as a bar, and placed the more important buttons at the top of the button list, encouraging users to engage with sponsored content in exchange for tangible rewards.
Clear Onboarding: Our users and stakeholders both loved the animation when they opened the app, however would like to have a chance to learn more about the app as an onboarding. Hence, we added an onboarding procedure as well as a login screen for both new and existing users.
These refinements ensured that the app would not only meet user needs but also support Fountain Impact’s broader business objectives.
Mood Board, Style Guide & Components
Once we finalised the mid-fi prototype, we created a mood board of how we think Wonderfill can be changed.
One thing we noticed is that the original style has a lot of different colours, therefore for the new style we focused on the blue-green colour that symbolises the fresh water, and also used yellow as a secondary colour to illustrate the added flavour. We also used 3d visuals to give a fun and vibrant energy to the product. At the time of our project, we used Yuwa instead of Fountain Impact for the final product's new name with our stakeholders' suggestions on a new name.
User testing
The prototype was then tested with users to ensure they aligned with both user expectations and business goals. We received great feedback from both our users and stakeholders, thus the following key changes were made:
Defined Homepage: On our homepage, our users found the water tracker confusing and the automated slider distracting. Our stakeholders also pointed out that we should emphasise the scan function as well as the coins display, to focus on the business objectives. Thus, we removed the animation on the impact banner, removed the water intake function completely as it is not our main focus of the app, and placed the coins, scanning and redeeming function on the top banner to bring more attention to them.
Enhanced Rewards Page: On the coins page, we got feedback that the current coin amount is not noticeable as it is quite small on the right corner. Our stakeholders also mentioned that the 'previous actions' display is too flashy and would like to bring more focus to the redeem button instead. Therefore, we made the current coin amount as a bar, and placed the more important buttons at the top of the button list, encouraging users to engage with sponsored content in exchange for tangible rewards.
Clear Onboarding: Our users and stakeholders both loved the animation when they opened the app, however would like to have a chance to learn more about the app as an onboarding. Hence, we added an onboarding procedure as well as a login screen for both new and existing users.
These refinements ensured that the app would not only meet user needs but also support Fountain Impact’s broader business objectives.
Mood Board, Style Guide & Components
Once we finalised the mid-fi prototype, we created a mood board of how we think Wonderfill can be changed.
One thing we noticed is that the original style has a lot of different colours, therefore for the new style we focused on the blue-green colour that symbolises the fresh water, and also used yellow as a secondary colour to illustrate the added flavour. We also used 3d visuals to give a fun and vibrant energy to the product. At the time of our project, we used Yuwa instead of Fountain Impact for the final product's new name with our stakeholders' suggestions on a new name.
Results
Results
High-Fidelity Design
The final high-fidelity prototype reflected Wonderfill’s new brand values and business goals. The app’s UI was crafted to maximize user engagement while also highlighting key business features like sponsored content and impact tracking. Here you can explore the design prototype directly on Figma and see it in action in the video:
Key Learnings
Through designing the app, we learnt the importance of aligning user needs with business goals. By focusing on user-centric design and iterative feedback, we were able to create an app that not only meets the functional requirements but also supports the company’s mission to reduce plastic waste. As always, flexibility and iteration were key in our project.
Next Steps
Moving forward, the focus will be on expanding the app’s reach through targeted marketing campaigns and exploring partnerships with educational institutions and brands aligned with Wonderfill’s sustainability mission. Continuous user testing and iterative design will ensure that the app remains relevant and effective in driving business growth.
High-Fidelity Design
The final high-fidelity prototype reflected Wonderfill’s new brand values and business goals. The app’s UI was crafted to maximize user engagement while also highlighting key business features like sponsored content and impact tracking. Here you can explore the design prototype directly on Figma and see it in action in the video:
Key Learnings
Through designing the app, we learnt the importance of aligning user needs with business goals. By focusing on user-centric design and iterative feedback, we were able to create an app that not only meets the functional requirements but also supports the company’s mission to reduce plastic waste. As always, flexibility and iteration were key in our project.
Next Steps
Moving forward, the focus will be on expanding the app’s reach through targeted marketing campaigns and exploring partnerships with educational institutions and brands aligned with Wonderfill’s sustainability mission. Continuous user testing and iterative design will ensure that the app remains relevant and effective in driving business growth.
Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
A UX/UI Project on Bridging Hydration and Business with Smart Design
Redesigning Dropout with Nielson’s Principals for Uninterrupted Comedy Gold
Honing the Comedy Experience with Usability Heuristic Principles
Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
A UX/UI Project with Studio Nidra