A screen of desktop and mobile showing the home page of Xeris Biopharma's new website.

Xeris Biopharma

The goal was to shape its brand, redesign, and improve the company's website. This project was created while working for Notified.
View project
My Role
UX & UI Lead
Brand Creator
Timeframe
January 2022–May 2022
Tools Used
Adobe XD
FigJam
Adobe Illustrator
Adobe Photoshop
Adobe Lightroom
My Key Contributions
Project Management
Competitive Research
UX & UI of the website
User Personas
Information Architecture
Interaction Design
Branding
Iconography
Photography Editing

Background

Xeris Biopharma is a growth-oriented biopharmaceutical 
company improving patient lives by developing and commercializing advanced products across a range of therapies. Pharmaceutical industries are exposed to complex risks concerning drug approval, quality control, supply chain, or even the different global commercial practices. Xeris company is smaller than it competitors. Some products are being developed and approved; others are in the pipeline.

Challenge

How can I create a new identity for a serious biopharmaceutical company that will help build trust and attract potential investors and/or partners?
Their current website did not reflect this. There was no structure to the content and information was hard to find. It amplified confusion rather than coherency. The brand represented a playful rather than a serious drug company.

Kick-off to refine business requirements

After our first meeting with stakeholders, we mapped out the main goals for the project, brand vision and challenges. I needed their perspective on business needs, requirements, goals, context, competitors. After that the client answered prepared questionnaire related to these questions. We stayed in touch every week to check the progress.

Competitive Research

I looked at many competitor websites, analysing their content, look & feel. And since the client showed me directly what their competitors were, I analysed the biggest ones.
Insights:
  • #1 Representation of the company’s own story
    Xeris should promote products and its pipeline, the company’s vision, values, leadership
  • #2 Limited colour palette
    The new brand's primary colour palette would have a limited number of colours
  • #3 Imaginary and iconography defines identity  
    I need to find and edit new imaginary that aligned with the brand and reflect company’s values

Defining target audience - creating User Personas

I created three user personas (for investors, partners, and job seekers) based on our own user research results, and several published interviews, news reports, and industry reports from authoritative media.

Mood-board

I have created a visual representation of the feel of an idea with colours, font pairings, and photography concepts.

Client Gut Test

The 20-Second Gut Test is a workshop that can help you discover an initial visual design direction. I have prepared a website with a different layout, look and feel. This helped me quickly define the direction I should follow.

Information Architecture

I organised the content in a way it would lead the user to the information they need, improved the navigation of the website, and simplified the sitemap.

High-Fidelity Wireframes

Once all the planning and foundation was built, I was ready to play with wireframes for the core desktop experience. 

Visual Design

And finally, I brought the final ideations to life in Adobe XD. The client loved it. As a next step, I worked with a front-end developer to explain my vision, and together we searched for solutions how to achieve my envisioned goal. We tested the website to be fully responsive. After that, the website was tested by quality specialists to meet all the accessibility and other requirements.

Brand Book

The client also wanted to have a simple brand book for the future, so I prepared a visual guide based on my designs. I also edited all the images used on the Xeris Biopharma website based on my previously developed concept.

Outcome

After delivering all those steps, the client was pleased and loved the new website and brand I have created. As a result, I also prepared all the hand-off materials, guidelines, and recommendations for developers. Based on my designs, the website was launched successfully. A few statistics comparing website uptime with the previous quarter:
  • In Q3 ’22 achieved record net product revenue of $29.6M – a 17% increase from Q2 ’22;

  • Ended Q3 with $93.4M in cash, cash equivalents and short-term investments; raises 2022 year-end cash balance guidance from $90M-$110M to $110M-$120M.

Learnings

  • Never start the design process until you get all the business requirements.
  • Prepare questions ahead of time because you can save so much time by rescheduling meetings for unanswered questions.
  • No need to hold weekly meetings with the client with unfinished parts of the project because I got edits on the parts I didn't fully define. So instead of focusing on the bigger picture, I edited a smaller part of the project. On the other hand, the weekly meetings with the project managers are useful to keep track of the progress of the project and to see if I am still behind schedule.