ux case study

Improving a Significant Workflow with a Step Wizard

overview

During several months, I leveraged our PrimeVue-based design system to design AlayaCare's first wizard stepper and improve a major patient intake workflow. The goal was to address key issues our users had with our current workflow for processing referrals for incoming patients. This feature is currently in the backlog, ready for development.

Live Site
role
Product Designer
skills
Stakeholder Interviews, User Interviews, Journey Mapping, User Flows, Visual Design, User Testing
software
Figma, PrimeVue
year
2022-2023

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Persona

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

problem

Admin users at home health agencies have to manually process up to hundreds of referrals per week through our home health software, AlayaCare Cloud, in order for services to be scheduled for patients in need. Users have complained about all the extra manual work they have to do after clicking “process referral” in our current workflow, including inputting funding information and medical history items into the patient’s profile, when all this data comes through automatically from the referral itself. Users have requested a way to further automate the process so that patient referrals could be processed sooner resulting in faster patient care delivery and more time spent on other pressing tasks.

How might we redesign this workflow to increase efficiency?

discover

Journey Map for an Existing Patient

The journey maps for users processing referrals of both, new and existing patients, made it clear that to optimize the process, all steps should be completed in the same area of the app. The many steps needed to be taken in order to process a referral led me to decide on a step wizard as the best solution to improve the design. This is because the step wizard affords users the chance to focus on one step at a time while simultaneously guiding the users through each step. This way users would no longer need to jump around the app to fill out the necessary fields as all the information they would need would be accessed from the same dialog.

original design

Select a client from list of matches found

Pop-up expands after to show existing services

Once user clicks “Process Referral” they must go to the patient's profile to edit the service's funding details to fully complete the referral process

Step to add funding details in patient's profile

redesign

The new wizard features 4-5 steps, depending on whether the user is processing a referral for a new or a returning patient. I grouped related steps together which resulted in all the steps around identifying a patient and selecting their personal information to be copied over to their profile placed at the start of the wizard. The penultimate step was the selection of an existing service or a creation of a new one. Finally the user would be prompted to review all the steps they've taken before processing in case they needed to go back and fix something.

Step 1
No matching clients found

Matching clients found

Step 2
Choose whether to override existing address

Step 3
Medical History step for an existing patient

Step 4
At-a-glance service information for an existing patient with existing/past services

Form to edit service details in the wizard directly so there is no need to exit intake area of the app afterwards

Step 5
Review screen that summarizes each information-heavy step so user can check for errors, typos, etc.

challenges

  • Managing different stakeholder expectations vs. technological expectations
  • Working to align wizard’s UX requirements with the design system component capabilities
  • Down-scoping for timely delivery while ensuring a fulfilling user experience