Eric M. Dullavin

The Last Big Book of Toys

Converting a 180-page catalog into an integrated digital experience

The Primary Task

Big Book 2017 was a 180-page printed catalog packed with toys. Families would use these catalogs to curate gift ideas for the Christmas season. Our goals were to translate this printed catalog into a digital shopping experience and provide an integrated entertainment experience.

I had the opportunity to lead the project as the UX Design lead, UI Design consultant, and Manager of the web development team. I worked very closely with our Marketing, Merchandising, Creative, and Web Dev teams to bring Big Book to life.

Planning & Discovery

Understanding our users and establishing the foundation

The Initial Plan

Our project kickoff centered around a whiteboarding session to capture requirements and ascertain what was possible. From this session, I was able to create user flows, the overall site taxonomy flows, and establish the information architecture of the experience through low-fidelity wireframes.

Who This Is For

With user data acquired from past Big Book experiences, we identified four types of users. In order to accommodate the desires of these users, we opted for a dual-path approach: the "fun" experience and the "shopping" experience.

Even though we have two seemingly separate experiences, I wanted to ensure that both were interconnected at multiple touch points so any user could pivot at any time between the two.

Lo-Fi Wireframes

With our user types narrowed down and our project goals scoped, I created these initial low-fidelity wireframes to capture our thoughts and have a starting point for discussion. These wireframes allowed me to establish an importance hierarchy and give everyone a bird's-eye view of the entire plan.

This allowed cross-functional teams with various stakes within the project to have context and still be able to focus on what matters most to them, ensuring a single cohesive experience.

Starting at the Top

Bringing energy and playfulness to the experience

Bringing Beacons to Life

Our Creative team designed beautiful splash pages called Beacons. These Beacons acted as major categorization elements that highlighted the most desired toy types. Within our experience, I wanted them to act as an entertaining overview of what the customer could find.

I directed the teams to use CSS animations to save on performance and provide greater flexibility. I worked with our amazing animator to streamline and finalize these playful content animations.

Closing the Loop

Our website was naturally an online catalog. I worked with our Web Operations team to create curated pages that matched the printed catalog, and we connected each page back to our main landing page experience through simple banners at the top of each page.

Doing this allowed us to take full advantage of the site itself and provide an optimal shopping experience that connected to the landing page hub.

Setting Up the Grid

Creating an engaging product showcase

All About Play

Our "fun" landing page allowed us the opportunity to showcase what kids really want...toys! We used simple animations of children playing to keep the sense of energy and movement, along with our new colorful grid pattern that featured products that zoom in on hover.

Mobile View

When planning for mobile, we opted for a hybrid of responsive and adaptive design and development. Our mobile users were primarily "power shoppers," but we wanted to make sure they had access while on the go. To improve the experience, we opted for a simpler header and removed any heavy interactive content.

Desktop View

This is a snapshot of the entire page in desktop view.

Going Beyond

Creating an immersive entertainment experience

It's All Fun & Games

I wanted to do something really engaging with our "fun" experience landing page, so I pitched the idea of a simple runner game to our Creative team. The Big Book catalog was decorated with child-like drawings. In keeping with that theme, we crafted a simple story and repurposed some existing drawings.

Our team of designers and animators provided the amazing art and audio, while my rock-star web development team built it using HTML Canvas. My role was to conceptualize, strategize, and coordinate the teams. It was a tremendous amount of fun and the cherry on top of this project. It was truly an amazing collaboration!

Try clicking in the game area to make the character jump. Play with sound on for the full experience!

Results & Impact

Measurable success during the critical holiday season

The Big Book 2017 experience exceeded our goals and demonstrated the power of blending entertainment with commerce. The dual-path approach successfully served both casual browsers and power shoppers during the most critical shopping season of the year.

Revenue Generated

7.7M+

Contributed to over $7.7 million in revenue during holiday season

Total Visits

1.4M+

Received over 1.4 million visits across the experience

Bounce Rate Decrease

35%

Year-over-year improvement showing increased engagement

What I'd Do Next

Opportunities for future iteration

Looking back on this project, there are several areas I would explore further given the opportunity:

Personalization: Implement user profiles to save wish lists and remember preferences across sessions, creating a more personalized shopping journey.
Social Features: Enable family members to collaborate on gift lists and share favorites, tapping into the social nature of holiday shopping.
Enhanced Analytics: Implement deeper tracking to understand the path users take between "fun" and "shopping" modes, optimizing the transition points.
Accessibility: Conduct comprehensive accessibility audits and testing to ensure the experience is inclusive for all users, including those using assistive technologies.
Performance Optimization: Further optimize load times for the video and animation-heavy experience, particularly on slower connections.

Toys"R"Us Big Book

Gallery