Company: Oath
Date: July 2017 - February 2018

Team Members: Sumukh A. (Senior Engineer), Matthew B. (Senior Engineer), Laura B. (Engineering Intern from Waterloo), Aalhad P. (Engineering Intern from Columbia), Mitchell M. (Illustrator) and Wynne Leung (Senior Product Designer)

Advisors: Anna L. (Senior Product Designer), Jesse C. (Director of Engineering), Yowhan M. (Manager of Engineering)


Introduction

We've simplified many of our physically demanding tasks by using Uber, Lyft and even segways. It made us wonder if technology will ease our physical burdens to a point where we may become physically unfit to perform daily tasks in the future.

PowerUp is a project with the intention of being a motivation for physical activity.

When I joined the project there was an assumption that fun competition would build motivation and community. Later as a team we would decided to use that as our starting point for this project.

It’s also helpful to point out that this project was an experiment within the company. We were given a timeframe and a budget to work on it. If during the project it met a series of data points it would then be created into a fully funded project. My role on the team was the lead designer with the gracious help from Anna Liao.

Because the challenge of this project didn't look like a linear design challenge I encouraged the team to use design thinking for guidance.

Design Thinking Process

  1. Empathize

  2. Define

  3. Ideate

  4. Prototype

  5. Test

  6. Accessibility

Source: https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process  Here is a summary of the design thinking process we followed for the next seven months.

 

Empathize

With intention of creating something meaningful I needed to know why we were doing this work. I decided to empathize first with my team members and then to the potential users of this product. To do that, I created personas and sat down with each member of the team to gather qualitative information.

Through this process of personal interviews and a demo of some potential personas I learned:

  • This was the first time team members were introduced to a design process

  • This was their first time using a persona

  • Team members expressed curiosity on learning more about design thinking and eager to go through challenges together

I knew then that my role on the team would be more than just advocating for the users of the product, but I would also have to compassionately educate my team members about design. Because all three of my team members were engineers I also decided to connect with the user research team at Oath with the intentions to be of support to clarifying design solutions in the coming months.

 

Define

To define the design problem I organized a series of brainstorms with the user of visualization of the product to help us question the assumptions what we already had in our minds:

  1. That creating a competitive environment would spur motivation and help people become more physically active and healthy

  2. That using animations and fun illustrations would make the app appear more fun and exciting

  3. That allowing users to buy items with their winnings will encourage them to use the app more and continue to do so for many months to come

Through the brainstorm sessions with visualizations I learned:

  • My team members and many stakeholders were already very committed to the assumptions above despite the risk of launching without doing research

  • That it would be very challenging to get buy in for the research team to conduct research at this point

Staying aligned as a team by defining out challenge together was still very important. Together after many discussions we created a guiding principle for our design intentions. I organized all our features into a flow chart and together we decided which ones we would launch and test for MVP.

 

Ideate

We decided that the game’s intent would be to create motivation for physical activity through daily competitions. The user would be paired up with a new opponent everyday at midnight. Both users will have the next 24 hours to obtain as many points as possible. Points are given based on the user’s heart-rate, steps taken and flights climbed from the data that we can obtain from HealthKit.

To establish the criteria for the story that we will tell with the app through design I asked the team to brainstorm on whether this will be a game app or a daily function based app?

For our brainstorm I created two quick motion prototypes. We decided together as a team to explore deeper as a game motif because it didn't exist yet in the app store. We intended to focused our design on feelings of fun, charm, excitement and pleasure.

Through our brainstorm we decided on six ideas for launch testing.

Six Ideas for Launch Testing

  1. On-boarding

    1. The intention for the on-boarding process is to bring the user through a series of tasks to create a profile. It involved a series of small steps: selecting a character, creating a username and enabling Healthkit permission. We required Healthkit data to track steps, heart-rate and stairs climbed as points throughout the game.

  2. Profile Health Status

    1. The intention of the Health Status feature is to provide information on where the user is throughout the day to their daily goal of 10,000 steps.

  3. Matchup

    1. The intention of Matchup is a space where the user can: observe the status of their daily matchup, information about their opponent and communicate through emojis to their opponents.

  4. Matchup Taunting

    1. The intention of Matchup Taunting is a method of communication between the user and his/her opponent for the day.

  5. Marketplace

    1. The intention of the Marketplace is an additional level of competition to motivate physical activity. It's a place to try and buy fun items for their characters with the gems that they earn through winning matchups and meeting their Health Status goals. 

  6. Port Experience to Apple Watch

    1. The intention of porting the experience onto Apple Watch is to test our hypothesis of whether users would find that of value. We intend to port the experience with these features as is to test and obtain data from it.


4. Prototyping 

For each of the six ideas we started with quick motion prototypes for brainstorming and then pushed it to the live prototype to obtain data through Flurry. 

Below is a process that we intended to follow:

  1. Team brainstorm for idea

  2. Team develop key concepts and sketch them out 

  3. Designer make quick prototypes from key concepts

  4. Team question key assumptions and select the candidate for live prototype to gather data

  5. Engineer to build on live candidate idea

  6. Designer to work on UX and visual design for live candidate 

  7. Engineer - Launch to live prototype 

  8. Team - Gather data and analyze

  9. Team - Create new assumptions

 


On-boarding & Tutorial

Team develop key concepts and sketch them out 

Designer make quick prototypes from key concepts

Designer to work on UX and visual design for live candidate 

On-boarding - Visual Design
A -
Select a character
B - Create a username
C - Healthkit verification
D - Enable Healthkit permission screen
E - Tutorial accomplished screen

Findings through in-person surveys and data from Flurry

Flurry that 50% of our users didn't accept Healthkit permissions which is mandatory for the game to proceed. We worked on revising the page with a clear message to educate the users on why we need this data. 

Visual Design - Healthkit Permissions
A -
Healthkit education and permission screen
B - IOS Healthktit permission screen
C - Healthkit verification fallback screen to educate users to give access through Health App

Through our in-person survey we learned that 5 out of 35 participants needed more guidance and help when they entered the game. We decided to brainstorm for a small in-context tutorial.

Below are our notes from the brainstorming sesssions for the mini tutorials

Tutorial - Visual Design
A -
Profile, default
B - Profile, scrolled view with condensed header
C - Profile with Health Status open
D - Profile, pull-to-refresh

 

Profile & Health Status

Team brainstorm for idea

Team develop key concepts and sketch them out 

Designer make quick prototypes from key concepts

Team question key assumptions and select the candidate for live prototype to gather data

Engineer to build on live candidate idea

Designer to work on UX and visual design for live candidate 

Visual Design - Profile
A -
Profile, default
B - Profile, scrolled view with condensed header
C - Profile with Health Status open
D - Profile, pull-to-refresh

Visual Design - Health Status A - Health Status, ahead B - Health Status, close C - Health Status, behind

Visual Design - Health Status
A -
Health Status, ahead
B - Health Status, close
C - Health Status, behind

 

Matchup

Team brainstorm for idea

Team develop key concepts and sketch them out

Intentions

  • Clarity and show all necessary data on the page

  • Maximize gameplay area

Key Concepts

  • Game activity feed

  • Your avatar

  • Your opponent’s avatar

  • Your game statistics

  • Your opponent’s game statistics

  • Send an emoji feature (Taunting)

Designer make quick prototypes from key concepts

Team - Gather data and analyze

Research and graphs created and conducted by Laura B.

  • In the majority of matchups, no taunts are sent

  • Approximately 14% of taunts contain two or fewer emojis

  • People Commonly Send Poop & Fire, Poop & Crown and Fire & Crown

  • Crown Emojis are only sent when winning

  • Users are more likely to send a higher number of taunts in a matchup if the scores are close

  • User were more likely to send Taunts in a Defaulted Matchup if they got a lot of point

In the majority of matchups no taunts are sent.
We wondered if it's the way the interface is designed and perhaps users needed a small tutorial to guide them through it. We decided to brainstorm on a few options to launch and test. We also changed the user interface of the taunting feature to a horizontal view to accommodate for more emojis in the future.

Approximately 14% of the taunts contain two or fewer emojis.
We wondered if this is because people didn't feel curious after tapping on one emoji. We decided to try a few animations to amplify the emojis. We wondered if users would feel more curious to use them if they were more visually appealing. We decided to brainstorm and launch a few options.

User were more likely to send Taunts in a Defaulted Matchup if they got a lot of point
We wondered if users needed more variety of emojis to represent their emotions when they were winning or losing. We decided to brainstorm on new emojis with our illustrator and display different sets of emojis for when the user is winning or losing.

Matchup - Visual Design
A -
Pre-matchup curtain
B - Matchup page by default
C - Matchup page with Taunting Feature activated
D - Matchup page scrolled view with both user's matchup activity

 

Marketplace

Team brainstorm for idea
Team develop key concepts and sketch them out
Designer make quick prototypes from key concepts

Team question key assumptions and select the candidate for live prototype to gather data
Engineer to build on live candidate idea
Designer to work on UX and visual design for live candidate

Marketplace - Visual Design
A -
Market items
B - My items
C - Buy an item modal

 

Apple Watch

Team brainstorm for idea

Designer to work on UX and visual design for live candidate 

Apple Watch - UX Design

Apple Watch - Visual Design
A -
My Profile
B - My Matchup
C - Send a Taunt
D - Push Notification - received a taunt
E - Complication - modular small

Apple Watch - Visual Design
A -
Character profile - Flamingo
B - Character profile - Bear
C - Character profile - Otter
D - Character profile - Gazelle


User Testing and Asking for Feedback

I wanted to be clear on why we were asking for feedback so I created a spreadsheet to ask the team who, what, when, why, where and how we were collecting feedback and from which types of users: active, inactive or future users. 

Screenshot of spreadsheet
Exploring who, what, when, why, where and how we were collecting feedback

Flows to clarify steps to collect feedback:

In-Person Survey

In-Person Survey Results

Screenshot of spreadsheet
Results from in-person surveys

Trends and patterns from survey

  1. Tutorial - Users expressed confusion after creating a character and wrote that they needed guidance for next steps.

  2. On-boarding - Users found this to be straight forward and easy

  3. Health Data Monitoring - Users expressed confusion about Health Data and didn't know what the feature represented or how to use it

  4. Matchup Taunting - Many users did not know what this feature was or how to use it

 

AppStore and Marketing Spots

Video

 

Conclusion

As a team we went through one more round of iteration, however we reached the time for the experiment and had to abort the product.

From a product design perspective this bet of using one-of-a-kind hand-drawn illustrations was one that could have benefited from user research in the beginning of the project. It would have allowed us to be more confident in investing our time into this idea. This is because having the game so focused on the story of illustrations also made changing concepts in the middle of production very time consuming and challenging.

We also did a lot of functionality testing post-launch. We could have benefited from building quick prototypes on the ideas and worked with the user testing team to get the functionality of the features communicated clearly and then iterate the effectiveness of it post-launch.

- Wynne Leung