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,
but are better at
breaking them and regretting after...
-
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...
A lot of the apps are too complex to use, I need to spend a lot of time setting it up and managing it...
I just skip the task or ignore the notification if I'm busy...
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 ?
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
2.
Robust Motivating System
- Multiple Levels of Incentives to Keep You Motivated
3.
Flexibility and Convenience of Use
to Get You Up to Speed Quickly
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
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.
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.
Explore Screen Layout & Content with Sketches
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
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.
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)
Earlier Version UI Mockups
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.
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
The Problem
-
Users thought the progress bar was a stepper indicating how many more steps were left for completing the setup process.
-
Some users didn’t realize that they could click on the image to drill in for more land information.
-
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
-
Added a label for the progress bar to make things clearer.
-
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.
-
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
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
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.
