EngagedMD

Fertility Clinic App for Staff

Overview

Challenge

When I joined EngagedMD as Lead Product Designer the existing application had scaling issues, outdated design, and was limited in the features it could provide. Each release caused a multitude of bug fixes and customer complaints as the system was running on an outdated technology stack.

Outcome

It's rare for product designers to have the opportunity to rethink an application from the ground up completely. Using HL7® FHIR® (Fast Healthcare Interoperability Resources) standard, customer insights, primary research, and testing, we were able to deliver a brand new web application, CareXP, launched Q1 2024.

Company

EngagedMD

EngagedMD is a healthcare technology company that specializes in providing patient education and informed consent solutions for fertility clinics and healthcare providers. Their platform streamlines the patient onboarding process, offering personalized, easy-to-understand educational content and digital consent workflows. By automating and simplifying complex medical procedures, EngagedMD enhances the patient experience while improving clinic efficiency and ensuring compliance with regulatory requirements.

Info

Role

Lead Product Designer

Team

2 Co-CEOs, 10 Engineers & Me

Engagement Length

3 Years

Tools

Miro, Figma, Coda, Hotjar, Jira

Understanding the problem

Why are we doing this?

1

Business Side

For the business to grow the application needs to be stable, features need to be launched with a regular cadence, and a proper research/design/development cycle needs to be established.

The main objective was to rethink existing SaaS application for fertility clinic staff to ensure backward compatibility of features, increase the speed of the new feature development, and create a foundation for future growth.

_

2

Customer Side

Time is a precious commodity in the healthcare. Both doctors and nurses have no time: for themselves, for learning new systems, for exploring new features, for anything.

Providing an easy tracking for the patient journey would win back the time they so desperately need.

Approach

Discovery

In collaboration with the Co-CEO, I conducted a thorough audit of our application using the red-route analysis to understand critical user flows. Gathering insights through interviews with the customer success team and direct customer 1:1, supplemented by rigorous analysis of usage data to pinpoint UX bottlenecks and paint points, allowed us to create a set of distinct personas addressing each audience's needs and mindset.

EngagedMD has also gathered a set of insights directly from the customers, allowing us to develop a prioritized list of key features that were critical to the success of the new app.

I've advocated for and introduced Hotjar as the primary tool to gather insights about user behavior.

Evaluation & User Journeys

Following the discovery, we adopted Basecamp's Shape Up methodology to refine our findings. A rough breadboarding exercise provided an overview of all possible features, established a cohesive application architecture, and aligned the team on the key features to focus on first. This iterative process with regular stakeholder check-ins ensured alignment of user expectations and project goals.

image 65

Ideate and Iterate

The initial wireframes and prototypes allowed for quick feedback from internal and external user groups. The feedback revealed gaps in the initial hypothesis which were addressed. The first visual designs were created using MUI to speed up the design process and development.

From low to high fidelity, wireframing allowed to narrow down the feature scope

Setbacks

Speeding up to slow down

To speed up the design production some portions were outsourced. Project summary, initial designs, user flows and a list of critical features were provided to a design agency, the delivered Figma files had an unexpected surprise - while detailed and comprehensive, they lacked comprehensive component management, making it impossible to systematically update design elements across multiple screens and features - unconnected styles, unique instances of each button - a maintenance & process nightmare.

So many screens, so many instances of the same styles..
So many screens, so many instances of the same styles..
Desisgn System

Consistent Design Language

Creating a design language is not just colors and buttons. How does the application feel as a whole? Consistency is critical, as it allows for brand continuity.

The lessons learned allowed me to emphasize the need and advocate for the development of a comprehensive design system. I’ve established a Core DS: colors, typography, icons, and a basic set of components.

The design system had a dual purpose: faster ideation on the design side and consistency in hand-off to the engineers.

Progress

Design Evolution

Initial design concepts were revised, revised, and revised to infuse the brand feel. Navigation was streamlined, the brand elements were pulled through, and the concepts were tested.

Delivery

Hand off

Working with engineering is a key part of any product designer’s day-to-day. Ensuring that developers know what is in scope while keeping in mind what’s to come allows for cohesion on the team and sound execution.

The normal handoff consisted of a set of epics, broken down by user stories with Figma assets embedded in JIRA. The scope, business needs, and acceptance criteria were written, often by me, for one to two sprints ahead. Working together with the engineering team, we evaluated the capacity and deprioritized nice-to-haves, while elevating key functionality relevant to the user flows.

Figma assets included full screens, all instances and use cases, as well as documented components.

component_example
launch

Learning and Improving

The go-to market team has prioritized a list of initial clinics to be migrated.

The common thread was that they were smaller, using fewer features, and were ideal candidates for additional learning and observation.

I advocated for and integrated Hotjar, which allowed for anonymized qualitative insight gathering to identify any UX barriers for the key flows in the application. Besides heatmaps, Hotjar provided screen recordings allowing for observation of user behavior in the wild.

Surveys were deployed as well, allowing for qualitative feedback to address each flow.

The results were distilled into key insights, evaluated, and integrated into the roadmap.

Testimonial from Co-CEO

Sergey was an integral part of our team at EngagedMD, joining us as our first designer. During his tenure, he played a crucial role in a major redesign of our platform, contributing from the initial ideation phase through to the launch. This project was pivotal in enhancing our efforts to automate patient education and administration, aligning with our mission to save medical practices time and improve patient care.

Sergey's work during the redesign phase demonstrated his commitment to user-centered design and his ability to contribute to critical projects. He showed adaptability and a readiness to tackle the challenges associated with developing solutions in the health tech space.

Sergey's approach to design could be valuable in roles where design plays a key part in product development and user experience enhancement. His involvement in projects from conception to implementation showcases his capability to navigate the design process in a dynamic environment.

image 26

Taylor Stein

CEO @ EngagedMD