ecoKoin, a social game of eco-friendly challenges

Overview

ecoKoin is an iOS app a social game of eco-friendly challenges, funded by the National Science Foundation. It’s a project I have been working on in the Games Research Lab at Columbia University since September 2015.

The iOS app allows users to take pictures of their eco-friendly actions, upload them, complete missions and earn ecoKoins. Through a feed where they can see others’ actions and completed missions, as well as a game mechanics such as collecting ecoKoins and leaderboard, users can be motivated to do more sustainable actions.

My Role

I am the lead UI/UX designer to improve the user experience. I designed the icon, consolidated the user flow and redesigned the UI to be cleaner and more intuitive and the core action more prominent. I created mockups and prototype for new features testing. I also participated in research, user testing and focus groups.

ecoKoin Features Graphic 2

*The app will be released to the App Store soon, but I cannot disclose too many details of the app until its launch.

Sample User Flow and Mock-up

flow & annotations

Sample Lo-fi Wireframes for new features

ecoKoin redeem Create New Mission Wireframe

Highlights from the Re-design

1. The profile page

Before the avatar was too big and blurred, and the leaderboard was hidden inside too! I moved the leaderboard to the tab to make it a first-level navigation, for we wanted to stress the game mechanics. Then I redesigned the profile page to make it cleaner and everything organized and easier to find.

Left  – BEFORE; Right  – AFTER

2. The Leaderboard Page

Leaderboard needed to be clear and should be able to motivate people to do more eco-friendly deeds. Before it was very unappealing, and the “challenge” button didn’t do anything. Thus I visualized it.

Left – BEFORE; Right – AFTER

3. The splash screens

As the first screens users will see and serving as an introduction to our app, they were nor very inviting before, so I used bright green colors — in accordance with the app’s theme color — as well as illustrations, to introduce new users to the app. (Copy on the splash screens were written by my teammate.) Another detail was that I noticed many users swiped the wrong way during usability test, so I added an arrow beside the text to prevent such confusion.

Splash screen BEFORE

Splash screen AFTER

All rights reserved.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s