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
Empathize
Define
Ideate
Prototype
Test
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:
That creating a competitive environment would spur motivation and help people become more physically active and healthy
That using animations and fun illustrations would make the app appear more fun and exciting
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
On-boarding
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.
Profile Health Status
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.
Matchup
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.
Matchup Taunting
The intention of Matchup Taunting is a method of communication between the user and his/her opponent for the day.
Marketplace
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.
Port Experience to Apple Watch
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:
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
Engineer - Launch to live prototype
Team - Gather data and analyze
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
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
Tutorial - Users expressed confusion after creating a character and wrote that they needed guidance for next steps.
On-boarding - Users found this to be straight forward and easy
Health Data Monitoring - Users expressed confusion about Health Data and didn't know what the feature represented or how to use it
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