TV displaying a list of tasks alongside an illustration of a ship between two islands.
SEAS of CHANGE

Simplifying wellness into achievable tasks.

Project Type
Class Project
Duration
‍‍
12 Weeks - Fall 2020
PROMPT
Create a wellness system for a TV interface and mobile interface.
This case study features a good amount of research. Click here if you want to skip straight to the design stuff.

Prompt

"Design a personal wellness system for humans at home. App for a TV interface and mobile interface."

This is a wide-open prompt with a lot of room to play with. To narrow the scope a bit, I needed to identify an opportunity for a new wellness app as well as some specific issues in the execution of existing apps.

Research & Analysis

After performing competitive analysis on a few existing wellness systems, I collected my thoughts and organized them into a script for a semi-structured qualitative interview, paying specific attention to the following questions:

How can a TV add value to a wellness system?
What information is safe to put on a TV compared to a more private interface?
What wellness systems already play a role in the participants' lives?
In what ways do those wellness systems succeed and fail?

Following my script, I began by asking each participant about how their day had been and drilled down into the ways in which technology and wellness had played a role in their day.

Key Finding

Many existing wellness apps and systems are subtractive.

Restriction-based systems, like budgeting calorie intake or locking distracting apps, are negative by definition, and as a result often feel bad. There may be an opportunity to create a positive, additive experience surrounding wellness.

Other Notable Findings

I distilled my findings from the interview stage into three problems for my design to address, framed as goals for the project.

Be Positive

There are enough subtractive systems. This should be a positive system, something that users can add to their lives rather than asking them to take something away.

Be Achievable

It’s hard to start a wellness system, and it’s harder to stick to it. This system should be designed to keep the user achieving things and keep them from looking back.

Be Patient

There are too many apps that annoy the user into either using it or giving up entirely. This system should let the user come to it when the user has the space to do so.

Discovering the Opportunity

Personas

My goals would help me later on, when it came time to design specific features, but at this point, I still didn't know what form my solution would take.

In previous projects, I had a clear problem statement I could design around, but in this one, I had to start from scratch. To get a better idea of what problems existed in the space, I developed some personas based on my interviews.

Adam Adept

GOAL
Maintenance
Needs
‍‍
To continue a wellness system that's already working
Principles
‍‍
Nice, Easy, Low-Key

Sam Stressed

GOAL
Destress
Needs
Help managing stress
Principles
Simple, Calm, Engaging

Imogen Impulsive

GOAL
Increase "Healthy Behavior"
Needs
‍‍
To work around other needs and impulses
Principles
Fun, Spontaneous
Personas truncated to conserve space.

Journey Mapping

After creating the personas, I began to map the frustrations uncovered in my interviews to each persona. It was here that I uncovered the problem that I could build a solution to.

Journey map. Imogen Impulsive starts a new wellness program.

The above journey map shows a recurring pain point for some of my interviewees. Most wellness systems and fitness apps have pretty solid onboarding – something I had also noted while doing some early competitive analysis.

However, when discipline began to decline, participants noted that it became something of a slippery slope. Falling behind on a wellness system makes it harder to catch up, reducing motivation and continuing the cycle.

Journey map. Imogen Impulsive starts a Seas of Change.

I envisioned an app that would attempt to catch the users before they fell completely off the wagon, making it easier to maintain a healthy habit.

How Might We

Now that I had a foundation to build around, it was time to return to my goals and reframe them as how-might-we statements in order to develop a plan to meet them.

How Might We create a positive wellness experience? No Restrictions. Additive Changes. Positive Messaging. Fun Colors and Graphics.

It was important to make sure that this app cultivated positive experiences, giving users healthy things they could add to their day: new vegetables, exercises, hobbies, techniques. Rather than asking a user to reduce their time spent sitting, I could ask them to take a walk.

And, of course, the app itself needs to be pretty and fun.

How might we make wellness less overwhelming? Simple Steps. Small Tasks. Also in Small Doses. No (Negative) Notifications

My solution would provide users with simple tasks to do with clear instructions to follow – regardless of how obvious the steps may seem. When someone is overwhelmed, it's easy for even the simplest task to seem insurmountable. In addition, not everyone may know how to perform tasks that seem easy to others.

The app will only ask users to perform one task a day.

How might we encourage a user quietly? Streaks? Social Element? Some kind of gamification or progress tracking. Making it fun. Create observable progress.

This was maybe the hardest problem to solve. I didn't want to annoy a user into compliance, so I needed another way to build motivation. Streaks punish you for falling behind. A built-in social element can be intimidating, especially to users like Sam Stressed.

The key was to create observable progress. Something that visibly grows over time, like a streak, but where your progress doesn't disappear just because you missed a day, unlike a streak.

Something like a tower, where the player could add one block for each day that they performed a task. Suddenly, this idea solved another worry that I'd had in the back of my mind for the entirety of the project.

Hidden Problem
TV Screens are big.

The prompt called for a TV-centric app design, and a list of tasks just doesn't make good enough use of the space to justify such a clumsy interface.

I realized that I could use the size of the screen to my advantage. Users could unlock puzzle pieces or uncover a beautiful illustration with each task completed, revealing bit by bit a monument to their achievements.

Hidden Solution
Use the negative space to house an illustration that grows as progress is made.

There was one major obstacle with this approach: I'm not an illustrator. In order to complete this design on my own, I would need to find an illustration style that worked for my skill level.

User Flows & Wireframing

The how-might-we statements revealed some clear directions to proceed. The solutions to the positivity and achievability problems were both simple and interconnected, so I treated them as a unified flow.

User Flow. Tasks + Tutorial.

Wireframing proved a fun challenge. Mobile-first design that works on desktop is one thing, but mobile and TV have such disparate interaction methods that unifying the experience between them was quite tricky.

Style & Illustration

With the two flows I planned to prototype mapped out, it was time to determine a style for the hi-fidelity mock-ups. This was an important choice because illustration played such a large role in the concept, and because the illustration style I chose would have to be limited by my own ability.

Three moodboards. 1. Bubbly Moments. Song: Otter Pop by Shawn Wasabi. 2. The Climb. Song: LEt's Get this Over with by They Might be Giants. 3. Autumn. Song: Clouds by the Long Winters.

I've never actually been fond of moodboards; while I love visual design, I don't actually tend to think visually. I found that including songs on my moodboards helped me feel more confident in the emotions I was trying to evoke.

Styleboard exploring UI elements for moodboards The Climb and Autumn.

My moodboards revealed that some directions didn't feel quite right, so I used styleboards as an opportunity to explore some of the more promising options. These went through a quite a few iterations, as I found some of my earlier drafts to be too literal.

When it came time for illustration, I started by looking through some of the more esoteric software I had available to me. I knew my best route toward a striking illustration was to bridge the skill gap with style.

Stylized illustration of a house on an island.

I settled on using Marmoset Hexels, a piece of vector illustration software that relies on a pixel-like hexagonal grid. It enabled me to quickly create stylized illustrations that fit with my chosen visual direction.

Prototype

Prototyping posed a new challenge. Rather than simple web- or mobile-based interactions, the TV version of this app required all interaction to be done through a remote.

I decided to simulate a remote on-screen rather than relying on keystrokes, allowing both mouse and touchscreen users the chance to peruse the menus.

Conclusion

I'm really quite pleased with how this design turned out. The process very much involved jumping into the space and building scaffolding as I went; this was fun, but it also reminded me why it can sometimes be important to start with a clear, central vision, especially when designing a new product.

If I were to expand this into a more fully fledged design, I would need to take a step back and re-examine some of the surrounding experience. My initial wireframes and flows included many considerations for onboarding and tutorializing that were ultimately dropped to lend more focus to the unique aspects of the app.

Finally, I would contract an illustrator to refine and expand the illustrations and to help unify the UI with the art.

Lessons Learned

Want to read more? Check out Liftie.