Medicord

The Project aims to develop a Design System for enhancing Patient Engagement in Managing Daily Medical Records, Medications, and Test Results.
Figma
UX/UI Design
Javascript
Year

2023-ONGOING

Client

Hiralal Parekh
Charitable Trust

Project Type

Mobile Application
Product / UI design / UX collaboration

Team/Role

Lead UX/UI Designer(Me)
Design Manager
1 UI Designer
2 Doctor
2 Engineer

OUTCOME

  • 10 Average number of records categorized per user
  • 60% User retention rate (active users returning monthly)
  • Healthcare Systems and Governance Guidelines

OVERVIEW

An app focused on patients, aiding them in managing their medical records.

Problem

The aim is to recognize and overcome hurdles for a secure and streamlined approach to medical record management. The task involves effectively managing various medical records, including personal history, clinical findings, diagnostic outcomes, pre and post-operative care details, progress notes, and medications. This requires handling personal information, producing comprehensive reports, and navigating intricate documentation independently.

Solution

Implementing a robust Electronic Health Record (EHR) system consolidates patient data into a unified platform, ensuring security, accurate, and user-friendly medical record management. Include resources within the application for user education and support on proper record practices.

My Role/Responsibilities

UX research, UI design

View Final Solution
Table of
Contents
scope
research
Drop Down Menu Icon
ideation
Drop Down Menu Icon
design process
Drop Down Menu Icon
final product
Conclusions
Drop Down Menu Icon
back to the top
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
UNDERSTANDING question
Understanding Question
Understanding Question
Understanding Question
Understanding question
Understanding question
Understanding question
Understanding question
Understanding question
SURVEY
To understand the situation at this early stage I created a survey with 50 participants. The Survey revealed patients’ do not take active participation in healthcare record management.
Patient Survey

Empathy Maps

To organize the data collected, I made empathy maps for each patient I interviewed. This allowed me to highlight reoccurring complaints and preferences.
Patient Empathy Maps

Pain points

Reoccurring complaints were then broken into three different categories, and pain points were categorized into each.
1

Lack of space to record healthcare, notes, prescriptions.

  • Patients currently have no concrete system in place to record and their own heathcare paperwork.
2
Unable to find old records.
  • In the time of urgency or other doctor asks patients are unable to reproduce their medical records on the go.
3
Lack of understanding how to go about recording.

user journeys

With these pain points, I developed empathy maps, personas and user journeys. Some highlights are shown below.
Creating user journeys were drafted to understand the user’s flow and grasp where improvements could be made.
Example of User Journey

user Stories

User journeys were drafted to understand the user’s flow and grasp where improvements could be made.
As a patient, I need the app to efficiently manage doctor profiles, record prescriptions, and store doctor suggestions within a healthcare platform. This ensures accurate medical records for smooth communication with healthcare providers.
As a patient, the app should efficiently organize medical records by date and doctor names for easy retrieval, enhancing communication with healthcare providers.
The app should capture audio, upload doctor notes images, and allow note-taking for comprehensive medical documentation, promoting effective communication with healthcare providers and informed decision-making for patients.

DATA SYNTHESIS

By creating categories and groups, I could synthesize information, model, summarize, and effectively communicate my initial research data.
This approach provided a manageable way to reflect on the data, with each category representing distinct pain points that could be easily referenced by different end users.
Thematic Grouping
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution
Let's create a solution

Ideation

Feature Matrix

I started to give shape to a list of features for the app based on the research.
In combination with the initial user research I had done, I combined my data and produced a list of features I wanted to include in my site.
Feature List
I created a Priority Matrix so we have some idea what to build first and how important all of them will be.
Feature List Priority Matrix
I developed a rationale table for each selected feature to ensure that the MVP includes all essential elements.
Feature List Priority Matrix

site map

When designing the information architecture for the app, I wanted to make navigating the site as seamless as possible. To do this, I ensured that the navigation of my site aligned with the two most important painpoints. This involved following standard practices for portfolios and resulted in a simple site map.
Information Architecture
To allow users to navigate with ease around the site, I utilized a sticky main navigation bar to ensure that it was always accessible.
Additionally, I added a secondary navigation system to each project page. The secondary navigation bar allows users to navigate to sections of their choice without scrolling.
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating
sketching & wireframing
testing & iterating

The Design Process

ideation cycle

My design process was broken into two cycles: the Ideation Cycle and the Testing Cycling. The Ideation Cycle went back and forth between sketching and creating digital wireframes in Figma.
Each instrument had its own benefits and drawbacks. Sketching allowed me to quickly illustrate my thoughts and ideas, whereas creating digital wireframes resulted in cleaner results.
The two worked together to lay the groundwork for the site.

sketch

Sketching consisted of building the information architecture, developing the hierarchy, and considering the layout. This manifested itself in sketches, scribbles, and wireframes. Access the complete explanation.
Initial Sketches and Paper Wireframes

digital wireframes

Digital wireframes involved building the site layout inside of Figma. This focused on executing layout and hierarchy.
Digital Wireframe

testing cycle

The Testing Cycle focused on iterating through user-generated feedback. I gathered user-generated feedback by conducting two rounds of usability studies. By testing the prototype, I gathered insights through the user’s interactions. These insights fueled actions that were used to improve the design.

testing

A usability study plan was written for each usability study done. Within this plan, I outlined the research questions, key performance indicators (KPIs), methodologies, and information pertinent to each participant.
Excerpt from Usability Study
Once the plan was established, I outlined a script to be delivered during the usability study. The script included an introduction, an explanation of the usability study, a scenario, and various prompts. This was created to ensure all the questions given to participants were consistent.
Each session was recorded through a voice memo application. After each usability study, I transcribed the recordings into actions to be done for the next iteration. I organized these actions into a table that categorized each by the specific page they affected, the urgency, and the type of correction. As I went through the iterations, these were either marked as "Completed" or "Left as is". Complete report.
Excerpt from Observations

iterating

At the end of the testing cycle, I had an improved prototype. This would then lead to another testing cycle to further improve the site. After three usability studies, the pain points were few and far between.
Mock-Ups after First Usability Study
Mock-Ups after Second Usability Study

design solutions

the design system

I implemented a variety of font styles, visual elements, and color differentiators to ease the user through the information and draw attention to specific elements. This was done utilizing visual contrast between objects and the principle of Gestalt principles.
Utilizing various visual elements, such as this emphasized text, helps to create a distinct hierarchy that the user can easily identify as more important.
Design System

application

The final design was made with me and a UI Designer on board. We also got an illustrator to create icons and cards.
My role here was to help the UI Designer with individual components and create new ones based on the set system in place.

KPI testing for final design

I applied the 'HEART' framework to set Key Performance Indicators and defined goals, signals, and metrics for each of its five categories. This approach served as the final step in refining the design.

For the final handoff, we used the 'HEART' framework to offer the employer clear insights into areas for improvement and actionable steps forward.
Framework
Framework Application
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion
in conclusion

reflections

As a designer, learning medical terms, talking to doctors, patients,  in the given deadline to create something meaningful was tough.
‍
1

User Testing

User testing with patients was conducted at every step, presenting challenges due to the extensive exposure to their medical information, necessitating empathy in handling their needs.
2

HIPAA Compliances

Medicord was designed with HIPAA compliance in mind, incorporating secure data transmission, access controls, encryption, user authentication, audit trails, and other safeguards to protect patient information. The design prioritized user-friendliness while meeting HIPAA requirements, mitigating privacy breach risks, and ensuring regulatory compliance.
3

Integrating a Design System to support future expansion.

The system established a unified framework for standardizing design elements, components, and patterns across products and platforms, promoting scalability, consistency, and efficiency in design and development. This facilitated rapid product iteration while maintaining brand consistency and cohesive user experiences.
SAHITIAGARWAL
Powered by Sahiti and webflow © 2021