Green House End-to-End App Design Case Study
A lifestyle app designed to help individuals measure and improve their carbon offset.
Project Background:
The world is rapidly racing towards a climate crisis. Increasingly, people are looking for ways that they can reduce their carbon offset. There is plenty of information on the web about ways to do this, but there isn’t a great way to measure our own individual impact on a daily basis.
Green House App was created as a way for users to understand the ways in which their lifestyle choices impact climate change and how they can make small, actionable changes to make a positive impact on the climate crisis issue as a whole.
Project Timeline:
3 weeks
Role:
Research, Design, User Testing
Outcome:
Identified key user types and incentivizing features to build a working prototype ready for handoff to developers. Created a component library that drastically simplified the design process and made iterations after user testing a breeze.
Project Process
01.
Research & Discovery
02.
Product Strategy & UX Design
03.
UI & Design
04.
Prototype, Test, & Iterate
05.
Project Outcomes
01.
Research & Discovery
I took a three-step research process to fully understand the competitive market, understand people's perceptions of climate change and climate action, and identify key users who will drive the product strategy of the Green House app.
Competitive Analysis & Identifying User Types
I researched current carbon offset tracking apps to understand how users engage with their apps, how apps measure offset, and how users keep track of their actions.
-
Secondary research comparing a 2020 study on people's carbon footprint perceptions to a University of Michigan study on actual carbon footprint suggests that there may be a discrepancy between perceived impacts and reality.
-
Researching direct and indirect competitors showed that there's no real market leader in this app category.
-
Identifying user types helped me specify who to interview and how to narrow my questioning to understand these user types.
Empathizing with Key Users through Interviews
I conducted user interviews to understand what people perceive their environmental impact is and what actions they think have the greatest effect, and what could incentivize users to make changes.
In addition to exploring users’ perceptions of environmental and climate issues, I also investigated which lifestyle apps they use to track their daily or weekly actions.
Validating Climate Perceptions and Beliefs
-
4 of 4 users mentioned recycling (which according to research actually has very little impact with respect to carbon emissions)
-
4 of 4 users felt some degree of guilt towards how much they travel/drive/fly
-
3 of 4 participants are feeling some sort of anxiety over climate change
-
3 of 4 participants felt that many of their decisions are based on convenience and if being environmentally friendly was the easy choice, it would be easier to adopt
-
3 of 4 participants feel that one of the easiest things to do that doesn’t cost anything is to use what they have, and only buy what they need
-
3 of 4 users try to minimize food waste and compost whenever possible
Developing Personas
Based on market and user research, my personas were developed to identify the key users for the Green House App.
Melanie Kaufman represents the Young and Conscious User and Jonathon Padilla represents the Value Added Adult. Understanding and defining these users helps direct product strategy.
02.
Product Strategy & UX Design
Critical to product adoption is creating ways to incentivize and habitually bring users back to the app. Through user research, I identified three experiences that will enhance and encourage use of the Green House App.
Clear Parameters for Simple Onboarding
While this is a one-time process a user will go through when first using the Green House app, it's crucial to nail the onboarding process. Having clear parameters for data tracking sets the tone for how simple it is for users use and track their carbon footprint.
Incentivizing Continued Use with Gameification
From research I dscovered that most users of lifestyle tracking apps don't feel that other people care about their progress and goals. Green House needs to intrinsically motivate users by gameifying the app with weekly and monthly challlenges to incentive continual use and progress.
Tracking Progress Over Time to Motivate Habiitual Change
Using data visualization to show a user's progress over time and to compare their progress to other users across the world motivates users to want to improve and engage more with the Green House app.
Simple is Better: Streamlined Navigation for Meaningful Action
One of the primary goals in designing Green House was to keep the user experience simple and focused. The app helps users understand their carbon footprint and take small, meaningful actions to reduce it. The MVP was intentionally limited to four core pages to ensure clarity and ease of use:​
-
Home: The central hub for users to track their progress and compare their impact with others around the world.
-
Challenges: Actionable, real-life suggestions to help users improve their carbon offset.
-
Weekly Statistics: A unique weekly check-in feature that visualizes how users’ choices have affected their environmental impact.
-
Profile: While not central to the MVP’s goals, the profile page provides essential account and personalization features.
Simple is Better: Streamlined Navigation for Meaningful Action
This task flow outlines the key steps a user takes to get started with Green House and engage with its core features. Each step was designed to be intuitive and support the app’s goal of making sustainable living easier to adopt:
-
Login & Setup: Create an account and personalize your experience.
-
Explore the App: Navigate easily through the main sections.
-
Start Challenges: Begin and track actions to reduce your carbon footprint.
-
Weekly Check-Ins: Reflect on your impact with weekly statistics.
03.
UI Design
Green House’s UI draws inspiration from nature and sustainability, combining eco-conscious design elements with a futuristic aesthetic. A thoughtfully crafted component library ensured visual consistency and efficiency, while hand-drawn wireframes evolved into a high-fidelity interface that felt both intentional and intuitive.
Drawing Inspiration from a Moodboard
I drew inspiration from current media, illustrations, and platforms like Dribbble to shape the app's aesthetic. The design focused on themes of ecology, environmentalism, renewable energy, and futurism, creating a look that aligns with the app's sustainability mission.
Drawing from user research, I ensured the visual elements not only resonated with users but also aligned with their expectations and needs. This informed the design choices, ensuring the app was both engaging and purpose-driven.
Streamlining Design: The Importance of a Component Library
For this project, I prioritized creating a component library early on, before moving into high-fidelity wireframes and prototyping. This step allowed me to establish a consistent design language that aligned with the visual themes from my moodboard and the user insights gathered through research.
By defining reusable elements up front, I was able to streamline the design process, making it easier to implement changes and maintain cohesion throughout the app. This approach not only increased efficiency but also ensured that the final design resonated with users and aligned with the app's sustainability goals.
Designing for Engagement: Wireframes That Drive Progress
Wireframing played a key role in translating the product strategy into a functional and engaging user experience. Beginning with low-fidelity hand-drawn sketches, I mapped out the key pages and user flows, ensuring that the design supported the core goals of tracking progress and encouraging habitual change.
As the wireframes evolved into high-fidelity versions, I incorporated elements from the component library, moodboard, and design system to reinforce the app's strategy, particularly around gamification. By integrating features like progress tracking and challenges, the design aimed to motivate users to adopt sustainable habits while remaining aligned with the overall product vision.
04.
Prototype, Test, Iterate
User testing validated that the app’s core tasks were straightforward to complete, though certain UX improvements were identified. In response to user feedback, adjustments were made to optimize touch targets and navigation, enhancing overall usability and ensuring a more seamless experience.
Prototype & User Testing
Test Objectives
-
Ensure that users are able to navigate the app without issue to complete their assigned tasks.
-
Identify pain points or moments of hesitation as users navigate through the app.
-
Ensure the user can think autonomously and that the app is easy to understand and use.
Participants:
4 Participants ages 23-45. All tests are conducted over Google Meet, sharing their screen as they walk me through their designated tasks.
Prototype:
Users were asked to walk through five flows with instructions that are now notated in the description of this working prototype.Follow up questions were also asked to gain insights into user thoughts, perceptions, and challenges within the app.
User Testing Results
Usability testing yielded positive results, with users finding the core task flows easy to complete and understand. However, testing highlighted areas for improvement, particularly with touch targets and navigation options.
Post-Test Changes:
-
Made top and bottom navigators fully functional to account for all possible user navigation paths.
-
Increased touch target sizes to improve navigation and reduce frustration.
Testing Insights and Key Findings:
-
4/4 users successfully completed all assigned tasks without difficulty.
-
3/4 users felt the aesthetic aligned with their expectations of environmentalism.
-
3/4 users experienced issues with touch targets, which were prioritized in subsequent iterations.
-
4/4 users navigated the app intuitively, demonstrating ease of use.
05.
Case Study Outcomes & Lessons Learned
This student project integrated insights and skills gained from previous work, allowing me to apply learned best practices while exploring new approaches. One key innovation was the creation of a component library, which streamlined the design process and improved consistency throughout the project.
Research Insights and Audience Focus
Secondary research revealed common biases around climate change, while interviews helped refine Green House’s target audience, identifying key user types like "Young and Conscious" and "Value Added."
The Power of a Component Library
Using a component library to standardize design assets significantly sped up wireframing and prototyping, making iterations much more efficient. This approach was one of the key successes and learnings from this project.
A Smooth Transition to Development
By being intentional at every stage, I created a product that required minimal iterations after user testing. The app is now ready for hand-off to developers, pending further beta testing.