The Green House Component Library significantly sped up and simplified the design process.
Case Study: Green House End-to End App Design
What Problem is Green House Trying to Solve?
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 Details
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.
Research
Research Objectives
Research current carbon offset tracking apps and understand how they are used, measure offset, and how they keep track of their own actions.
Understand what people perceive their environmental impact is and what actions they think have the greatest effect.
Understand what could incentivize users to make changes.
Define key users for the Green House app.
Secondary Research, Competitive Analysis, and Customer Types
Key Competitive Analysis Findings
3 of 3 apps use a setup guide to help people establish their baseline for their carbon footprint
2 of 3 apps researched use self-reported data
1 of 3 apps uses personal data (GPS, Apple Health) to track their progress
1 of 3 apps has a social element that helps people get involved in their community
0 of 3 have weekly updates if manually reporting data (though 1 app will use your phone’s data to help you track weekly progress if you allow it to)
Some apps were overwhelming with options, others felt limited
No app is a clear leader in the category
Interviews
Interview were conducted on 4 potential users from age 23-68. The interviews focused on two areas of interest:
User environmental and climate change perceptions, needs, and frustrations
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
User experiences with similar app preferences, needs, and frustrations
4 of 4 users use some sort of fitness tracking app
4 of 4 users like that they can see their progress over time and it helps them understand where they are at
3 of 4 users like that the app tells them what to do without having to think
3 of 4 users like that they can see data charts and graphs to understand their training
3 of 4 users feel as if people don’t really care what their accomplishments are
Personas
Based on market and user research, my personas were developed to identify the key users for the Green House App. Persona 1 represents the Young and Conscious User and Persona 2 represents the Value Added Adult.
Information Architecture
Simple is Better
One goal in creating the app was to keep things simple. At the end of the day, Green House was designed to understand what a user's carbon footprint is and how they can make changes to improve it. To do this, the most important pages as illustrated in this sitemap are:
Statistics (later named Progress)- where users can track their progress and see how they stack up against the world
Challenges - a page that offers actionable ways for users to make changes to improve their carbon offset
Update my Carbon Offset (later named 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, still a necessary piece to include in the big picture of the app
User Flow
This user flow illustrates the main decisions required to start using the app and complete the most important tasks within the app. Those tasks include:
Login and initial account setup
Navigating the app
Starting and updating challenges
Updating weekly statistics
UI & Design
Finding Inspiration in UI 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.
The design aesthetics were inspired by ideas of ecology, environmentalism, renewable energy, and futurism. With these elements in mind, I was able to move forward with the next steps of designing a logo and creating a UI Kit for Green House.
For this project, I made a point to create a Component Library ahead of my HiFi Wireframe and Prototype.
As a new designer, this was a huge step for me in expediting and simplifying the entire design process.
Lofi to HiFi Wireframes
I typically start my wireframe development with sketches from lofi sketches, I designed a HiFi version of the Green House app that was ready for prototype development. 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 the sitemap and task flows.
Prototype Development and Testing
Partipants:
4 targeted participants ages 23-45
Test Objectives
Test the usability the greenhouse app.
Observe how users interact with the app and utilize the menu.
Understand how users chose to complete specific tasks
Ensure users are given all of the tools to complete specific tasks.
Ensure that users understand and can log into the website.
Test Goals
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 while and that the app is easy to understand and use.
Tasks, Errands
Task 1: Create an account
Task 2: Walk through the initial carbon footprint setup page.
Task 3: From the home page, explore the app and get a general idea of how the app functions.
Task 4: Update Your Weekly Statistics
Task 5: 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.
100% of users
were able to complete all tasks assigned to them with ease
75% of
users
users
remarked that the aesthetic matched their perceptions of environmentalism
75% of
users
users
had issues with touch targets, which became a primary focus in iterations
100% of users
were able to intuitively navigate and understand how to use the app
Summary
Developing the Green House App from 0 to 1 was my first foray into fully understanding the design process.
Through research I was able to fully understand the scope of the project through secondary research and competitive research. From there, my interviews helped me further narrow down my target audience for Green House, such as the Young and Conscious, and Value Added user types.
The Information Architecture portion of the project helped me narrow down the scope of the project and understand what the most important flows are in initially developing the app.
Through UI and Design I collected inspiration to create a fun and environmentally focused design that would appeal to the key user types. From there I created a UI Kit and Component Library ahead of my wireframe development to simplify the next stages of the design process.
Lofi wireframe sketches were first created and turned into Hifi wireframes with my pre-created components.
With the most important tasks in mind, I created a prototype to ensure the most important flows were intuitive and simple.
Because I was very intentional about each step of this project, I was able to create a product that needed very few iterations. Only minor changes were made, such as enlarging touch targets, ensuring the flows are easy to move through or back out of without error, and that design patterns are consistent throughout the app.
In the three weeks while working on this project I went...
369 Miles
on the bike
100 miles
of running
27,050 yards
of swimming
24,701 feet
of elevation gain