Zimmer Biomet

UX Design & Usability Testing / 2020-2021

This project was a website redesign focused on developing and implementing a design system of reusable components in Figma to migrate a site with over 700 products. This case study focuses primarily on UX research and usability testing, with details about our design system development at the end. I was also the design director for this project, managing a visual designer and our collaboration processes with development, content strategy, PM, and client teams.

Challenge

This project was a website redesign focused on developing and implementing a design system of reusable components in Figma to migrate a site with a catalog of over 700 products. We needed to challenge costly assumptions about how well our client's content and value propositions for their new business offerings would hold up with a time-starved audience with mixed opinions about adopting new tech and changing workflows: surgeons and health system decision-makers. I also wanted to figure out ways for our team to more easily incorporate research & testing into our design process for future projects.

Context

During the website redesign process, I learned we had critical knowledge gaps about how surgeons make product & technology decisions that impacted our design decisions. Key growth areas, including smart technology ecosystems leveraging several forms of integrated data systems, were undergoing significant reorganizations impacting hundreds of millions in revenue. Our clients needed clarity and precision to guide their communication approaches moving forward. I joined the project halfway through the redesign and figured out these gaps throughout the design process, where we worked in six-week iterative cycles to address different sections of the site redesign.

Outcome

I optimized usability testing to close critical knowledge gaps about our audience's needs and delivered richer insights around key business areas like medical education and connected surgical data systems. This helped guide positioning & marketing efforts for several product teams going through rebrands and will impact over $50 million in sales, marketing, and equipment contracts with healthcare systems and providers worldwide.

We delivered a complete website redesign and component-based design system, defining a new collaboration process with the development team that reduced time and effort on annotation and exporting to Jira by 40%.

My Role

Design director and research lead managing a visual designer and our collaboration processes with development, content strategy, product management, and client teams.

Process

Study Questions

• Does the way the page is currently structured guide people to the right information & resources for their goals as efficiently as possible?

• Does our naming for sections and labels match what our users are looking for and what they think they would find there?

• Do people understand the Smart Orthopedic offerings as they appear throughout the experience across Specialties and Product pages?

Methods & Tools

Moderated Testing: To get qualitative insights on the experience and design

Terminology Test (pre-moderated test): Test people’s understanding of navigation terms pre-test

Figma prototype: Increase the fidelity of interactions we could prototype

Note-taking in Figma + Rainbow spreadsheet: Capture contextual observations + quickly codify patterns

Participant snapshots: Provide added context around mindsets and processes and sneak in rich qualitative insights

Collaborative synthesis: leveraged broader team’s knowledge and provided inspiration and new ideas

Test Plan

We focused on utility pages and flows that provided critical information that directed surgeons’ and health professionals’ decisions. With 700+ products in the catalog, we wanted to confirm how we structured and labeled information on these pages to ensure they made sense to our specialized audience and pages could scale in complexity from a screw (minimal supporting information) to an implant suite (lots of supporting information in various formats). We needed to balance high-level marketing messages often met with skepticism and tons of detailed product information designed for specialists, which included PDF downloads with full catalog offerings, videos, and associated educational resources for each product. These pages included: 

• Specialties, the broader category pages that encompassed an entire product area (like Knees or Hips) 

• Product pages, which provided details and technical specifications for individual products;

• Smart Orthopedics, a new technology-focused product line we guessed might be confusing for the audience based on the vague name but was an expanding priority area for our clients

• The navigation header, which organized 30+ category pages and enhanced the discovery of new product offerings

• Education, an offering that provided one of the highest-value ways for ZB to keep surgeons and medical professionals engaged outside purchasing processes and add essential value that often started decades-long relationships when surgeons were reached early in their careers with the proper support

Hypotheses

We started out with two significant hypotheses and critical needs to test:

Hypothesis: People won’t understand branded jargon & terms.

Approach: Before the test, we sent people a terminology test to ask participants to provide their thoughts and impressions about navigation headings and potentially confusing terms before starting the usability test. This allowed us to show our client teams what people actually thought using their own words so they could factor this into renaming sections altogether, adjusting copy, or rethinking product line names.

Hypothesis: We're missing the fuller picture of how people’s processes actually work in real life.

Approach: Lacking rich qualitative data, I reserved the first 15-20 minutes for qualitative interviews so we could ask deeper questions about their real-life processes, decision-making criteria, and their surgical ecosystem: who else they needed to work with to make decisions. We suspected few surgeons would be making these important decisions alone and confirmed they need to inform and convince a wider variety of stakeholders in procurement, technology, and business roles when making purchasing choices.

Participants

Surgeons (5): One of our main audiences who served as primary influencers for introducing and adopting new technology at their practices.

Recent Surgeons (3): as a substitute for medical students who were difficult to recruit, we adapted our recruitment group to surgeons with less than 10 years of experience. This helped us understand how the next generation of surgeons thought about and incorporated new technology into their practices.

Hospital Admins (5): Executives, procurement specialists, and other people in charge of decision-making processes or logistics.

Prototype

I tested via a prototype in Figma to reach a richer fidelity than InVision in terms of interaction capabilities that was more lightweight than using Principle and Framer. Our team hadn’t used Figma’s prototyping capabilities before, so I taught myself how to make the prototype feel as accurate as possible to the final product to maximize our confidence in what we learned. The prototype included things like clickable anchor tags and scroll effects that offered richer interaction fidelity to maximize our confidence in what we learned.

I copied the prototype for each test subject to track notes during the test visually, I used digital sticky notes color-coded by sentiment or comment type to record key observations alongside screens and connect suggestions and problem areas. Comment post-its were color-coded into five categories: Like, Dislikes or Errors, Comments or Questions, Suggestions, and Wants/What Ifs, which made the synthesis process easy to use and scan later, especially when sharing with other team members.

Test Measures

Quantitative

Task Success Scale (TSS): Moderator ranked how easily testers were able to complete the task, Scale of 0-3 (3=Easy, 0=Fail)

Single Ease Question (SEQ): Testers rated the difficulty of a task immediately after completion. Scale of 1-7 (1=very difficult, 7=very easy)

Post-Test Questionnaire: Tester rated their overall site impressions on the usefulness of information, matching expectations, & ease of use. Scale of 1-7

Qualitative

Verbal protocol: the running commentary that participants make as they think aloud including likes, dislikes, what they are drawn to, points of confusion

Follow-up probe questions on observed behaviors and interactions

Open-ended feedback after the test to capture post-experience impressions

Prototype Changes Mid-Test

We realized four tests in that a couple of our design patterns and hierarchy issues on the Specialties page – which collected all products a surgeon might be looking for to solve a patient’s specific surgical needs – led to a nearly 100% failure in completing tasks. Based on this, we made swaps with other design system components and increased success and satisfaction rates:

• Redesigned a product collection component to simplify information while showcasing the breadth of related product offerings across other Smart Orthopedic specialties (connected data services, robotics, and other surgical equipment

• Reimagined our anchor links to make clickability clearer

• Increased font size in the Filter section

Synthesis & Analysis

Democratizing Insights: The Rainbow Spreadsheet

To bring more people into the sense-making process, I took key observations and coded them into a rainbow spreadsheet, which visualized the prevalence of different observations. I also added feedback-type emoji indicators to capture sentiment at a glance and numerical codes to count the frequency of test issues to prioritize our design iteration process.

Through this visual approach, I worked with the visual designer and content strategist to discuss findings, develop recommendations, and share video clips to help inform other teams' decisions and spark ideas for potential new projects to pitch to our clients. I also pulled quotes or insights relevant to our content strategists’ needs into another tab of the sheet to support his work.

The site’s design and usability were well-received overall. We discovered some issues around hierarchy, confusion around terminology and the Smart Orthopedics story, and thought of new ideas to discuss.

Structuring Recommendations

I developed page-by-page recommendations for each of our test sections that highlighted the performance metrics and divided the recommendations into two categories:

Do Now: immediate actions we could take to improve the design, which were typically revisions to things like the UI and information hierarchy

More Consideration: things that required more discussion or information with product owners or teams, which often fell into the category of messaging and developing tangible proof points through things like case studies or videos

Delivering Additional Value: Strategic and Narrative Insights

As part of the study design, I also delivered additional insights into user behavior and decision-making processes to shape business and marketing choices around areas our client had identified as priorities or investment areas, like high-tech Smart Orthopedics and Education. These insights were divided into two categories:

Section and Page Insights: Additional quotes or facts that helped our team and clients understand the what and why behind people’s approaches, thought processes, decision-making, and personal philosophies or their mental models around marketing terms

Participant Snapshots: Brief summaries related to topics our clients cared about to enrich their understanding through short narratives, like perspectives on education or their consideration criteria for adopting new technologies

Given the lack of robust primary research up-front, these pieces helped our clients better understand users of their products and provided food for thought as they worked through new business plans and messaging during the reorganization.

Surgeons and hospital administrators don’t make product decisions on their own.

• Adopting a new product or service requires persuading numerous other surgeons and hospital committees, given how different devices and parts work together.

• As more practices integrate data and remote patient monitoring, the costs and standard of proof grow even higher, and people need to speak a different language around the value of products & technology depending on whether they are trying to convince a hospital admin with an MBA or a fellow surgeon.

• As a result, we recommended our client rethink their content approach to provide more examples, evidence, and firsthand quotes or content from surgeons.

Surgeons and hospital administrators cared most about clinically proven claims and improved quality & economics of care.

• They distrusted generic marketing speak – which was most of the existing content.

• We recommended developing content and marketing strategies that put real-world scenarios and examples, evidence from independent sources, and quantitative impacts front and center.

Surgeons preferred simplicity, visuals, and easily shareable information.

• They typically searched for product information and educational resources during lunch or in the few minutes between surgeries, appointments, or meetings.

• We simplified components in several cases based on this feedback. We made content recommendations, such as shareable case studies, which could be forwarded to procurement leaders, CTOs, and other committee members while considering new technology.

Outcome

Design System Development: Reshaping Design-Dev Collaboration

For the design system development process, I leveraged Brad Frost's Atomic Design approach to define the scale of components from atom to molecule to organism, inspired by chemistry. I also referred to Smashing Magazine’s book on design systems to shape our approach and process, including rethinking collaboration with the development team.

As we moved into the design system's documentation phase, I worked with the development team to reimagine our specifications process. I used to have to create high-effort documentation of each component in Jira, which required a lot of updating, exporting, and manual labeling – even with plugins designed to help. Our company was reluctant to invest in solutions like Storybook, but I knew we could move beyond manual PDF exports and laborious documentation with Figma's capabilities. I used Brad FR

I proposed managing the design system in Figma and embedding those files in Jira as the source of truth so we didn’t have to export with each update and the dev team could easily inspect the values. The component library includes links to different components that explain the variations and interaction patterns and a notes section up top to track works in progress and client approvals.

Compared to static PDF mockups, this saved hours per design and led to collaborative efforts with the development team to templatize design system development for future projects, where we could start with common functional components and style them accordingly. The file was also designed to serve as a reference and inspiration for the rest of the design team.

Implementing Insights: A User-Centered Redesign

Our content recommendations and terminology insights were taken to heart and implemented as part of the redesign. Smart Orthopedics was renamed and the first row of content under the header features peer proof points with video testimonials from surgeons, rather than marketing language.

Impact

• Through a mixed-methods research and testing approach, we gleaned richer findings impacting the organization beyond the project team, which we wouldn’t have with quantitative–focused usability testing alone.

• We also uncovered critical gaps and challenges around how multimillion-dollar lines of business were understood, which helped inform several different product team's strategic plans, including rebranding, marketing, and sales strategies.

• Using people's words and experiences, we showed what people actually thought of marketing jargon and current content to help marketing teams make evidence-based decisions.

• Our insights on Education also sparked excitement around revisiting a proposed learning management system redesign project.

• I presented this as part of our Design Research Ops training to introduce our team to approaches and methodologies around usability testing, especially exploring lighter–weight documentation and reporting methods that could integrate into Agile processes. View the presentation here.

Key Learnings

I wanted to use this process to figure out how we could more easily incorporate usability testing into our projects. Research and testing are often treated as a big deal and left out of projects, so I prioritized coming up with lighter-weight methods to collect and synthesize information and share broadly.

Working as a team of one, I consulted a few different books and resources to adapt different methods, like Tomer Sharon’s Rainbow Spreadsheet. I also brought other members of the team into the analysis process, which helped inform their work and expand understanding related to their roles in content and visual design for this project.