Overview
Migrated BrillBaby’s legacy website to WordPress within a two-week deadline, modernizing performance and enabling non-technical content updates.
In late 2024, I was re-engaged by my former employer to modernize the BrillBaby website, which I originally built in 2009. With a tight two-week deadline, I migrated the old infrastructure to a responsive WordPress setup. By simplifying the UI and site structure, I turned a slow, code-heavy site into a fast, mobile-friendly platform.
Year
2024
My Role
Web Design
Front-End Development
Tools
Figma, Adobe Dreamweaver, WordPress
Research
Legacy System Constraints
The website hadn’t been updated since 2009, which made it slow and complicated. Employees needed coding skills to make content updates, and many visitors struggled with slow speeds and poor mobile compatibility.
Legacy BrillBaby Website
Employee Interviews
Employees were frustrated because they couldn’t edit content without coding knowledge (HTML, CSS, PHP). This reliance on developers caused delays and interrupted their workflow.
User Feedback
Customer support data showed that users find the website slow and outdated. Many also mentioned it isn’t mobile-friendly, making navigation tough.
Personas
Four key personas were developed from employee interviews and user feedback.
Problems
Defining the Core Obstacles
Based on research and personas, key problems were identified to expedite the launch of the website.
Content Management Challenges
Editors find it hard to update the old system because it requires coding, leading to delays.
Performance Issues
Mobile users face slow loading times and navigation problems due to poor optimization.
Outdated Design
Users think the website is not user-friendly, which can drive them away.
Efficiency Concerns
Leadership wanted quick changes while keeping the current branding, which could clash with the need for a full redesign.
Solution
WordPress Migration
To meet the timeline, we kept the existing content and focused on improving the structure, speed, and mobile responsiveness by migrating to WordPress.
WordPress (CMS)
Chosen for easy updates without coding and flexible styling via blocks and custom CSS.
Responsive Theme
Used a mobile-responsive theme to speed up development and meet the deadline.
Performance Improvements
Image compression, caching, and lazy loading via plugins to improve load times.
Targeted Redesign
Modernized the visual system while keeping existing branding intact.
Process
Information architecture
Using insights from the legacy site, I mapped the new structure and defined a clear content flow before moving into wireframes and visual design.
User Flow
Upon conducting an audit of the current website’s essential data, I formulated a preliminary structure outlining the intended flow of information.
Preview of BrillKids Website User Flow
Wireframes
Three essential wireframe types were defined to support different content scenarios (home, default, full-width).
Wireframes - Home, Two Column Page, Full Width Page
Visual Design
I selected the Karla font for headings and Rubik for body text, while preserving the existing color palette from the previous website. Most assets, including images, graphics, and illustrations, were reused, and I enhanced some low-quality items using AI tools or manually through Adobe Photoshop.
Design System
BrillBaby - Color Palette
Font Selection - Rubik for Headines, Karla for Body Text
Typography, Links, Breadcrumbs and Buttons
UX Elements & Images
Hero Banner Assets and Background Tiles
Title Banners and Assets
CTA Button, State Colors and Assets
CTA Button, State Colors and Assets
High-Fidelity Mockups
I have created mockups for the three main layouts outlined in the wireframes, which will be used consistently across all project pages. Additionally, I designed mobile versions of these templates to improve accessibility on smaller screens.
BrillBaby - Desktop Mockup
BrillBaby - Mobile Mockup
Stakeholder Alignment
The design received approval on the very first pass, thanks to a deep understanding of both the legacy brand and the technical constraints that needed to be considered. The objective was to eliminate clutter from the previous website and transform BrillBaby into a hub for Early Learning Education.
Legacy BrillBaby vs. New BrillBaby
Development
From Mockup to Functional Build
Wordpress
After setting up a temporary staging environment, I selected the Astra theme as a lightweight foundation. I customized the framework through a combination of visual builders and technical optimizations to meet the 14-day launch goal.
Builder & Architecture: Leveraged WordPress Blocks for rapid, code-free layout assembly. I utilized shortcodes and the Insert Pages plugin to create a modular sidebar system, allowing for easy global updates across all pages.
Custom CSS & Branding: Applied custom CSS to bridge the gap between Astra’s defaults and the BrillBaby brand. This included granular adjustments to site width, responsive breakpoints for all screen sizes, and custom styling for banners and navigation.
Performance & SEO Optimization: Integrated a curated stack of plugins to ensure the legacy content remained competitive:
Yoast SEO: On-page optimization and visibility.
WP Super Cache & WP Meteor: Static HTML generation and lazy-loading for superior site speed.
EWWW Image Optimizer: Automated asset compression to reduce load times.
Testing And Deployment
Once all the webpages were completed, I proceeded with testing to identify any bugs, errors, or necessary revisions.
Checked for bugs or errors on both desktop and mobile devices.
Verified the accuracy of images and noted any needed revisions.
Ensured all hyperlinks directed to the correct webpages.
Adjusted custom CSS for various sections of the website.
With only a day or two available for testing due to the impending deadline, I completed the review and submitted the website for approval. Once I received the green light, my team helped me launch the new site to replace the old one.
Outcome
Digital Growth Spurt
The shift to the new WordPress site has enabled our non-technical team at BrillBaby to manage content independently, reducing reliance on developers. This update has also improved the experience for website visitors, especially on mobile devices, enhancing usability significantly.
Key Enhancements
Performance Boost: Notable improvements in website speed and functionality.
Mobile Optimization: Enhanced user experience across devices for better accessibility.
Timely Launch: Successfully completed on schedule using the Astra theme and various plugins.
Future Roadmap
Image Optimization: Plan to adopt modern formats like WebP for quicker loading.
Speed Improvements: Investigate further strategies to enhance website speed.
Content Update: Refresh outdated images for a contemporary look.
JavaScript Optimization: Explore enhancements for improved performance.
BrillBaby Desktop
BrillBaby Mobile