Nintendo Carousel

Role
Web Designer, leading the design on this project
Design Problem
Create a flexible carousel for Nintendo.com that could support multiple marketing promotions while adding playful moments of surprise and delight. The design evolved over time as usage, content needs, and implementation constraints revealed opportunities for improvement.
Collaborated With
Developer
UX Ownership
Concept Exploration → Wireframes → Interaction Design → Launch → Iteration → Redesign → Implementation Support

Wireframes below show the peek-a-boo interaction on desktop and mobile version of the carousel.

Nintendo carousel mobile layout
Nintendo.com accordion carousel interaction
Winning Concept

An accordion display with peek-a-boo blades that give viewers a teasing glimpse of the next promo, then expand and animate in when selected.

Successes
  • Analytics showed an overall increase in interaction with the new carousel feature.
  • Stakeholders were especially pleased with the peek-a-boo interaction.
Challenges
  • Because the accordion space shrank during hover interactions, designing flexible promo layouts was challenging.
  • The carousel had no autoplay function, so viewers had to manually cycle through each promo.
  • The way the carousel was built meant creating new promos required additional design and development time.

Phase 02 Carousel Design

Summary
Evolve the original carousel based on what we learned after launch, addressing usability and production challenges while preserving the playful character of the experience.
Shown
Final Concept & Live Examples
Nintendo carousel mobile layout
Nintendo.com responsive carousel interaction
Winning Concept

A responsive carousel that utilizes the entire header space as a canvas for each promo to be animated. It features an auto-play feature that cycles through the different promotions after a set amount of time.

Successes
  • Analytics showed an increase in interaction with the new carousel feature and click-through to other promos.
  • The new carousel feature allowed designers to have more freedom in the layout of each promo.
  • Developers reported a decrease in time spent building each promo.
Challenges
  • Stakeholders missed the surprise and delight of the peek-a-boo feature of the previous carousel.
  • Stakeholders also missed the incorporation of a character as a sneak peek of each promo slide.

Phase 03 Carousel Design

Summary
Take the lessons learned from Phase 02 and re-introduce a character-driven surprise-and-delight element to the carousel.
Winning Concept
Nintendo carousel character interaction

Adding character art to the tabs of the existing carousel, with the character “popping out” on hover and selected states for desktop.