Ux / Ui Case Study
„Ecocycle+“
Redifining Waste
Unleashing the Hidden Gems of
Everyday Discards
Reduce
Reuse
Recycle
At the end of my Boot camp at Spiced academy
I needed to create a high-fidelity prototype
incl. case study for a digital product based on research. This had to be done in 3 weeks
Tools
- Notion
- Figma
- Figjam
- Excalidraw
Team
- 1 UX Designer
- 1 UI Designer
- 1 Mentor
My Role
- UX Design
- UX Research
- UI Design
Timeline
- 3 weeks
- Research: 1 week
- Design: 2 weeks
- Testing: 1 day
In my user research, I discovered that many people struggle with a complex waste system.
Problem
Inadequate recycling and dwindling resources present a critical challenge.
To address this, we must revolutionize our consumption and waste management behaviors.
While individual efforts alone may not suffice, collective action holds the key.
Solution
By providing an intuitive app with comprehensive information, practical guidance, and sustainable alternatives, it can enable individuals and small businesses to make a lasting positive impact on the environment. Together, we can drive sustainable choices that benefit us and the planet.
My Design Process
Empathize
- Secondary Research
- Survey
- User Interview
- Analytics
Define
- User Interview Analytics
- User Persona
- User Journey Map
Ideate
- Idea Brainstorming
- Sketch
- Information Architecture
- Low-fidelity Wireframes
Prototype
- UI Design
- Mid-fidelity wireframes
- High-fidelity wireframes
- final prototype
Empathize
Secondary Research
BSR APP
Eco Nation
Commons
Scrapp
Conclusion secondary research
competitive analytics & web surveys*
Berlin shows significant interest in recycling and responsible waste management. However, the city still struggles with a substantial waste problem, especially in parks and streets.
Recycling apps need improvement as most of them lack user-friendly interfaces and comprehensive features. BSR, while commendable, lacks filtering options and needs more community involvement and transparency.
One of the promising ideas for recycling apps is the ability to scan trash items and provide the correct recycling methods. Unfortunately, many apps with this feature that I’ve tried did not work effectively, presenting a challenge for developers to implement this functionality successfully.
These apps also lack specific support features for small businesses.
Survey
After the project kickoff, I defined the research strategy and objectives.
Understanding the target audience and their challenges were my priority.
First, I built an online survey and shared it in various relevant communities. In just a day,
I received 16 submissions. Based on these, I identified 4 common pain points, which lead me the next step.
Pain Points
- lack of knowledge regarding
the recycling process
- costs of recycling bins are
pretty high
- challenging to locate
recycling bins
- ensure that the app
has a tangible impact
Answers from Survey
How can the recycling system in your area be improved?
Unser Interviews
In conducting user interviews, I aimed to gain direct insights from individuals engaged in waste management and recycling. Understanding their experiences and perspectives helped me develop user-centric solutions for more effective and sustainable waste practices.
User 1 Interview on Zoom
▶️ Transcript 1
Key takeaways
conscious of the importance of recycling and waste reduction.
Witnessed the negative impact of landfills and became passionate about making a change
faces challenges in understanding specific recycling regulations and knowing where to properly dispose of certain items
User 2 at Spiced academy
▶️ Transcript 1
Key takeaways
adjusting to the recycling and waste management practices in their new country
is interested in finding an app that can provide clear instructions on recycling, especially for specific items like batteries
User Personas
I wanted to form a deeper understanding of my users‘ goals, needs, experiences, and
behaviors.
I created 3 personas based on my survey and Interview, and one more based on secondary Research for small business owner.
I kept updating them throughout the project as I gathered more data.
I used these personas whenever I wanted to step out of myself and reconsider my initial ideas.
User Journey
With the sustainable goal in mind, I make sure that the users reach they Goal without any
hiccups. Based on my User Personas I first sketch some Scenarios of possible User Journeys. I wanted to try out different Methods to get into the mind of my user therefore I used a Storytelling template to find out where are obstacles the user can face during the process of Recycling.
Sketches
- Phil is in the Park and want to get rid of his trash, but the Bins are all full, he opens the app to find a close by Trash Bin.
- Leila wants go get rid of here Organic waste, but apparently the Trash Bins are not in the Backyards – Leila is checked the app to see when the pick-ups are, to bring it to the bins before.
- Phil is not sure where to dispose cans – he scans the Trash and finds useful information how to dispose and reduce Trash
User journey map sotrytelling
User Journey Map
User Persona: Leila Open
Scenario: do not have a drive license and want to know
how she can get rid of bulky waste
Expectations: easy to use, intuitive, informative
Opportunities:
give relevant local information about services and possiblity’s introduce more knowledge
little course / gamification on the right way to recycle
make it a11y for different languages
networking with people from the area, sharing goods, food etc.
for others trash for others still usable
earning points for correct recycling
extra points if its get reused
Problems:
time alignment with others
concerns about what is happening afterwards with the trash
what do Leila have to prepare
location where is the person living
price
amount, can it be picked up with cargo bike
Information Architecture
After the User Journey Map I created the Information Architecture and the User flow
User Flow
User Persona: Leila Open
Scenario: do not have a drive license and want to know
how she can get rid of bulky waste
Ideate
Wireframe Sketches
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, user survey, the app goal, and the heuristic evaluation.
They each pointed to the fact that the recycling process is complicated and not intuitive. I came back to the sketches throughout the entire design process to make sure that I do not lose sight of our primary goals and ideas.
Wireframes
Using Excalidraw, I translated my first sketches
into low-fidelity wireframes. And recreated my user Flow
Prototype
Prototype
After I defined my Design I create a Prototype for the User flow I made for my User Leila
UI Design
Once I defined the Wireframe and user flow with goals, and problems.
I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the app’s values and message, which is: “REDUCE, REUSE, RECYCLE”.
Also, I’ve checked the competition and took a deep dive into my catalog of references for inspiration.
Design Principles
As one of the first things I defined my principles for this design,
where I can always come back and make it easier for me to take decisions,
which are aligned with these.
Intuitiveness
Provide a user-friendly interface
for effortless recycling guidance
and sustainable practices.
Personalization
Customize app content based on user preferences and location for localized recycling information and resources.
Visual engagement
Visually appealing app with vibrant colors and engaging visuals to inspire sustainable actions.
Colors
Starting from the Recycling Colors that are used in the German Trash system I created my Primary and Secondary colors.
Typography
For easy access I decided for a simple Typography style.
Icons
to help the User find there way through the app I choose to focus on simple Icons.
Components
to keep consistent throughout the app I create a Components library, to have the possible to make quick changes and help me focus on the more Important Topics.
Next Steps
The time was very short to create this complex a Project for just one Person.
The Next steps I will take to make a complete User experience are:
01
I would take more time for User Interviews, Survey and the Research analyze to create the content for a sustainable. Showing more option what is already out there and possible.
02
Creating the Profile for Business with booking options for Containers and more.
03
Creating a Tracking system for your trash for Business and individuals, where people also getting tips how to reduce and reuse.
04
Creating the community function, where people can share there tips, ask for help or connect for clean up actions.
05
Adding gamification – doing more research on this to avoid “social Credit” which is not in a good light.
06
User Testing, going more into detail with A11y.
Learnings
I learned a lot about the UX process and feel a lot more comfortable to keep track of my Task which such a huge and complex Project.
My Figma skills grow a lot during this time.
It helps me grow as a Designer feeling comfortable to extract Information and knowledge out of Research and apply these to a design and user experience. I learned that preparation and Research is really important it makes the workflow a lot easier, and it helps the creativity to come up with good and innovative Ideas.