Personal Project

Magic Planter - Cultivate a Better Life

A Gamified Approach to Motivating Behavior Change

OVERVIEW

Magic Planter is a concept-driven mobile app aiming to leverage visual persuasion and gamification to help people cultivate desired behaviors. Research has shown that most people find it difficult to develop good habits or break bad ones, mostly because of losing motivations over time and busy schedules. There are tons of goal-setting and habit-tracking apps on the market that aim to help, however, they are either too complex to use, requiring a great time commitment, or lack an effective motivating strategy. Users lose motivations to even open up the apps over time. Therefore, I had the idea of creating an app that was simple and delightful to use, embedded with a robust motivating system, and was distinct in visual style and functionality to stand out from similar products.

ROLE

Research

Information Architecture

Interaction Design

UI Design

Usability Testing

 

TYPE

Mobile App

Personal Care

Productivity

Gamification

People love and are even great at

making resolutions,

5ways_GettyImages-478203597+copy.jpg
1713670631.jpg

but are better at

breaking them and regretting after...

90399-istock-155284174.jpg
Why-New-Years-resolutions-fail-iStock-61
180-new-year-resolutions-mbox.png
  • Tired of breaking your resolutions time after time?

  • Find sticking to plans a mission impossible?

  • Always lack time or attention and need motivation?

THE PEOPLE Problem

There are many applications on the market that try to help, however

It's exciting at the beginning, but I lose interest over time and don't even want to open it...

18-People Avatar-Woman.png

A lot of the apps are too complex to use, I need to spend a lot of time setting it up and managing it...

10-People Avatar-Man.png

I just skip the task or ignore the notification if I'm busy...

21-People Avatar-Woman.png

What if there's an app that

1.
Not to just educate the rational you through speaking chart and data language,
but also nudge the sentimental you through showing a reflection of youself ?
2. 
Looks adorable and also has a fun and lovely personality ?
3. 
Don't require too much of your time and attention to itself,
but really let you focus on your real life ?
mockup.png

Magic Planter - An app that helps you form good behaviors in a more delightful way

DESIGN HIGHLIGHTS

1.

Gamification Design & Astonishing Visuals

to Spark Interests and Improve Engagement

Gamification & Astonishing Visual styles

2.

Robust Motivating System

- Multiple Levels of Incentives to Keep You Motivated

Robust Motivating System - Multiple Leve

3.

Flexibility and Convenience of Use

to Get You Up to Speed Quickly

Flexibility and Convenience of Use_s.jpg
 

How did I get here?

Move on to learn about the detailed design process.

 

Constraints & Challenges Facing

Starting from Scratch

This was a whole new project that I needed to create from scratch - from product ideation to problem definition, to strategy development, to interaction design, and to final screen UI design - following a user-centered design process to create an end-to-end experience

A Great Number of Similar Products on the Market

- Small Room for Groundbreaking Innovation

There were tons of habit-tracking or goal-setting products on the market already, so it was challenging to come up with innovative solutions or distinguish the product from the rest on the market

Balancing between Integrating Metaphor, Gamification, and Clean Visual Style into the Product and Ensuring Intuitive Interactions

Inspired by a few game apps, I wanted to create an app that had a stylish look and gamified elements. This potentially could hurt the ease of use of the app, because of unfamiliar elements or exploratory interactions

THE DESIGN PROCESS
01 - RESEARCH & EMPATHIZE

How did I decide on what to Build? What problems are people facing?

1 / 1

The Research & Discovery

With my high-level goal in mind - to create an app that would help people with behavior change - I started my research to identify the common themes in people's goal-setting, tools and methods people used to help with behavior change, pain points they were facing, and potential design opportunities. For this, I did:

  • Interviews

  • Contextual inquiries

  • Competitive Analysis

To-do-list.png
Game.png
Competitive_Analysis_Report.png

Finding Highlights

  • Tools & Methods Used to Keep Self on Track:

    • To-do lists (paper or digital) & calendar, habit-tracking apps, pairing or competing with friends, digital games​​​​

​​

  • Pain Points Facing: 

    • Lose motivations over time

    • Too easy to skip tasks

    • Apps are too complex to use, adding hurdles for busy people

  • Things That are Effective:

    • Someone holds you accountable

    • Terrifying facts or in the middle of suffering from bad habits

    • The process is fun, exciting, and less painful

    • Studies have shown that people are more sensitive to losses than to rewards

 
02 - DEFINE PROBLEM & STRATEGY

What is the problem that I want to solve? How should I solve it?

1 / 3

Define the Problem and Goals

The Problem

People want to change behaviors to achieve bigger goals for health, learning, finance, etc., but change is hard. Sometimes we lack information. Other times, our routines and habits are really persistent. There are various approaches and tools to help us establish and execute plans. However, losing motivation over time is the biggest huddle for people to successfully follow their plans. Also, when we are busy, it's very tempting to skip tasks. Some existing apps that mean to help are either too complex to use for busy people or lack an effective motivating strategy.

The Goal

With the research data and existing constraints (time, technology, resource, etc.), I developed a solid idea of what to create first and set a more concrete and detailed goal - to create an iOS app that allows people to set up goals or follow pre-designed programs and track their progress in a delightful way. The app should innovate on the motivation scheme. Social components should be included, but for the first round, just focus on the basic functionalities.

2 / 3

Brainstorm Ideas for App Concept & Strategy

As a firm believer of the power of visual persuasion, gamification, and storytelling, I wanted to leverage these methods to create an app that's concept-driven, visually appealing, and playful. At the same time, it should not require too much time commitment as most games do.

 

After some brainstorming, I ended up with an idea of injecting a layer of metaphor into the app: treat the behavior-forming process as a garden/land cultivating process. The garden/land is a digital reflection of the user's self. The prosperity of the lands reflects the well-being of the user. The appearance of the land should be lively enough that could really speak to the users of their performance and trigger their self-examination.

3 / 3

Define the Requirements and the UX Strategy

Features Required for the 1st Version

  • Pre-designed programs containing curated habits

  • Ability to set up new goals or programs and customize existing ones

  • Ability to check off accomplished tasks

  • An easy to use monitoring and tracking system

  • Notification system

Branding Consideration

  • Inspiring, motivating (but in a calming way)

  • Playful, fun

  • Mysterious, charming

The Plan - UX Strategy Blueprint

By consolidating the research data, goals, requirements, and my other thoughts, I developed a UX Strategy Blueprint to guide my design moving forward. 

ux-strategy-blueprint.png
 
03 - DESIGN

Exploring possible solutions

1 / 3

Information Architecture

Sitemap Creation

Working together with some page layout sketches, I created a sitemap to map out the overall information structure of the app. I visualized the screen layout in the sitemap to guide me through later designs, and I thought this format would be useful for clients as well in the real world.

Sitemap for MP.png

Explore Screen Layout & Content with Sketches

Homepage Interaction Sketches.jpg
 
2 / 3

Interaction Design

User Flows

I created 3 user flows to design the paths that users would follow to accomplish some core tasks in the app

User Flow

Wireframes

I created screen wireframes for each of the 3 core user flows. The layout and content of each screen were carefully selected to support key user flows.

Wireframe_edited.png
Challenge Encountered

Home Screen Layout Decision Making

VS

I initially hesitated between the carousel view and the grid view in terms of how to display the lands by default on the home screen. I finally picked the former, making the home screen display just one single, large, and beautiful land image by default.

 

Although the grid view should be more straightforward, the enlarged single land image was more eye-catching. Whenever users opened up the app, they could see at first glance how well a land was growing, namely, how themselves were performing - it would not only bear more visual power but would also save users time to click into each land.

3 / 3

UI Design

My vision for the app was that it should stand out in its visual design. It should have a distinct visual style - simple and clean but fantastic at the same time. The UI was supposed to be a little bit exploratory, corresponding to its gamelike quality, which meant that some controls might not be extremely straight-forward, like the popular game Monument Valley. However, such visual treatment should not pose big usability issues.

 

It was a pretty challenging task to find a balance between visual uniqueness and usability, and I would need to conduct user testing to help me decide where to draw the line.

Visual Design Style Guide (the logo is temporary)

Brand Style Tile - MagicPlanter_v2.png

Earlier Version UI Mockups

MP UI Design_V1.png
04 - TESTING

Validate the design with target users

1 / 1

Prototyping & Usability Testing

The app is driven by a metaphor. I was intentionally sacrificing some level of learnability to accommodate the aesthetics and playfulness of the app throughout the design. Therefore, one major goal for usability testing was to find out how challenging it was for participants to successfully finish the core tasks without an onboarding process and where I should definitely improve learnability. I created a clickable prototype in InVision and a detailed testing plan to help test things out with potential users. Four usability testing sessions were then conducted. Issues and feedback came out of the sessions were documented.

Testing Results Affinity Diagram

I compiled the notes taken from the testing sessions and did an affinity mapping exercise to categorize the findings and to list recommended changes both for the short term and for the long term.

Affinity Mapping_s.png

Testing Results Summary

Participants were able to follow the flow and information overall. However, most of them did find it challenging to guess where to click in a few cases. This was anticipated since it was intentional to sacrifice some level of learnability to accommodate aesthetics and playfulness. (There’s a plan to incorporate an onboarding walkthrough to help first-time users learn the app as many mobile games do.)

People in general really liked the look and concept of the app, though 2 of the participants who felt more self-disciplined than others thought that they would probably ignore the concept and metaphor but go for something quick and simple instead. I felt that it could be a gender-related phenomenon, as my female participants were apparently more interested in the concept and rituals embedded. This worth more extensive research later.

 
05 - ITERATION

Adjust the design following insights from user testing

1 / 2

Iteration Examples

Case 1

Comparison 1.png

The Problem

  1. Users thought the progress bar was a stepper indicating how many more steps were left for completing the setup process.

  2. Some users didn’t realize that they could click on the image to drill in for more land information.

  3. Some users didn’t understand the drop icon and didn’t think it was for watering, because of the look of the drop and the background color.

The Solution

  1. Added a label for the progress bar to make things clearer.

  2. Changed the land name’s color to purple, as purple was used consistently to indicate interactivity in the design. Also, added a drop shadow to the land graphic to make it raised to call for tapping.

  3. Changed the drop icon to be a water can icon. I didn’t touch the background color as I was trying to maintain a warmer color scheme, however, if people still have trouble in later testing, I’ll consider change the color or even redesign the workflow.

Case 2

Comparison 2.png

The Problem

Users spent more time than expected to find out how to edit the task configurations.

The Solution

Moved the single edit icon from the top nav bar to the task details area and dedicated an edit button to each section. This would allow users to directly land on the right section to edit in the editing screen shown later.

 
2 / 2

Final UI Design

Hero Image_V4.jpg
 
REFLECTION

What I've Learned

Focus - Do one thing right rather than trying to tackle a lot at once

Initially, I was thinking about having a dedicated screen for a to-do-list feature, making the app combine functionalities for both habit-forming and productivity enhancement. Then I talked to potential users and they didn't like that idea, feeling it would make the app confusing to use.

Sacrificing usability is not absolutely a no-no if there's a decent reason,

but it should be used sparingly and the solutions should be carefully tested

  • Applying visual creativity and new concepts can sometimes hinder usability. To achieve a clean and unique visual style, I used a few stylish icons and other graphics without labels. There was also an inherent metaphor used to drive the app. My testing participants found it hard to figure out several of the visual elements without trying first. I then changed a couple of them to be clearer after testing but also decided to leave a few untouched, considering they required a very low cost to experiment and were very easy to learn but helped maintain the integrity of the app style

 

  • After playing around with several well-accepted, game-like, and stylish apps, I noticed it was pretty common for things to be a bit exploratory inside gamified apps

 

It's important to find the right market niche for your product,

as people can be very different 

The idea of embedding a metaphor into the app and using polished and fantastic visuals seemed to be better accepted by my female participants than the males. My male participants felt they would prefer to go with something quick and simple. Therefore, I feel that this app may work better for people who are into the sense of rituals.