Fertility Clinic App for Staff

Role: Lead Product Designer
Team: 2 Co-CEOs, 10 Engineers & Me
Engagement Length: 3 years
Tools: Miro, Figma, Coda, Hotjar, Jira
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.

Challenge

When I joined, every release brought a wave of bug fixes and customer complaints. The app ran on an outdated technology stack, looked dated, and couldn’t scale or take on new features.

Outcome

We rebuilt the application from the ground up as CareXP, on the HL7® FHIR® standard, shaped by customer insights, primary research, and testing. It launched in Q1 2024.

Why are we doing this?

Business Side

The business needed a stable app, a regular release cadence, and a real research, design, and development cycle. So the goal was to rebuild the staff app so existing features kept working, new features shipped faster, and the platform could grow.

Customer Side

Doctors and nurses have no time to learn new systems or explore new features. Easy tracking of each patient’s journey would give some of that time back.

Miro board of wireframes and flow diagrams, zoomed far out

Discovery

With the co-CEOs, I sketched a rough persona for clinic staff and found four distinct roles: front desk, nurses, doctors, and management, each with its own tasks at each stage of treatment.

I then audited the existing app for three things: the features everyone used all the time (red route analysis), the main user flows, and the UX barriers. I also added Hotjar for anonymized usage data and for surveys triggered at critical points in the journey.

User Flows & Journeys

With a somewhat clear picture of the existing user needs, I created a general user journey through the future application, which helped identify critical moments of overlap between Patients and Staff in each step of the patient treatment.

Patient journey flow from new patient through treatment to cycle review

Ideate and Iterate

We used Basecamp’s Shape Up method. A rough breadboard mapped the possible features, set the architecture, and picked what to build first, with regular stakeholder check-ins to keep goals aligned.

Wireframes went from low to high fidelity and were tested with internal and external users, which exposed gaps in our first hypothesis. The first visual designs used Material UI (MUI) to speed up handoff to engineering.

Speeding up to slow down

To move faster, we outsourced part of the design to an agency. The files came back detailed but unmanaged: unconnected styles and one-off copies of elements like buttons on every screen. Updating anything across screens was nearly impossible, so the shortcut became a maintenance problem.

Zoomed-out Figma canvas with hundreds of small screen frames in rows — So many screens, so many instances of the same styles.

Consistent Design Language

That’s why I pushed for a design system, then built it: a Core Design System with colors, typography, icons, and a base component library. It sped up ideation and made every handoff to engineering consistent.

Six Figma file covers for the CareXP Core Library and feature development

CareXP primary teal color palette with swatch names and hex values

Heading type styles in Figtree with specs beside a Figma text styles panel

Calendar date picker component variants in the CareXP design system

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.

Early episode screen with left navigation and an assignments table

Revised episode screen with dark icon rail, patient cards and tabbed assignments

Handoff

Each handoff was a set of epics and user stories with Figma assets in JIRA. I often wrote the scope, business needs, and acceptance criteria, one to two sprints ahead. With engineering, we checked capacity, cut nice-to-haves, and protected the functionality the key flows depended on. Figma files included full screens, every instance and use case, and documented components.

Documentation of the drawer component with its parts and four sizes

Learning and Improving

Go-to-market moved the smaller clinics first. They used fewer features, which made them ideal to learn from. Hotjar heatmaps and screen recordings showed how staff really used the key flows, surveys added their own words, and the findings went 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.

Taylor SteinCEO @ EngagedMD