Referral Document Workflow
The Advisory Board Co.
Lead UX Designer
UX design, UI design, prototyping, user testing, basic foundational research
Dec 2015 - Aug 2016
Perhaps one of the most complex parts of the Crimson Medical Referral software, the referral "form" was a complex UI that combined submission and processing flow, multi-user communication, multiple statuses, call logging, attachments and much more. I was very excited to tackle this complexity and come with an elegant solution that would impact the daily lives of medical referral coordinators across the country.
Legacy Design
The original form followed an accordion pattern considered as best practices at the time.
Evolving Context
Over time, with the addition of new clients, new features and the development of more complex processing workflows the form became a pain point for many of our users.
In addition the development team was also pushing for a refactoring of the code.
View of the legacy screen.
Redesign Goals
Usability Goals
- Improve Usability.
- Reduce Time to Complete.
- Reduce Interactions.
- Reduce perception of complexity.
- Do not loose existing functionalities.
- Optimize for expert users.
- Optimize for beginners.
Technical Refactoring
- Improve performance
- Reduce API calls
- Reduce code complexity
Research
Process
- Shadowing and interviews with a variety of user personas.
- Shadowing and interviews with trainers.
- A Focus group discussion with the development team.
- Analytics – frequency of use for different fields and interactions.
- Workflow mapping.
Outcome
- 20+ user interviews and shadowing sessions.
- 10+ Internal interviews with training and support.
- 24 documented usability problems/opportunities.
- 6 high-level technical problems.
- Company wide UX presentation of discoveries.
- Detailed HTML prototype that allowed for realistic interactions and quick iterations
- Remote testing with users on their own machines and within their work context. Users were asked to go through their own process and not execute preset tasks.
- Tested against company design standards UI platform look and feel.
- Card UI for the “From” and “To” sections.
- A single form with improved validation and layout.
- Smart “presets” based on user history.
- Workflow Actions accessible from a “sticky” bar.
- A responsive grid for easy work across multiple applications on a single monitor.
- Improved inline validation.
- Optimized Messages and Attachments interaction.
- Reduced mouse movement.
- Optimized for keyboard users.
- Optimized for collaborative multi person workflows.
- Business Rules Diagrams
- Annotated UI Comps
- HTML and Invision prototypes
- Backlog Grooming and Estimate Meetings
- QA Participation
- UX Sign-off a.k.a. “Hovering Art Director”
Research artifacts.
Workflow Redesign
Legacy Workflow
Gradual addition of business rules have introduced a lot of complexity to the Interactions and code.
Redesigned Workflow
The new design reduced steps while maintaining existing business rules.
Side by side comparison of legacy and redesigned workflows.
Iterative Design and User Testing
Screenshot from a remote user testing a prototype at their desk and default browser.
Final Design Highlights
View of the final document redesign.
Artifacts and Communication
Artifacts
Communication
