Gabby's Dollhouse—
Studio City PXL partnered with DreamWorks Animation to develop a delightful, responsive, and multilingual website for their popular animated show Gabby’s Dollhouse, designed to engage young fans with interactive content, while empowering DreamWorks’ international teams to easily localize and maintain the platform across nine key global markets.
As the Lead Visual and UI Artist, I was responsible for shaping the site’s playful, kid-friendly aesthetic and translating the Gabby’s Dollhouse brand into a vibrant, accessible digital experience. I designed the visual language—color palettes, typography, iconography, and layout—ensuring every element felt celebratory and intuitive for both children and parents.

Beyond visuals, I contributed to the user experience process, helping define user flows and interaction patterns that minimized friction while maximizing emotional engagement.

Role: UX/UI • Art Direction • Design
Tools: Figma, Illustrator, Photoshop
Agency: SCPXL

Bringing Gabby’s magical world to life.

The Gabby’s Dollhouse website offers children around the world a safe and magical space to explore their favorite characters, games, and music — all through a playful, intuitive interface designed just for them.

Captivating the hearts of the Youth

Insights and Defining Challenges

DreamWorks Animation needed a digital platform for Gabby’s Dollhouse that could engage a global preschool audience while also meeting the needs of parents and caregivers. The challenge was to design a website that captivates young children (ages 4–8) with simple, interactive, and visually rich content and supports multilingual access without relying on heavy reading or text.

The site needed to strike a balance between playful immersion for kids and functional efficiency for parents, teachers, and content managers, all while reflecting the imaginative spirit of the Gabby’s Dollhouse brand.

Through interviews with participants, clients and stakeholders, we gathered valuable insights to better understand and empathize with the needs of our target audience. This allowed us to dive deeper into defining the project's challenges.

The Imaginative Fan
Name: Sophie
Age: 7
Location: Brooklyn, NY
Language English
Device: Personal tablet (Amazon Fire Kids Edition)

Goals & Motivations:
‍•
Explore characters and playing themed games
• Watch music videos and sing along with her favorite songs
• Easy-to-use navigation with visual cues

Needs from the Site:
‍•
An engaging, colorful interface that feels magical and interactive
• Games that are slightly more complex than tap-to-play
• Clear breakdown of non-invasive screening options

The Supportive Parent
Name: Maria,
Age: 35
Location: Mexico City, MX
Language: Spanish
Device: Shared family phone

Goals & Motivations:
‍•
Find kid-friendly, trustworthy content
• Print out downloadable activities for screen-free fun
• Occasionally browse Gabby merchandise as gifts

Needs from the Site:
‍•
A version of the site in native language
• Clear indicators of age-appropriate and safe content
• Ability to navigate quickly between sections

The Tech-Savvy Sibling
Name: Luc 
Age: 7
Location: Lyon, France
Language: French
Device: Desktop at home

Goals & Motivations:
‍•
Challenge himself with puzzle and matching games
• Explore music and videos related to the show
• Share fun things with his younger sister

Needs from the Site:
‍•
Games that feel a little more challenging, yet still intuitive
• Easy access to multimedia without long load times
• Navigation that works well on a bigger screen

The Preschool Teacher
Name: Ms. Thomas
Language:
English

Device: Classroom Smartboard

Goals & Motivations:
‍•
Use Gabby-related music and games for in-class activities
• Print worksheets and coloring pages for her students
• Keep students engaged with content that reinforces basic skills

Needs from the Site:
‍•
Printable resources that are easy to find and download
• Simple, fun digital experiences that work well with classrooms
• Content free from ads or distractions

Preparing the Journey

Our team went through the process of rapidly visualizing, testing and refining thoughts and ideas before the development process. Below is a glimpse of how we defined our vision of the user's journey through the app by highlighting decision points, loops and any potential friction areas.

Early Testing with Functionality

To help the team determine the priority of information, I designed the placement and layout of content in wireframe form which allowed for rapid iteration, feedback and discussions.

Once approved, I developed the wireframes into a working prototype to help simulate user interaction with the product and address any potential pain points discovered throughout the early stages.

Behind the Design Ecosystem

The Gabby’s Dollhouse website features a whimsical, pastel-toned design with playful animations, bold iconography, and rounded shapes that mirror the show’s magical, dollhouse-inspired world. We made each section feel like a colorful room, inviting kids to explore through large tappable visuals.

The interface balances fun and function, offering intuitive navigation for children while maintaining clarity and trust for parents. Responsive and accessible, the site delivers a bright, immersive experience across devices and languages.

Color System

Type Scale

Line Height

Final Look—

Reflection + Credits

Designing the Gabby’s Dollhouse website reinforced the importance of creating experiences that are both delightful for kids and practical for parents.

By blending playful visual storytelling with simple, intuitive UX, the site became an accessible digital extension of the show’s imaginative world. Prioritizing localization, performance, and safety allowed the platform to succeed across global markets while maintaining the brand’s charm.

The project highlighted how thoughtful design can transform a children’s property into a truly immersive, family-friendly online destination.

Creative Direction: Dudley Beene
Project Managers: Victor Frias, Rolando Vasquez
Lead Developer: Dennis Nguyen
Front-End Developer: Matthew Kettlekamp
UX: Victor Frias, Rolando Vasquez, Orlando Antonio
Art Direction, Design: Orlando Antonio