Case Study

Green Earth

Caption: A couple high fidelity screens of my Capstone Project.

Introduction

My Role:

Green Earth was created as my first capstone project for Springboard. This project went into depth on all aspects of the design process. I was responsible for everything including:

Research
Information Architecture
Wireframing
Prototyping
High Fidelity UI design
User Testing

Purpose:

Green Earth is an app that introduces the user to climate change and has different areas the user can use, a gaming section, an educator section, and a social media section. The user can move between the sections or use only one. The multiple sections allow a more vast amount of target users. I choose this topic for the app because Climate change is one of my top priorities and interests.

Problem

Create an app that educates the general population on climate change and how to help the environment in a way that is easy to understand without the need of a science background.

Design Process

Research

First I conducted research into the topic, climate change, and what apps were already out there. I found a few competitor apps; ThredUp (a second hand online thrift store), Tap (an app that shows you where you can refill your reusable water bottle) and ecosia (a search engine that plants trees for every search conducted). Through my research I did not find anything that was similar to my main idea and I think there is a need for it.

Sketching low fidelity prototype

Once the first step of research was completed I sketched my idea onto a paper prototype and conducted guerilla usability testing.

Caption: Paper Prototype sketches I created of my screens for my Capstone One project for Springboard.

Guerrilla testing

I conducted a first round of guerilla testing and I found that users prefer icons that are familiar to them instead of trying to learn what a unique icon stands for. They also wanted to know why they should use the new app instead of something already created.

Survey

I sent out a screener survey (26 participants) to see how they hear about climate change and how they use apps on their phones.

Caption: Bar graph showing the survey results for how people normally hear about climate change.

Caption: Pie Graph showing the survey results for how often people use apps on their phones and or tablets.

Caption: Line graph showing how people already know to make a difference in climate change on an individual basis.

User Interviews

I also interviewed potential users in order to find out what they would like in an app and what they need. Through the interview process I found out that the majority of people use their phone as their source for information. They use apps that are easy to learn and understand without having to think how to get from point a to point b. The combination of screener survey and user interviews gave me a starting point to create an app that would fit my goal and also fit the users needs.

"I once had a friendly discussion that turned into a debate. He did not believe climate change was real. So having apps available, showing older people the value of sustainability might change points of view. Education in any form. But experience based apps, like seeing things actually happen in the environment would be a real plus. Hands on apps that are interactive make it easier for me to understand information."

How Might We Questions

Once I completed my surveys and user interviews, I created a list of How Might We questions in order to start thinking about how to create a climate change app that the users would benefit the most from.

How might we create an app that describes the scientific idea of climate change in an easy to understand way so that the general public can understand even if they are not scientifically inclined?
How might we create different parts of the app geared towards different target people (kids, parents, elderly, educators, etc)?
How might we encourage our app users to change their habits in a way that helps the environment and doesn’t seem forced?
How might we make more people environmentally conscious?
How might we make our users want to continuously return to our app after use?

Affinity Map

Caption: Affinity map I created synthesizing the user interview and survey data I collected.

Empathy Map

Caption: Empathy map I created as a way to understand my user.

Moodboard

Caption: Moodboard I created for inspiration for my app creation.

Style Guide

I created a style guide so that my brand, typography, and colors were consistent throughout the project. I used my knowledge of psychology and especially color theory in order to choose the best colors for the project. I choose green as my main color, specifically #1a7a6f because green signifies nature and healing. The background is a creme, #FAF8F2 because it also relates to earth and naturalness. The typography chosen was SF Pro because that is the built in type for ios products, and the app was designed for iPhones.

Caption: Brand colors I chose for my style guide.

Caption: Button UI I chose for my style guide.

Caption: Grid I chose for my style guide.

Information Architecture

Using the information gathered from the survey and user interviews I created a site map to outline the skeleton of my app. I created three profiles for the users; gaming, educator, and social. The three different profiles allow users to experience the app in different ways. The gaming profile gives users the ability to play games and learn about the environment and has some gamification by adding badges the user can collect. The educator profile allows teachers to create lesson plans and store them in one place. The social profile connects users to other like minded people.

Caption: Site map I created using information architecture for my project.

User Flows and Personas

The user flows and personas were created to help me bring the target user to life and create an app they need.

Capstone One User Flow charts-3_edited_e

Caption: User Flow I created for my project.

Caption: Primary Persona I created for my project.

Caption: Secondary Persona I created for my project.

Wireframes

I started building wireframes to test the usability of my design building on from the paper sketch I first drew. I created both low fidelity wireframes, starting really low fidelity with just shapes and kept iterating my way to a high fidelity mock up of the app.

Caption: Low fidelity wireframes of my screen layouts.

Caption: Medium fidelity wireframes of my screens.

Usability Testing

Pain Points discovered through first round of Usability Testing

No easy way to go from one profile to the others
No information about the aim of the app and/or the purpose of the company

I conducted two rounds of usability testing with my high fidelity prototype and iterated on the design after both rounds of testing to adjust for the user responses. To account for those two issues I created a hamburger menu on each page that links to the profile page and I created a splash screen users see when they first open the app.

High Fidelity iteration

Based upon the usability testing from my earlier prototypes I continued to iterated on my design and created my high fidelity screens

Caption: High Fidelity Screens I created for my project.

Conclusion

In conclusion, I created the app Green Earth by researching what people want, and what apps are already out there by competitor companies and using those findings to design the prototype. The process of researching and designing and reiterating is a never completely finished cycle. There is always more that can be iterated on and updated.