Kristen Kelly
Kristen Kelly


Supporting medical providers to communicate to patients

AstraZeneca offers B2B customizable analytic dashboards to patients and medical providers.

UX Designer
4 Months
Kristen Kelly, Sean Currey

An Overview

Asthma patients are required to enter information into a mobile app that is recorded in their electronic medical record (EMR) which is shared with their care team of doctors and nurses. The care team can view each patient’s EMR.


Asthma patients on medication and their care team of doctors, nurses, and hospital staff.

My Role

UX/UI Designer, I designed the design library and the dashboard.


  • Dashboard: Ability for the care team to see if a patient has a “good, ok, or bad” day over a specific period through a scatter plot visualization that compares various factors to triage patients.  
  • Application: Inviting and capturing the patient’s focus to use the app to record their asthma activity.


  • EMR: Electronic Medical Record
  • Care Team: a care team of doctors, nurses, and medical staff
  • Triage: The assignment of degrees of urgency to decide the order of treatment of a large number of patients.

The Challenge

How might we empower medical providers to track their patients' activities and data to make fast and accurate decisions?

  • Track patient's symptoms, triggers, and medication usage
  • Display the  medical data with a care team
  • Support medical  providers to triage patients

The Solution

  • Sketch Use a whiteboard to brainstorm UI sketches of features thatgo into a medical dashboard
  • Reshape  The medical dashboard with all the components and elements that can be customizable for various partners
  • Develop the Dashboard with machine-learning to test in power B.I. in a real medical setting


Asthma patients struggle with breathing more than normal people. A day in the life of someone with asthma can start with waking up from a rough night of pain, insomnia, and asthma attacks. 

The daily weather influences an asthmatic person's medication regimen. If the weather isn’t bad, they can omit their nasal spray. But if a person tries to walk up a flight of stairs, they struggle to breathe and it can feel like climbing Mt. Everest, even on a good day.

An asthmatic person must be always aware of the weather and surroundings. They must stay on top of doing things like closing all the windows and putting the air conditioning on to help control exposure to triggers that could an attack.

An asthma attack can come unexpectedly, like when laughing too hard at a TV show. When they cannot catch their breath, they must take an emergency inhaler. With the support of their loved ones and/or a care team, they can try to relax. But often are shaky and unsettled, resulting in unwanted symptoms like insomnia.


After I conducted online research from several medical sites and real-living asthmatic patients, I did affinity mapping for common symptoms, classification, conditions to report to a doctor, treatment, and living well best practices.

I did the MoSCoW method was done for feature prioritization.

Information Architecture

Sean, the Senior UX Designer did I.A. for an iOS app.


User Journey

User Journey

Amy Coleman, an asthma patient sent a message using the "Full Breathe" app to her medical provider, Dana Smith.

  • Amy schedules an appointment and goes to a clinic for a checkup.
  • Dana walks into the room of her patient to start an assessment.
  • Dana reviews Amy's medical chart (records) to see if the insights have changed since last week.
  • The data is set on another patient, and she cannot find Amy or the date range.

The Design Process

Whiteboarding Sketches

  • Brainstorming sessions happened and the Sr. UX Designer and I collaborated with a whiteboard to sketch an Asthma Dashboard.
  • A few features needed to be included in the first low-fidelity prototype: patient info, side panels with population and patient trees, messages, and user login.
  • I created the design library to help us design quickly with color, typography, logos, icons, components, and elements.

Opportunity and Key Discoveries

Iterations to add to the dashboard

Design Components

Hi Fidelity Mockup


The Dashboard's Final Design

The Process from the top

I. Patient Information 

  • The design process started at the top. The top of the dashboard has information about the patient including their MRN (Medical Record Number). In this image, the patient's name is Amy Coleman, and a member of her care team's name is Dana Smith.

The Dashboard had two side panels, here they were opened

The Impact

It was presented to stakeholders so they could pitch it for partnerships. It had continually been tested in hospitals by medical practitioners, by a research team on the East coast. My design team was on the West coast and we made a handoff to a new East coast design team to test and build upon what we made. We provided ideation, strategies, a prototype, and an organized design system.


This was my first UX designer role, and I learned about the role of a Business Manager who taught me a lot about juggling the needs of the product, with the capabilities of our team. I learned the importance of scaling down and reducing the burden and workload of developers, as well as the best tools to manage a designer-to-developer handoff. We used the tool Zeppelin for this handoff. I also just really enjoyed the space this product was helping people in the healthcare industry. The goal was to build a customizable platform for disease management. It felt rewarding to be a part of something beyond me.