.png)
Eco Fix is an iOS app designed to help busy professionals easily adopt and maintain sustainable habits.
Research Objectives
-
Understand Barriers to Sustainable Habits
-
Impact of Consumerism
-
Investigate Effective Habit Change Strategies
-
Assess the Role of Budget Constraints
Assumptions
-
People lack knowledge on how to reduce waste and live sustainably
-
Small, consistent changes are more effective for lasting sustainable behavior than major overhauls
-
Finances greatly influence people's ability and willingness to adopt sustainable practices.
Hypothesis Statement
I believe people struggle to adopt sustainable habits due to uncertainty about the most impactful, convenient, and affordable actions. I'll be right if 2 out of 3 participants express feeling overwhelmed or unsure about integrating such practices into their daily routines.
The Challenge
Decisions
vs.
Habits
40% of the actions people performed each day weren’t actual decisions, but habits.
Problem Space
People want to reduce waste - 72% say that they actively try to reduce waste - but feel overwhelmed by the perceived cost, inconvenience, and all-or-nothing pressure associated with the zero-waste movement. This leads to frustration, a cycle of unnecessary purchases, and quickly discarding items. However, by focusing on small, achievable changes in everyday habits, we can make a significant positive impact.
One paper published by a Duke University researcher in 2006 found that more than 40% of the actions people performed each day weren’t actual decisions, but habits.
Secondary Research
We generate 2.12 billion tons of waste annually – enough to circle the globe 24 times if loaded onto trucks.
Our consumer-driven society generates massive amounts of waste, with trillions spent annually on goods and services. This unsustainable consumption strains resources and fails to bring lasting happiness. A shift to sustainable living is possible through small, habitual changes. By understanding the "habit loop," we can replace wasteful behaviors with eco-friendly alternatives, ultimately reducing waste and fostering a more sustainable future.
Habit Loop
The Habit Loop is a neurological loop that governs any habit - Duhigg, C. (2012)
HMW Question
How might we empower budget-conscious young adults living in major North American cities to easily adopt and maintain sustainable habits that reduce waste and save them money?
Data Collection and Analysis
Methodology
One-on-one decontextualized interviews with three target users, where I’ll gather qualitative and attitudinal data. Questions were prepared under the interview guide.
Participant Criteria
Age Group: Millennials;
Location: Residing in a major North American city;
Financial Status: Mindful of their spending;
Interest in Sustainability: They express a desire to reduce their environmental impact and waste, but may face challenges in doing so;
About
This case study showcases the design journey of Eco Fix, a mobile app created to help busy professionals adopt and sustain eco-friendly habits. I identified barriers such as complexity, lack of knowledge, and perceived inconvenience through user research.
To address these, I designed an intuitive iOS app featuring repair guides, personalized tips, and a community hub. Using the Double Diamond Methodology, I conducted user research, usability testing, and iterative prototyping in Figma.
Working independently under a tight deadline, I managed the entire process, delivering a high-fidelity prototype praised for its seamless navigation and functionality. Eco Fix reframes sustainability as accessible and rewarding, enabling users to embrace eco-conscious living and reduce their environmental impact.
Project Type
Capstone
Timeline
11 weeks
My Roles
UX Researcher, UX/UI Designer, Content Designer, Branding Designer
Designer Tools
Figma, Canva, Otter.ai
Revised HMW Question
How might we reframe sustainable living as convenient, enjoyable, and financially rewarding for budget-conscious young adults in major North American cities, enabling them to effortlessly reduce waste and save money through everyday choices?
Define
User Persona
Based on the insights gathered from my interviews and analysis, I developed a comprehensive user persona that embodies the target user group and aligns with the chosen theme.
Meet Emily
Emily, Age: 32; Location: Vancouver, BC
-
Emily is feeling overwhelmed by the vast amount of information about sustainability.
-
Emily feels that sustainable choices require too much effort and sacrifice.
-
Emily Lacks the time and resources to research and implement sustainable practices.
-
Emily feels guilty about not doing enough for the environment.
.png)
User Experience Map
To better understand our user persona, Emily, I created an experience map that illustrates her journey towards a more sustainable lifestyle. This map visualizes her challenges and frustrations with current eco-friendly options, highlighting opportunities to simplify and streamline her path to greener choices.
Enhancing Lifestyle and Habits
-
As a busy professional, I want a subscription box for eco-friendly household products that are automatically delivered to my door so that I can save time and effort
-
As a busy professional, I want to access quick and easy DIY repair guides for common household items and clothing so that I can fix things instead of throwing them away
-
As a busy professional I want to learn how to properly dispose of electronic waste so that I can avoid the impacts of e-waste
-
As a busy professional I want a tool that helps me identify and prioritize the most impactful sustainable actions so that I can focus my efforts on what matters most
-
As a busy professional I want a platform that allows me to easily donate or sell unwanted items so that I can so they can be reused or repurposed
-
As a busy professional I want a delivery service that prioritizes reusable or minimal packaging so that I can order the things I need without generating excessive waste
User Stories & Epics
After analyzing my research findings and considering Emily's experiences, I transformed user insights into actionable user stories. These user stories were then grouped into four distinct epics, each representing a key phase in the user's journey towards sustainable living. This organization helped prioritize features and create a clear roadmap for the app's development. From these epics, I selected a core epic and translated its user stories into specific tasks, forming the foundation of my user task flow.
Task Flow
After selecting a user story and task from my core epic, I developed a task flow for Emily. In this flow, she'll be accessing the Eco Fix app to find a repair guide for her malfunctioning coffee maker. She hopes to fix it herself to save money and reduce waste.
Legend
Ideate
Chosen Epic
The chosen epic aligns perfectly with the "Convenience vs. Perceived Gain" theme, tackling the common barrier of perceived inconvenience in sustainable practices. By offering accessible repair guides, we aim to showcase the immediate benefits – saving money, reducing waste, and fostering empowerment – making sustainable choices more attractive and feasible for busy individuals.
Enhancing Lifestyle and Habits
As a busy professional, I want to access quick and easy DIY repair guides for common household items and clothing so that I can fix things instead of throwing them away.
Home Screen
A personalized gateway to a more sustainable life. Discover inspiring stories, expert tips, and local events, all while easily accessing the tools the user needs to fix, reuse, and reduce your environmental impact.
Sketches
Guided by my task flow, I gathered UI inspiration images to explore design options for each of the app's five screens. I created 17 exploratory sketches, experimenting with various layouts and features to address user needs effectively.
Building on the most promising ideas, I refined my sketches into more polished solution sketches, incorporating feedback and insights gained from the exploration phase.
Key Takeaways
-
The exploratory sketches helped to experiment with different layouts and content hierarchies.
-
The solution sketches refined the chosen layout, focusing on improving visual clarity, navigation, and content discoverability.
-
The final design incorporates elements from both initial sketches, such as a prominent search bar and a visually appealing news carousel
Round 1
Building upon my UI inspiration and refined solution sketches, I created grayscale, mid-fidelity wireframes in Figma. This initial prototype served as a foundation for usability testing, allowing me to observe how users interacted with the app's core features and navigation.
Valuable feedback from these tests highlighted areas of confusion and opportunities for improvement, guiding my iterative design process toward a more intuitive and user-friendly experience.
These wireframes were developed into an interactive prototype, incorporating essential functionality and preparing them for the user testing that I will showcase next.
Wireframes (V1)
.png)
Round 2
Following the prioritization matrix, I strategically enhanced the wireframes and prototype. I began by implementing revisions identified in the High Impact, Low Effort category, maximizing improvements with minimal effort. Next, I tackled some changes from the High Impact, High Effort category, recognizing their potential for significant user experience enhancements. I still had time to apply a few changes placed in the Low Effort, Low Impact. The remaining items will be considered for future iterations as time and resources allow.
Prototyping & Testing
.png)
.png)
.png)
.png)
.png)
Wireframes (V2)
.png)
.png)
With the revised prototype completed, I conducted a second round of user testing to ensure a human-centered design and identify potential usability issues. This round focused on validating the effectiveness of the changes made based on the initial feedback, observing how users interacted with the new features, and gathering additional insights further to refine the app's functionality and user experience.
UI & Branding
Colour Extraction
After analyzing my mood board, I extracted a wide range of colors that reflected the desired brand identity for Eco Fix. To simplify the selection process, I grouped these colors into distinct palettes based on their shared tones and moods.
Mood Board
During my initial mood boarding for Eco Fix, I gathered around 50 images aligning with the chosen adjectives and evoking the desired feeling of the app. From this collection, I curated a more focused mood board, refining the visuals to better encapsulate the brand identity and ensure a cohesive representation of Eco Fix's values and aspirations.
Final Wordmark
The final Eco Fix wordmark seamlessly blends modern typography with a subtle nod to nature. The chosen font, Ashing, provides a clean, bold look that conveys the app's approachable and practical nature. The "x" in "Fix" is cleverly formed by a stylized leaf, symbolizing the connection between repair and environmental impact, subtly reinforcing the app's mission of sustainable living. This simple yet impactful wordmark is both memorable and versatile, effectively representing the Eco Fix brand across various platforms.
Wordmark
With the mood board and app name selected, I began exploring typography inspiration and sketching initial ideas for a wordmark.
APP Icon
Building on the established brand identity for Eco Fix, I've now designed the app icon for iOS devices. I chose to utilize the wordmark to ensure a clear and recognizable representation of the app on the home screen.
LO-FI Prototype
This final iteration incorporates smart animations and user-centered improvements, delivering a more intuitive and dynamic experience.
Building on my refined solution sketches, I developed a grayscale, low-fidelity prototype in Figma, focusing on the app's core features and navigation. After two iterative rounds of usability testing, I applied user feedback to enhance the design, addressing key usability issues and refining interactions.
Typography
UI Library
Foundation
Grids
To maintain consistency and visual harmony, a 16pt margin and gutter grid system was implemented for the EcoFix app design on iPhone 14 & 15 Pro models. This ensures optimal readability and a balanced layout, where each element has breathing room and aligns seamlessly with the overall design. With the 1px-1pt ratio, the grid adapts perfectly to the device's screen resolution, maintaining visual fidelity and ensuring a consistent user experience across different screen sizes.
Accessibility
Accessibility is crucial for the success of any app. I want EcoFix to be inclusive and empower everyone to make a positive impact. Therefore, I prioritized legibility by carefully selecting and testing color combinations and font choices to ensure all text is easy to read for all users
.jpg)
Multi-Platform
Eco Fix for Tablet
Given the need for convenient solutions for sustainable living, I decided to focus on a platform that could offer a larger screen and more versatility than a phone. I determined that tablets presented a unique opportunity to create a more immersive and engaging Eco Fix experience, especially for activities like following repair guides or browsing through educational content.
Closing Remarks
Key Learnings and Next Steps
Key Learnings
-
The power of iterative design and user feedback in crafting user-centered solutions.
-
The importance of aligning design decisions with the target audience's needs and preferences.
-
Positive reception of Eco Fix validates its potential to make a meaningful impact in sustainable living.
Next Steps
-
Refine navigation: Improve usability by addressing navigation pain points after launch.
-
Explore new features: Develop preventative maintenance tools based on user suggestions.
Vision for the Future
Eco Fix aims to become a comprehensive and accessible tool for sustainable living. By simplifying repair, reuse, and responsible consumption, it empowers individuals to embrace eco-friendly habits and contribute to a greener future.
Atomic Design
Now that I've shown you the brand development process, let's explore the UI library I created to streamline colour injection and final touches. This library will also make future updates and additions faster and more accessible to anyone on the team.
Using the Atomic Design methodology, I've organized the library into the following categories:
-
Foundation: Grids.
-
Atoms: Basic building blocks of the interface.
-
Molecules: Simple groups of UI elements that function together as a unit.
-
Organisms: More complex UI components composed of molecules.
-
Templates: Page-level objects that place components into a layout.
-
Pages: Specific instances of templates with real content.
-
Let's explore each of these in more detail in the following slides.
Atomic Design is a methodology for creating design systems that help manage the complexity of large projects with numerous components. The need for such a system becomes evident when the sheer number of elements becomes overwhelming, making it difficult to maintain consistency and efficiency in the design process. Let's take a look in how I organized the elements of my UI Library.
_edited.jpg)