How can we train ourselves to look for the positives in life?

The practice of gratitude journaling has been shown to have many positive benefits. It's as easy as writing down the things you are grateful for on a daily basis.

I wanted to design a system that encourages people to get into the habit of gratitude journaling, and to share their gratitudes with others, using the technology they have at hand.

Fuzzies full-fidelity mockups of the splash, individual fuzzy, and main feed.

Fuzzies full-fidelity mockups of photo selection, question/prompt selection, and create account form.

Fuzzies full-fidelity mockups of the splash, and main feed.

Fuzzies full-fidelity mockups of an individual fuzzy, and the editor.

Backstory

It begins with thanking ourselves.

Ever since working at a company where employee recognition was a common, everyday, and rewarding practice, I knew I wanted to bring that with me everywhere I went.

So initially for this project I had thought of building my own personal recognition solution... but that didn’t provide much of a design challenge for me, having lived in that world for many years.

I realized it begins with thanking ourselves: Finding the small, everyday things that we can be happy about; from our tiny accomplishments, to a tasty cup of coffee. After we’ve started to appreciate the world around us and ourselves, we can then expand our gratitude to our family, friends, acquaintances... and idealistically everybody else we come across in our lives.

Thus, fuzzies was born.

My Role

I did all the things: Concept, research, user interviews, personas, information architecture, job mapping, user testing, wireframes, mockups, prototypes (InVision, Xcode, node.js), animations (Principle), branding, and copywriting.

Timeline

4 weeks

Deliverable

High-fidelity prototype.

Ethnographic Research

What's getting in the way?

I began by conducting interviews about gratitude. Over the course of these interviews, a few key insights emerged:

People have trouble coming up with gratitudes.

I started each interview putting people on the spot to come up with things they’re grateful for. It’s challenging! What helps is a prompt: some audio or visual cue to get the person to remember something.

My thought was, what information was already on the person's phone that could be used as prompts? I questioned people about how they used their phones, looking for what content (calendar entries, photos, songs played, conversations, stuff they read, etc.) we could use to trigger memories for journalling.

I take photos of things that speak to me.

For this iteration, I chose to focus on photos, to bring meaningful visuals into the app, as well as look at how to ask the user different questions.

For future versions:

people I talked to listen to music regularly, so it seemed like it would be a good option; and
most people use their calendar for things outside their routine, and mainly for work.

Developing the habit to journal is hard.

This wasn't surprising, as keeping any new habit is hard. As I knew notifications would be part of the solution, I asked about those:

Reminders shouldn’t go off at inopportune times.

People who already practiced journaling did so at the beginning or end of the day. As a result, I chose to let the user set an ideal reminder time.

Gratitude can be perceived negatively.

Some people connect gratefulness to religion.

This was something I hadn’t considered. In order to address the largest audience, I decided not to have monks or ties to religion as part of the app’s brand, in case this didn't connect with some of my potential users.

Public gratitude on social media is not perceived to be genuine.

Try searching Twitter for the words “grateful” or “thankful”; the results can feel like they're bragging, relating to religion, or condescending.

A curated feed that is proprietary to the app, or a managed social feed, might work better (if needed for marketing, or as prompts within the app itself).

Competitive Research

What are similar products doing and what can I learn from them?

I made use of direct competitors (My Gratitude Journal, Grateful, Uplifter, KYŌ, pen and paper) for a number of days. I also looked at diaries (Day One, Grid Diary), apps that cater to building habits (Productive), and apps that provide writing prompts (Werdsmith, Prompts).

Diaries

Being able to do journal more than one gratitude at once was helpful, as thoughts flow when thinking about what to write. Text formatting options are nice, but I didn't think necessary for MVP.

Screenshot of formatting options in My Gratitude Journal.

Building Habits

I also saw a trend of gamification where progress is visually rewarded, but users are not guilted into adding entries regularly. As a variable reward, one app provided a quote after writing each gratitude.

Screenshot of progress gamification in Productive.

Writing Prompts

A couple apps allow you to customize a prompt question, which was useful. The ability to pull up photos within the editor was helpful; the weather, not so much.

Screenshot of ability to change prompt reminders in NYO.

Voice + Tone

The tone in gratitude apps is light-hearted, and encouraging. App notifications with varied messaging helps to keep these prompts fresh.

Screenshot of different My Gratitude Journal notifications.

Lessons learned from competing apps.

What opportunities exist in the market?

No apps provided prompts using other information from the phone, such as recently-played music (possible via the iOS Media Player framework, for example), or recent calendar entries.

None of these apps think about life outside of the app: How can I easily record my gratitudes in other contexts (e.g., via conversational UIs)?

Sharing gratitudes wasn't something these apps focussed on, either, keeping journalling a private activity. While that may be appropriate for a diary, gratitudes definitely lend themselves to sharing, as evidenced by social media.

Journey + Ideation

Help me recognize the good things in my life, so that I feel good about myself.

High-level flow of the app, and the questions that were raised at each stage. View full version (PDF)

I found it helpful to look at the "job to be done" in the context of Tony Ulwick’s universal job map, having applied it successfully in previous projects.

Using this lens raised a number of "how might we" questions that opened the implementation up to numerous solutions. You’ll see those on the journey map.

User Flows

Building the habit via onboarding.

The user onboarding flow looks long, but testing feedback indicated it didn't "feel" long.

My approach to onboarding the user was to get users to enter three gratitudes, and reward them for doing so; on an ongoing basis, three is recommended and rewarded, but not enforced. App permission prompts are spread out, and presented in the context in which they will aid the user.

When mapped out, the onboarding flow looks rather long, but all my testing feedback indicated that it didn’t feel long.

Wireframes

The timeline appears.

Various pencil sketch concepts of the edit screen.

As I created my wireframes, I really liked the concept of a chronological timeline, and centered my UI around that.

Each screen is really a snapshot of a moment in time in the conversation with the user. In hindsight, I think I would have done one continuous timeline to mock out the conversation to make sure it flowed, and then put them in screens.

Branding

Creating a brand that feels good.

Colors chosen were warm, bright, happy, organic, as well as different enough from the competition. I received overwhelming positive feedback about using orange as my primary color; and green paired well as a secondary color.

With a minimal amount of time to work on a brand, I kept the logo simple, by starting with my main font (Avenir) and adding the "fuzzy" i element.

The icon ultimately zeroed in on the fuzzy "i" icon design, incorporating the rays in the background, and a high-contrast icon that worked well when placed on a screen with other app icons.

HIGH-FIDELITY MOCKUPS

Evolution of the main feed.

The card design of the main feed evolved from something I didn't want to take a lot of vertical space (grouped by day), to one where each "fuzzy" became its own standalone object.

Initial variations of items in the timeline grouped by day evolved into cards for each fuzzy. As not every fuzzy would have an image, I wanted text-only fuzzies to carry visual weight, as well.

More variations of fuzzies, but with images.

Cards came to represent fuzzies from the user, as well as from other users. Entry was delegated to a separate screen — where more formatting options and prompts could be provided — via the floating-action button.

The main feed of the app, with callout numbers.

Trophies are used to encourage users to enter three fuzzies each day. This is not a requirement, but users are rewarded with confetti if they get all three.
Fuzzy actions are available via an Action Sheet, to keep the feed easy to scan; over time we might surface specific actions (e.g., Favourite, Share) depending on usage and priorities.
Tapping on an image opens it in a full-screen view, due to the difficulty in showing the full image in a feed. I opted not to indicate to the user that this was an option as I thought it would clutter up the card UI and wasn't important.
Fuzzies from other users fill in any empty space at the bottom of the feed, and may progressively load to a point. A different color and leading icon help to differentiate these fuzzies from the users' own.
The close/remove button allows users to remove fuzzies that may trigger bad memories, or be repetitive; with machine learning over time the system could use this trigger to better select other user's fuzzies.
The I feel this! action allows the user to easily start a fuzzy from somebody else's.
A floating action button allows users to enter fuzzies regardless of their position in the feed, as other items may inspire thoughts about what to post.

Trophies are used to encourage users to enter three fuzzies each day. This is not a requirement, but users are rewarded with confetti if they get all three.
Fuzzy actions are available via an Action Sheet, to keep the feed easy to scan; over time we might surface specific actions (e.g., Favourite, Share) depending on usage and priorities.
Tapping on an image opens it in a full-screen view, due to the difficulty in showing the full image in a feed. I opted not to indicate to the user that this was an option as I thought it would clutter up the card UI and wasn't important.

Fuzzies from other users fill in any empty space at the bottom of the feed, and may progressively load to a point. A different color and leading icon help to differentiate these fuzzies from the users' own.
The close/remove button allows users to remove fuzzies that may trigger bad memories, or be repetitive; with machine learning over time the system could use this trigger to better select other user's fuzzies.
The I feel this! action allows the user to easily start a fuzzy from somebody else's.
A floating action button allows users to enter fuzzies regardless of their position in the feed, as other items may inspire thoughts about what to post.

KEY QUESTIONS

How the design answers three key questions.

How might we make it a habit?

Animation showing the reward for adding a fuzzy.

After entering a fuzzy, the user is rewarded with a random fuzzy from another user.

I looked at Nir Eyal's hook model to build the habit of journaling.

After a notification (the external trigger) appears, the user is taken directly to the editor, with the keyboard displayed. Once the gratitude is entered, we display a random entry from another user (if they opted to share) as the variable reward.

How might we make it easy?

To make it easy to make a fuzzy, one path might be to allow the user to take action from the reminder directly.

I was inspired by chat apps that allow you to do this, but had to research if it was available to others.

Animation showing responding to a potential fuzzies notification, on iOS.

Journalling directly from a reminder, without having to open the app. Prototyped in Xcode + Swift.

How might we be in the flow of the user?

I wanted to see how we could be where the user is. During the day, that might be in a messaging tool such as Slack. To that end, I prototyped two Slack commands, one to show the latest fuzzies and another to add fuzzies:

Animation showing the potential fuzzies Slack command.

Adding and reading my fuzzies outside of the app, in this case Slack. Prototyped in node.js + JavaScript.

Lessons Learned

A couple key lessons stood out for me, in this project:

We carry a lot of our assumptions into interviews. Writing those down separately to bring self-awareness to them proved useful.
The connection between religion and gratitude was something I hadn't anticipated; this insight alone changed my branding approach.

If you have feedback about this case study, I'd love the input!