UI & UX Design Refresh

DrugBank boasts one of the world's largest curated knowledge base of biomedical information: used to expedite drug discovery and research. While the product is impressive, the website (which sees over a million visitors a month) hadn't been touched since its launch back in the early 2010s. Joining the DrugBank team, I was tasked with updating some of the key user flows in the website/app: log in/account creation, navigation, and academic applications.

 

Improving the Navigation

THE PROBLEM

DrugBank's site hadn't had a significant update since it was initially built. While the site had a lot of visitors and acted as a natural lead-gen tool for Sales, it was a dated design that lacked consistency and didn't meet accessibility standards. Beyond updating the design, we also wanted to redirect the high volumes of traffic to our new commercial products instead of the current approach of to an external marketing site. 

Some additional key problems that needed to be addressed:

  • the navigation was overwhelming and unclear both in organization and language
  • users were being directed offsite to a marketing site instead of to become users via our Data Library or Academic Downloads
  • the main pink brand colour and its application did not pass accessibility standards

 

Improving the Navigation

THE SOLUTION

I began with a thorough audit of the the current navigation structure and the pages it pointed to. After getting a firm grasp of all the pages within the site, I began to reprioritize and reorganize the navigation: demoting all biographical links to the footer, promoting commercial products/academic downloads to the first level of navigation, and getting rid of all redundant links while creating a clear "starting point" for a user—the Drug KnowledgeBase.

I worked within all the existing design systems but adjusted the pink contrast to meet accessibility standards. To create a more professional biopharma aesthetic to the site, Working with  lighter colour palette leaning on the pink only when necessary, created a more modern and professional aesthetic to the site.

The redesign of the navigation resulted in an increase of academic applications and also increased traffic to the Data Library from 100s of visitors a week to 1000s a week and created a primary lead generation source for Sales, contributing greatly to overall closed deals.

 

Improving the Academic Application Process

THE PROBLEM

Having started in a post grad University lab, DrugBank has strong values around education and being a tool available for students, offering an academic license—accessed via an application—for university students working on non-commercial projects. Beyond wanting to make biomedical info accessible, students who use DrugBank while at University were more likely to become paying users as they begin their careers, making them a valuable user base. While DrugBank had 1000s of academic users, the process for applying hadn't been improved in years and needed optimization.

Some key problems that needed to be addressed:

  • reviewing applications was a fully manual process that could take up to 5 days
  • the actual page on the site was poorly organized and offered very little guidance for users trying to access the academic license
  • the application process for the user was unclear, lacked feedback, and sometimes could leave a user in a dead-end having not been rejected nor approved
  • the interface itself was a disjointed experience, with filters that affect the table separated by instructions and advertising for the commercial license
  • some key user paths to support improvements to the application process were very dated looking and not always working correctly or consistenly

 

Improving the Academic Application Process

THE SOLUTION

After mapping the existing academic application and account creation flow, I identified smaller areas of opportunity that could immediately be actioned while overhauling the whole academic application process. Keys improvements focused on:

  • automating as much as possible to reduce manual administration and reviewing
  • redesigning the layout and introducing feedback so users always understood where they were at in the approval—or denial—process
  • reducing user drop offs by streamlining the account creation process and deferring account confirmation until the application approval
  • improving existing and adding new automated transactional emails
  • only offering our commercial license information after someone has been denied an academic license

 

The application itself was redesigned to allow for more automation. Working with the administrator and copy writer, the questions were rewritten to more closely match the approve or denial criteria the administrator used. The application was broken into two sections, the first section allowing for auto-rejection, while the section asked additional questions to help determine eligibility still sending some users down the auto-rejection path.  Users who were auto-rejected after the first two questions were immediately notified and offered a link to the paid academic product. Users who submitted the second page of questions were informed their application was in review via the interface and when approved or rejected, were notified again.

The interface itself relied on these different user states to offer the user contextualized guidance. The call-to-action button was adjusted accordingly (from create account to ineligible for downloads) and the checklist on the page prominently showed the user where they were in their academic application. The login and account creation screens were also updated to ensure a cohesive experience for the user. The back-end system used to approve users was given a small refresh to not only provide time-saving UX improvements, but also to allow the system to auto-notify and update users based on their application manual status.

In total, the improvements made to the academic application process resulted in a reduction of application turn around time from 5 to 2 days and saved the administrator hours every week in manual rejections.

In support of this updated process, the accompanying user paths were also given a design refresh. The log in/account creation flow was audited and adjusted for improved consistency within each flow. The design was refreshed but didn't stray far from the current approach to ensure the technical implementation remained low in scope. While the plan is to ultimately overhaul the whole design, this refresh resulted in a much better experience for the end user and a much needed more modern look for the site. 

 

Using Format