Beauty And The Beast

Studio : Hibernum Création

Publisher : Disney

Platform : iPad, iPhone & Android

ROLE

ROLE

UX / UI Designer

UX / UI Designer

TIMELINE

TIMELINE

13 months

13 months

CONTEXT

CONTEXT

Disney’s Beauty and the Beast Match-3 game. UI & UX design for mobile and iPad adaptation

Disney’s Beauty and the Beast Match-3 game. UI & UX design for mobile and iPad adaptation

TOOLS

TOOLS

Figma, Photoshop, Illustrator, After Effects, Trello

Figma, Photoshop, Illustrator, After Effects, Trello

OVERVIEW

OVERVIEW

Disney's Beauty and the Beast: Mobile Game


Disney launched a mobile game for iPhone and iPad based on the film Beauty and the Beast from Disney. The gameplay relied on Match-3 mechanics similar to Candy Crush, combining puzzle-solving, level progression and narrative elements from the movie.


Target audience : The game was primarily targeted at girls aged 8 to 14 but also retained strong appeal for a broader family audience including teenagers and adults who are Disney fans.

MARKET COMPARATIVE ANALYSIS : Benchmarking Match-3 Mechanics & Disney-Inspired Design

MARKET COMPARATIVE ANALYSIS : Benchmarking Match-3 Mechanics & Disney-Inspired Design

Source : Frozen Free Fall

Source : Frozen Free Fall

The benchmark for adapting a Disney license into a classic match-3, chosen for its seamless integration of narrative elements.

The benchmark for adapting a Disney license into a classic match-3, chosen for its seamless integration of narrative elements.

Source : Candy Crush Saga

Source : Candy Crush Saga

Candy Crush for its proven mechanics and visual clarity


Candy Crush for its proven mechanics and visual clarity


CHALLENGE : The UX/UI constraints included

CHALLENGE : The UX/UI constraints included

1

Ease of use for children with little experience using mobile interfaces.

2

Intuitive navigation relying on symbols and visuals rather than text.

3

A visual universe faithful to the graphic and narrative codes of Disney and Beauty and the Beast.

ABOUT MY ROLE

ABOUT MY ROLE

As a UX/UI Designer i contributed to the UX research and UI design on iPad version, ensuring that the magical universe of the film was translated into a playful and accessible format for a young audience. My contribution involved:

• UX Design (Mobile version)


Contribution to user journey research, information architecture structuring and prioritization, as well as mobile wireframe design. Close collaboration with game designers and developers to ensure alignment between design intent and technical feasibility.

• UI Design (iPad version)


I designed graphic elements inspired by the film and the Art Nouveau era, including colors, typography, architecture, and atmosphere. I collaborated with game designers to align the aesthetics, Match-3 gameplay, and technical constraints, while also developing animated prototypes in After Effects to test and validate key interactions, such as opening menus, transitions, micro-animations, and FX, to guarantee the fluidity of the experience and provide immediate visual feedback to the player.

• User Testing


I participated in user testing sessions with target groups and analyzed feedback from interviews and surveys concerning the gameplay and the user interface, which allowed me to identify and implement concrete axes of improvement on both dimensions.

As a UX/UI Designer i contributed to the UX research and UI design on iPad version, ensuring that the magical universe of the film was translated into a playful and accessible format for a young audience. My contribution involved:

• UX Design (Mobile version)


Contribution to user journey research, information architecture structuring and prioritization, as well as mobile wireframe design. Close collaboration with game designers and developers to ensure alignment between design intent and technical feasibility.

• UI Design (iPad version)


I designed graphic elements inspired by the film and the Art Nouveau era, including colors, typography, architecture, and atmosphere. I collaborated with game designers to align the aesthetics, Match-3 gameplay, and technical constraints, while also developing animated prototypes in After Effects to test and validate key interactions, such as opening menus, transitions, micro-animations, and FX, to guarantee the fluidity of the experience and provide immediate visual feedback to the player.

• User Testing


I participated in user testing sessions with target groups and analyzed feedback from interviews and surveys concerning the gameplay and the user interface, which allowed me to identify and implement concrete axes of improvement on both dimensions.

BRAND GUIDELINES

BRAND GUIDELINES

Official visual assets provided by Disney, which I applied to ensure the graphical consistency of the interface.

MOBILE UX & USER FLOWS

MOBILE UX & USER FLOWS

This user flow outlines the mobile navigation structure. I focused on streamlining user journeys to ensure intuitive progression while optimizing entry points to the shop and purchasing mechanics, ensuring these interactions integrate naturally into the core gameplay experience.

MOBILE UI WIREFRAMING

MOBILE UI WIREFRAMING

These wireframes represent one of the research phases I conducted to structure key screens. My goal was to define a clear and intuitive visual hierarchy.

iPAD UI DESIGN & ASSETS

I created these graphic elements by drawing inspiration from Art Nouveau, The Disney and the Beauty and the Beast universe. Working in an Agile framework allowed me to adjust my designs daily through team feedback and stay perfectly aligned with the overall art direction. My work covered the entire interface, from buttons and information panels to selection screens and narrative elements.

UI MOCKUP

I created these UI mockups by layering my designs over the game's 3D environments. This visualization phase served to evaluate readability and ensure that all elements harmoniously complemented the game's art direction.

CONCLUSION

Working on this project was a constant exercise in agility. While my primary mission was centered on UI and visual Design for the iPad version, my involvement in the team led me to contribute to the UX flow and wireframes for the mobile adaptation.

This dual perspective, balancing UI design on a large screen with structural thinking for mobile, allowed me to grasp the project in its entirety.


Collaborating with the team during user testing phases was the driving force behind my itérations. These real world insights were crucial in refining my designs to ensure an intuitive and coherent experience across.

Working on this project was a constant exercise in agility. While my primary mission was centered on UI and visual Design for the iPad version, my involvement in the team led me to contribute to the UX flow and wireframes for the mobile adaptation.

This dual perspective, balancing UI design on a large screen with structural thinking for mobile, allowed me to grasp the project in its entirety.


Collaborating with the team during user testing phases was the driving force behind my itérations. These real world insights were crucial in refining my designs to ensure an intuitive and coherent experience across.

Got a product challenge?

Let's solve it together.

Interested in working with me?

yan.crozet@gmail.com

© 2026 Yann Crozet
Product Designer
www.yanncrozet.com
Built with Framer

Got a product challenge?

Let's solve it together.

Interested in working with me?

yan.crozet@gmail.com

© 2026 Yann Crozet
Product Designer
www.yanncrozet.com
Built with Framer

Got a product challenge?

Let's solve it together.

Interested in working with me?

yan.crozet@gmail.com

© 2026 Yann Crozet
Product Designer
www.yanncrozet.com
Built with Framer

Create a free website with Framer, the website builder loved by startups, designers and agencies.