0-to-1 Product Design and Strategy
DrugBank had a barrier to entry problem. It’s curated data can cut years off drug research, but accessing it meant writing SQL. I designed the front-end that opened it to every scientist, not just the ones who code.
Making a biomedical database usable without writing any code.
The problem
DrugBank had data that could not only shave weeks off the typical research time frame, it could also guide huge million dollar bets for drug development and discovery. Unfortunately there was huge set up cost for a user to begin to get value from the database, including manual integration of folders of spreadsheets and writing SQL in order to join and query the database.
Collaborating with leadership, product, and engineering I designed the first DrugBank web app creating a intuitive, no-code way of querying the database to unlock research insights within minutes.
How might we
Create a intuitive way to query complex data.
The process
From ambiguity to clarity
A 5-day design sprint produced a validated prototype and understanding of the problem.
We worked with our users existing mental model of working in spreadsheets to create a data table product customized by adding filters and columns. After deeply understanding the data, I designed new patterns of displaying and filtering the date ensuring each could reused with every additional data set, testing early and often with recruited alpha users.
The users
Low-code or no code scientists and researchers
Needs data security, trust, and provenance
Want to read every detail but have very little time to do so
The design sprint prototype and the rough production prototype
The explorations
Used early prototypes to validate idea and learn what users want
After the design sprint a rough production prototype was built to validate technical implementations, uncover unknowns, and define scope.
- Worked closely with engineering to create early prototypes to vet technology, scope, and team alignment
- Put early ideas/prototypes in front of internal and external users to validate concepts and get aligned
- User interviews and testing to stay grounded in the user’s needs
Early design approach
Greyscale on purpose to focus on usability and experience first
DrugBank’s structured data was it’s selling feature, I created a repeatable set of components to create consistent filters for each data type.
- conducted a landscape analysis and audited the data structures to identify how many unique patterns were required to display and filter the data
- built a composable system that varied depending on the type of data that was being filtered
- created the basic product structure including a complex data table that was fully customizable by the user
Refinement and adding features
Features were added and the design and experience was refined with continuous feedback from our alpha users
created a new colour palette to compliment the DrugBank pink while adding the feeling of scientific trust
conducted regular user testing and research sessions to inform the product roadmap
created a design system and collaborated with engineering to turn it into a reusable component system, influencing every new feature to come
designed a new search experience for querying long form content
Establishing composable filter patterns
Creating repeatable patterns to intuitively filter complex data
Learning from early user feedback I redesigned the filters and filter panel while the underlying patterns stayed the same. The new components used restrained color and patterns to allow for quick user understanding
With the base product complete, additional features and functionality were layered in
Export and Share
Spent many sessions with users to learn what was essential for an export feature. Worked with leadership to scope an alpha release.
AI assistant strategy and design
Used learnings from a hackathon to design an AI Assistant to meet the need for plain language input driving quick insights.
AI-Augmented data
Create transparency and trust while introducing millions new drug-target relationship with AI.
Information when you need it
Designed patterns to display complex data with more information available via hover states.
Error states and Feedback
Errors happen when you’re dealing with massive databases, my job was to make sure users always had immediate feedback about what was going on.
The outcome
Users saved weeks on research projects
Unlocked vital decision-making data for people who previously could not access who reported the platform as being intuitive and easy to use. Used to anchor million dollar deals with sales.