The Green House Component Library significantly sped up and simplified the design process.
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.
Research current carbon offset tracking apps and understand how they are used, measure offset, and how they track 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.
Comparative and competitive research to see what our competitors offer, at what price points, and what other tracking apps people use and like.
Research ways to measure carbon offset and define primary categories that users can select and measure
Interviews with potential users to understand their perceptions on climate change, carbon offset, and what would incentivize them to make actionable changes sooner.
Primary Competitive Analysis Findings
There are multiple apps that are designed to track your carbon offset
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 had 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
Interview were conducted on 4 potential users from age 23-68. The interviews focused on two areas of interest:
Environmental and climate change perceptions, needs, and frustrations to create an authentic app that users will enjoy using.
Similar app preferences, needs, and frustrations to model the user experience off of design patterns and user preferences based on their experiences with other lifestyle apps.
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 respects 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
Based on market and user research, 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.
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
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
Finding Inspiration in UI and Developing a Component Library
The next steps in developing the Green House App was looking towards current media, illustrations, and online resources to develop the look and feel of the app.
I sought out inspiration from similar projects on Dribble and looked towards illustration collections to find inspiration for the palette and mood of Green House. Many of the illustrations found here were eventually obtained and used in the UI of the Green House App.
Ultimately, 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 it 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 Wireframe Sketches
I typically start my wireframe development with sketches. For me, it's the quickest way to create multiple design ideas before settling on a leading design for my most essential pages.
From the 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 the most crucial design requirements with the pre-determined information architecture.
4 targeted participants ages 23-45
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.
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.
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.
Developing the Green House App was an excellent practice in 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 who my key 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.