UI redesign + Design System development

Product design at Emmetros

Company overview

Emmetros is a company that offers a platform called SparxConnect for healthcare professionals' communication and care planning. The business has created a platform that helps healthcare professionals, caregivers, and patients communicate with one another. The platform includes patient care capabilities for healthcare providers, such as tools to track patients' progress; and for patients, such as timed delivery of education resources throughout their care journey. Before transitioning into the patient engagement space, the application helped with residential care and long term care where patients' families are connected with their care team and could easily share information related to their loved one to better their quality of care.

Project Background

As we progressed in this new niche we identified several flexibility and scalability issues with our current UI design and needed a solution that better accommodates and supports patients.

My role

Lead designer

 
 
 
 

Objectives

The primary objective of the UI redesign was to improve the user experience for both healthcare providers and patients, increase engagement, and improve patient outcomes. The redesign needed to address the following challenges:

  • The current UI design was not flexible enough to accommodate different types of healthcare providers and clinics and their unique workflows.

  • The platform lacked scalability, which made it difficult to add new features and integrate with third-party solutions.

  • The platform utilized a design system that was optimized for a different market. Prior to the transition into the patient engagement space we operated in the longterm care and dementia care market so the design needed to better accommodate this new niche.

  • Develop a custom design library

In addition, it was a high priority for us to work closely with our development team to create a dev library of shared assets that followed the proposed new design library. This way design could easily pull established patterns into new designs that dev could easily add and build from.

Approach

We began the project by conducting a comprehensive review of the current UI design and gathering feedback from healthcare providers and patients who had used the platform. We also reviewed industry best practices including diving into well known design systems like HCI, Material design, Carbon, Fluent, Polaris. These served as a starting point for us in the creation of our new design library. Afterwards I conducted a competitive analysis to identify trends and emerging technologies in patient engagement. The healthcare industry isn’t known for its exceptional UI design so this served as a way for me to understand the IA of our competitors, the types of information they serve to their users and how they choose to convey that information.

Based on our research, we developed a design concept that focused on simplicity, flexibility, and scalability. The new design included the following features:

  • An intuitive interface that prioritizes important information and provides a clear path to accomplish tasks.

  • A landing page for healthcare providers to get a comprehensive view of patients and prioritizes important information.

  • Ability to send and collect patient recorded outcome measures and score them accordingly.

  • Refresh the icons, buttons and font sizes.

  • Create separate patient and provider views.

  • Consideration to update the current navigation systems. We commonly saw bottom navigation in apps, and top navs or side navs for desktop platforms.

  • Responsive display for all device types and sizes.

  • Heavy emphasis on imagery and graphics

  • Card styles and color themes

Design systems trends

  • Cards

  • Set styles for tabs, inputs, and buttons

 

Implementation + Challenges

Since this is a large scale change that impacted almost every single page in the platform we decided on a phased rollout. This allowed us to break the scope down into smaller more manageable parts. This also provided every team within the product development team (design, QA and dev) to update and refresh their workflows to accommodate the new design changes.

Challenges

  • Ensuring the new UI wouldn’t require too much overhead for our current clients. We strive for consistency within our design and ease of use. We need to take into account that many of our primary users weren’t in the tech industry and might not have additional time in their schedules to re-learn a new layout.

  • Transitioning into a new market while still considering our ongoing customers in a different space. At this time we we’re balancing 2 markets before making the full transition into the patient engagement space.

  • PWA. We are not a native application and that comes with its own challenges in terms of technical feasibility with design options.

  • Ensuring the development team was brought in every step of the way so they could understand and advise from a technical point of view.

 
 

Results

The UI design ideas were tested with a group of healthcare providers to gather feedback and make improvements. The feedback was positive, with users reporting that the new design was easier to use and looked much more updated than the previous version.

With our phased rollout, the redesigned platform was launched and gained traction in the patient engagement industry. Healthcare providers reported increased patient engagement, improved communication with their patients, and better patient outcomes.