Note
Some screens and details have been altered or omitted to protect IP and business knowledge. This portfolio focuses holistically on key problems and decisions, showcasing my design thinking rather than revealing the full scope of apps and systems.
I'm happy to discuss and share more details on my case studies one on one.
Tools
Balsamiq Mockups -> Figma -> Zeplin
Lucidchart -> Miro
Adobe Photoshop + Affinity Designer
Hotjar
Team
1 Product Designer - Me!
7 Developers
1 Product Manager
Discover
Exploratory Research
Goal: Understand the diagnostic laboratory space and gather broad insights about user needs, behaviors, and motivations to inform and inspire my design process before defining specific solutions
Stakeholder Interviews
Goal: Talk with MyLabsDirect executives and medical staff to understand legacy systems, pain points and perspectives to align my design decisions with business objectives and user needs
Assumption Mapping
Goal: Identify and assess underlying assumptions about user behavior and product use, helping me prioritize validation efforts to mitigate risks and inform design decisions.
The Client
MyLabsDirect is a full-service diagnostic laboratory. They serve both retail and corporate clients via physical locations, mobile concierge visits, and mail-in kits.
Background and the "why"
Accessing laboratory services is a daunting task for many, marked by complex processes, unclear communication, and a lack of centralized information. Patients often face challenges in scheduling tests, tracking their appointments, and understanding their lab results, which contributes to a stressful experience.
MyLabsDirect recognized an urgent need to revolutionize how patients interacted with laboratory services. Moreover, the healthcare industry's rapid evolution, particularly with the onset of the COVID-19 pandemic, exacerbated the demand for more accessible, transparent, and user-friendly healthcare solutions.
Getting an understanding of systems and how my solution would fit in the process
Personas
Goal: Create representative profiles of target users to guide my design decisions and ensure the product meets the specific needs and behaviors of its intended audience
Why Personas
Using personas, I ensure my design process stays user-centric, keeping real user needs, goals, and behaviors in focus and avoiding designing for myself or an imagined user. They're also critical in helping me build empathy within my team, making it easier for us to grasp and address the users' viewpoints. They also guide my decision-making by offering a clear vision of my target audience, which helps in selecting features and making design choices that genuinely meet user requirements.
I collected data for the personas through a blend of methods: conducting user interviews to capture direct insights, leveraging business knowledge to understand the market context, engaging with stakeholders for their unique perspectives, and performing competitive analysis to identify industry standards and gaps.
Key Takeaways
In context of Emily's persona above:
The Importance of Efficiency: Emily values tools and services that save her time and integrate seamlessly into her busy lifestyle. Designs should prioritize quick, efficient workflows that minimize friction and allow users to accomplish tasks with minimal effort.
Mobile Accessibility: Given Emily's reliance on technology to manage both her professional and personal life, mobile accessibility is non-negotiable. Designs should be responsive and optimized for mobile devices to ensure she can access services and information on the go.
Personal Health and Wellness: Emily's health-conscious lifestyle suggests that any health-related features or services should be designed with privacy, accuracy, and support in mind. This could include secure access to health records, easy tracking of health metrics, or personalized health recommendations.
Intuitive User Experience: Emily prefers platforms that are intuitive and easy to navigate. This highlights the need for a clear, logical user interface that doesn't require extensive learning or adaptation. User testing with personas similar to Emily's can help identify potential usability issues early in the design process.
Security and Privacy Concerns: Given the sensitivity of health data and the professional nature of her work, Emily is likely to be concerned about data security and privacy. Ensuring that these aspects are addressed and communicated clearly in the design can help build trust and user engagement.
Addressing Emily's Security and Privacy Concerns: Even something as simple as Minimal Field Input and Iconography can help build trust
Addressing Emily's Personal Health and Wellness Concerns: Provide tracking of health metrics that can be pinned to the dashboard for quick and easy access
Define
Problem Framing
Goal: Define and clarify the scope and context of a design challenge, ensuring that solutions are targeted and effective in addressing the user's needs
Defining Strategy
Goal: Establish a clear direction and set of objectives for creating user-centered solutions that align with business goals and improve the overall user experience
Measures of Success
Goal: Identify key performance indicators and metrics that will evaluate the effectiveness and impact of my design solutions on user satisfaction and business objectives
Key Challenges
Design an intuitive patient portal that works seamlessly on mobile and desktop devices, maintaining feature consistency across platforms.
Address user concerns around privacy and security, ensuring sensitive information is protected.
Predict user needs, dynamically organizing dashboard cards to offer a centralized location for key patient info.
Address concerns regarding insurance coverage, benefits, and eligibility, making this vital information readily available and easy to understand within the portal.
Design an employer dashboard that provides transparency and insight into employee health.
Adjusting The Strategy: COVID-19
As we were laying the groundwork for MyLabsDirect's patient portal, the COVID-19 pandemic unfolded, compelling us to pivot our strategy swiftly. Recognizing the urgency, I identified the immediate challenges and adjusted our roadmap to expedite the development of essential features. This shift in focus was crucial to capitalize on the emergent business opportunities presented by the pandemic.
I streamlined our initial plans to launch a pared-down version of the dashboard, concentrating solely on COVID-19 testing. This version featured test results, appointment scheduling, and an integrated tool for insurance and CARES Act eligibility, enabling users to access free testing promptly. This rapid design and prioritization allowed us to meet the critical needs of the moment, providing a vital service during an unprecedented global health crisis.
The Solution
I designed a mobile-responsive patient portal with many modular components.
This portal is directly integrated with MyLabsDirect's laboratory information system (LIS) and scheduling system, ensuring a seamless patient experience from start to finish. The inclusion of an integrated insurance eligibility checker simplifies the process of determining coverage for tests, including those under the CARES Act for COVID-19.
Designed with families in mind, it supports multiple profiles under a single account, making it easy for family members to manage their health information while maintaining individual privacy. All laboratory results are presented in clear, user-friendly language, demystifying medical jargon and making health information accessible and understandable.
Additionally, I designed an employer dashboard to offer businesses a comprehensive view of their employees' health. This dashboard features straightforward yet effective data visualizations, giving employers a clear overview of employee wellness, progress of company-wide health campaigns, and a tracker for monitoring the status of test kits purchased by the company.
This tool is tailored to provide employers with the transparency and insights needed to support a healthy work environment and make informed decisions about workplace health initiatives.
Feature Mapping
Goal: Visually organize and prioritize product features, facilitating clear communication and strategic planning between myself, the development team and client
User Flows
Goal: Map out the steps a user takes to accomplish a specific task within the product, highlighting the sequence of interactions and decision points to enhance user experience and processes
Mapping features and User Flow
When scoping and mapping features for the patient dashboard, I needed a central touchpoint that can help me effectively communicate between the users, client and development team. This touchpoint should allow me to shine a light on the interplay not only between user and business needs, but also technical considering such as the tech stack and design. My preferred touchpoint is a simple flowchart.
Example: I created a chart of the shop flow and features. This served as an anchor for my discussion with the client and our development team on features and implementation.
Example: I created a chart of how our test recommendation engine would work. This served as an anchor for my discussion with the client and our development team on our recommendation process. Disclaimer: Some parts of the final process have been omitted.
Design
Information Architecture
Goal: Organize and structure content effectively so that users can easily navigate and find the information they need within the product
Wireframes
Goal: Outline the layout and functionality of the application, focusing on content placement and user interaction without detailed design elements
Low-fidelity Screens
Goal: Sketch out the basic design and functionality of the interface, enabling early testing and feedback on the usability without detailed visuals
High-fidelity Screens
Goal: Create a detailed and polished visual representation of the interface, incorporating final design elements, colors, and typography to simulate the actual user experience
Wireframes and Low-fidelity Screens
Using Balsamiq, I translated my sketches and whiteboarding sessions into wireframes and further into low-fidelity screens. These served as a blueprint for conversations with internal stakeholders and a focus group of users. Through iterative meetings and feedback sessions, the low-fidelity screens were refined, addressing functionality, usability and feature level concerns. This process ensured that before moving to high-fidelity wireframes, the design was aligned with user needs and business objectives, paving the way for a more informed and effective design solution.
UI Design
Once the usability issues were resolved, I moved on to design the high fidelity screens in Figma.
In designing the UI aesthetics for MyLabsDirect's patient portal, I chose a light and airy scheme to create a welcoming and comfortable user experience. The use of rounded edges in the UI elements was deliberate, aimed at making the interface feel friendlier and more approachable. I embraced a minimalistic approach with a deliberate use of color to avoid overwhelming users, ensuring that the design not only guided them intuitively through their tasks but also conveyed a sense of calm and clarity.
Incorporating good aesthetics and a non-overwhelming UI design in MyLabsDirect's patient portal was a strategic choice, aimed at increasing user trust in the app and the company.
Pictured: A central location for all of the patient's tested health metrics. A simple tab bar on top changes views between all health metrics, abnormal health metrics, and health metrics that the patient has chosen to track on their dashboard.
Touchpoint: Email
When I considered the broader user journey and the various touchpoints users would engage with, one of the major touchpoints was email. Every time a user creates an account, resets their password, registers a kit, gets a test result, schedules an appointment or takes other account actions, we provide a confirmation of that action with an email. Emails should be on brand with the design of the patient portal, contain a concise summary of the account action, provide useful microcopy and next steps if applicable.
Testing
Usability Testing
Goal: Observing users as they interact with the product to identify challenges and opportunities for improvement.
Usability Testing
I led a series of usability tests to ensure my design solutions not only met but exceeded user expectations. I recruited a diverse group of participants, mirroring our broad user base, to interact with my prototypes. Through tasks designed to simulate real-world use cases, I gathered invaluable feedback on my interface's intuitiveness, efficiency, and overall user satisfaction. This iterative process, combining both remote and in-person sessions, allowed me to refine my designs, streamline the user journey, and solidify my commitment to delivering a seamless, user-friendly experience.
Continuous Analytics
Users often say one thing in surveys but do something else in practice, so I needed a way to validate their feedback. I integrated Hotjar to dive deeper into our users' behaviors and experiences. Utilizing Heatmaps and Session Recordings, I could identify friction points and areas of interest that weren't initially apparent.
This real-time, visual data was instrumental in iterating our designs, allowing me to refine and validate enhancements based on actual user interactions.
The insights gained from Hotjar were pivotal in making informed decisions to continuously improve the portal's usability and overall user satisfaction.
Identified pain point: Profile Merging
One of the pain points that was identified through usability testing was the lack of profile merging. Some users had a mix of in-person and at-home testing results that were on separate profiles.
Often at an in-person clinic, users would provide a different or shortened name, a different email address, or other piece of demographic information that our system segregated into separate profiles because it fell outside of outside of our confidence interval.
Example: Jane goes to an in-person clinic and gets tested under the name Jane Smith Doe, she then orders an in-home test on a different day under the name Jane Doe or Janelyn Doe. Our system does a confidence check whether these are the same people and determines that they are not -- now Jane's test results are on two separate profiles.
Pain point solution
I designed a two step approach to this issue:
First and foremost I worked with our development team to adjust our confidence interval for determining similar profiles.
For example: Users with the same basic demographic information such as Date of Birth, Email and address and similar names (same last name, same first name, optional middle name) were automatically treated as the same profile.
I designed a profile merging feature. Working with our development team it was determined that this would be a one-way, permanent, process -- as such I needed to mitigate and prevent any accidental merges.
The use of effective microcopy throughout the merging feature would provide subtle instruction, alleviate user concerns and aid in preventing errors.
Throughout the merging feature I designed exact previews of what information would be merged, destroyed or remain unchanged in the process.
I added friction:
In the form of a disclaimer checkbox that the user needed to interact with before finalizing the merging process.
In the form of additional intermediate steps and screens.
Deliver
The Result
The MyLabsDirect patient portal became a critical selling point for new business opportunities. They now have superior software compared to their competitors. It allows them to win more deals with universities, employers, and provider groups while providing an excellent user experience. My ongoing design collaboration helps MyLabsDirect to continue to add more features to constantly innovate in the laboratory space.
A real-world impact
My patient portal is now live and enhancing the experience of real users
© Sam Bajwa 2024