Apple Watch App: Every Body Walk! (EBW)

Background Information

The Every Body Walk! (EBW) watch app was MCoE’s first app created for the Apple Watch device, designed to be used as an extension of the existing iPhone app. The MCoE’s Design and Development team were part of the first group invited to Apple’s lab facilities before the watch was released to market. This enabled us to understand the device better and how its core hardware functioned. We were also given test watches to implement our designs and code, and test the app out as it was being developed. Through this approach, and along with consulting feedback from Apple designers, we were able to learn fast and fail often, which ensured an optimal delivery of a watch-based product that worked once it was released to market.

The EBW watch app was designed to provide users quick interactions while making the most out of the display space available to the designers. With that in mind, the design was created to make information and data quick and easy to access and dismiss. Because of limited design space the app was also designed to provide users with easy to find interactions. In order to ensure a successful UX/UI design, we had to focus on the content that EBW users cared about the most.

Design Principles behind the EBW Apple Watch:

Based on Apple’s Design Principles, and through our consulting sessions with Apple reps, we applied 3 primary themes to our design approach. These included:

Glanceable.
Our goal was to make the most important information readily available to the user. We wanted to surface the most important information by displaying the app’s core data features, which included: time, calories and distance.

Actionable.
While in action, the app’s main activity screen provided the user with a simple circle that gradually filled itself to indicate the progress of their walks, ensuring that what was displayed was always current and relevant. The user could toggle easily to see different progress views at anytime, making their action easy to perform at anytime. Custom notifications were also implemented to handle common tasks without requiring the main phone app to be utilized, therefore making the watch app self-sufficient.

Responsive.
Interactions with the app were quick and didn’t require an excessive amount of taps to get to key areas, thereby minimizing the time it took to launch and load new screens. Only essential icons were employed with strategically placed typography to make the app responsive and provide users immediate understanding about what the app was going to do. Notifications were also timely and created using Apple’s standard notification design to utilize common design patterns, as well as keep our users engaged and make it easy for them to perform their chosen action.

Start Screen

EBW Start Screen

Our challenge with designing the watch app was to maintain the iPhone app’s key features intact while simplifying the design to make it intutive enough to keep users engaged. Therefore, we designed the watch app through the use of simple icons that provided quick interactions. This approach made the most of the display space. Information was quick and easy to access and dismiss. Our focus was also on the content that users cared about the most.

Glance

Glance Screen

Our goal was to make the most important information readily available to the user through a simple glance. We wanted to surface the most important information by displaying the App’s core data features, which included: time, calories and distance.

Walk in Progress

Glance Screen

The app’s main actvitiy screen provided the user with a simple circle that gradually filled itself to indicate the progress of their walks. Users could easily toggle by tapping on the icons below the circle to switch to another category.

Set Goals

Glance Screen

We used color coding for each key category of the app to maintain consistency throughout the design. Typography played an essential role in this design, as we had to establish a hiearchy in the way the content was displayed. This helped communicate information effectively and made it easy for the user to take actions without having to hesitate on what to do next.

Stats Display

One of the biggest challenges was designing the stats display screen. Because we were dealing with a Weekly, Monthly and Yearly view of historical data, we had to go through multiple iterations which required the developer to test out our designs. Getting the right font size was key when trying to align the bars with their appropriate numerical labels. To also help convey the most important, relevant and recent historical data, we applied a transparency to the older bars so that the user could easily track the most current data while walking or being active outdoors. The use of a stats intro screen also helped the users quickly select which category they wanted to see.

Notifications

Start Screen

Custom notifications were also implemented to handle common tasks without requiring the main phone app to be utilized, therefore making the watch app self-sufficient. Notifications were also timely and created using Apple’s standard notification design to maintain familiarity with our users, as well as keep them engaged and make it easy for them to perform their chosen action.

Want to learn more? Check out these case studies below:

	Design Sprints Design Sprints involve a 5 day process for answering critical business questions through design, prototyping, and testing ideas with customers.
	Digital Membership Card Digital Membership Card iterations and product design.
	RAD Member Tablet Gen 3 Understanding how intermingling influences affect product design.
	Stroke Alert Stroke Alert iterations and product design.