top of page

A mobile patient care portal app

Client: Dell Medical School


1. summary


Mary Beth Garrido (UX/UI designer)

Julie Zhu (UX designer)

Anjum Khurshid, M.D. (Director)

Eliel Oliveira (Developer)

Vishal Abrol (Developer)

Monique Vasquez (Coordinator)

Carmen Valdez, Ph.D (Coordinator)

Tools Used

Figma, Adobe XD


January 2020 - Present

Problem Statement

Despite a tremendous increase in the adoption of electronic health records and digitization of healthcare data in the United States, patients’ ability to access and to contribute relevant health data to medical care and research is limited.

Similarly, the usability design of most available tools for patients have not been informed by human-centered design and assume health literacy and proficiency of using computers that is unrealistic. Of particular note is that the lack of research and innovation in this area is likely to aggravate health disparities if due importance is not given to health literacy and cultural
competence in underserved populations.



We propose to develop a scalable, effective and patient-centric technical solution to get patients connected with their health data, clinical and non-clinical data, to become active participants in health care and research and help create a learning health system.

Our goal is to design, develop, and demonstrate an innovative patient-engaged technology (PET) platform to empower patients to gain access and give access to their health data “without special effort” while ensuring privacy and security of personal information.

Design Process

Grounded in identifying the specific information, services, and interactions that patients need and prefer, using human-centered design and community-based participatory research.

Aim 1. Design a patient engagement platform (FHIRedApp) that is user-centered by working closely with the individuals that will ultimately use and benefit from the platform.


Our main goal is to design a technology solution using agile development principles and federally-approved standards (FHIR APIs, OAuth 2, Privacy Protection Record Linkage (PPRL), Common Data Model), clinical and non-clinical data (HIE data from multiple sources, and social services referral data), in a user-friendly, patient-centered format (mobile platforms, health literacy sensitive, culturally competent).

Aim 2. Develop this platform by integrating it to clinical data in an HIE through FHIR (Fast Healthcare Interoperability Resources) APIs (Application Programming Interfaces) using secure and compliant protocols (OAuth 2, SHA-512) and allowing individuals to authorize “without special effort” access to their clinical data through those FHIR APIs to other third-party Apps that can provide individuals with services and value.

Aim 3. Demonstrate the usability and adoption of this platform by piloting the integration of a commercially available social services referral App (Aunt Bertha) and a new research study coordination App (StudyAid).

Team strategy breakdown


2. exploration

The Learning Health System Framework

We used the framework of a Learning Health System (Olsen, Aisner, & McGinnis, 2007) to trace the flow of data from providers to patients and back to providers.

Engagement Strategy

Our engagement strategy comprises the use of a community strategy team, a community advisory board or technical expert committee, community engagement studios, and individual interviews and quantitative methods.


We plan to effectively engage patient groups, community members, and organizational leaders to assess perceived needs and preferences, readiness, adoption, and sustainability of patient-engaged technology (PET) among underserved and underrepresented communities in Travis County.

Once we receive IRB approval, we will assemble a community advisory board (CAB) or
Technical Expert Committee (TEC) to comprise a second group of stakeholders to provide
feedback on the scientific and implementation aspects of study design and approach for engaging our population of interest based on experience and evidence.


Periodic CAB meetings will be held throughout the study to disseminate findings regarding the needs and priorities of underrepresented communities and patients, readiness for PET, and opportunities for increasing access to, adoption of, and sustainability of PET in such communities. Their feedback will inform the design and implementation of the community
engagement strategy.

Generative Research

*Due to COVID-19, our scheduled formal interview process was put on hold for the foreseeable future. 


We plan to talk with the different user groups, identified by the engagement team through
CES. We will rely on 1x1 sessions to get a better idea for how the users go through the process
today, their pain points, current places the system is working, areas of opportunities, as well as
gather data on the project team’s design ideas.


This will be a mix of quantitative and qualitative data gathering and will help serve as a benchmarking for future comparisons as well as assist in creating a prioritized list of steps to ensure the success of the project. This effort typically consists of 10-12 1x1 interviews per user group followed by a larger scale survey.

• In the meantime, I compiled a screener interview script for when the interview process resumes.

• The final interview script will include probing questions about patients' health tracking habits.

• This feedback will be used to formulate a user journey including pain points and delighters.

Current interview script draft

Evaluative Research

After analyzing the data and collaborating with the Dell Med research team, we will begin creating early screen designs that will be the key deliverable from this second phase of our involvement, the evaluative phase.

Having gathered insights from the target user groups, we (the user-centered design team) will begin work on designing the user interface based on the key findings from the generative phase. This evaluative phase will consist of several, iterative,
rounds of taking early concepts back to the user groups for feedback and usability testing through using the Rapid Iterative Testing and Evaluation (RITE) method (Medlock & Terrano, 2002).


Once the data from this effort shows the user groups are confident with the designs, along with the project team, we will begin creating a style guide including colors, fonts, etc. and will take the concept and create a high-fidelity prototype. This will be used for the development team’s front-end developers as they begin code on the final project.

Competitive Research

We conducted competitive research on health-based applications and how they provide value. Here are a few highlighted examples:


Facebook Preventative Health


  • Personalized reminders about health care tests and vaccines

  • Option to set a reminder to schedule screening appointments or read more about what’s being recommended

  • If location services are turned on, the tool also connects users to nearby federally qualified health centers, where they can access affordable preventive care if they don’t have insurance.

  • Activity and information within the tool will not be posted publicly or shared with others, Facebook says in a statement. 

  • From a Facebook representative - “let’s focus on giving people tools for prevention, from the experts, and hopefully they will drive their own preventive care.”


Withings Health Mate


  • Health Mate lets you view a complete history of your health data, including activity, sleep, weight, and more, so you can see trends, track progress, and improve over time.

  • Seamlessly digests data from 100+ compatible apps to help you find even more ways to manage your health

  • You can add your friends and family to your Leaderboard and compete with them. You can add anyone as long as they have the Health Mate app on their smartphone, thanks to the in-app steps tracking. 

  • The Health Mate app offers a system of badges, virtual rewards that you unlock after certain achievements.


Apple HealthKit


  • HealthKit provides a central repository for health and fitness data on iPhone and Apple Watch. With the user’s permission, apps communicate with the HealthKit store to access and share this data.

  • Because HealthKit apps freely exchange data (with user permission), the combined suite provides a more customized experience than any single app on its own.

  • HealthKit is also designed to manage and merge data from multiple sources. For example, users can view and manage all of their data in the Health App, including adding data, deleting data, and changing an app’s permissions.

Final Research Conclusions

We concluded the following problems and opportunities for health apps based on our research.

Data Dashboard

  • How often will our data update?

  • Is a data inventory needed?

  • If we want to target a provider of certain medical conditions, then we may need user inventory because some of these diseases need to keep track of data frequently.

Data Goals

  • Do we need to make the data digestible?

  • Besides customizing service for third-party apps, do we want to change users’ health behaviors in our tool?

Sharing Data

  • Design opportunities include: share with a caregiver, share data with families, report with various formats

  • Do users have access to choose certain data sets and share with some else except current providers?


  • Design opportunities include: import data from devices, consent individual data sets

  • Should indicate users data sets needed in the 3rd-party apps and suggest them to consent these data sets

Service Providers

  • Design opportunities include: provider profile, map + direction to provider, online communication, order offline visit

  • Do we need to use the content of 3rd-party platforms in our tool?


  • Other apps provide data from user input and 3rd party wellness apps

  • This app would allow insights from data released through the HIE to promote health proactivity by users


3. empathize

Who are the Users? 

To better understand our target users and to make it easier to empathize with them, I created a persona. This persona will hopefully evolve as we collect more user data.

User persona to empathize with our target audience

User Journey

I also created a user journey for our persona in order to understand how our product and service would benefit our target users and fit into their current workflow.

User journey map to understand patient workflow and opportunities


4. define

Synthesizing Insights

Since I am designing an app for patients invested in their health journey, I focused on understanding how people use data-based health apps and what information was most valuable to them. This helped define the features and functionality of my designs. In summary, some of the insights are:

Most important metrics: An overarching goal of the app is to encourage patients to leverage data provided by the HIE to improve their current health situation.

Relevancy is critical: This data feedback must be relevant to their current conditions.

Access is important: Sharing data with a potential caregiver and your medical network providers is important.

Dashboard needs: Making relevant data digestible is a driving force for the app. Integrating data from 3rd party health apps is an added benefit of casting the widest net of available health data.

4. prototyping

This is the formula we will use to develop our final app designs.


  • Wireframe two concepts

  • Get internal feedback from team

Hi-fi Designs

  • Refine style + branding

  • Explore animations as needed

User Testing

  • Test internal or external

  • Finalize feedback actions



Armed with our design interface needs supporting research, We refined our ideas that were internally validated during our bi-weekly team meetings. If given more time, this stage of the process could have been improved with LEAN UX methodology to minimize initial scope and external validation testing + iteration.

Some early app sketches

Two possible low-fidelity workflow ideas


Progress on my wireframes was presented to the stakeholders for feedback and iteration. Ideally, I would be able to capture feedback from the target users as well. Given the circumstances and tight timeline, I decided to move forward with a higher fidelity prototype before it was presented to the public for testing.

Some of my low-fidelity wireframes from early in our process

I then consolidated the two designs into one workflow that was agreed upon by the team. I independently tested these screen designs for usability and clarity.

Final Screens

5. final screens

Welcome to the Leap+ app! This is your portal to accessing your HIE health data.

I designed the user interface for the following screens. Users are also able to connect to third-party apps, thereby increasing the level of medical information in one place. Patients are able to add medical notes and speak directly to providers.

The app's navigation includes a Health Highlights page, a Data Overview page, and a Connected Apps page.

The overarching health data categories are broken down into diagnosis, encounters, vitals, and procedures.

The "Feed" tab will show a stream of communication between patients and medical professionals.


6. reflection

This project is still in progress,

please check back soon!


Lessons Learned...

Contact me

Thanks! Message sent.

bottom of page