Biotech Company’s Website Redesign

Chiara Plastina
UsabilityGeek
Published in
10 min readMar 2, 2020
Hi-Fi Homepage Hero Image

Menten AI designs de novo proteins and enzymes while leveraging quantum computing and machine learning to produce optimized results, faster than classical preparation and screening approaches.

If you’ve studied biology and/or work in the biotech industry, you’re probably thinking, “Oh yeah, got it, that is so rad!” But if you’re like me, and the words “de novo proteins” sound like a completely different language to you, let me break it down in layman’s terms. Menten AI creates proteins that cannot be found in nature. The use of Menten AI’s protein is to develop drugs that will treat a single cell, which in comparison to typical drugs will reduce side effects and the discovery/development process. Revolutionary, eh?

Design Brief

For this project, there were two UX Designers and one UI Designer on the team. Our goal was to redesign Menten AI’s website to benefit their diverse user streams while differentiating them from their competitors in the world of de novo protein and peptide design. We had three weeks to complete this project starting with the research stage and finishing with the Hi-Fi design.

Problem Statement

We began our design process by developing a problem statement to work as a guideline to ensure we were on goal throughout the project. Redesigned Menten AI’s website to best benefit their diverse user streams and differentiate them from their competitors in the world of de novo protein and peptide design.

Design Process

For this project, we applied a User-centred version of the Design Thinking process that focused on 5 vital steps: Research, Plan, Design, Prototype, and Test.

Research

Research is a pivotal part of UX Design. It allows me, as the designer, to better understand who the target audience is, what their needs, wants, and pain points are. During this stage, we also examined direct and indirect competitors to understand better how they were leveraging their product on their website.

To be completely honest, researching this particular niche was very difficult for me. It was challenging to get in contact with people who were in the industry, and more specifically, understood this specific product. Luckily, through conducting an in-depth C&C Analysis on direct and indirect competitors and interviewing a handful of people, we were able to fully understand the industry, competitors, and our target audience.

We gained a lot of valuable insight and knowledge that is listed below:

C&C Analysis- Direct Competitors
When examining competitors, we looked at both direct and indirect competitors to get a better understanding of the features we should adopt on our website. A C&C Analysis helped us understand what features were industry standards and a must-have. It also helped us determine where we had an opportunity to implement features competitors did not have that we believed were crucial elements.

C&C Analysis- Direct Competitors

A common trend throughout a majority of the direct competitors was the use of the sticky navigation bar, a video summary, product benefits, news and publications, and partnerships. We kept these features in mind later during the design stage.

C&C Analysis- Indirect Competitors

C&C Analysis- Indirect Competitors

As for the indirect competitors, we examined the fintech and health tech industry, and marketing website to better understand our design opportunities.

Key features these websites had was again the sticky navigation bar, a FAQ page, news and publications page, and their product benefits listed.

The 4 major key takeaways we took from the C&C Analysis were:

  1. Simple Language: Using language that would be understood by industry experts, and potential investors
  2. Sticky NavBar: To give easy access to additional pages — specifically “Contact Us.”
  3. Search Bar: To give users more control and the ability to find specific information.
  4. Specific Product Pages and Sections: Pages and sections like Industries, Benefits, Video Summary, News/Press, Partners, Team, and About to ensure viewers get an in-depth understanding of the product and company.

Heuristic Evaluation
After completing the C&C Analysis, we conducted a heuristic evaluation of Menten AI’s current website and their competitor’s websites. A heuristic evaluation is a usability inspection method that helps to identify usability problems within designs.

After examining some of Menten’s competitor’s websites, we decided the following were vital elements we wanted to adopt:

  1. A simple and straightforward layout and site navigation
  2. Create a sense of trust through displaying publications, the team’s experience and education.
  3. Display an aesthetic and minimal design throughout the website.

Heuristics acted as our guidelines, which we referred to throughout the design process. By keeping these three golden rules in mind, we ensured that our design strategy was user-focused and catered to the needs of our primary users.

User Interviews
Usually, our research process would have induced two methods, online surveys and in-person qualitative interviews. We found it challenging to deploy our online survey because it was difficult to validate if the audience understood the subject matter and were able to provide valuable data. Additionally, we only received 8 survey responses. We then pivoted our approach from our initial meeting with Menten. They explained their two primary target demographics were Pharmaceutical companies and Investors; therefore we focused on landing relevant qualitative interviews.

Key Interview Takeaways:
1. Pharmaceutical Industry Interview
Our Pharmaceutical industry insights came mainly from an interview with the Academic Director of the Healthcare MBA program at Rotman at UofT.

Our main takeaways about this user base are:

  • Exposure through word of mouth, conferences, publications
  • Applications/solutions are easier to grasp
  • Collaborations before procurement
  • Expect 10+ years until widespread adoption of new tech (ie: computational chemistry)
  • Deeply ingrained processes, lots of regulation contribute to passivity in the industry

2. Investor Interview
Our Investor insights came mainly from an interview with Patrick, a scientist at Menten AI, and an interview with a partner in a Quantum Technology consultancy firm. We also researched how investors interact with tech start-ups in accelerator programs and an overview of the current state of biotech venture capital funding

Our main takeaways from this user base are:

  • Be specific and articulate the solution upfront
  • Include data, however preliminary — it sticks
  • Articulate how tech is being applied
  • Biotech investors understand the product
  • They find new portfolio companies through referrals, accelerators (inside-led rounds common)
  • A trend towards investment approaches that are highly involved and research-driven

From our research, we gained an in-depth understanding of the biotech industry, Menten’s target audience, and competitors, and with this newfound perception, we began the planning stage.

Planning

During this stage, we created Affinity Diagrams, User Scenarios, User Personas, User Stories, Journey Maps, and Use Cases.

We began the planning stage by reiterated the goals we wanted to attain for our target audience. Our goals were:

  1. Encourage potential investors and pharmaceutical companies to partner with Menten AI.
  2. Differentiate Menten AI from its competitors by explaining their distinct approach.
  3. Encourage potential collaborators to contact Menten AI for a meeting to learn more about their products, applications and quantum approach.

Once we reestablished our project goals we developed user scenarios and personas derived from our research data.

Personas
We used an online tool called Miro to help create our affinity diagram. Affinity diagrams help to identify different data themes, personalities, users’ needs, desires and pain points that are then represented in 2 user personas and scenarios (found in the persona profile).

Pharmaceutical Persona

Pharmaceutical Persona

Pharmaceutical User Stories

  • As a Senior Research Scientist at a large Pharmaceutical company, I want to discover new drug technologies so that I can heal more people in a shorter timeframe.
  • As a Senior Research Scientist at a large Pharmaceutical company, I want to build collaborative partnerships with innovative biotech companies who are using exponential technology to shorten the new drug approval process.
  • As a Senior Research Scientist, I want to ensure that consumers get the most effective medications so they can achieve a quality life.
  • As a large Pharmaceutical company, I want to implement the right processes and regulations for new drug technologies in our product portfolio so I can release the most effective medications to consumers.

Pharmaceutical Journey Map

Pharmaceutical Journey Map

Journey Map Opportunities

Through Edwin, we discovered opportunities to:

  1. Publishing Case Studies: To educate the public on the benefits and results of Menten.
  2. Attend More Conferences: This creates brand awareness and is a networking opportunity.
  3. Create Newsletter Digests: A condensed version of publications and blog posts to promote the technology and educate the reader of its benefits.

Investor Persona

Investor’s Persona

Investor User Stories

  • As a partner in a Venture Capital investment firm that specializes in biotech, I want to discover new portfolio companies that can deliver solutions to healthcare’s most significant challenges
  • As a partner in a Venture Capital investment firm that specializes in biotech, I want to discover new portfolio companies that are using emerging technologies to respond to existing challenges, as well as the challenges we’ve yet to articulate
  • As a partner in a Venture Capital investment firm that specializes in biotech, I want to help scale companies that have a clear differentiation strategy

Investor Journey Map

Investor’s Journey Map

Journey Map Opportunities

Through Evie, we discovered opportunities to:

  1. Leverage opportunities to publish content online, creating alternate paths to discovery.
  2. Give users clear takeaways beyond the tech, and clarify market differentiation.
  3. Use specific and accessible language to talk about quantum computing and machine learning.
  4. Provide investor-friendly content.

Design and Prototype

During this stage, we created LoFi and MidFi designs and a design map.

Features of Prioritization
Before we started drawing our LoFi designs, we decided on our Features of Prioritization. We created feature prioritization to distribute and assign features in 4 different categories. As you can see below, the major features are the specific benefits of the technology to both potential pharmaceutical and investor partners.

Quick Wins would be the contact form, search bar, and the partnership banners.

Nice to Have features are less important but would be an additional benefit to users. We consider the FAQ page, and the careers and teams page as a ‘nice to have’ feature.

From our C&C analysis and interviews, we have found that having a product summary video would be a beneficial Consideration as well.

Features of Prioritization

Afterwards, we moved onto designing LoFis, which are hand-drawn sketches. From there we moved into our Mid-Fis (which are digital renders), where we were able to reiterate our flow and design process. Our design goal was to be informative, efficient and clear. Our design goal was to find a balance between thoroughly communicating the product while still not being too text-heavy. We also strategically laid out our information within each page by prioritizing information. The more important information was placed at the top, and information less important was set lower down on the page.

Testing
Initially, in our LoFis, we wanted the homepage to be very visual, and directly stream people into either a pharmaceutical company page or investors page. We quickly realized, through testing, that we were limiting our viewer reach by assuming people were either an investor or from a pharmaceutical company and that they were educated about Menten and their technology. To solve this we added general information about the technology throughout the homepage and tried to educate viewers before deciding to streamline them through specific CTAs.

LoFi Sketch of the Hompage
MidFi Render displaying changes on the homepage/

In the image above, you can see we moved up the general applications of Menten AI to section 2 of the page to educate viewers of the technology.

MidFi Render displaying Hero Image CTA changes.

And in the image above here, you will see we changed the streamline CTAs to learn more button that would bump viewers lower on the homepage to find out more about the exponential technology.

Final Design
Once we completed our role, we passed the MidFi designs to our incredible UI Designer, who ultimately brought our design to life! The final design was energetic, clean, and futuristic. It embodied the power behind the exponential technology Menten AI has developed.

Final Hi-Fi Mockups

Conclusion
Our website’s focus was to display Menten AI’s product benefits, create a sense of trustworthiness, and differentiate them as a company from their competitors. I believe we accomplished our goal through the unique visual design displaying the product benefits to both user streams, the team and publication pages. These showcased Menten’s experience, education, and expertise.

Due to the time and resource constraints, we were unable to design an FAQ Page and video summary that would have clearly explained Menten’s product. Therefore, we recommended the Menten team to implement these features onto their website in the future. We also believe the design would benefit from additional testing that focused on content readability and content prioritization.

It was a pleasure working for and with Menten’s team during the project duration.

Want to learn more?

If you’d like to…

· learn all the details of Usability Testing

· get easy-to-use templates

· learn how to properly quantify the usability of a system/service/product/app/etc

· learn how to communicate the result to your management

… then consider to take the online course Conducting Usability Testing.

If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience. Good luck on your learning journey!

Tools Used
Figma
Miro
Trello
Google Slides
Google Forms

Check out the prototype here

--

--