Leading the Redesign of Fat Brain Toys: A UX-Driven, Fully Responsive E-Commerce Experience

I led the full redesign of Fat Brain Toys’ e-commerce site, transforming it into a modern, responsive experience that enhanced usability and drove higher conversions. By leveraging UX best practices, mobile-first design, and streamlined navigation, I created an engaging shopping experience that empowered customers and supported marketing efforts.

Project Overview

The project involved a full rebrand of Fat Brain Toys, including logo design, and a complete redesign of the e-commerce site, focusing on product pages, category pages, navigation, and information architecture. I ensured the design was on-brand and aligned with customer personas, making the experience fun and engaging while optimizing key user flows like the cart and checkout process to improve mobile conversions.

My Contributions

Timeline: February 2016 -November 2017
My Role: Lead UI/UX Visual & Web Designer
Related Topics: User Research, User Flow, Wireframes, Navigation Design, Information Architecture, Design System, Mobile-First Design, Brand Consistency, HTML, CSS
Estimated Reading Time: 5.5 minutes

The homepage features a fully responsive, three-level navigation menu and a prominently placed search bar for easy access. Research into e-commerce best practices informed the design, ensuring a user-friendly and efficient browsing experience.

Strategic Approach to UX Design

Project Context & User Research

Project Background

The Fat Brain Toys e-commerce site overhaul aimed to deliver a mobile-first, user-centric shopping experience while staying true to the brand’s playful, engaging personality. I led the full redesign, including product pages, category pages, and the overall information architecture, focusing on creating a seamless and accessible experience across all devices. The goal was to enhance the shopping experience, making it intuitive and engaging, while optimizing for mobile conversions.
‍
To improve site performance and SEO, we worked closely with Google to enhance load times, which ultimately helped improve our search engine placement. I researched UX best practices and studied successful e-commerce sites to refine navigation and optimize the cart and checkout process. The result was a modern, responsive site that not only aligned with industry standards but also led to a significant increase in mobile conversions.

The product page is designed for simplicity, with easy options to add items, adjust quantities, and view product details. An image carousel provides quick access to visuals, ensuring an intuitive shopping experience.

Understanding the Why

E-commerce is about more than transactions—it’s about creating a seamless, enjoyable experience that builds customer confidence. Fat Brain Toys' original site lacked responsiveness, had navigation challenges, and created friction for mobile users, leading to abandoned carts and frustration. This redesign was a necessary change to align with mobile-first shopping trends and optimize the user experience for better engagement and conversions.

The redesign focused on simplifying navigation, streamlining the cart and checkout process, and improving site performance for faster load times. By researching best practices from successful e-commerce sites, we aimed to create a fun, intuitive shopping experience that reflected the brand’s playful nature while driving mobile conversions. This change was crucial for enhancing customer satisfaction and keeping Fat Brain Toys competitive in a rapidly evolving e-commerce market.

This product page detail highlights key features like "Add to Cart," "Add to Registry," SKU, "Favorite," and quantity adjustment, ensuring a seamless and efficient shopping experience.

Bringing Research into Design

Informed by industry trends and user feedback, we crafted a streamlined, mobile-optimized shopping experience for Fat Brain Toys, with a particular focus on improving the checkout process and personalization features.

Enhanced Checkout Process: Simplified and optimized the cart and checkout flow to reduce friction and increase conversions.
Personalization Features: Introduced product recommendations and tailored content to engage users based on their browsing history and preferences.
Mobile-First Design: Ensured full responsiveness for seamless shopping across devices.
Optimized Performance: Improved site load times with Google’s assistance, enhancing SEO and overall user experience.
Accessibility Improvements: Applied best practices for color contrast, font size, and keyboard navigation for a more inclusive experience.

These design enhancements, driven by research, made the shopping experience more personalized, efficient, and enjoyable, ultimately boosting conversions and customer loyalty.

The category page features organized product cards, some with videos to provide users with dynamic content. A side navigation with advanced filtering options and pagination ensures a seamless browsing experience, allowing users to find products quickly and efficiently.

Ecommerce UX Strategy

User Needs & Design Strategy

Primary User Tasks

Users visit Fat Brain Toys to find educational toys for their children and make purchasing decisions based on product categories, reviews, and detailed information.

Browse products by category: Easily navigate through product categories like educational toys, games, and puzzles.
Read product descriptions and reviews: Access detailed product information and user reviews to help make informed purchasing decisions.
Add items to cart and proceed to checkout: Simplify the process of adding products to the cart and completing the purchase.
Personalize shopping experience: Receive personalized recommendations based on browsing history and preferences.

A user-friendly cart design reduces abandonment rates by streamlining the process and fostering trust with clear, secure steps. By minimizing clicks and simplifying the flow, users are more confident in completing their purchase.

User Personas & Primary Obstacles

Parents Shopping for Educational Toys: Need engaging, age-appropriate toys that support development but may feel overwhelmed by the sheer number of options.
Grandparents Buying Gifts for Grandkids: Seek thoughtful, educational gifts but often struggle with finding the best fit based on age and interests.
Busy Moms Looking for Convenience: Need quick, easy access to the best-selling toys for their children, but may encounter friction in navigating a cluttered site.
Gift Givers Shopping for Special Occasions: Looking for the perfect birthday or holiday gifts but can find the process time-consuming and difficult without personalized recommendations.

Guiding Principles for Design Exploration

In redesigning the Fat Brain Toys website, our focus was on creating an intuitive, responsive, and user-centered e-commerce experience. Our approach was guided by the following principles:

User-Centered Navigation: Streamlined site architecture and intuitive navigation help users find what they’re looking for quickly, reducing friction and enhancing the shopping experience.
Responsive and Mobile-First: The site was designed to adapt seamlessly to various devices, ensuring that users enjoy a smooth experience across desktop, tablet, and mobile.
Personalized and Engaging Experience: Tailored product recommendations, quick access to popular categories, and clear visual cues guide users toward the products they are most likely to be interested in.

Tools to Create

Wireframes & UI Design

Visual Craftsmanship in UX Design

For the Fat Brain Toys website redesign, I was responsible for all visual and web design, using Illustrator to create detailed wireframes and vector artwork, while Photoshop was employed for imagery and photo editing. The responsive framework was built using the Bootstrap library, ensuring that the site looked great on all devices. I worked closely with business partners, backend developers, and marketing directors to align the site with business goals, improve functionality, and enhance the user experience.

Through collaboration, we refined the site’s layout and flow, ensuring a seamless, engaging experience for users. Typography, color schemes, and visual elements were carefully chosen to guide the user’s eye and create a cohesive, branded look throughout the site. Every design decision considered user needs, from easy navigation to quick access to product information, ultimately enhancing the overall shopping experience.

I used Adobe Illustrator and Photoshop to create all of the wireframes for the site, blending vector art with precise layout designs. This approach allowed for detailed, scalable wireframes that maintained clarity and usability throughout the design process.

Key Visual Design Considerations

Design choices for the Fat Brain Toys website were carefully made to ensure a seamless user experience, accessibility, and brand consistency throughout the site.

Adherence to Design System: Built and adhered to a cohesive design system that followed brand guidelines for typography, color schemes, and components, ensuring consistency across all pages.
User Flows & Wireframes: Mapped out user journeys and created wireframes to validate layout, navigation, and content structure, ensuring ease of navigation for a smooth user experience.
Illustrations & Icons: Designed and customized vector illustrations and icons that aligned with the playful brand, enhancing engagement and understanding.
Accessibility & ADA Compliance: Ensured the design was ADA-compliant, focusing on color contrast, legible typography, and touch-friendly elements for an inclusive and accessible experience.
Collaborative Review & Testing: Worked closely with cross-functional teams, conducting peer reviews and usability tests to refine the design and optimize its functionality.

Measurable Impact & UX Success

Business Impact

Driving Business Growth Through Responsive Redesign

The redesign of the Fat Brain Toys website focused on improving the user experience by transitioning from a non-responsive to a fully responsive design. This shift made the site more accessible across devices and contributed to increased user engagement and sales. Through collaboration with Google, we worked extensively to improve site performance, reducing load times and optimizing the customer journey.

While I didn’t monitor the data directly, I was keenly aware of the key performance indicators, such as site traffic, conversion rates, and sales, which were tracked by the marketing director and site owner. The responsive design and performance improvements had a positive impact on mobile conversions, user retention, and overall site performance.

Key Takeaways & Business Alignment

By prioritizing a responsive design and improving site performance, the Fat Brain Toys redesign made the online shopping experience smoother and more accessible across all devices, contributing to increased sales and user retention while supporting business objectives like mobile conversions and performance optimization.

Improved Mobile Experience: Transitioning to a fully responsive design significantly boosted mobile conversions, making the site more accessible across all devices.
Performance Optimization: Site load time improvements resulted in faster performance, reducing bounce rates and improving overall user satisfaction.
Increased User Engagement: The streamlined user experience contributed to higher sales and increased user retention, with customers more likely to return and complete purchases.
Data-Driven Decisions: While I didn’t directly monitor the data, I collaborated closely with the marketing director and site owner to ensure design decisions were informed by key performance metrics, helping refine the experience for maximum impact.

← Previous Next →