Design Thinking In Drug Discovery Informatics

Whitepaper Introduction

Design Thinking is a collaborative process developed at Google for rapidly and iteratively converging on a solution that best fits the needs of users. And while the process can be used to develop software it can also be used to optimise clinical trial planning, laboratory operations, laboratory design and create drug marketing websites.

In this white paper, we’ll take a look at the Design Thinking process and answer some of the following questions:

• What Is Design Thinking? • Who is Using Design Thinking? • What Value Can It Bring to Drug Discovery Informatics? • How Can It Be Applied to Drug Discovery Informatics? What Is Design Thinking? Design Thinking

The Design Thinking process in use at Stanford’s d.School approach in-part Google, Adobe, Mayo Clinic, Kaiser because it’s so well documented, and Permanente, Pfizer, Novartis, Roche/ training videos are available on YouTube. Genentech and many other companies follow a 5-step exercise which brings Design Thinking helps us use what we together subject matter experts, UX know about our customers and business design, and development experts into a processes to design new and compelling single room to focus on solving solutions that fit their needs. The 5 steps challenging business problems. And of the process are: although there are a number of implementations of Design Thinking Empathize - Learn about your business practices, these companies have chosen process and participants to the point that you understand their priorities, biases and Prototype - Create a crude prototype problems. solution using simple tools like Keynote or PowerPoint. Define - Define the problem to be solved. Test - Have the users evaluate the Ideate - Identify as many potential prototypes and provide feedback. solutions as possible that solve the Then continue to iterate on the last two problem. Sketch what those solutions steps until you have a prototype that best might look like, and storyboard how a fits the need. At some point during these user might interact with them. iterations, you’ll transition from a Keynote/ PowerPoint prototype to code. Design Sprints

One of the most common Day 1 implementations of Design Thinking is Start At The End a process called the Design Sprint. Identify the business goal(s) that you’re Similar to development sprints that trying to achieve. you see in agile software development organizations, a Design Sprint is a 5- Map day, time-boxed process for quickly Map the process. For example, if your developing and evaluating prototypes goal is to develop a more efficient that resonate with the end-user. A process to create antibodies (and the typical Design Sprint looks like this: software needed to achieve it), then

your map would include the people, process steps and technologies currently in use to make that happen. event that will become the focus for This map provides a common the rest of the design sprint. reference point and vocabulary for all of the participants in the process. You Day 2 can also use this part of the exercise to Remix and improve identify the parts of the process that Identify features in existing solutions are slow, user intensive, or just plain that you like, demo them for the rest of broken. the team, and collect the best features on a whiteboard. User Interviews

At this point, subject-matter experts Sketch help you flesh out the details behind Using some of the previously the steps in the process. Everyone in demonstrated features as “grist for the the meeting will be focused on taking mill”, the team members begin notes, and asking questions. sketching new solution ideas. Choosing A Design Target After mapping out the process, the team selects a single target user and Day 3 Day 4 Decide Prototype Review the sketches and select the Prototype the storyboards using solution(s) that best solve the problem. Keynote or PowerPoint.

Rumble If you have multiple solutions, then the Day 5 best way to compare both of them is Evaluation to prototype them during Day 4, and Review the resulting solutions with review the results on Day 5. subject-matter experts.

Storyboard Storyboard each of the solutions. Each storyboard walks the user through the business process/scientific process that you want to support. Who Is Using Design Thinking?

IIn pharmaceutical companies, we additional effort into UX is that a well- have traditionally seen User designed web or mobile patient- Experience (UX) practices applied in engagement application can result in customer-facing web applications as increased patient compliance with opposed to internally developed medications, improved customer research applications. The traditional satisfaction, and increased sales, in business rationale for putting addition to simply making patients aware that new treatments for their As we’ll see later on in the article, indication exist. Taken as a whole, these UX practices are beginning to these metrics constitute measures of filter down to pharmaceutical research “customer-solution fit”. And while they organizations in some new and have a direct bearing on profitability, interesting ways. We’re translating the they also have an important bearing expectations of research communities on how the company is perceived by into applications that fit the way they both patients and potential future work. employees. How seriously do pharmaceutical Beyond web applications though, companies take UX Design? we’re now seeing UX and Design Thinking practices applied in Pharmaceutical companies take UX everything from clinical trial design to Design seriously enough that manufacturing and packaging. The companies like GSK, Novartis, Amgen, ultimate goal of these practices is to Roche, Merck and AstraZeneca all provide a more patient-centric focus. have Centers of Excellence or Communities of Practice for UX Design. In addition, these companies laboratory design, material handling/ are working together through the inventory, and lab operations. Pistoia Alliance to develop a common pre-competitive toolkit for UX design The group borrows from the Design through a program called UX for Life Thinking practices first developed at Sciences. Google Ventures and taught at Stanford’s d.School (one of the The toolkit contains processes, country’s most prestigious design templates, case studies, and best schools). practices for creating new, compelling user experiences in addition to improving the user experience in existing scientific software. Although we might use this in the context of software development, the same processes have been used by the group to solve problems in logistics, What Value Can Design Thinking Bring To Drug Discovery Informatics? In commercial software development, Fit-to-flow: How well does the the most successful applications are application fit the workflow that we often the ones in which the vendor has use? Do we need to spend time invested the time and effort to design entering data into multiple systems? an engaging user experience. That user experience transcends the Ease-of-use: how easy is it for widgets on the screen, and scientists to start using the encompasses critical success factors application? like: Reduced training time: How much Reduced cycle time: Reducing the time is required to be fully conversant amount of time required to advance a with the application? Keep in mind discovery project from target that the lab may have GLP training identification through to pre-clinical requirements for software. testing. Reduced rework: Reduce the number Fit-to-function: How well does the of times that an internally developed application fit the requirement? application must be reworked to suit the needs of the scientists. significant portion of their workflow.

User satisfaction: Increase user User interface consistency: By satisfaction and decrease frustration. making the user interfaces for internal applications consistent with one- Increased bench time: Decrease the another, you can reduce training time. amount of time spent entering data, and increase the amount of time spent at the bench. The flip-side of these metrics reflect the ways in which a poorly designed Aesthetics: Studies of computer- UX can affect productivity and even human interaction have found that an retention. The applications that aesthetically pleasing user interface scientists use every day are often seen can reduce workplace stress. as a reflection of how seriously the Sometimes the user experience can be company values science and scientists. so compelling that scientists are A poorly designed user experience willing to overlook the fact that the can result in duplicate work, extensive application doesn’t actually cover a manual entry work, and/or manual transformation of data from one form • They expect to be able to use it on a to another in order to get the data into range of devices (known as another system. responsive design).

The 1990’s Called And They Want • They expect it to be performant. Their UI Back. They want to interact with it without having to go through multiple page • Millennials have certain loads. expectations about the software they use, based in part on the social • They expect it to notify them when a media and mobile applications they lab process has completed (a robot use every day. has finished replating samples, or a sequencer has finished its run). • They expect it to be easy to use. • They expect to be able to interact • They expect it to be as familiar to with the system while wearing them as the other mobile personal-protective equipment such applications they use. as goggles and gloves. How Can It Be Applied To Drug Discovery Informatics? Once you’ve been through the Design Design Guides Thinking workshops, the next step is to convert the ideas map and prototypes If you’re Google, you create the into functioning software. How do you Material Design Guide to help cover that last mile and translate a developers solve these common paper or PowerPoint prototype problems. You spend years studying solution into a fully functional user interactions on a wide variety of prototype? devices. You use the Design Thinking methodology to develop software, and There are three artifacts from the learn what differentiates a good user Design Thinking process that can help experience from a bad one. You then you get started. The design guide, the distill that research into the Material storyboard and the actual prototype Design Guide. itself. Let’s start with the design guide first because heretofore we haven’t In order to make sure that developers really talked about it and it’s an start using it, you launch Material important part of the process. Design at the annual Google IO developer conference in front of thousands of developers, and teach them how to implement material design concepts in their own software. You then seed the development community with Material- compliant components for Android & web development.

If you’re a pharmaceutical company, you do the same thing on a slightly different scale. At the annual internal developer conference, you launch your design guide. You https://material.io/design/material- studies/about-our-material-studies.html create awareness within the community through the internal Slack channel. You post your web components on the internal GitHub repositories, and promote it on the internal To Do list. If you’re a user, this can developer web site. leave you in a situation where you’re The Material Design Guide itself is a staring at the screen, and you can’t specification that shows what a figure out how to accomplish the task component should look like, and how at hand. However, if the developer has the user expects to be able to interact followed the design guide, then with it. The goal of the guide is to everything you see on the screen provide a developer with a road tested should be familiar to you because you guide to creating user interfaces that have seen it hundreds of times before will always appear consistent to a user. in the applications on your phone or Why do this? Because developers are desktop. notoriously bad at creating user interfaces that are appealing to users. To be fair, a developer's priorities are usually to “make it work, first; make it pretty, second”.

Because “making it pretty” is always a lower priority, it sometimes falls off the How Does A Pharmaceutical representing drug label information, Company’s Design Guide Differ From or usage recommendations (such as Material Design? what type of patient this medication is intended for), adverse event reporting, In pharmaceutical companies, drug procurement assistance, etc. marketing organizations have Since some of this information has traditionally used Design Guides to ensure that external, customer-facing websites adhere to corporate graphic standards, and ensure that drug information websites provide clear and consistent information to the customers and patients they serve. You might see guidance for regulatory requirements, the guide make developers aware of existing must ensure that the developer has all components that can address the information necessary for site particular requirements, and specify compliance with the appropriate CSS styling requirements. regulations. You can take a look at the All of these things have a direct Taltz website to get an idea of the bearing on how the software is types of information typically perceived by its users. Even at the presented. prototyping stage, design guides can help ensure that user interfaces are How can design guides help research easy to understand and familiar. organisations? Design guides can include printable PDF templates for components which As seen previously, design guides can Design Thinking teams use in their help research organizations minimize prototyping efforts. They can also training requirements for software by include images of components that ensuring that internally developed can be imported into Keynote or software has a consistent look and feel PowerPoint mockups. to it. Design guides can be used to Using Storyboards

Storyboards help us understand the downstream processes as well as the flow of the application. They help us handoffs between them that have to visualize what the user is trying to be supported. accomplish, and the steps that they go through to accomplish it. Since there Let’s suppose for a moment, that may be a number of use cases that use you’re implementing software that will the same screens, you may have help users analyze LC/MS data. You multiple storyboards that describe map out the process for how the data these flows. Moreover, storyboards will be analyzed, how significant help us understand the upstream and results are identified, how AUC calculations will be made, etc. You With a complete storyboard however, work with users to identify test cases, the answers to these questions are identify test data sets, and identify readily apparent. expected results. And you’re off to the races.

But you’ve forgotten to ask what comes before and after this process. What format does the data arrive in? Is it raw instrument data? Is it pre- processed? What about afterwards? Is the data stored in the database? Do you need to preserve the raw results that you started with, or just the analyzed results? Are the analyzed results to be stored in a database, or in a report? How will the data be used, by whom, and for what purpose? Using Prototypes

Prototypes help us understand how understand the problem. Creating a the user will be using the components functioning prototype with working present on the screen. They help us code and sample data will often take understand everything, from the data longer than the average 5 day design that needs to appear on the screen, to sprint, but it gives us a really good the permissions needed to see, or idea of what has to be built. It gives us interact with the components. The real an idea of the complexity of the value of a prototype is that it delays a software, the use cases to be developer's immediate inclination to supported, the roles that need to be start creating software until they fully defined, and the data types that we need to work with.

The prototype also ensures that both the user and the developer have a common understanding of what’s expected of the software.

You can use the prototype to estimate the effort required, plan development sketching user interfaces. This stainless sprints, and identify test cases and test steel template has common icons and data. In the end, you minimize the risks fields needed to create a professional that come from misunderstandings. looking user interface with a minimum amount of work. Tip 1 - Use A Template During the sketching stage of the Tip 2 - Use Paper Templates Design Thinking process, you’ll find The UXLS group has a number of the JoyTong template useful for paper templates and guides that can help you get started. Tip 3 - Use Prototyping Tools to prototype user interfaces in a During the prototyping stage of the collaborative fashion. Multiple users Design Thinking process, there are a can work on the same user interface at number of tools that can help you with the same time. your prototyping efforts. If your company uses Google Docs, try the Balsamiq plugin, Draw.io, Gliffy or LucidCharts. These tools make it easy

Left: A paper template Top: A Balsamiq mockup template Reusability - The Last Mile

At some point in the prototype-test iterations that you’re making, when both the developer and the user are confident that the paper prototype accurately represents the necessary solution, you will pull the trigger and start writing code. This is the most expensive part of the process but there are ways that you can minimize development costs and provide flexible, reusable solutions. Web Components

Over the last 5 years, a new W3C with the latest release, we see standard for reusable components has increasing support for the new emerged. Championed initially by standard in frameworks like React, Vue, Google, the standard has been widely and Angular. You can see a sample adopted by browser vendors. Web component here. components are a combination of an HTML template, CSS and Javascript. Companies like BBVA, Comcast, Google’s implementation of the Google, ING, USA Today and others standard (known as Polymer) has are using web components. In the evolved rapidly over the years, but pharmaceutical industry, companies like Eli Lilly, Pfizer and Merck are using templating, data binding and shadow web components to accelerate their DOM. The first two are pretty self software development efforts. explanatory, but the shadow DOM is a means of ensuring that the scope of Web components are Javascript CSS styling for a component begins based, and make use of ES6 standards and ends with the boundary of the like classes, template literals, and component. This means that you module imports. They also use the cannot accidentally apply a CSS style Node Package Manager (npm) to on your website that corrupts the look manage dependencies. This means of your component. That said, there that tooling support for web are some perfectly reasonable use components is already available in cases for applying styles across popular text editors like Visual Studio multiple components (i.e. theming) Code, Atom and Sublime, so you have and there is currently a spec underway code navigation, intellisense, at the W3C to support theming. templating, unit testing and debugging support. The Polymer includes a command-line interface application called polymer-cli At their core, web components which includes a Node.js Express provide 3 key pieces of functionality: server, support for linting, and minification. The build command can purveyor of Material-compliant generate highly optimised code that components. There are many targets specific generations of components that follow specifications browsers. So if you’re targeting created by third parties. The browsers that understand the ES6 webcomponents.org site contains Javascript standard, you can tell your thousands of components which you build file to generate the appropriate can easily add to your project. files. The Polymer server is also capable of identifying browsers and In addition, the biojs project has a serving a code bundle appropriate for catalogue of web components that particular browser. specifically designed for bioinformatics projects. These Google’s Paper components components include PDB viewers, implement the Material Design 1.0 Cytoscape viewers, sequence specification, and the new Material annotation viewers and more. There Components, currently in are a couple of caveats with this development, support Material Design project: (1) the components are not 2.0. Google, however, isn’t the only guaranteed to be material compliant, and (2) the components are not determines how an application will necessarily compliant with the latest appear on a mobile device). version of Polymer. Since web components are a The Polymer Starter Kit (which comes Javascript/HTML based standard, this as part of the polymer-cli tool) means that you can incorporate them provides you with starter projects that within your existing applications. you can quickly adapt to suit your Moreover, you can create a web purposes. These templates include a application and serve it using any web Store Application, and a Progressive server. The advantage to this is that the Web App (PWA). PWA’s are a set of front-end of your web application can technologies that allow web be served by an NGINX server running applications to be installed on mobile in your data center or in the cloud. You devices and desktops. These are no longer tied to a specific technologies include ServiceWorker monolithic stack, and thus no longer (an API for caching network requests), tied to the long upgrade cycles often and the web manifest (which imposed on research informatics teams. REST Services

REST (REpresentational State Transfer) name a few. You can combine web Services are a standard for invoking and components with REST services to create communicating with backend services. compelling user experiences that are These services can persist and query data, performant, polished, reusable and scale and are widely supported in 3rd party well. LIMS/ELN applications like Dotmatics, Benchling, Core LIMS and others. This Tools like Swagger allow you to expose makes it possible for you to combine REST service metadata in a manner that internal functionality with functionality in can be catalogued in order to improve re- vendor-based solutions to better support use. There are Swagger annotations for the needs of your scientists. Java and Grails that let you annotate a REST service to expose it’s metadata, and You can implement REST services in plugins for PHP applications. almost any stack/language: PHP, Java, Grails, Rails, Micronaut, and Python to References

• User Experience for Life Science Medical Therapies - Pistoia Alliance • Sprint: How To Solve Big • UX Design maximising the value Problems and Test New Ideas In of scientific software in life 5 Days science R&D • Making Material Design • Pfizer’s Daniel Seewald: Where Design Thinking Breaks Down— and How to Avoid It

• Design Lab Collaborates with Amgen to Explore Adoption of Need Help Getting Started?

Need help getting started with Design Thinking in your research organisation? Contact us [email protected].