Oco Crew Mobile App Project

A mobile app that makes it convenient to learn about climate action.

Overview

In this project, I designed an education app for climate action.

The Result

An end-to-end mobile app making it convenient to learn about climate change and climate action.
Link to Figma Prototype

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.
  1. 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.
  2. Inconvenience was also a large theme - participants found that either inconvenience blocked them from doing anything or prevented them from doing more.
  3. 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.

Design Phase

Since I had no plan for a specific kind of climate action-related app, in this design phase, I took the user research above and ultimately decided to make an education app related to climate action.

Design Pattern Exploration

In this design pattern exploration, I looked into how different mobile apps set up their 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.

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.

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

Key findings from four usabilities tests:
  1. At first, the architecture of the app was too confusing with an action screen so that section was integrated into the learn screen.
  2. Buttons and colors did not have enough contrast on initial designs so buttons were made more prominent.
  3. The initial explanation screens were hard to read so they were redesigned to be more suitable for reading long articles.