Face Off on the Mirror
MIRROR wanted to create a feature that allows users to interact with other members using a built-in camera and a function that allows users to “Face Off” against another members in workouts.
Responsibilities
Designed the user experience and interface for iOS/Android and MIRROR platform.
Led brainstorm sessions to better understand our challenges and solutions.
Conducted competitive research and pulled visuals for design inspiration.
Presented various rounds of prototypes to stakeholders.
Worked with Product Manager, QA, iOS and Android Engineering for product shipment.
Ship date: November 2020.
The goal
Create a gamified experience that allows users to compete with other members with similar fitness profiles.
Design requirements
Users must have a heart rate monitor to participate in Face Offs.
Define rules around how many Face Offs happen during a class.
Define min and max for how long a Face Off lasts.
Implementation of computer players for edge-cases.
Define status of winner/losers after Face Off is complete.
Research
I started researching competitive video games to help define how I wanted to design our playing field–focusing on multiplayer POV’s, points system, rewards, etc.
Things we tried
I explored different variations where users are competing against one another while racing against the clock. This allowed be to explore different placements and visual treatments on the Mirror.
What we came up with
Playing field
Since Face Off is designed to bring people together in their workout experience, I decided to utilize the space we already had for classmates and use that as our playing field. This way users will continue to associate the bottom of the Mirror as a place for all things related to people and competition.
This also meant designing an experience that could live within that horizontal space.
Opponent matching
Every player that has their heart rate monitor connected to the Mirror will be paired with an opponent and entered into all Face Offs during that class.
Users will be matched with an opponent that has a similar fitness profile as them. (age, height, weight, goal, etc)
Edge case: If there are no available opponents, then we pair our user with a computer player.
Face Off begins
At the beginning of a Face Off the two participants are presented in the center of the screen. If the users’ video is on, the video feed is used. If it’s off, their avatar or initial is used.
Both player and opponent will start face off with 0 points and points are accrued by staying within their target heart rate zone. Also, the participant’s “fill bar” fills up, towards the center, as points are accrued.
Live updates
At particular moments in the competition, we flash a brief “update” message, to highlight something that happened in the competition.
The two “updates” we’ve currently defined, are:
1. Leader: When one participant passes the other and takes the lead.
2. Dead Heat: When the competition has been a “tie” within some mathematical threshold for some determined duration.
Countdown
When the Face Off timer goes under 10 seconds, it changes modes to a more urgent, “Time’s Up” mode. The color changes to red, type gets larger, and the timer has some animation effects.
And the winner is…
When the timer gets to zero, the Face Off is over. Both participants are displayed in a layout similar to the initial Face Off announcement, with updated text/iconography.
After both participants are displayed, there is a moment where the winner is shown solo on the screen, with a trophy icon, and their total points for the competition.
File hand-off & ship-date
Every completed project is scrubbed clean and organized by operating system. I work with a Product Manager to include annotations, flows, and anything that will help the engineers build to spec.
Ship-date: November 2020 ✅
What people are saying
