ALLOY THERAPEUTICS

Better Medicine Together

Biopharma

Biotechnology

ROLE

TOOLS

Figma, Invision, Lucky Orange

UX/UI Designer

Alloy offers foundational biologics discovery technologies to scientists. I helped align their website to their target audience.

THE PROBLEM

After the recent website redesign, the Alloy team realized that their new website was too focused on visuals and didn't meet the needs of their target audience. As they planned to expand their offerings, they needed a website that was well-organized and guided users to the correct pages.

THE APPROACH

To address Alloy's strategic redesign goals, our approach to this project included:

  • Understand the business, their audiences, and define project goals

  • Conduct a user survey based on the current website

  • Restructure sitemap, identifying the users flow

  • Define the pages KPI’s and page flow

  • Design desktop mockups with a handful of mobile for development support

  • Measure and compare data to our goals

TEAM

I collaborated with the design agency Wizardly to create a user-friendly and visually appealing interface for the Alloy Therapeutic website.

RESEARCH INSIGHTS

We began by understanding Alloy's business and project goals, then conducted user surveys to identify pain points.

In the survey, I targeted two groups of website visitors: existing users and new users. I wanted to understand how existing users navigate the website and compare that to how new users experience the website.

Solution approach

  • Assigned colors to their services to facilitate recognition.

  • Created a design system with a balanced typography hierarchy to improve scannability.

  • Enforced character limits for headers and body copy, using H6 tags to aid in distinguishing each section.

Problems uncovered

  • Users struggled to distinguish between different pages due to a uniform appearance.

  • Large headings overwhelmed users, preventing them from identifying crucial information.

  • Content was disorganized, making it difficult to scan and navigate.

User feedback revealed that the website navigation was difficult to follow, the content was overwhelming, and the design system caused disorientation.

WEBSITE AUDIT

I conducted a comprehensive site audit to identify areas for improving user navigation, design, and content.

I began by thoroughly evaluating the website's user navigation. I found that unclear copy, inconsistent button names, and sections with little value were causing confusion. To address these challenges, I created a wireframe that sought to establish a more coherent user flow and facilitate seamless navigation throughout the website. I recognized that this step was essential to the project's success and secured stakeholder buy-in.

SITEMAP

To create a new user flow, I first analyzed the existing flow to identify areas for improvement.

During the design process, I identified issues with the flow of the home page. This was critical, as the home page is the first page that users will generally land on, and it needs to guide them through the website. I noticed that there was a lot of copy and sections on the home page that were not guiding users, so I mocked up a wireframe of a layout that I believed would be more concise and effective. I presented this concept to the client, even though the home page was not originally included in the project scope.

After going through my annotations and the wireframe, I was able to convince the client to include the home page redesign in the project, as I explained that this page would set the tone for the user experience throughout the website.

PROJECT CHANGES

As we were making great stride, the client decided to change the sitemap right at the tail end of the project.

I initially outlined the sitemap to identify how I planned to guide the users throughout the website.

With many moving parts, it was essential to clearly outline how we would guide users. To do this, I created a detailed sitemap that included the flow, call-to-actions, and identified which sections were more important to promote to others.

The client's growing list of services prompted a shift in focus and a corresponding update to the user flow.

Despite this late request, we thoughtfully utilized existing assets to adjust our designs. Referencing the detailed sitemap and user flow helped us make informed decisions.

DESIGN

Mockups that emphasize clear user navigation, improved typography hierarchy, and an color scheme that aligned with Alloy's growth plans.

I initially outlined the sitemap to identify how I planned to guide the users throughout the website.

With many moving parts, it was essential to clearly outline how we would guide users. To do this, I created a detailed sitemap that included the flow, call-to-actions, and identified which sections were more important to promote to others.

Website Mockups

Drag to view

In the redesign, I helped align their website to their target audience and learned that surveys are not for everyone.

LESSONS LEARNED

During this project, my biggest lesson was learning from my failed attempt at getting scientists to take part in a survey.
We first sent the survey to Alloy's mailing list of 87 people, but received no responses. Suspecting that the survey was too demanding, I simplified the questions and reduced the length.

Despite the changes, we still received no responses. To reach a broader audience, I tried posting in relevant Facebook and LinkedIn groups, but the admins declined my posts. To address this, I created two surveys: one for existing users, which Erin distributed to her team, and one for potential users, which I shared in my own groups to gather general design feedback.