« Back to Projects

BuddySystem: Mobile Medical Help App

UW HCDE 536 Interaction Design


For UW's 536, Interaction Design, we quickly designed a mobile application intended to communicate medical information to friends of patients. Our app concept would help users determine whether their friend needed medical assistance related to known conditions.


For this project, we were assigned a target user group: friends and family of medical patients. The goal of the project was to research the user group to identify a possible need, develop scenarios of use, then design a mobile application through two rounds of wireframes.


We began by researching the needs of friends and families of patients, as well as conducting two informal interviews: one with a diabetic patient, and one with a friend of a diabetic patient. Our goals were to narrow our target audience and then develop a problem statement that would address their needs. Through our research, we created a persona for a college-aged friend of a diabetic patient. Our persona highlighted his sense of newfound independence and responsibility for his friend but his lack of knowledge about how to recognize an emergency and how to help if his friend needs it.

Our persona described Blake, the friend of a diabetic patient who wants to know how to tell if his friend needs help.

After identifying the needs of our persona and target audience, we wrote some potential scenarios and began sketching out application flows to explore how the user would navigate through the application to achieve the goals outlined in the scenarios.

We sketched out some initial flow diagrams to learn how the app might be structured.

From here, we did some basic paper sketches and prototypes to explore what information and interactions would go on each screen. We focused on making sure the path forward was clear and that the application was always providing the right information for a mobile use case.

We created paper prototypes to explore several ideas quickly.

Next, we revised our screen designs and application flows together, increasing the fidelity with each iteration. After our first round of digital wireframes, we gathered feedback to inform our next and final iteration.

Our first scenario showed a patient who got better with some minor help.
Our second scenario showed a patient who needed urgent medical attention due to an ambiguous symptom.


At the conclusion of the project, we presented a 2nd round of wireframes to our class by walking through two scenarios and explaining our design decisions. For this project, we received a grade of 100%.

A sample of the final wireframes we produced.
One of our annotated wireframes, describing the behavior of several elements on the "Friend profile" screen.
Another annotated wireframe, describing the behavior of elements on a critical alert.

« Next: Visualizing the U.S. National Park Service’s Inventory and Monitoring Program Data

Previous: Tomb Raider Co-Discovery Study »