Challenge
Intended to serve as a valuable tool for physicians and supporting medical staff, the eConsult application has instead caused pain and stress, featuring a dated interface and limited functionality. Enhancements made to the app over time have largely ignored UX best practices while lacking consistency in visual design and efficiency in workflow.
Redesign of an existing web-based application allowing Northern California Kaiser Permanente Doctor’s to electronically refer a patient to a specialty care within the NorCal Kaiser network eliminating paper trails and operational efficiencies.
Design Process
As part of a core team consisting of a business analyst, two key business stakeholders, and a senior developer, I played a key role as the sole UX/UI Designer for the eConsult app redesign. Employing the User-Centered Design (UCD) process while applying proper developmental methodologies, our team embarked through the stages of inspiration, ideation, and implementation. Wireframes, prototypes, and high-fidelity mockups of our solutions were created and presented for stakeholder approval. Once approved, it was on to discover, define, design, and implementation.
User Research
User research was conducted to gather insights into how eConsult operates, who its users are, and to identify their pains when using the application. Interviews were accomplished with senior stakeholders whom support and operate eConsult as well as several clinician app users. Research findings were consolidated and presented to stakeholders, achieving buy-in to move forward with the redesign of the application.
Pain Points
- A desire to directly book a referral
- An abundance of empty negative space in the application
- Poor bitmap font display
- Outdated visual design
- Application tools are not user-friendly
- Alerts and notifications not properly displayed
- Wish there was a way to direct book a referral
- Too much empty negative space on the application
- Poor bitmap font displayed
- Application visual design is outdated
- Application tools are not friendly and painful to use
- Display better alert and notifications within the application
- Lack of efficient workflow
- UX best practices not followed
- Outdated development methodology allowing users to enter back end code and poorly style up their design taste.
- The application lacks efficiency in the workflow
- The application is behind and not current with UX best practices
- The application is built with old development methodology allowing users to go into the back end code and style up the referral to their design taste like a bad Christmas card.
Solution
Visually design a new look and feel that is fresh, clean and efficient using best UX practices that are current. Improving upon the site architecture and flow and internal tools that users use within the application. Allow for better search feature and analytics reporting. Update to a better pattern for physicians to book a direct "referral". Most importantly Standardize content that is coming in and out of the application using a better design language.
Personas & Empathy Mapping
Personas were created from evaluating the interviews to determine user behavior and their empathy, addressing their pain points and frustrations with the current application.
Site Map
The first step in the redesign was to determine whether a new site architecture was needed. Even though the current site is very complex and holds a lot of data while moving parts in and out, the team concluded that disrupting the current site architecture would be hazardous and would need additional high-level approvals which would result in valuable time lost. Keeping the current site architecture was decided as the best course of action while mapping areas of improvement in order to enhance and speed up the workflow.
User Flows
User flow scenarios were generated to ensure correct functionality prior to beginning actual design. This step was critical in confirming flow tasks were up to stakeholder and end-user requirements. It also validated the flow task from the development point of view of the lead developer.
Whiteboarding
Whiteboarding sessions to map out workflow objectives were conducted weekly with key stakeholders, product business owners, senior management and the development team.
Sketches
The sketching phase allowed for visualization on how the user journey will work and how the interface will look. Feedback from the core team was provided based on the sketches, allowing for refinements before wireframing began.
Wireframes
Based on the final sketches, wireframes were created showing content layout and app functionality taking into consideration user needs and journeys. Wireframes also provided the foundation to crafting the visual style guide, common components, and library patterns
Style Guide
A new style guide introduced an appealing visual language and best UX standards to follow. View full style guide.
Prototypes
Several prototypes were created based on the wireframes, helping to validate the design process and user experience with the stakeholders and development team. Final key insights were gathered before high fidelity visuals mockups were created.
High Fidelity Mockups
High fidelity mockups were created for the user stories, ensuring the development team and stakeholders were aligned in finalizing an improved UX design and user experience for the eConsult app.
© SANDEEP HUNDAL 2022.