Fat Brain Toys: UX, Visual Design & Front-End Overhaul

Quick Summary

Project Overview

I led the full redesign of Fat Brain Toys' e-commerce site, transforming it from a split desktop/mobile experience into a unified, fully responsive site. I was responsible for all graphics, UX/UI, and front-end engineering. By using Bootstrap as the framework and building a new visual style guide, I modernized the site while ensuring it remained playful and on-brand.

My Contributions

My Role: Lead Designer & Front-End Developer
Key Impact: Delivered a fully responsive site, improved navigation, increased mobile conversions
Process: Designed graphics, UX flows, wireframes, developed front-end code, and collaborated cross-functionally

The original static homepage (left) lacked responsiveness and modern structure, while the redesigned version (right) introduced mobile-first layout, improved visual hierarchy, and a more engaging user experience.

Strategic Redesign

Navigation Challenge & Design

The navigation was one of the most complex parts of the redesign, requiring a thoughtful UX approach for a 3-level structure with a search bar. I researched top-performing e-commerce sites like Amazon and our toy industry competitors to understand how they approached mega menus and mobile navigation.

3-level navigation with dropdowns and flyouts
Competitive benchmarking influenced IA and layout decisions
Mobile-optimized nav patterns inspired by industry leaders

👉 Improved navigation clarity contributed to a 15–20% reduction in bounce rate, based on early analytics post-launch.

Visualizing the evolution of navigation concepts, these wireframes illustrate improvements in information architecture, layout clarity, and menu structure across multiple iterations.

Information Architecture & Site Map

Created a comprehensive site map and IA to support responsive design across product, cart, and account pages.

Restructured core shopping paths
Unified desktop and mobile content flows
Aligned with SEO and usability priorities

👉 A clearer page structure and consistent flows contributed to a 30–40% improvement in time on site for mobile users.

This updated sitemap served as a foundational roadmap for organizing the UX design process. While simple, it effectively outlined the restructured content and user pathways for Fat Brain Toys’ responsive site.

E-Commerce UX Strategy

The redesigned category page (right) improves layout structure, product card visibility, and filtering controls over the original (left).

Key User Tasks

Optimized for high-priority tasks like product exploration, cart management, and checkout.

Improved add-to-cart flow and image display
Simplified quantity updates and purchase confirmation
Minimized checkout friction across devices

👉 These refinements supported a notable lift in mobile conversions—with early reports showing a 20–25% increase.

A before-and-after look at the product page redesign, showing improvements to layout, CTA visibility, and responsiveness for better user engagement.

Development & Implementation

Front-End Execution with Responsive Precision

Built the responsive front-end using Bootstrap, with strong collaboration across teams.

Hand-coded HTML/CSS/JS for performance
Implemented modular patterns for scalability
Iterated designs based on cross-team feedback

👉 Refactoring and streamlining front-end code led to ~40% faster page load times, helping boost SEO and retention.

A side-by-side comparison of the checkout experience across desktop, tablet, and mobile, showcasing a consistent, user-friendly design optimized for conversion on all devices.

Mobile Cart Task Flow Wireframes – A visual breakdown of the mobile cart experience, illustrating how the task flow evolved to support simpler navigation, fewer steps, and clearer calls to action for mobile users.

Impact & Key Takeaways

UX impact by the numbers

The Fat Brain Toys redesign delivered strong business and user experience gains through strategic design and engineering decisions:

20–25% increase in mobile conversions due to streamlined UX and checkout
15–20% reduction in bounce rate following navigation and IA improvements
30–40% boost in mobile session duration, driven by clearer flows and performance gains
~40% faster load times, improving search ranking and reducing cart abandonment

Wireframes of the product page showing early layout structure, visual hierarchy, and interaction planning to support a mobile-first shopping experience.

Final Thoughts

From Refresh to Real Impact

This project was more than a visual refresh—it was a full UX and performance overhaul that made the site more accessible, responsive, and effective. The design not only improved customer satisfaction but also gave internal teams—especially customer service—a tool they could confidently support and share.

Get In Touch

For my full work history, visit my LinkedIn:

View LinkedIn Profile