Healthwise by WebMD Ignite
Improved Search Experience
Transformed consumer search experience to empower patients to make informed healthcare decisions.
Contribution
Discovery facilitation
Ideation & conceptualization
KPI development
User research
User testing & validation
UX/UI design
Wireframing & prototyping
Workshop facilitation
Tools
Figma
Jira & Confluence
Mural
Microsoft Teams
UserTesting
zeroheight
Duration
7 months
Fig. High-fidelity prototype of search result design concept for asthma symptoms.
About the Project
Searchable Multimedia Digital Health Library
The Healthwise Advise product allows clinicians to easily share up-to-date health education with patients. I led the end-to-end design of the consumer-facing application with the mission to deliver medically-reviewed, best-in-class health education directly to patients via MyChart, After Visit Summaries, QR codes, and in print. In addition to providing patients access to all of their education history in one place, we provided patients with access to the digital health library via search in order to reduce hospital readmission rates, improve health literacy, and help people make better health decisions.
Access to
35,000+ videos & articles
Available in
20 languages
Users per year
19 million
Fig. Consumer patient education application displaying video content on mobile device.
Problem : Legacy search solutions returned ineffective search results and lacked context based on user intent. Users struggled to find useful and relevant content leading to feelings of frustration and abandonment of the product.
Solution : Allow users to search across all available content in one query and refine their results with faceted options. Quickly deliver what they need, when they need it, without having to dig deep.
Accomplishments
MVP Search Solution
Search improvements
Search bar
Centrally located in the heading on every page. Preserves users' queries, ensuring consistency and easy refinement of search results.Value statement
Grounds and aligns user expectations, setting clear and immediate relevance for the user’s context.Content tabs
Provides control over content display, allowing users to navigate different types of content seamlessly and efficiently.Language select
Empowers users to filter results based on language, enhancing accessibility and usability for non-native speakers.Taxonomy breadcrumbs
Informs users how conditions connect to improve their understanding, offering a clear navigation path and aiding knowledge retention.Top result summary
Presents users with quick answers to their questions, saving time and increasing the likelihood of finding relevant information promptly.Top video group
Showcases top videos for quick access, catering to users who prefer visual learning and multimedia engagement.More result group
Exhibits top results with clear media labels, ensuring users can differentiate between content types and choose according to their preferences.More results button
If users can’t find what they need in the top 10 results, this feature expands their options without overwhelming them initially.Related search
A button group that enables consumers to refine their search, making it easier to find more specific or related information.Illustration
Features a friendly and inviting illustration, creating an engaging and visually appealing interface that enhances the user experience.
Fig. Search flow on consumer application
Outcomes
Overall Impact of Search Design
Raised positive content ratings
10%
Boosted consumer satisfaction
28%
Integrated Search solution into
5 products
Empowered patients
Improved content accessibility and conversion, enabling individuals to take charge of their well-being with confidence.
Strengthened patient engagement
Supported trust between patients and their providers.
Branded integration
Integrated Healthwise products with payer and provider systems to streamline user experience across multiple systems and improve client relationships.
Enhanced analytics and personalization
Tracked usage analytics and data to enable continuous improvement of the consumer experience and provided clients with meaningful usage data that they need.
Boosted competitive edge
Created modern tech solutions with modern UIs to not only retain clients but attract new ones as well.
Gif. Search result flow on mobile device.
For those of you interested in the details
Design Process
The Working Backwards Method
Envision the final product
Explored "what if" scenarios for ideal user experience
Prioritized user needs and preferences
Identified key assumptions for implementation success
Evaluate the concept
Collaborated with stakeholders for decision making
Balanced user needs, feasibility, and business constraints
Incorporated feedback, competitive analysis, and design research
Iterate the design
Conducted user interviews and usability testing
Incorporated feedback into prototypes
Developed high-fidelity prototypes emphasizing usability
Create a roadmap
Defined MVP and long-term vision
Secured buy-in for phased approach
Build
Executed interim designs to address immediate needs
Ensured design feasibility and alignment
Analyzed usage data for impact assessment
Why did I choose this method of approach?
We needed a different approach! Previous discussions on Search were often overshadowed by enumerating its flaws, leading to demoralization and stagnation. To revitalize the team's spirit and foster innovation, I encouraged stakeholders to envision an idealized Search unconstrained by past shortcomings.
What if Search simply worked?
05. Envision the Final Product \ User Needs & Preferences
Consumer Search Journey Map
Sarah is a 54-year-old female recently diagnosed with Type 2 Diabetes who uses MyChart to access her After Visit Summary.
Sarah enters the education module within MyChart with the intention to learn more about her recent diagnosis of Type 2 Diabetes.
Persona is based on consumer user research including historical usability testing of legacy products, in-depth interviews with patient consumers, interactions with clients, and comprehensive knowledge accumulated within the company.
Discovery
Action
Sarah navigates to the education module within MyChart.
Feeling
Curiosity: She may feel anxious or worried about her recent diagnosis but is eager to learn more about how to manage it effectively.
Exploration
Action
Sarah reviews the articles and videos that her doctor shared with her.
Feeling
Concerned: Reading what her doctor shared with her leaves her with more questions than answers.
Search
Action
She initiates a search of the digital health library to find resources specifically related to Type 2 Diabetes.
Feeling
Determination: A bit frustrated that all the information she needs is not in her chart, she is motivated to find reliable information.
Information Retrieval
Action
Sarah reviews search results and explores content related to Type 2 Diabetes.
Feeling
Hopeful: She looks for information on treatment options, potential complications, and lifestyle modifications.
Content Consumption
Action
Sarah reads/watches content and gains a comprehensive understanding of her diagnosis.
Feeling
Empowered: She finds what she was looking for and feels more capable to take care of her new diagnosis.
Opportunities & Insights
Personalized content recommendations
Users value personalized recommendations based on their preferences, search history, diagnosis, and past interactions with clinicians. They expect to receive relevant content suggestions immediately alongside what their doctor personally shared with them.
Content history awareness
Users want to know what they have already viewed and expect for the system to tailor the results to their past search history.
Improved search functionality
Users expect enhanced search features, such as autocomplete suggestions and natural language processing, to facilitate efficient information retrieval. Embedding AI summaries help users get to the information they need quickly and easily.
Efficient information retrieval
Users expect to find their answer on the first page of search results within the top 10 search results. They expect to see better and better search results based on her prior searches. They want to find information quickly and easily.
Content filter options
Users want options to filter content to display their preferred format, whether it's reading articles or watching videos so that they can get to the information they want, how they want, faster.
Speed and performance
Users greatly value fast and responsive search functionality. She expects quick results to access the information she needs promptly.
05. Envision the Final Product \ Ideal State
What if Search Worked?
Asking the team to envision the ideal search allowed us to ideate novel solutions unbound by technical constraints. Alongside team discussions, I crafted prototypes and flows that reflect our desired destination rather than our current position. By brainstorming ideal solutions, we hope to deliver an experience that not only meets but exceeds user expectations, ultimately helping users find what they need when they need it.
Legacy search solution problems
Homepage
“Enter search term.” doesn’t provide users enough context for what they can search for
Typeahead
Lacks context based on user intent
Search Results
Ineffective search results, with unclear ranking.
No context for the kind of content that is returned, users don’t know if it’s a video, an illustration, or article.
Overall impact
Users struggle to find useful and relevant content leading to feelings of frustration and abandonment of the product.
Users who don’t find what they want, rate content lower.
Ideal state solutions
Low-fidelity wireframe based on team generated ideas
Fig. Low-fidelity wireframe generated with team to start the process of an envisioning an ideal search results page.
Ideal flow helps users find what they need, when they need it
Fig. Proposed flow - what a user would see from search bar to search results with each interaction offering a conversion point to content.
Refined concept in Figma for stakeholder buy-in and user testing
Gif. High-fidelity, interactive Figma prototype created for user testing and demonstration of interactivity.
04. Evaluate the Concept \ Facilitated Cross-Functional Collaboration
What Can We Build?
Prioritization matrix exercise with stakeholders
Fig. Prioritization matrix exercise identified perceived effort and value of design improvements.
Shared decision-making across teams
Engineering: Worked closely to determine technical feasibility of search features, search ranking and algorithm changes, and alignment with greater product roadmap.
Content strategy: Collaborated to create abstracts, search recommendations, refine copy, determine opportunities within content structure, and establish UI language for the consumer application.
Marketing: Worked together on branding and co-branding efforts, as well as client communication strategies to ensure consistency and alignment.
Analytics: Collaborated to understand data collection methods and leverage current product usage data for insights and improvements.
Sales: Partnered to develop demos and prototypes to showcase the consumer application's features and benefits to clients.
Strategy and leadership: Worked closely to align the UX/UI design with overall business goals and connect the dots between different teams and departments.
Multimedia: Collaborated on creating illustrations and establishing a cohesive media design direction across Healthwise's product offerings.
Fig. Facilitated white board activity with stakeholders to better understand ideal search feasibility.
Breakdown of search
The ideal search experience, as a concept, encompasses design components, each integral to the overall user experience. It is made up of various interactions, functionalities, CTAs, design tokens, expectations, patterns, and behaviors. Collaborating with cross-functional teams, I delved deep into understanding the feasibility of implementation for each component.
Key
Green note- easy to build or already exists
Yellow note- Unsure of details, need more information
Orange note - requires some work to build but not impossible
Red note - hard to build, requires extensive work
03. Iteration \ User Research
Where is the Best Search CTA on Larger Screens?
Fig. Original design with search CTA located in right-side drawer.
Fig. Alternative design with search CTA located in header.
About the test
Recruited 16 users from UserTesting for unmoderated testing. Conducted one preference test and one usability A/B comparison test.
Findings
Header design performed better on usability tasks.
Side drawer was considered more attractive, friendly, and fresh when tested for preference only.
Users often moved their cursor to the top of the page first when using the side drawer design.
Conclusion
When taking usability into consideration, user preference was greatly. Search was implemented in the header as it was the better design for end-users.
The header design also better aligned with existing mobile design search pattern.
Users found search faster in the header
| All | A/B Group | B/A Group | |
|---|---|---|---|
| Side drawer | 10.3 | 12 | 9.5 |
| Header | 9.1 | 8.75 | 8.5 |
| Difference | 1.1 s | 3.25 s | 1 s |
A/B group was shown side drawer design first
B/A group was shown header design first
Preference vs. usability testing
When testing only preference, users preferred side drawer design.
When testing usability & preference, users preferred header design.
03. Iteration \ Other Considerations
Design for Content-First
GOAL: Design accessible content for all patient consumers.
Low tech literacy: Healthwise content is written for a fourth-grade reading level which necessitates inclusive experiences for individuals with low tech literacy as well.
WCAG AA accessibility requirements: Prioritizing accessibility, our products were designed to meet WCAG AA requirements. This ensured that users with disabilities could access and engage with the content.
Zero learning curve: Given that consumers typically access our products infrequently, once or twice a year after visiting their doctor's office, it is best to leverage explicit and common design patterns to enable users to easily navigate and use the application.
03. Iteration \ User Research
Which Display of Results Leads to Better Conversion?
Fig. Prototype of unified search results, where multimedia content are intermingled and displayed in order of “best bet.”
Fig. Prototype of structured search results, where multimedia content are grouped based on content type.
About the test
Recruited 8 users from UserTesting. Conducted one unmoderated usability A/B comparison test.
Goal
Evaluate the effectiveness of each prototype. How well does each prototype work for an easy and a more challenging search target?
Findings
The Structured design had a higher number of users complete both tasks of finding the target article.
Users of the Structured design completed tasks faster and considered them more easy than users of the Unified design.
Consumer impressions of the Structured design were better than perceptions of the Unified design.
Conclusion
The Structured design not only met user expectations but also outperformed the Unified design in usability tasks. These findings prompted a strategic shift from a unified layout to a structured design.
Usability testing select results
Structured prototype performed slightly better for easy search target
Structured prototype performed better for difficult search target
*Seconds. Calculated only for users who completed the task.
Difficulty rating: 5=easy, 1=difficult
03. Iteration \ Other Considerations
Design for Reusability and Scale
Fig. Figma Search component.
GOAL: Leverage the design system.
Used Figma, zeroheight, and best industry practices to facilitate the centralization of the search component within the design system, ensuring consistency and efficiency in the visual design process across the product suite. I meticulously researched and integrated accessibility features, fostering an inclusive user experience while maintaining visual consistency and enhancing the overall quality of the visual design.
02. Roadmap / Phased Approach
Search Features Timeline
Timeline Planning for Feature Development
I led this timeline exercise with the search development team to map out the implementation of key features over time. This collaborative effort enabled stakeholders to visualize the roadmap for building both the Minimum Viable Product (MVP) and future enhancements, facilitating alignment and informed decision-making throughout the development process.
01. Build / Accomplishments
MVP Search Solution
Video. Screen recording of what was built in production.
Empowered patients
Improved content accessibility and conversion, enabling individuals to take charge of their well-being with confidence.
Strengthened patient engagement
Supported trust between patients and their providers.
Branded integration
Integrated Healthwise products with payer and provider systems to streamline user experience across multiple systems and improve client relationships.
Enhanced analytics and personalization
Tracked usage analytics and data to enable continuous improvement of the consumer experience and provided clients with meaningful usage data that they need.
Boosted competitive edge
Created modern tech solutions with modern UIs to not only retain clients but attract new ones as well.
Fig. Client branded search displaying no results.
01. Build / Outcomes
Metrics for Continuous Improvement
Consumer satisfaction scorecard
Comparison of legacy search experience and the MVP search experience across 6 categories. The final designs showed improvement in user satisfaction scores in each category.
Search influence on consumer content ratings
The MVP design showed improvement in consumer content ratings. Content ratings closely correlate with search results. Low values highlight mismatches or areas for improvement in content relevance or discoverability.
Legacy Search
Content rated as “Helpful”
68%
MVP Search
Content rated as “Helpful”
78%
Reflection
What worked?
Iterative approach
Iterative testing and the working backwards method broke through the previous barriers. Refining designs based on user feedback and insights ensured continuous improvement and alignment with user needs and expectations.
Research driven agenda
The research-driven agenda drove the design process forward, aligning the team's goals and objectives with the user-centered approach and research-driven methodologies. Documentation enabled teams to better understand the value of the design process, fostering collaboration, alignment, and a shared understanding of design decisions and goals.
Remote collaboration
Collaborative tools like Mural were used for synchronous and asynchronous collaboration sessions. The use of these tools helped facilitate participation from stakeholders, fostering continuous education on the value of user experience design.
What was challenging?
Managing stakeholder input and reactive changes
Dealing with a high volume of stakeholder input sometimes led to reactive input and changes. However, the research-driven design approach ensured that design decisions were backed by user insights and research findings.