UX/UI
ACADEMIC PROJECT

How might we encourage users to adopt sustainable habits?

View prototype  

"You read news about how plastic straws affect sea turtles.
You want to bring your reusable cup to Starbucks
every day but keep forgetting. You’re afraid you can’t
commit to those actions on a regular basis…"

Overview

Background

Carbon footprint is the total amount of greenhouse gases (including carbon dioxide and methane) that are generated by our actions. ecoTrack is an conceptualized eco-conscious application that allows users to set personalized sustainable tasks and actions schedules and create habits and lifestyles.

Project goals

  • Conceptualize a mobile app that helps users with sustainability habit
  • Apply gamification to create an engaging and enjoyable experience for users when doing eco-conscious tasks

Role

Design lead
UX designer

Duration

4 months
Mar - June 2023

Design process


empathize

Competitive analysis

The biggest gaps for a more engaging and effective user experience are a lack of repetition, reminders, gamification, and attractive rewards.

User research

Interview objectives

DEFINE

Personas

Budget Amelia

It's so expensive to keep up the sustain habits.

Motivations

  • Want to reduce the use of plastic
  • Especially care about the environment
  • A climate change advocate

Frustrations

  • Tries to maintain sustainable habits but inconsistent
  • Wants fast and convenient solutions but they’re not sustainable most of the time
  • Lives with parents doesn’t give her many options to practice sustainable habits

Low motivated Eric

I wish these things are more fun.

Motivations

  • Wants to reduce his undisciplined shopping habits
  • Losas supporting local, sustainable, ethical businesses

Frustrations

  • Difficulties in finding motivations to start new habits
  • Lack understand of the seriousness of environmental issues

Problem

Lack of problem awareness

Lack of incentives and motivation

Lack of tracking method

How do we make the process of performing eco-conscious tasks more engaging and enjoyable and possibly form habits?


IDeate

Setting scope for the design

Motivate users by weekly challenges and gamification

Daily tracker of small, doable actions to make action tracking easier

Personalization options based on users' preferences

User flow

User flow 1 demonstrates the steps from browsing
eco-conscious action to complete the action. This is one of the main features of the app that let users browse the action they want to do and set their own preference of routine.

User flow 2 demonstrates the user who enters the
eco-conscious challenge. This feature allows users to participate in a gamification weekly challenge where they can compete with other users and win prizes.

IA diagram

I created the app information architecture using the card sorting method to understand how users categorize and organize information or concepts.

Sketches

prototype + test

Mid-Fi prototype

The weekly challenge prototype boosted engagement through gamification and friendly competition, integrating leaderboards and rewards. Actions were categorized into sustainability areas for personalized recommendations, fostering active participation, and aligning with users' interests and lifestyles.

User testing

The result of user testing showed that the prototype had too much information and text and lacked visualization. Some information was displayed illogically, which cause difficulty in navigation.

Location:
University of Washington

Particiants:
5 people

Length:
15-20 minutes

Final design

View prototype  

Home page

Changes

  • Represent information with visual instead of text
  • Make information tags look less clickable
  • Make call-to-action buttons more visible to attract users

Weekly challenge

Changes

  • Change the card layout so users can browse the entire challenge
  • Make information tags look less clickable, which makes users less confused

Leaderboard

Changes

  • Add hierarchy to the users' ranking
  • Make the information clear by creating a table format to help users understand the information such as challenges or impact

Eco-conscious action browsing

Changes

  • Add more visualization to help users feel less overwhelm with the amount of text
  • Categorize actions into their group to help users find actions easier
  • List the amount of action within each category to reduce any overwhelming feelings

Action information

Changes

  • Reduce text by adding visual aids like graphics and illustrations
  • Break down information small, consumable size