APPLE HEALTH, iPhone app re-design

The Usabilathon is an all-day competition that requires teams to use multiple UX skills to design, test and iterate to find a solution to real world client-driven problems.

Project Details

Client: Fors Marsh Group/Usabilathon
Project Scope: 1 day
Project Type: Usabilathon Design Sprint

Team Size: 4 including myself
My Role(s): Team Lead, prototyper
Tools Used: Pen & Paper, Adobe XD

Project Summary

The problem for the 2018 Usabilathon was to re-design the Apple Health iPhone app in a way that better explains to users what lab results mean and in a way that provides them with useful information and prioritizes anomalous results for review. Since we were given a short time span in which to address the problem, we decided to focus on re-organizing and improving the existing app structure instead of designing a brand new app.

Design Process

The design process my team adopted for the event was as follows:

  • Research
  • Persona
  • Empathy Map
  • Think-aloud Usability Analysis of original app
  • Low-Fidelity Paper Prototype
  • Think-aloud Usability Analysis of Paper Prototype
  • High-Fidelity Adobe XD prototype
  • Usability Analysis of High-fidelity prototype
  • Summarize Findings


Our research focused on finding existing literature on the usability of health apps, and visualizing health data

Our key findings are as follows:

  • Keep the interface easy to use and simple, while providing relevant information and not overwhelming users with information 1.
  • Graphed data should be distinct from the graph structure (labels, axis lines), clutter free, and overlapping symbols should be easy to distinguish and understand 1.
  • Use past data visualization to explain why suggestions are relevant 2.
  • Context aware suggestions can improve the relevance of information to the user 2.

Empathy Map

Based upon the user data we were provided in the competition guidelines, and interviews conducted users my team developed the following empathy map of our intended user.

An empathy map of the intended user

Think-aloud Usability Analysis of Original App

We asked users to walk through the app and complete the following tasks:

  1. locate their new lab results
  2. find their most troubling lab result
  3. compare that result to the most recent result

Based upon these user tests and data gathered from user interviews we created the following list of items to focus on while building the paper prototype:

  • improve salience and clarity of normal ranges and outliers
  • add a way to quickly view new results
  • provide results in plain language whenever possible
  • add definitions and context to complex results
  • add a way to view results from other family members

Low-Fidelity Paper Prototype

The first low-fidelity prototype I developed addressed our usability findings in the following ways:

  • Improve saliency and understanding of normal ranges and outliers- We added the “Your Results Screen”, and created two sections, “Alerts” and “All Results”. The “Alerts” section indicates any results outside of the normal range. Additionally, when clicking on an “Alert” result, we have a breakout page that explains the result. On this page, we emphasize the normal range by changing it from light grey to blue. Additionally the actual result is listed as a red dot with a vertical line to emphasize where it is in relation to the normal range.
  • Add a way to quickly view new results- We added a NEW indicator in bright red to indicate new results
  • Provide results in plain language and when not available add definitions/ context to findings- We used a common term in place of a medical term whenever possible, for instance Blood Sugar instead of glucose. We then added links to additional information including definitions, additional resources, steps to help deal with the issue.
  • Add a way to view results from other family members- We added a page between selecting lab results from the Health Records and actually seeing the lab results. This new page adds the ability to see linked lab results.

Usability Analysis of Paper Prototype

Think-aloud user testing was conducted with participants on the paper prototype. From this testing we gained the following insight:

  • The orange boxes around the anomalous lab results, and the word “Alerts” was too alarming. Users assumed they were in immediate danger.
  • Using the term “shared” for the lab results from family members was confusing because they were not sure how much data was being shared with them.
  • The users liked the clear display of the outlying point on the graph for Blood Sugar, and that the normal range was clearly displayed.
  • The users liked the added contextual information for “Common Reasons”, and “Next Steps.”

High-Fidelity Adobe XD prototype & Usability Analysis

After user testing our high-fidelity prototype we made the following findings:

  • Changing the term Alerts to “Atypical Results” was still to alarming for some users.
  • It was unclear to users whether the “All Results” section on the “Your Results” page was clickable since it did not have an arrow like other pages.
  • There were additional inconsistencies in displaying section status

Adobe XD prototype of Apple Health App re-design

Next Steps

In a short time, we were able to come up with a reasonable interface for displaying anomalous results and providing context. However, the interface could benefit from the following future steps:

  • Additional user testing to tease out inconsistencies in buttons and links.
  • Simplify the display of normal test results.


  1. Andry F., Naval G., Nicholson D., Lee M., Kosoy I., Puzankov L. (2009). Data Visualization In A Personal Health Record Using Rich Internet Application Graphic Components. Proceedings of the International Conference on Health Informatics,111-116. doi:10.5220/0001378801110116
  2. Preuveneers D., Berbers Y., Joosen W. The Future of Mobile E-health Application Development: Exploring HTML5 for Context-aware Diabetes Monitoring. (2013). Procedia Computer Science, Volume 21, 351-359.