PAI Watch PAI-SummaryPAI Watch PAI-Summary

Mio PAI WatchOS

2016

Lead Designer

Woke Studio

Bringing PAI to a new platform - and fast.

I led the design of Mio Global’s first Apple Watch app, which lets users see their PAI score throughout the day and track their heart rate and intensity levels as they work out. 

We created the app on a short timeline, starting from scratch in mid-October and delivering final designs in mid-November so the app could be developed in time for CES 2017.

Research

Since this was the first time any of us had worked on an Apple Watch app, we spent some time researching best practices first. Here are some of the principles we applied during our design process:

- Include only features that are useful in the moment while wearing the watch

- No deep menus or convoluted flows

- Use familiar UI elements/branded features to orient users to watch app’s purpose 

- Keep it as simple as possible

We also took a detailed look at the features, architecture, and visual design of other Watch apps. Mio hadn't done much competitive analysis of their own since the project timeline was so short, so our analysis was really useful in setting requirements.

Sketching

Since the number of things onscreen was constrained and our feature set was well defined, we mostly experimented with different architectures, deciding which features to group together. Sketching with Sharpie kept us focused on the size and placement of our UI elements instead of getting distracted by the look of the elements at this stage.

Concepts

We were able to move quite quickly, and came up with 5 distinct concepts to build and test at higher resolution. Because of the low number of screens, it was reasonable for us to test all 5 concepts on an actual Watch using Marvel. This was our first opportunity to learn how our designs would work on an actual Watch, and so we were eager to learn as much as we could by comparing our 5 approaches.

"Scrolly"

This concept showed only one screen at any given time, using a deep press to let the user change modes. We liked the simplicity of it, but not all users knew to try a deep press or even to scroll to see more content. We were also worried that such a rigid architecture would make it difficult to add more features in the future.

"Live"

This concept was based around one screen that always showed your heart rate and intensity, whether you were recording an activity or not. It turned out this wasn't technically feasible because Apple's heart rate sensor API only allows tracking when the user explicitly starts an activity.

"Slice"

This concept was based on the interface of the Slice wearable, showing one piece of information at a time on a series of screens. There was little differentiation between being in or out of an activity, and as a result, we ran into the same Apple heart rate API issue as the "Live" concept. We also felt that the interface wasn't information dense enough, as users who wanted to see more than one bit of info during an activity would have to stop and swipe to a different screen.

"GO"

This concept is very close to what we ended up building. The two standout UI elements of the PAI badge and GO button emphasize the two main jobs of the Watch app. In the end, we removed the "lap" visualization and vertical bar chart, adjusted the visual style of lists to be more compact, and added extra cadence information during an activity.

"PAI"

This concept used recognizable page layouts and UI elements from the PAI app, and so it was the easiest to understand for users.  This was the original direction we selected, but after removing unnecessary and non-feasible elements it became much more similar to the "GO" concept.

 

Refinement

After deciding to move forward with the "PAI" concept, we already had some ideas of how to improve it. We removed the 7 outer PAI segments as it was unnecessary to show past days' PAI so prominently, and we removed the live HR screen because of the aforementioned Apple API issue. We also condensed the in-activity screens to be more glanceable and removed the bar chart because of developer time constraints.

Next, we improved the transition between modes, adding a "Ready, Set, Go" animation when starting an activity, and extra confirmation screens for saving or discarding a recorded activity. We also added a small auto-advance transition when entering an activity, so that users would know how to find the pause feature without overemphasizing timing as the main activity screen.

In addition, we created several styles of complication so that PAI would be visible on any watch face.

Flow5Flow5
PAI Watch Timer-PAIPAI Watch Timer-PAI
PAI Watch Hero CenterPAI Watch Hero Center
PAI Watch HR-7DaysPAI Watch HR-7Days

Takeaways

After developing the app through November and December, Mio unveiled the PAI WatchOS app to the public at CES 2017. Currently, we're actively making improvements to the interface based on feedback from CES, and the development team is integrating the app into the main PAI app and algorithm for release in Spring 2017.

Leading the design from start to finish was a rewarding experience for me. Although the short timeline was stressful, it forced us to budget our time and work constructively towards solutions instead of wasting time in debate. Luckily, Mio's product team was supportive in locking down the feature list early, giving us a stable goal to design towards. I also negotiated carefully with the developers, making sure that we minimized development cost wherever possible. With this project, I learned more about the value of keeping it simple - it allowed us to create a clearer and more enjoyable user experience, get the details right, and deliver on time.