A web-app to now plugin that allows for greater user accessibility and versatility.
Duration
Role
Team
2 Weeks
• UX Design • UI Design • Visual Design
1 Designer 1 Engineer
Background
Following our initial efforts at CalHacks, we've been dedicated to further developing our product. We have been creating a healthcare AI product that helps physicians create a more efficient administrative system. View our previous product here.
Problem Space
After further thinking more about easier accessibility, I came across the question of why would these providers want to go through learning and transferring all of their patient information and practice information into another EHR system?
I created a solution that required a new onboarding process for these physicians that already barely have time on their hands.
Our Solution: An Integrative Widget
An integrative widget that could be moved around a desktop screen allows for information to be accessed anytime– no matter what EHR screen the user is viewing.
Download & Integrate
Begin screen analysis.
After onboarding, our system analyzes the screen, allowing for assistance with appointments, note taking, diagnosis and billing.
Through further competitive analysis, market research, discussions and QA of what we can accomplish, I came to a consensus of non-negotiable features that are needed by the users. During research, I looked into different ways to display our platform and got a deeper understanding of different responsive sites, plugins and extensions. We also wanted to keep our main product feature as well, so this was what I came up with:
Non-negotiable features: 1. Accessibility functions 2. Override system that allows for override at any time 3. Suggestive Diagnosis & Billing
I opted for these features, as these were our product’s key features that differentiated us from competitors and since they were already fully implemented into the back end of our tech stack.
Quick & Dirty User Flow & Sketches
I drafted a quick flow and sketch that would be referenced as an outline for all screens.
Reiterations
Improvement 1: Taking past features a step further
Recognizing that our initial product feature revolves around billing and diagnosis, I re-assessed our product pages and features, quickly coming to a consensus that the patient profiles would not longer be necessary if our platform would now be an EHR integrative product.
Now, we have apatient preview feature for upcoming appointments, listing out each patient's necessary details for before the appointment.
Before
After
Improvement 2: Information Re-organization
As we switched from web-app to widget, I focused on condensing data and analytics while prioritizing user-centered design principles. By organizing information into cards, I optimized space usage and facilitated quick data access. Leveraging Gestalt principles and Hick's Law, the interface achieves cohesion and ideal information density for efficient decision-making. Notably, larger fonts highlight key tasks and patient data, reducing cognitive load and accelerating physician workflows, especially in diagnosis and billing.
Before
After
Improvement 3: Responsiveness
The most significant transformation, of course, was resizing the platform from a web app to a widget. I made this decision to enhance user accessibility, ensuring that users could access vital information whenever needed. Additionally, I prioritized adaptability, allowing the platform to be resized according to the user's preference and to avoid interfering with the EHR system.
Before
After
Designs
Our initial trip summary feature included a view of trip collaborators and checklist tasks. We thought that the screen could be designed with more visuals and features but where would we incorporate that?
Low Fidelity Wireframes
During the creation of low-fidelity wireframes, I engaged in a process of experimenting with sizing. The goal was to strike a balance, ensuring that the design didn't occupy excessive space while maintaining legibility. It was crucial to find the right sizing where the font remained clear and easily comprehensible without being too small.
High Fidelity Wireframes
In the development of high-fidelity wireframes, my focus was on enhancing visual clarity by introducing heightened color contrast to refine the visual hierarchy. Additionally, I prioritized a polished user experience by incorporating dissolve and smart animations, ensuring seamless transitions throughout the design.
Visual Design
I prioritized simplicity for the interface, given the density of information. Consistency with the initial design was a key focus, leading me to retain the same color scheme.
What I Learned
This project underscored the importance of responsiveness in our work. The limitations of our previous platform, lacking responsiveness, presented challenges and impacted productivity. This experience highlighted the need for a strategic approach when team changes occur. As a designer, it emphasized the importance of thoughtful design thinking, considering the team's skill sets and capacities. Responsiveness, in this context, is not just a technical attribute but a crucial factor for maintaining organizational resilience and adaptability.
.png)
.png)
.png)
.png){kind=small}
.png){kind=small}
