Woke-Mio-Iphone137Woke-Mio-Iphone137

Mio PAI and Slice

2015-2017

UX, Visual Design, Prototyping, Motion

Team of 4 @ Woke Studio

Making activity tracking more meaningful.

PAI is a new approach to activity tracking that represents your fitness with one number. I worked on Mio's PAI app with the Woke team from inception to release and beyond, first focusing on UX and concepting new features, and later as lead designer working closely with Mio to set requirements, prioritize design work, and support developers as we released new updates. I was also the main designer working on the interface for the accompanying Slice wearable, which won a 2017 Red Dot Product Design award, and was named "Best of CES" by the Wall Street Journal, PC Magazine, and both Men's and Women's Health.

What is PAI?

PAI stands for Physical Activity Intelligence. Your PAI score is calculated using your heart rate and other data like your age and gender. This means it’s personal to you, but it also means that all physical activity counts – not just steps. You earn PAI by doing any activity that raises your heart rate, whether it's running, yoga, swimming, gardening, or anything else. The PAI algorithm is based on research from the HUNT study at the Norwegian University of Science and Technology, one of the world's largest health studies.

The goal is simple: if you can keep your PAI Score above 100, you'll reduce your risk of heart disease and live up to 5 years longer.

PAI 1.0

In a rush, we released the first version of PAI to real users ahead of CES 2016. At this early stage, some features were missing and others still needed refinement - but the feedback we received from early users and reviewers was invaluable. In particular, the Activity Setter seen to the left was a prominent element. We intended it to encourage users to set short term PAI goals and teach about how workout intensity affects your PAI score, but most users found it confusing.

Setting New Requirements

With user feedback in hand, we began setting requirements for PAI 2 - the version that would launch alongside Slice. 

Rather than getting users to play with a goal setter to learn about intensity, we decided to emphasize livestreaming data from Slice so that users could see the effect of more intense exercise in real time. Other goals for PAI 2 included a visual overhaul and UX refinements for a lot of behind the scenes tasks such as Notifications, Insights, and Alarms.

Below are some of our concepts for communicating the relationship between intensity and PAI points, livestreaming, daily goals and future features like social teams.

Notifications

Short Term Delight

We scheduled celebratory notifications to reinforce positive moments during the day. By displaying an actionable notification, we give people an easier way to dive deeper into the PAI app and review their successes in detail.

Long Term Engagement

Abandoment is a serious issue for all wearables - most are left in a drawer after around 3 months. We created notifications and triggers to target the moments where people were most likely to stop using Slice.

iPhone and Slice DarkiPhone and Slice Dark

"PAI is the best example yet of how wearables can turn data about our bodies into tailored, actionable advice—and hopefully longer lives.”

- Geoffrey Fowler, The Wall Street Journal

JumbleJumble

Mio Slice

Slice was designed in conjunction with the PAI algorithm, and is Mio's first wearable aimed towards the lifestyle market rather than fitness and sports. As a result, Slice has a simpler interface that forefronts your PAI score, and looks more appropriate for daily wear compared to previous Mio products.

My role was to design the interface, a challenge considering the small 39x96 pixel display Mio had chosen.

Here are the requirements we set for Slice:

- Calculates PAI Score

- All-day heart rate tracking

- Simple one button interface

- Works with variety of wardrobes

- Water resistant

- Sleep tracking

- Notifications and alarms

Sketching and Ideation

Although we started by sketching on paper, we quickly realized that we were sketching things with pen that were impossible to pull off on a tiny, low resolution display. For this reason, almost all of our iteration was done directly in Sketch.

Working within the constraints of the screen and firmware team, we developed a visual language that embraced pixelation in our icons and custom fonts. We tried to rely on icons for communications as much as possible to reduce internationalization headaches and because the screen is too narrow to accomodate long words. I created 8 bitmap fonts at different sizes for different parts of the UI.

 

Prototyping the UI

We prototyped interactions, tested with users, and generated videos for sharing with stakeholders using Flinto. This let us develop the UI in parallel with the hardware instead of waiting for test boards from the manufacturer. We used cleverly sized artboards which let us design screens for Slice at the true 39 x 96 pixel resolution, while also running interactive 1:1 scale mockups of Slice on our phones. 

Vertical Redesign

Before launch, we decided to change the interface to emphasize vertical motion instead of the previous horizontal animations. We did this for a few reasons:

- Horizontal animations highlighted how narrow the display was compared to the total width of Slice

- We already had a really cool wrist-raise animation where the clock slid down from the top

- Vertical screen transitions fit with the vertical "slice gesture", the raised ridge that runs all around the wristband 

Celebrating Success

Each time a user reaches 100 PAI, a different animation is selected at random to reinforce good behaviour and keep things fresh for longtime users.

Mios-Colors2Mios-Colors2

"The Mio SLICE has what its activity tracker rivals do not: A simplified way of looking at your fitness stats.”

- Timothy Torres, PC Magazine

basketballbasketball

Takeaways

Software and Hardware - The point of designing the software and the hardware together is that you can design flows that include both, instead of each side making assumptions about the capabilities and limitations of the other side. This is really crucial in things like device pairing flows where missed opportunities or onerous technical requirements can create a disjointed, long, or just plain buggy experience. This was a huge advantage for us at Woke, with user experience and industrial designers sitting side by side. I was able to work on both the Slice firmware and the app, making sure the experience was harmonious. 

Refine when you get the chance - When the developers are slower than the designers, take the opportunity to refine your designs. The best time to make adjustments is before it gets coded, not after. This is especially true for pixel-perfect visuals - it's a huge pain to convince product managers and developers to prioritize fixing miniscule non-funtional bugs, and you won't even learn much from putting it in the hands of real users.

Product Requirements - Work closely with product managers and developers to set requirements. It's important to know why certain product decisions were made, and therefore when it's time to rethink a requirement in light of new information. It's also important to back up your ideas with concepts that show why the extra development effort and design time is worth it to create an improved experience. Moreover, if you understand the business's needs and goals, you'll be able to craft a product strategy to meet those needs with everyone on board.

Consultant vs Internal Design Team - On the other hand, there's only so much you can do as a consultant. You make your best recommendations, but sometimes the internal team decides to take a different direction and you need to accept that. Depending on the services agreement, it might not be possible to have a say in high level strategic or product decisions. If you really, really want to fight for the best possible experience from beginning to end, you should probably just join the client as an in-house designer.