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 & User Experience 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
Research current carbon offset tracking apps and understand how they are used, measure offset, and how they keep track of their own actions.
User 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.
Develop Personas
From this research I identified two key users for the Green House App that will guide the next steps in product strategy.
Competitive Analysis & Identifying User Types
-
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
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
Defining Key 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 & User Experience 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
One goal in creating Green House was to keep things simple. Green House was designed to help users understand their carbon footprint and how they can make changes to better the world. The MVP focuses on these four pages:
-
Home: Where users can track their progress and see how they stack up against other users across the world.
-
Challenges: A page that offers actionable ways for users to make changes to improve their carbon offset
-
Weekly Statistics: A unique aspect of the app that is designed as a weekly check-in so users can see how their decisions over the past week impacted their statistics
-
Profile: While not an important part of the MVP, it's still a necessary piece to include.
User Task Flow
This user flow illustrates the main decisions required to start using Green House and complete the main tasks within the app. Those tasks include:
-
Login and initial account setup
-
Navigating the app
-
Starting and updating challenges
-
Updating weekly statistics
03.
UI & Design
Baby's First Component Library
Finding Inspiration from a Moodboard and Developing a Component Library
I looked towards current media, illustrations, and online resources such as Dribbble to develop the look and feel of the app. Design aesthetics and UI took cues from ecology, environmentalism, renewable energy, and futurism.
For this project, I made a point to create a Component Library ahead of my HiFi wireframe and prototype.
As a new designer at this point in my career, creating a component library was a game-changing revelation that taught me how to simplify, design, and make design changes more efficiently.
Wireframes
Wireframes are an ongoing process. Using guidance from my sitemap and user flow, I typically start my wireframe development with LoFi hand-drawn sketches for the key pages and user flows.
From this, I turn the best iterations of these sketches into a HiFi wireframe in conjunction with developing the component library. I focused on including the UI design elements from my UI kit, moodboard, and component library to create a product that melded design requirements with overarching product strategy.
04.
Prototype, Test & Iterate
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.
Tasks for Users:
-
Create an account.
-
Walk through the initial carbon footprint setup page.
-
From the home page, explore the app and get a general idea of how the app functions.
-
Update Your Weekly Statistics.
-
Sign up for the Challenge of the Month.
Follow up questions were also asked to gain insights into user thoughts, perceptions, and challenges within the app.
Testing Results
Usability testing was very successful. Users found the most important task flows easy to complete and understand User testing did reveal that the original prototype had weaknesses in touch targets and navigation options.
-
4/4 users were able to complete all tasks assigned to them with ease.
-
3/4 users remarked that the aesthetic matched their perceptions of environmentalism.
-
3/4 users had issues with touch targets, which became a primary focus in iterations.
-
4/4 users were able to intuitively navigate and use the app.
Changes made after initial usability testing:
-
Accounting for every way a user might navigate a prototype by making top and bottom navigators fully functional
-
Increased the size of touch targets to make navigation flawless and less frustrating.
05.
Case Study Outcomes & Lessons Learned
This student project was a culmination of lessons learned from past projects. I was able to implement past learnings and try new ways of working such as creating a component library for this project.
Narrowing User Types
I used secondary research to understand biases and assumptions the general population has about climate change. interviews helped me further narrow down my target audience for Green House, such as the Young and Conscious, and Value Added user types.
UI & the Design System
Standardizing design assets by using a component library not only made designing wireframes and a prototype quicker and more efficient, it made iterations a breeze as well. This was perhaps the biggest success and learning for me in this case study.
Intentional Design
Because I was very intentional about each step of this project, I was able to create a product that needed very few iterations after completing user testing. This app is ready for hand-off to developers following additional beta testing.