Situation
Bio-Rad, a global leader in life sciences and clinical diagnostics, required a comprehensive website redesign to streamline over 30,000 pages, localize content for global markets, and enhance user experience. The existing site lacked visual consistency and modern UX principles, limiting engagement and accessibility.
Task
I was tasked with managing my time between redesigning the Bio-Rad website and fulfilling weekly tasks from our marketing partners. My redesign responsibilities included visual design, UX improvements, content creation, QA, and testing. Alongside these tasks, I worked on smaller updates, such as page content changes, and larger projects like creating entirely new pages for product launches. Managing this workload required close collaboration with stakeholders, content creators, and developers to ensure consistency and timely delivery.
Action
- Research & Planning:
I conducted a thorough audit of the existing Bio-Rad website to identify pain points, outdated visuals, and user experience gaps. This research helped me get up to speed so I could contribute to the global site redesign. - Design Review & Implementation:
As part of the 12-person UX team, I contributed to reviewing and improving the web design provided by an outside agency, identifying inconsistencies and making recommendations. Once the designs were approved, I spearheaded the initial round of implementation, working closely with developers to resolve bugs and issues. I also helped build out the first three levels of the website and develop a consistent header design using a 60-30-10 color framework, which was adopted site-wide to unify the siloed company divisions. - Content Localization:
As part of the redesign, I helped enhance global accessibility by 25% in just two months through localization efforts. By translating content for international audiences, we significantly improved user experience and positively impacted brand perception. This included working with translation teams to ensure that the content accurately bridged markets while maintaining consistency with Bio-Rad’s new website design. - Image Restoration & Markup Optimization:
I used neural filters to restore and enhance imagery for high-quality visuals. Additionally, I performed extensive code clean-up, removing outdated and sunsetted code from the markup to improve site performance. This process also included ensuring compliance with accessibility standards, making the website more user-friendly and optimized for all audiences. - Testing & Iteration:
The site underwent multiple rounds of user testing, where we collected feedback and iterated on the designs. These refinements ensured that the site performed well globally, with a consistent and engaging user experience before we went live.
Result
The redesign achieved several key outcomes:
- Increased user engagement: The updated design led to a 10% boost in user engagement and improved website traffic.
- Improved consistency: Content inconsistencies were reduced by 40%, ensuring a more cohesive user experience across all pages.
- Enhanced performance: Page load times accelerated by 17%, leading to faster access to resources.
- Global impact: Enhanced global accessibility by 25% in two months by localizing the website for international audiences, positively impacting user experience and brand perception.
Before/After Homepage Redesign: This side-by-side comparison highlights the transformation of Bio-Rad’s homepage.
Design Implementation:
As part of the site redesign, I played a key role in refining the pages. This included developing a cohesive header design using a 60-30-10 color framework to unify the previously siloed divisions. The framework ensured brand consistency across the site while improving navigation.
Image Replacement Process:
I was tasked with replacing 400 small, outdated product images with larger, high-quality versions to fit the redesign. However, most original images were lost in archives, some over 30 years old. To address this, I devised an efficient retrieval and optimization system to track down and replace these images, ensuring that the redesign stayed on schedule. This monumental undertaking required research, coordination, and creativity, ultimately leading to a cohesive visual presentation across the site.
Creating Product Assets:
Occasionally, an image for a product page wasn’t provided. In these cases, I conducted research on the product to create necessary visual assets that aligned with Bio-Rad’s messaging and style guide. This allowed me to ensure the design was completed within the project’s schedule. By taking initiative and creating these assets, I helped maintain the consistency and professionalism of the website, contributing to the successful outcome of the redesign.
Bonjour
こんにちは
你好
Localization Process:
As part of the implementation team, I played a hands-on role in integrating the translations. After the team researched the best options, weighing AI versus human-generated translations, we decided on human translations for their accuracy and cultural sensitivity. Once we received the approved translations, I carefully replaced the English HTML text with the translated content and updated the markup to link to the appropriate regional pages. I triple-checked each page for accuracy, ensuring that design, layout, and messaging remained consistent with Bio-Rad’s standards across all languages.
Case-Study Conclusion
My time with Bio-Rad immersed me in the transformative power of UX design in the life sciences sector. By focusing on user-centric strategies and cross-functional collaboration, we achieved a digital presence that improved user experience and created a clearer path to customer success.
