Menten AI
Orange Anatomy: Where Biology Meets Design
As I read the client briefs one of the clients, Menten AI, stood out to me. They were U of T PhD biotech graduates and their work was already gaining traction and getting funded. With the funding the Menten AI team was now based in San Francisco.
Coming from a biology background, I’m always looking to intersect my passion for science with design; and when it was announced that I would be the UI designer for the Menten AI team I knew this was my shot.
I was beyond excited to work with people who are incredibly passionate about pushing boundaries in the field of biology and the Menten AI team did not disappoint. Menten AI sets out to design de novo protein through quantum computing and machine learning to help pharmaceutical companies design new drugs faster. This posed our team with an interesting problem: how might we redesign 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?
To do so, we had 3 goals in mind:
- Encourage potential investors and pharmaceutical companies to partner with Menten AI.
- Differentiate Menten AI from their competitors by explaining their distinct approach.
- Encourage potential collaborators to contact Menten AI for a meeting to learn more about their products, applications and quantum approach.
Project scope: design Menten AI a website to optimize conversion
Role: UI designer
Timeline: 3 weeks (Feb 2019)
Shinny Happy People
Feb 3rd 1pm — We sat across from our laptop eager to see the Menten AI team join our video call. As we waited, we chatted as it was the first time we were working together — Rosie and Chiara were the UX team for this project and I would handle the UI design. Chiara and I were both back for another term which meant this was our 4th client project.
Sounds were coming from the laptop and Hans and Tamas, the Menten AI co-founders, joined the call. They were so excited to tell us about the Menten AI project and their vision. They talked at great length about what their intentions, inspirations, and even target personas. They mentioned they wanted their landing page re-designed, they wanted a new logo, and they were not attached to the current colour of their site. However, they did mention they did not want to look like the others in the science industry, and they did not want blue or green as their brand colours.
Can’t Fight Biology
I began my design process by creating an inception diagram which is a design tool to help you address the goal of your design through the mood you want it to convey as well as the design’s visual language.
For Menten AI I wanted to create a website that optimizes Menten AI’s digital presence, thereby increasing their conversions by showcasing Menten AI’s applications, team, publications, and contact information. Even though Menten AI did not want to look like any other science website, there is no way to ignore it when creating the design.
True Colours
I presented Menten AI with 4 different mood boards and style tiles. With no surprise they picked the mood board inspired by the colour orange. [For a comprehensive explanation in regards the branding strategy read the Menten AI: Branding case study].
So now I had to work with the colour orange while having to make Menten AI look professional and trustworthy to investors and potential pharmaceutical partners.
Transplant Wasteland
As UX was creating their pages I began to see the layouts come together. Consistent hero images and Z patterns were common designs among all pages.
As I saw this come together, I began designing. I started by laying out the structure of my pages following the UXs format. As I used orange as my main colour I knew I needed something else to echo protein design. To do this I used the hexagon structure for picture placeholders and pieces of 3D protein fold as banners.
I started by using a soft baby blue in the hexagon to contrast the orange. The contrast would help draw attention to the illustrations; however the colour combination with the illustrations did not give the sense of professionalism or trust. Baby blue was switched for brown and this still did not do the trick.
After looking at scientific websites I found that something the competitors did well was displaying imagery, be it high quality images or 3D protein renders. So, I decided to swap out all my illustrations and source images. The images I chose had a blue tone to them mimicking the medical feel while navigating an orange website.
Do you Believe in Magic
I wanted to bring the site to life using animation. I brought delight to my design using Figma’s smart animate tool which helped me create ease-ins and changes while hovering sections and buttons.
To start, while loading the home page, one of the proteins designed by Menten AI would float in to look as though it was made by a quantum computer mimicking the quantum-powered protein design header.
When two main applications were called out, I wanted to bring attention to them. Therefore, while hovering the section, the background elements would rotate and get darker.
With the use of the Z-pattern in my design, while hovering a section it would once again change the background of that section’s image. The use of background changes in rotation and in colour are in hopes of retaining that clients attention. If Menten AI were to run heat maps over these pages it would be interesting to see the reaction to these animations.
Lastly, the call to actions did have hover states to be more interactive for the user.
Conclusion & Future Consideration
We were able to transform a landing page into a robust website featuring two distinct user streams designed to appeal to the Pharmaceutical industry and Investors. The very different unique look we provided Menten AI will distinguish them from their competitors.
As Menten AI, should consider more user testing with their target personas to refine their designs. Menten AI should also find different means of explanations such as an FAQ section and product summary video. And finally, if Menten AI plans to emphasize chemical applications in the future, a dedicated “chemical” section will be needed.
