LaLolita | Lalaland

Go Back

Lalaland.

Created at Binpar - 2020

Role - UI/UX + Front End Design

Client - IE University

Industry - Education

Tools - Sketch - React

Lalaland was an interactive landing experience created for the Economics and Politics faculty at IE University. The project supported a classroom case study about constitutional law reform and aimed to transform dense academic material into a more engaging digital learning experience.

Instead of presenting the content in a traditional academic format, the project introduced a fictional country called Lalaland, where students could explore the process of drafting a new constitution through a structured narrative divided into chapters.

Problem

The original case study contained large amounts of complex academic text, which made it difficult for students to stay engaged while reading through the material.

The faculty wanted a format that could:

Encourage students to interact with the content
Break down complex legal concepts into more digestible sections
Support classroom discussions and participation

The challenge was to translate a traditional academic case study into an interactive digital experience without compromising the educational depth of the material.

Approach

To make the content easier to follow, the experience was structured as a narrative journey through the fictional country of Lalaland, divided into six chapters.

Each chapter represented a stage in the constitutional reform process and introduced the relevant political or legal concepts.

At the end of each chapter, students completed a short quiz designed to reinforce key ideas and prepare them for classroom discussion. The results could be downloaded and used later during lectures.

This structure allowed students to progress step by step through the material while actively engaging with the content.

Design

A custom visual identity was created for Lalaland to reinforce the fictional setting and make the experience feel distinct from traditional academic materials.

The interface used animated geometric shapes and subtle motion to guide the user through the narrative. Parallax transitions created a sense of progression as students scrolled through each chapter.

To ensure that users completed each section before moving forward, a scroll lock interaction was implemented at the end of every chapter, prompting the quiz before continuing.

I worked on the UX structure, UI design, and front-end implementation using React, ensuring the experience remained smooth and consistent across devices.

Challenges

One of the main challenges was balancing interactivity and clarity.

While animations and visual elements helped make the experience more engaging, it was essential that they did not distract from the educational content.

Another challenge was maintaining performance while implementing multiple animations and scroll-based interactions.

The experience was optimized to remain responsive and accessible across desktop, tablet, and mobile devices, and it was tested across the most common browsers used by students.

Outcome

The final result was an interactive educational experience that transformed a complex academic case study into a structured and engaging digital narrative.

By combining storytelling, interactive quizzes, and a strong visual identity, the project helped make complex legal concepts easier to explore and discuss in a classroom environment.

Key Learnings

This project highlighted how interaction design can support learning by guiding users through complex information in a structured and engaging way.

It also reinforced the importance of balancing visual design with clarity when working with educational content.