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

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

To support the redesign, I created a revised site map and information architecture that clearly outlined how all pages would connect across the responsive experience. This included core sections like homepage, category pages, product pages, landing pages, account areas, and a fully restructured cart and checkout flow.

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

We optimized the site based on core shopping behaviors.

Review product details and images
Add to cart, update quantities
Checkout with minimal friction

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

I coded the front end using Bootstrap, HTML, CSS, & JavaScript.

Optimized for speed and performance
Close collaboration with back-end devs
Iterated designs based on stakeholder feedback

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.

Results & Impact

Business Impact

This redesign made Fat Brain Toys fully responsive, improving usability and performance.

Mobile conversions significantly increased
Faster site load times improved SEO
Reduced bounce rates and 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

Internal Reveal Presentation

I created a PDF presentation to showcase the new site design to Fat Brain Toys associates. It highlighted the transformation from the old site to the responsive redesign, walking through key improvements in layout, navigation, and mobile UX.

The presentation served not only as a company-wide reveal but also as an essential walkthrough for customer service representatives—who relied on the site daily—to familiarize themselves with the upcoming experience.

View Presentation PDF

This project showcased my ability to take full ownership—from graphics and UX to front-end development—on a high-impact e-commerce redesign that delivered measurable results and elevated the brand experience.

Let's Connect