top of page
featured screens in EcoFill app

EcoFill

Introducing EcoFill, the groundbreaking circular economy app that revolutionizes the way we consume and reduce our waste. With the aim to promote sustainability and eliminate the need for repurchasing single-use products, EcoFill helps users easily locate refill stations for a wide range of everyday items.

Role

UX/UI designer

Project type

Independent passion project

Duration

6 weeks

Tools used

Figma

Canva

Design method

Design ​Thinking

How can EcoFill play a role in saving marine wildlife?

Image by Meritt Thomas

Waste reduction

Refilling eliminates the need for single-use packaging, reducing the amount of waste generated. By utilizing existing containers and refilling them with products, we significantly decrease the amount of discarded packaging that ends up in landfills or incinerators.

Reduced pollution

Traditional production of single-use items often involves the use of harmful chemicals and pollutants. By opting for refilling, we minimize the demand for these harmful substances, leading to cleaner air, water, and soil.

Behaviour change and awareness

The act of refilling prompts individuals to consider their consumption patterns and become more conscious of their environmental impact. Engaging in refilling fosters a mindset shift towards a more sustainable lifestyle

Economic benefit

The circular economy created through refilling opens avenues for new businesses and job opportunities. It encourages local economies to develop refill stations and support eco-friendly practices, leading to job creation and economic growth in sustainable sectors.

Resource conservation

Refilling helps conserve valuable resources by extending the lifespan of products and their containers. Rather than continually producing new items, refilling allows us to make the most out of the resources already in circulation, reducing the demand for raw materials, energy, and water required for manufacturing new products.

Energy an carbon footprint reduction

The process of manufacturing, packaging, and transporting new products requires substantial amounts of energy and contributes to greenhouse gas emissions. Refilling eliminates or significantly reduces these stages, leading to lower energy consumption and a reduced carbon footprint.

How I chose to approach the problem?

Image showing Design Thinking process

Getting to know the users and empathizing with them

User Research and Insights

I conducted user interviews as a fantastic opportunity to gain insight on how users feel about a circular economy, reducing single-use packaging, and minimizing plastic waste. Throughout the course of the interview, here are some of the questions asked.

About 20% of weekly garbage accumulated is plastic waste.

More households are looking into reducing their plastic waste footprint.

1. How often do you find yourself purchasing products that come in single-use packaging?

2. What are your thoughts on the current state of plastic packaging waste and its impact on the environment?

3. Have you ever considered reusing plastic packaging instead of disposing of it? If so, what challenges have you encountered?

4. What is your opinion on refill stations as an alternative to repurchasing products?

5. Are there any barriers that prevent you from using them? 

6. How would you perceive a mobile app that promotes refilling packaging at specific locations? What features or benefits would you expect it to offer?

7. Can you think of any incentives or rewards that would encourage you to choose refilling options more regularly over repurchasing?

Sketch Arrow

Not many people understand that only a tiny percentage of all plastic is recycled, even if they practice proper disposal.

Consumers generally reuse their glass and plastic packaging if they are big enough and able to completely remove labels.

Consumers are willing to refill their products if its cheaper.

User Personas

persona 1
persona 2

Defining the users' problem

As an environmentalist and an avid beach goer, I want to make a conscious effort to reduce my use of single-use plastics, refill instead of repurchase so that I can contribute to a circular economy for improved marine life but it's challenging because manufacturers insist on producing single-use plastic packaging and goods. 

Generating ideas

Image showing "how might we" questions used

Wireframing, feedback, and iterations.

initial paper wireframing exercise

In this case study, I aimed to design a user-friendly interface for EcoFill. I started with early wireframes of splash screen, "create an account", login screen, home screen, and more. However, after testing the initial design among 11 users, I received feedback that revealed the design needed more work. As a result,  another wireframing exercise was conducted to improve the design and ensure that it met the needs of our users. This iterative process allowed me to create a more effective and user-friendly interface that met user needs. 

iteration made to homescreen wireframe

In response to feedback from users, several iterations were made to the initial home screen wireframe. The most significant change was adding a feature that displays refill locations near the user as soon as they open the app.

paper wireframes

Iterations were also made to the search function. User feedback suggested that the current way to search was a little more cumbersome than necessary. In an attempt to make the app more accessible, instead of typing in the search field, users can opt to use the speech-to-text feature or take a picture of their product. 

image comparing bottom navigation bar

When designing the bottom navigation bar, I took inspiration from other apps to decide where to place each icon. Home icon to the far left is standard practice. I placed the search icon in the centre as I felt its the main focus of the app. However, users seemed to be more comfortable with it right next to the home icon for easy access. I wanted users to have easy access to items they've saved so I felt it was a good idea to give them a button for that too. The secondary focus of this app is to educate and inform users about how they can contribute to a safer Earth so it was necessary to include a resources icon. Lastly, as an incentive and extra motivation, users can earn valuable rewards each time they use the app positively.

More tests

I'm pleased to report that the user experience has greatly improved following an 8-participant usability test. The feedback received from the participants helped to pinpoint areas that required attention, such as enhancing the app's navigation, layout, and functionality. These suggestions were incorporated, resulting in an overall improvement in the app's usability. I'm confident that these enhancements will lead to higher user satisfaction and engagement with the app.

picture of usability test being conducted

A look at the high fidelity wireframes.

Splash screen
Sign up screen
Log in screen
home screen
search screen
search screen showing suggestions
search screen showing recent searches
resources screen
resource article
location search screen
Empty state screen of saved items
Rewards screen

The prototype

Take a closer look at the 

prototype here.

click me

UX/UI Designer

Content Writer

bottom of page