Alto Neuroscience Case Study

Website for Data-Driven
Biopharmaceutical Company
Website homepage of Alto Neuroscience featuring a logo, navigation menu with about, platform, programs, press, and media, a headline reading 'We make medicines with the patient in mind', a description about precision medicines for psychiatric drug development using AI-derived brain biomarkers, a pink learn more button, and an abstract colorful brain graphic on a white background framed by abstract blue, purple, red, and orange shapes.

Client Overview

Alto Neuroscience is a clinical-stage biopharmaceutical company that uses AI to develop medicines. The company aims to replace today's trial-and-error clinical approach by aligning the right drug with the right patient based on real data. They are redefining psychiatry at a time when the world needs it most.

Collection of Alto Neuroscience mobile and web interface mockups showing vision, team, latest articles, and contact sections with colorful abstract brain logos and navigation menus.

Project Goal

The project goal was to build a distinct brand presence that was modern, pioneering and unique, as well as one that drives excitement for Alto Neuroscience from a business perspective. We were also tasked with the design, build and launch the new company website.

Services Provided

Competitive Audit with Moodboards
UX Logo
Responsive Web UI/UX Design
Icon showing a black circle partially overlapping a black square on a white background.
Brand Exploration and Logo Development
Marketing Material

Approach

Our team included multiple designers working on branding, building a design system, and defining overall website aesthetics. We coordinated our efforts through an agile process, working closely with the stakeholder team. We redesigned the website to make it interactive and responsive and match the brand voice after a process of deep research and multiple iterations.

Tools

Webflow logo
Webflow
Adobe Photoshop
Photoshop
Figma logo
Figma
G Sheet logo
Google Sheets

Solutions

Branding Guidelines

We set up the new branding guidelines and style guide. We combined shapes with iconography to generate a library of assets for use on the web and other marketing materials.

Two versions of the Alto Neuroscience logo: the left has a white stylized circular emblem and text on a colorful wavy background; the right shows the emblem in pink, orange, and blue with black text on a white background.
Four Alto Neuroscience company overview slide designs, all featuring the slogan 'we make medicines with the patient in mind' with the word 'patient' bolded and underlined. Top left slide has a multicolor wavy banner, top right slide is minimal with pale gray waves, bottom left includes a stylized multicolor brain illustration, and bottom right has blue, pink, and light blue waves on a dark blue background.
Infographic with four columns labeled wearables, EEG, pill/pills, and DNA, showing three rows of icons in pink and blue; wearables column has smartwatch icons with heart and heartbeat symbols, EEG column shows different waveforms, pill/pills column has capsule icons in varying color overlaps, and DNA column depicts double helix symbols, each row varying the color dominance of pink or blue.

Website Design

We utilized brand assets, colors, and iconography to match the brand voice and make the website engaging.

A website section for Alto Neuroscience showing their vision with text: 'To bring every person suffering from a mental health disorder one step away from transformational healing,' a colorful stylized brain graphic, and a mobile view with a blue background containing 'Our Story' heading, a pink lightbulb icon, and text about the company's founding in 2019 by Amit Etkin, MD PhD, a psychiatry professor at Stanford.

Alto in Mind

The Alto in Mind page showcases the latest blog posts and video library.

Website layout with a blue header featuring the Alto Neuroscience logo and menu options about, platform, programs, press, media; headline ‘Alto in mind’ with placeholder text; section titled Latest Articles showing a brain image on a mobile device screen with an article titled 'Psychiatry should not rely on guesswork' dated Oct 21, 2021 and a pink button labeled explore all articles.

CMS Utilization

We built the website on Webflow using its CMS capabilities. For frequently updated sections that followed a repeating visual structure, we utilized Webflow CMS. With this strategy, we only needed to build it once and have the content auto-populate from the CMS.

Webpage section titled 'Latest Articles' showing three articles: 1) Article on Alto's new COO aiming to change psychiatry with a graphic of a person sitting inside a head silhouette. 2) Article on precision medicine for mental illness with an illustration of a seated woman surrounded by thought bubbles with symbols like broken heart, battery, rain, and scribbles. 3) Article on small biotech companies thriving amid uncertainty with an illustration of scientists using microscopes and biotech imagery including DNA strands and lab equipment.

Program Pipeline

The Program Pipeline page was critical from a business standpoint and needed to scale as the business grew. We developed an easy-to-manage webpage structure without compromising on interactions.

Chart showing Alto Neuroscience's pipeline of precision medicines divided into three categories: Cognition Targeting with ALTO-100 through ALTO-104, Emotion Targeting with ALTO-202 through ALTO-206, and Sleep Targeting with ALTO-300. The pipeline progresses through Discovery, Phase 1 (Safety, Brain Effects), Phase 2 (Responder Biomarker Identification, Efficacy in Biomarker Positive), and Phase 3 Registration Studies phases. Indications include MDD, PTSD, and Bipolar Depression. A smartphone graphic displays the Alto Neuroscience logo and the phrase 'Rapidly Advancing a Pipeline of Precision Medicines for the brain.'

Responsive Design

Based on the analytics, it was crucial that the website looked and worked perfectly on all screen sizes. We conducted testing across devices of varying sizes to ensure responsive design. Interactions were crafter based on device type.

Graphic showing a biomarker platform with colored icons of a human head with brain waves, a puzzle piece, a smartwatch with a heartbeat line, and a DNA helix, alongside text describing a decade of research from Dr. Etkin's Stanford Research Lab on an AI-based biomarker platform for identifying responsive patients and aiding drug development for conditions like depression and PTSD, highlighting use of EEG, behavior tests, wearables, and genomics to stratify patient groups and match drugs.

Results

With the new rebrand, Alto Neuroscience positioned itself as a modern company leading future innovation in neuroscience and medical research. The number of users visiting the site increased after the launch and accelerated further with the launch of new sections like Alto in Mind. Alto subsequently raised $40M in funding, went IPO, and now is on an accelerated growth path.