Oco Crew Mobile App Project
A mobile app that makes it convenient to learn about climate action.
Overview
In this project, I designed a new education app for climate action.
The Problem
Despite widespread interest in climate change and climate action, learning about how climate action continues to be inconvenient.
The Result
An end-to-end mobile app making it convenient to learn about climate change and climate action.
Link to Figma PrototypeProject Background
Back in October of 2020, I launched a web project called Oco Crew. Oco Crew is focused on making it easier for anyone to take climate action. In this project for DesignLab from November to December of 2021, I explored what a mobile app could be for Oco Crew and its audience. I was open to any mobile app concept that made sense for the Oco Crew audience and helped people take climate action based on user research.
Working through this project, I learned a great deal about how people think about climate change and found the open-ended nature of this project challenging and rewarding.
Research Phase
In this research phase, I wanted to know what motivates climate conscious people to engage with mobile app experiences so that we can make engaging and meaningful climate action mobile app.
User Research Findings
From five conversations with climate conscious research participants and one research participant outside of the audience, clear themes and findings emerged.
A knowledge gap was a big problem with climate action. Participants said it was difficult to know what to do and what works to communicate to those outside of climate action to bring them in.
Inconvenience was also a large theme - participants found that either inconvenience blocked them from doing anything or prevented them from doing more.
Participant's favorite thing about taking climate action is the sense of fulfillment and accomplishment they get from what they accomplish.
Empathy Map
This empathy map was comprised of collected quotes from user research. Most notably, gamification was very unfavorable with participants even when unprompted which steered me away from more gamified directions for the app.
This map serves as a resource of important soundbites through the design process.
Persona Development
From user research, I created a persona of Vanessa, a practical young professional.
Her needs and frustrations related to climate action are very clear: she wants to feel some pride for taking action and hates how confusing climate change can feel.
Research Takeaways
The two biggest takeaways from this user research was that knowledge was a huge pain point for people trying to take climate action and that climate action felt best when they felt a sense of accomplishment from taking action. One nuance from this research is that while participants want to feel a sense of accomplishment from taking climate action they do not want the climate action experience gamified.
Exploration Phase
Following the research phase, the main focus of this phase as thinking about what kind of app, this climate action app should be. My approach here relied less on sketching and more so on exploring lots of related mobile apps that could inform the design of this app.
Design Pattern Exploration
In this design pattern exploration, I looked into how different mobile apps set up thier navigation.
In more spatial apps, controls are very different and may look like video game controls, while in more traditional education apps, navigation is almost always fixed to the bottom with a horizontal scroll.
At the beginning of the exploration process, I was still entertaining the idea of creating an app that felt like a game but moved away from this idea after further reflecting on user research.
Exploring App Types
Since. climate action is a large topic, I explored many different types of apps to see what kind of app made the most sense to design based on the user research. I explored financial apps like Mint, education apps like Duolingo and gaming apps like Fruit Ninja.
Since users strongly disliked gamification, I concluded that creating a gaming app would not be the best idea for this audience. Since most existing climate action apps felt very financial but lacked much traction I was not interested in exploring a financial app. Additionally, users did not really think about climate action in the context of money.
To users, climate action was very important, very personal and very complicated. After spending time on apps like Duolingo and Khan Academy, I concluded that a climate action app focused on education would help climate conscious people on their journey and users could feel a strong sense of accomplishment understanding the many different aspects of climate change.
Exploration Takeaways
From the exploration phase, I reached the decision to design an education app about climate action that rewarded users with points based on their progress. While Duolingo is somewhat gamified, I knew the education experience should be rewarding but not feel too much like a game.
Design Phase
Once deciding to create an education app related to climate action, I began identifying the key flows and actions that users would want to accomplish in an app.
User Flows
Based on user research findings, I set up three main user flows for this mobile app: learning about climate change, recalling a climate change fact and checking progress to use points.
My main take-away from designing these flows was the ability to create flows that balance engaging and meaningful moments and convenience.
Wireframes
Wireframing helped identify how I could put together a cohesive app experience and how to make the app engaging and core user flows intuitive.
Wireframe Call-outs
1. Learning Journey - I decided to make the core action in this app a learning journey through different collections of lessons like other learning apps like Duolingo. Once the first set of questions are answered, a user would be able to explore four new topics.
2. Trivia Screen - The way these learning journeys would work is that once a user clicks on a journey, they would get a trivia question to answer to test their knowledge. This would come before the educational content to make the learning experience more active. If they get it right they get points and if they get it wrong they get points still for trying but a 1/3 of the points.
3.Saved Info Screen - The saved info screen in the wireframes is a place where users can look up explanations that they have already come across if they need to recall a detail. Search is the primary navigation option intended for that section.
4. Redeeming Points - Once users have accumulated points, they will be able to redeem those points for prizes or discounts to products related to climate action. The intent here is to make the points have some meaning and not just be points for the sake of points.
Site Map
After many different mock-ups and configurations, I landed on this as the site map for the mobile app.
To create the experience as simple as possible, the biggest decision was creating a home page that also served as a profile page for the user.
UI Kit
Creating this UI Kit was very fun. I wanted this app to pull from visual influences like Dune and have a natural and minimal feel. The color and fonts are somewhat aligned to Oco Crew's current branding but did introduce the new gold primary color and ITC Galliard Pro.
Usability Test Findings and Iterations
Key findings and iterations (see before and afters to the right):
At first, the architecture of the app was too confusing with an action screen so that section was integrated into the learn screen. Iteration: the information architecture was changed to not have an independent act screen.
Buttons and backgrounds did not have enough contrast on initial designs so buttons were made more prominent. Iteration: background and button design was updated to make backgrounds less prominent and buttons more prominent.
The explanation screens were hard to read so they were redesigned to be more suitable for reading long articles. Iteration: based on mobile article design by sites like Medium, the explanation screens were improved for long-passage reading.
Conclusion - Final Design
The final UI design of this mobile app, a design I had no idea what it would become at the beginning of the process became something I am quite proud of. I wanted this experience to be simple but also beautiful.
My biggest learning from this design project was the opportunity for more climate action-related apps, the process of thinking through an end-to-end education app, and the deep need for more convenient climate action.
More OF MY Work
