Published on | Prototyping: From UX to Front End — Medium Laurel Natale

For some websites and apps, the UX is truly is about the journey than the destination. Take for example, my internship project involvement with designing a solution for a 529 contribution website. At first it seemed that the money contributed was the incentive and reward for the account holders. But is that true? When designing a solution for goal setting, we luckily have some theories that can help lead us in the right direction.Let’s walk through an example similar to the 529 contributions website. Here is Picatso. He is a bit sad about his weight and so he has decided to pay for an app to help him shed some pounds. This is not Picatso’s first rodeo and he has tried this already, always ending up back to his original weight.

Startup company, PhatCat, has approached you to design their new app to help frustrated cats like Picatso. The idea behind their app is to create a fundraising page where friends and family can visit and donate money to help him achieve his weight loss goal. When the goal is reached, he can then use that money, but only for things that help him with his weight loss such as nutrition coaches, meal plans, fitness classes, gym memberships and local races such as the CrossFeline 5K. This seems like a pretty solid plan, right? The friends and family donate money and get to feel good for donating and helping. Picatso gets money and uses it to shed the pounds and PhatCat earns revenue from the donations. So, what’s the problem? The problem is we never took a look at the journey of the goal setter, and the goal setter is asking himself these two things:‍

1. How obtainable is this goal?

2. What’s in it for me?

‍

Let’s look at question #1. If Picatso only needs say $200.00 for some fitness classes to lose 10 pounds than that’s fine and dandy. But most cats like Picatso paid for the app because they need help reaching a goal that is too difficult to reach on their own. So let’s sayPhatCat’s calculator told Picatso that he needs $200,000.00 for a personal nutritionist, a private trainer, a gym membership, new equipment, clothes, and so on. If Picatso is asking how obtainable the goal is, $200,000.00 may seem daunting and scary and unobtainable. We lost him before he even got started.

When designing a solution that involves big and scary goals, we can use simple psychology to help us. For this solution we can use Maslow’s Hierarchy of needs:

The hierarchy displays the needs and drives of humans. The pyramid above shows the different levels of the hierarchy, in which the largest level at the bottom includes the physiological needs of a person, while the secondary level at the top represents the need for self-actualization. — explorable.com

We can actually incorporate several of the need types into our design solution:‍

Physiological
Safety
Social
Esteem

A large, unobtainable goal is scary especially when the end goal is something essential to the goal-setters life such as saving for a house, collage, or in Picatso’s case, lifestyle. If we first take the number and break it down into smaller numbers represented by things he wants we take away the scariness and create a sense of safety for Picatso.

Nutrition (Food & Food Education) — $50000

Exercise (Classes, Gyms, Races) — $50000

Training (Personal Trainer) — $50000

Equipment (Exercise Equipment & Clothes) — $50000

$50000 is still pretty daunting but this is where we can start applying more Gamification techniques and fulfill more basic needs. We want Picatso to feel as if he is on a journey and we want him to feel accomplished and share those accomplishments along the way. If you read Storytelling with Mini-Animations, you read a little about Joseph Campbell and the Hero’s Journey. We can apply that theory here as well by using the categories we created as achievement milestones. Reaching and achieving this milestones will create a sense of esteem for Picatso and keep him motivated.

For our design solution, let’s do some more breaking down and then apply some milestones for Picatso:

Nutrition Milestone 1 — $12500

Nutrition Milestone 2 — $12500

Nutrition Milestone 3 — $12500

Nutrition Milestone 4 — $12500

Now we have our milestones but how does Picatso progress to each of them? We look to the Incentive Theory where “a person will more likely to do an action that is positively received, while he will more likely avoid an action that is negatively received.” — explorable.com

So let’s sprinkle in some rewards for Picatso. As UX designers, we must keep the user and their emotions and behaviors in mind. For Picatso, he is gearing up to lose weight and so he is going to be sacrificing things from his old lifestyle for his new lifestyle. We can give those back to him as incentives and in doing so, fulfill his needs Physiologically.

In our design solution, let’s breakdown each milestone some more and apply some more gamification by giving Picatso some fun, consumable virtual goods for motivation. Consumable virtual goods are “items are designated as “consumable” because once used, they can’t be used again” Why do we want this? According to mobile analytics firm Flurry, “more than two-thirds of mobile in-app purchases for games on iOS and Android go towards buying consumable items.” — mashable.com.

Nutrition Milestone 1:

Nutrition Milestone 1/4 — $3,125 = Virtual Catnip, encouraging and supportive message, share link.

Nutrition Milestone 2/4 — $3,125 = Virtual Cat Treats, encouraging and supportive message, share link.

Nutrition Milestone 3/4 — $3,125 = Virtual Bowl of Milk, encouraging and supportive message, share link.

Nutrition Milestone 4/4 — $3,125 = Virtual Toy Mouse, encouraging and supportive message, share link.

Notice how each Milestone Picataso reached he got a bigger reward? We can use different types of rewards for each category so Picatso can fill the special world (Hero’s Journey) with things that he is giving up in his ordinary world. For the Exercise category, for example, we may use rewards such as a Virtual Beam of Sunlight for Picatso to nap in or a Virtual Fur Brushing. These category would fulfill needs of warmth and comfort where the Nutrition category is fulfilling food and play.

Did you notice how each reward comes with a message and a share link? We want Picatso to feel accomplished and a sense of esteem. The rewards contribute to this but there is nothing better than being told straight out what an awesome job we are doing. And what will Picatso want to do when he feels a sense of achievement? He will want to share it! Providing a share link and filling it in for him with a message proclaiming his effort and achievement does several very important things:

It allows Picatso to share (Brag) his accomplishment which, in turn, shares his story about his journey to a new slimmer him, creating esteem.
His post with no doubt get comments from his friends and family congratulating and supporting him, making him feel loved and fulfilling his social need.
While asking for money is taboo and incites anger in some societies, people are much more open to helping someone achieve their goal, especially when they see that person working hard towards it. If we design the app so it uses Picatso’s post to not only share his accomplishment but invite his friends and family to donate, this will get around the dreaded asking for money and keep the focus on Picatso and his weight loss. Let’s not forget the purpose of the app for the stakeholders — to make money!

Using simple psychology and applying popular and proven gamification techniques, we can create a delightful and fulfilling user experience that flows through the entire journey while keeping the stakeholder needs in mind.

When the Goal is the Game was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

When the Goal is the Game

Cool stuff, every week

More Articles