BioMarin Website

Web & mobile: UI / Interaction Design

My Role: UX/UI Designer  |  Timeline: 4 months  |  Project: Caregiver website

Team: 2 designers, design director  |  Tools: Sketch, Illustrator, Invision, Zeplin

Overview:

BioMarin is a Pharmaceutical company dedicated to providing information about genetic testing for children with epilepsy. One of their areas of focus is encouraging parents to ask their doctor for an epilepsy gene panel on behalf of their children.

The challenge:

Our team was tasked with developing a new website to educate caregivers about genetic testing for epileptic children, uncovering the cause of seizures, and offering more precise treatment and management options. Additionally, we were scoped to create a design system that would incorporate the website’s design standards, pattern library, and style guide.
 

Studies show that the majority of caregivers are unaware or do not understand the underlying causes of their child’s seizures.

My role:

I helped design the website’s UI and created a style guide to incorporate into a design system.
 

- Helped design a responsive website 
- Created various components: pop-ups, cookie policy, and callout cards.
- Designed the interaction/tap states for all global icons and buttons on web and mobile.

Final Results

My goal in designing this site was to focus on simplicity so that users can easily find the information they’re looking for. To make this process more seamless, I designed the site to contain all the content on one page. Each headlining section is listed as a link in the navigation menu that will take the user to the designated section within the site.

Design System:

Design systems are an evolving compilation of design principles, guidelines and style guide. We created one to build current and future sites with greater speed, scalability, consistency and confidence.

Colors

For legal purposes, the color palette for this site could not match or be similar to BioMarin’s site colors. Since the caregiver site doesn’t quite represent BioMarin in it’s entirety a new color palette had to be created.
 

We chose primary and secondary colors that give the impression of calming and relaxing while using warm colors like yellow and gold to compliment the warmer tones.

Typography
Iconography
CTA buttons
Logos
Imagery

Imagery allows users to connect with a brand’s visual language while enhancing the user experience. All the images were carefully selected to communicate themes of attentive care, love, support, and hopefulness. We wanted to have images that showed the subject's face which made it easier for caregivers to connect with.

Components

Everything up until this point was designed in Sketch using atomic design principles. When our designs got the stamp of approval from our client, I uploaded the design system into Zeplin and began adding animations/interactions documentation. We chose Zeplin due to it’s simplicity and integration with Sketch. Doing so allowed us to share new changes amongst designers and made working with developers more efficient.

Interaction States
1/1
Next Steps

Our client was wonderful to work with. Throughout the design process, we frequently updated the client on the site’s designs and gained feedback to work through each time. The end result was a responsive one-page website designed to educate caregivers on genetic testing.

Next step, was to continue tracking the site’s metrics and update the site with new research to inform caregivers on the latest news pertaining to genetic testing and child epilepsy.



Click below to access the live site.