I wanted the app to focus on two users, sustainability newbies, and those who already practice but need an extra push. The ultimate goal of the app would be to make sustainable practices easier and exciting.

I broke the initial flow up into 5 different sections from the home screen. The app would need challenges and a recording screen to get users to do sustainable practices. It also needed an interactive aspect such as a leaderboard, profile, and feed to keep users motivated through social influence.

I identified 3 apps that have successfully used gamification to encourage users to create a habit; Strava, Love to Ride, and Duolingo. I was looking to see each app used gamification and social features for encouragement.

Strava

• The feed is intuitive to stay connected with friends.
• The challenges list provides enough information for a user to reduce an extra click.
• The profile offers a variety of stats for motivation.

Love to Ride

• The profile has badges and overall stats of all rides.
• It’s straightforward to navigate, and the icons make it fun.
• There is a full history of your activity to compare from years past.
• Recording an activity is easy. It can be linked up with Strava.

Duolingo

• The epitome of gamification. It has badges, levels, points; you name it.
• You can immediately start challenges on the opening screen.
• The profile is clean with all of the user's stats in an easily digestible way.
• The leaderboard is only accessible if you complete challenges. This is a great way to encourage users to do challenges.

Through Journey Mapping and Empathy Maps, I developed the target audience for Greener. From this, I came up with two personas.

One user is a busy Mom who wants to be more sustainable but isn’t sure how. She’s become much more aware of sustainable practices and wants to be an excellent example for her kids. While one kid is taking a nap and the other is off at school, she has some downtime to learn, but ideally, she wants to be told what to do. She uses apps like DuoLingo and Candy Crush.

The other user grew up recycling, eating vegetarian, and doing other sustainable practices regularly. As life has gotten busier, he’s started to be less strict on his sustainable behaviors. He blames it on laziness and also convenience. He’s expressed this to friends, and they have been doing the same thing. He wishes there was something to encourage him to do more. He uses Strava to track his rides and is a big Pokemon GO fan.

To better understand and empathize with the user I created a storyboard to visualize how the user would flow through the app. This version of the story highlights the persona like Lazy Larry.

I split the screens up into 4 sections and created 4-up sketches with a final solution sketch for each:

1. Challenges
2. Recording
3. Profile
4. Feed/Leaderboard

From the lightning demos, I found that most interpretations of a challenges screen included what level the user was on, their progress on that level, and a list of challenges. All 4 sketches had a variation of the challenges listed as either a tile with less information, similar to Duo Lingo, or a list with more comprehensive information similar to Strava. I decided to move forward with the DuoLingo-esque features.

The recording sketches began as one ever scrolling recording screen however to reduce cognitive load I broke it down into 3 screens.

Screen 1 records specific challenges selected

Screen 2 allows users to gain extra points for adding pictures or comments

Screen 3 allows users to submit their points earned, CO2 reduced, and an option to share for extra points.

The profile screen needed to have user stats, progress bars, badges, and an activity feed. The 4-up sketches all had the same features, just different arrangements of information. DuoLingo was also a big influence on this layout.

Finally, the Feed and Leaderboard needed an aspect of social influences and competitive edge. The 4-up sketches were influenced by Instagram with the leaders displayed like Stories and the feed below. To reduce cognitive load another version had the Leaderboard and Feed as tabbed features on one screen.

The digital wireframes were created using the solution sketches and further detailed using paper prototypes. No major changes were made at this time.

I wanted to find colors that were fun, natural, and simple. The first round of colors included a seafoam green and darker blue. After implementing the colors into the hi-fi mockups, I realized that the colors clashed.

I eventually landed on another variation of green and blue that were more complementary. This color palette also has a high contrast for those who experience color blindness.

Similar to the color palette, I wanted a simple font type that was also web-safe. I first chose Ariel but changed it to Proxima Soft. Proxima Soft was more playful and fit well with the images and icons in the app.

While deciding on the font size and weight, I also used the apple accessibility guidelines.

I wanted the name to be related to gaming as well as sustainability. I explored words associated with “Eco” or “Virid” but found both are widely used for environmental-based companies.

I also came across Greenie, which is defined as someone who campaigns to protect the environment. I felt this could have a negative connotation with some users. The term Greenie did remind me of conversations I’ve had in the past where people expressed wanting to be “More Green” or “Greener”. After a quick app store and domain search, I discovered it was unique, so it seemed like a perfect fit.

With inspiration from the name, I designed the logo as a green tree made of three arrows pointing. The arrows could also signify leveling up.

V1. The color palette clashed and there wasn’t a dominant color for clickable items. Some of the alignment and drop shadows also needed to be adjusted for better flow.

V2. I changed the challenges layout to list form intead of tiles, to provide users with more information. The recording screens first iteration included drop down menus, but I added segmented controls to prevent scrolling and it provided a cool visual. Finally due to confusion of where to start once users were in the app I added a onboarding carousel so users knew what to do once in the app.

V3. After the usability test and some preference testing I updated the onboarding flow and some of the icons.

V4. After V3 I decided to put Greener through the visual design ringer. I updated the color palette with more pastels changed the typography to Proxima Soft for a more playful look. I also separated the feed and leaderboard to remove any confusion still associated with the original layout.

After V2 iterations I tested the usability with 3 participants. Similar to the screens I broke the tasks up into 4 parts. I wanted to see:

• If it was intuitive for a user to pick a challenge
• What steps the users took to Record
• How users interact with the Profile
• How users interact and navigate the Feederboard

After testing, the users averaged an 84% success rate.

There were three things that stood out:

1 user skipped the onboarding walk through and wasn't sure where to start once in the game.

1 user didn't notice the segmented tabs on the recording screen, and another clicked around before finding the tabs.

1 user didn't notice the Leaders tab on the feederboard

After testing I created two preference tests. The first was for the onboarding walk through screens and the second was a more tabbed version of the recording screen.

Since one user skipped the onboarding walk through and also had trouble starting I created an overlay tutorial as an alternative. All users liked the overlay better with one user commenting:

“I’m more prone to skip tutorials like A.”

In the overlay tutorial I also highlighted the tabs on the Feederboard screen to assist any other users who might not notice the tabs.

During testing, one user suggested a clearer connection between the information on the tabs and the tabs themselves. For the second preference test I updated the connection of the tabs. All users found B to be much clearer.

Through many iterations, greener provides a way for users to learn about sustainability in a fun and engaging way. Users can develop sustainable habits through a cue and reward from each challenge using features such as leaderboards, badges, and social influence. Moving forward I'd like to do more preference testing and explore easier ways for users to record to see what users find more engaging.

See Live Prototype