previous arrow next arrow

My Health Map

For the City of Renton and Valley Medical Center, I researched, prototyped, tested, and designed an application to help South King County residents find healthy options near them.

  • Timeline: Six weeks in April – June 2016
  • Context: Client Project at Mentor Creative Group

The Problem

How can we help patients make lifestyle changes that will improve their health? This was the question the City of Renton and Renton hospital Valley Medical Center asked themselves.

Doctors at Valley Medical would often tell patients with hypertension, diabetes, or other conditions that they needed to start exercising or eating better, but patients didn’t always follow their doctors’ advice. Meanwhile, the City of Renton had myriad resources that the public might find helpful, but there was no easy way for doctors to share those resources with their patients.

The Solution

I worked with a team to help the City of Renton and Valley Medical take steps to solve these problems through a web application called My Health Map. My Health Map helps patients find healthy activities, food options, and educational opportunities near them. The app makes it easy for doctors to share custom map results with their patients.

As the primary designer on the project, I was responsible for the user research, UX design, prototyping, usability testing, branding, and UI design of the app.

My Health Map application on mobile and tablet

User Research

The first step I took on the project was to conduct user interviews to help the team and client better understand our potential users’ goals, challenges, work and life situations, and demographics. This research guided my design decisions throughout the project.

In particular, the research yielded useful information related to the social determinants of health and barriers to lifestyle changes. South King County is one of the most diverse areas of the United States in terms of income, race, ethnicity, and immigrant status. These factors are major contributors to health outcomes. Through my research, I sought to explore an underlying question: what might an app do to remove barriers and make it easier for patients to make healthy choices?

User Research findings

I clustered interview findings into categories like diet, exercise, lifestyle changes, social determinants of health, barriers to lifestyle changes, transportation, and technology.

Wireframing and Site Map

While sketching and wireframing early designs of the app, I created a site map for team and client review.

Sitemap Wireframes

One of my first steps when designing the app was to explore a variety of paradigms for presenting and filtering map- and list-based search results. One piece of this process was to look at over a dozen related apps and explore how the My Health Map content might fit into those apps’ paradigms.

My Health Map Sitemap

This is the site map I delivered to the client for review. In the design, I strove to keep the app structure as flat as possible. The primary view is a map where a user sees all the results near them. Users can toggle this view into a list and use filters to narrow the results.

Prototype and Usability Testing

I transitioned my early sketches, wireframes, and the site map into a clickable prototype using Adobe XD. It was a new tool for me and I found it to be quick and nimble for the level of fidelity I needed to conduct usability tests.

Prototype screenshots

I gave users a scenario and series of tasks during the usability tests. The tests validated some assumptions the team had made and confirmed that at a high level, the app was learnable and usable. It also revealed minor bugs and areas for improvement in the design. For instance, I quickly learned that the filters were “backwards” from what users expected, so I switched this on the final version of the design.

Branding and User Interface Guides

I designed a logo, brand messaging guide, and user interface styles for the app. The final visuals reference the colors of the Pacific Northwest (greens and blues) and utilize a bright salmon pink for calls-to-action.

As a companion to the visual UI guide, I created a detailed CSS guide for the developers on the team.

My Health Map logo User Interface Guide

Visual version of the UI Guide used for internal and client review.

User Interface Documenation for Development

Screenshots of the more detailed, CSS-based UI Guide I created for the development team. This was a living document; we used comments to communicate about changes, questions, and ideas.

Brand Messaging Guide

I created a brand messaging guide intended for future use by the client. It was highly informed by the user research I conducted.

UI Mockups

My final deliverables for this project were UI mockups of app screens. Unfortunately, I wasn’t able to continue working with the development team to bring these designs to life, so I spent a great deal of time redlining and documenting the final mocks, including various element states and edge cases not shown here.

Onboarding Desktop and Mobile UI Mocks

First page of the onboarding experience on desktop and mobile.

Map and List Desktop and Mobile UI Mocks

The main page of the app showing the map and/or list view of results. On desktop both views are visible at once. Users can filter on color-coded categories (activities, food, and learn), toggle to show only free (no cost) results, and adjust the search location. On desktop, doctors can copy the page URL so they can easily share custom searches with their patients.

Result Details Desktop and Mobile UI Mocks

Once a user selects a result on the map or list, they can view details about that result. Content here is pulled from Google location listings, City of Renton databases, and custom client-entered information. My user research was instrumental in figuring out what details to include on these pages, such as facilities for walking trails like benches, shelters, and water fountains.