Love Fonda logo

 

Bio-Rad Laboratories Global Templates

UI/UX | VISUAL DESIGN | WEB DESIGN & DEVELOPMENT

Bio-Rad Laboratories is a global biotechnology company with a wide range of product divisions, each with their own unique brand ecosystem. This project stemmed from the need to support global alignment, while decreasing the time spent on product builds for all regional teams.

decisive moments home page

The Challenge

Bio-Rad Laboratories has ten regional teams who had grown and worked independently as the company expanded. With no centralized support or guidance, much time was wasted creating duplicate assets, as well as duplicate campaigns. Final products lacked consistency in terms of look and feel, design patterns, interactions. To address this issue, one other designer/developer and I were tasked with creating global templates for all marketing collateral.

Goals

  • One global template to allow for ease of updates and edits
  • Brand alignment for a consistent, company-wide look & feel
  • Shared assets (digital asset library and global campaigns)
  • Shorter production time
  • Documentation (online style guide with technical specifications, process development, step-by-step code instructions, in-person and virtual training & technical/trouble-shooting support
  • Improved analytics (heat mapping, page views, clicks, etc.)

Target Audience

Ten internal regional teams with varying levels of experience. Templates need to be accessible for beginner, intermediate and advanced team members with regards to asset creation, layout, design, production and interactivity.

Because the success of the project would be based on regional adoption, we knew it was important to communicate directly with regional representatives in order to ensure that they felt involved in the process. Their feedback on what worked, as well as what didn’t work allowed us to directly address their pain points. Everyone was really open to these types of conversations and the collaboration with users who were in the tool each and every day allowed us to be most successful in the redesign.

Design Process

We started off evaluating a range of older regional builds. This gave us a starting point for common layouts, allowed us to begin identifying design patterns, repeat interactions, etc. We also noted elements of misalignment, so as to better understand why those decisions had been made. From a best practices standpoint, we focused on instances where we might be able to improve both UI and UX, gathering data to support our theories.


old page layout

Global Campaign build from 2013

old page layout

Regional Campaign build from 2014 (North America)

Deep Dive into Older Campaign Page

old page layout

Recommendations

UI Enhancements

  • Typographical hierarchy
  • Color system (aligned headers, links, buttons, etc.)
  • Grid system for page layouts
  • Modular design elements (allowing for quick, but varied pages designs)
  • Modern, flat UI for all design elements (removed dated green frame, rounded corners and gradients on buttons)
  • Design patterns (single video, multi-video players, slideshow, carousel, accordion, tabbed viewers, navigation, links, buttons, etc.)
  • Form library

UX Enhancements

  • Fully clickable call to action tiles for improved accessibility
  • Hover states for all interactivities (call to action tiles, links, buttons, multimedia, etc.)
  • Active states to identify where the user is on a page
  • Forms (larger buttons, customizable call to action text)
  • Increased font size for easier readability
  • Streamlined form interaction (shorter flows for cookied users, better support for select fields on forms, etc.)
  • Customization for country and/or regional groupings

Redesigned pages

new page layout

Genome editing page in new global templates

new page layout

Fluorescent western blotting page in new global templates

new page layout

CHT Ceramic Hydroxapatite page in new global templates

Select Deliverables

Program templates
program templates flow chart

Shared program templates with predefined flows and token usage for duplicate information resulted in time savings of 50% or more

Documentation
MARS documentation

Documentation (online style guide with technical specifications, process development, step-by-step code instructions, in-person and virtual training & technical/trouble-shooting support)

Shared Assets
email template Adobe XD

Shared assets supported streamlined brand alignment, while resulting in time savings of more than 60%

Enhanced Analytics
heat map

Improved analytics include heat mapping, page views, clicks, duration of time spend viewing video, etc.

Feedback

I LOVE IT!!! It is GORGEOUS and BETTER than I ever imagined. Thank you very much to you and the whole team for all of your hard work. You made a good idea into a fantastic reality. This really sets the bar for Bio-Rad and will help take our campaigns to a whole new level of engagement. Diab Elmashni, Director, Marketing | Protein Purification