PROJECTS

USER-CENTERED ENGAGEMENT STRATEGY

Client

Student Project: Page to Screen Course, Speculative Client: Thrill Me Musical Productions

Sector

Crime, Theatre, UI, UX

Project Time

2 months

Team

Lin Li, Reina Kitamura, Ashni Shah

The book The Leopold and Loeb Files delves into the infamous 1924 murder case involving two University of Chicago students, often labeled the 'crime of the century.' Our app revitalizes the significance of this publication by targeting an engaged audience and transforming the content into a distinctive, engaging, and highly useful digital experience.

Book Content

The book presents the case in chronological order, incorporating real artifact photographs, related news article, interrogations, and Hubert-Bowman's psychiatric reports. Nina Barrett provides annotations and neutral summaries of these materials, condensing their often lengthy and biased content, as many were prepared for the defense.

Objective

Project Brief: Analyze and research the content and supplementary materials of the assigned diverse publications. Then utilizing the insights gained to strategize and prototype a relevant, functional digital application.

Our research uncovered a captivated international audience deeply engaged with Thrill Me, a musical exploring the tumultuous romantic relationship of Leopold and Loeb. Our app bridges their interest with the deeper story through a user-friendly platform that curates historical reports, documents, and media, transforming fragmented resources into an immersive experience enriched with historical context and psychological insights into the duo.

Thrill Me

Musical written by Stephen Dolginoff
150 productions in 16 countries and 10 languages. It is most popular in Japan, Korea, and China.

ROle

My key tasks were divided into three phases: research, prototype design, and user experience. I compiled and organized materials on Leopold and Loeb, sourced historical content such as news articles and musical scenes, designed key frames like performance pages and interactive pop-ups, and structured the primary dual-screen swipe layout. Additionally, I developed core design system variables and collaborated on the project’s strategy, testing with peers to deliver a cohesive and engaging user experience.

About the APP

Identifying Issues

1.

Limited contextual resources for international audiences

2.

Lack of focus in Leopold & Loeb’s Psychiatry despite its significance in the defense case

Strategy #1

Utilizing the musical as the entrance point to the psychiatric report

The app is an engaging and insightful tool that not only bridges the gap of knowledge about the musical but also fuels fans' curiosity with additional historical contents.

MAIN PERFORMANCE PAGE

PERFORMANCE SCENE POPUP

Strategy #2

Focusing on Leopold & Loeb’s Psychiatry

The app's primary feature is a dual-screen swipe function, allowing users to compare the similarities and differences between Leopold and Loeb, offering insights into their motives and relationship. Users can see how the musical interprets psychological details, deepening understanding of both the characters and the crime.

Dual Screen Information Page (Default)

Dual Screen Information Page
(Scrolled Asymmetrically)

Strategy #3

Content Restructure: Grouping similar experiences under themes

We focused on Part 3 of The Leopold and Loeb Files, which contained the most compelling material directly tied to the musical. Their experiences were categorized and grouped into distinct themes for clarity and insight for the user to understand their truer characteristics and motivations.

Themes Navigation Sections

Take a Closer Look

AccesSibility Features

Language AccessibLy

Language Accessibily

Language switching to effectively serve its global, diverse audience.

Language switching to serve its global, diverse, and multilingual audience effectively.

Language switching to effectively serve its global, diverse audience.

News Articles

Supplementary information to provide context and enhance accessibility for dense text content.

Profiles

Clicking on an icon or a bolded name provides a brief description of other relevant characters not featured in the musical.

Clicking on an icon or a bolded name provides a brief description of other relevant characters.

Clicking on an icon or a bolded name provides a brief description of other relevant characters not featured in the musical.

User Persona

RISA (20)

A musical enthusiast living in Japan, eager to learn more about the Leopold and Loeb case after watching the musical

Primary KNOWLEDGE

The globalized musical takes out the names and locations of the case to make it universal. It only focuses on Leopold and Loeb.

CULTURAL KNOWLEDGE

Risa is fluent in both Japanese and English

Reading Habits

Often deep reads or close reads any content she is enthusiastic about.

Most FamilIar With

iPad

iPhone

Uses iPad to take notes & read
Utilizes dark mode

View on THe Case

Critical

Empathetic

Learning Habit

Reading

Visual

Research Desire

Specific

Generalized

Reading Scenario

Watches the Thrill me Japanese musical

Scans the barcode on the ticket of the musical

The ticket takes her to access the app

Uses app to compare the musical to the case and close read the text

Compares between Leopold and Loeb’s analysis to gain further understanding of their relationship

User Persona

RISA (20)

A musical enthusiast living in Japan, eager to learn more about the Leopold and Loeb case after watching the musical

CULTURAL KNOWLEDGE

The globalized musical takes out the names and locations of the case to make it universal. It only focuses on Leopold and Loeb.

Risa is fluent in both Japanese and English

Primary KNOWLEDGE

Reading Habits

Often deep reads or close reads any content she is enthusiastic about.

Uses iPad to take notes & read
Utilizes dark mode

iPad

iPhone

Most FamilIar With

View on THe Case

Critical

Empathetic

Learning Habit

Reading

Visual

Research Desire

Specific

Generalized

Watches the Thrill me Japanese musical

Scans the barcode on the ticket of the musical

The ticket takes her to access the app

Compares between Leopold and Loeb’s analysis to gain further understanding of their relationship

Uses app to compare the musical to the case and close read the text

READING SCENARIO

IMMERSE
yourself in a vibrant Qing Dynasty world, where every decision shapes your path to mastery.

CRAFT
your strategy and explore endless ways to succeed in a world inspired by the wisdom of Traditional Chinese Medicine.

LEARN  
the art of Chinese Medicine and cultural splendor of Qing Dynasty China.

Testing

User testing was conducted primarily with class professors and the design cohort, providing valuable insights for refinement over the course of a month.

Landing Page

Topic Page

Collections Page

Settings Page

Low-Fi Iteration

We conceptualized 3 key screens and 1 settings screen that encase the project.
The Landing Page holds the three main theme groups for the two figures.

Landing Page

Topic Page

Collections Page

Low-Fi Iteration

We changed navigational icons to ones that mirrored the pages themselves more.
We redesigned Collections in Performances so it no longer serves as a bookmarking archive but rather a collection of the Thrill Me musical scenes.
We enhanced visual differences by changing Leopold's text to look different than Loeb's.

Landing Page

Topic Page

Collections Page

High-Fi Iteration

We compiled visual aesthetics by adding all the necessary information and images.
First design system variables like overall colors and text are set.

Landing Page

Collections Page

Topic Page

Final Iteration

We refined the visual aesthetics to look more formal and less natural, including dramatizing the theme pages and changing the performance page to look more welcoming.
We added colors and double-sided navigation tabs for the Information page to help the user identify the different possible interactions.

Landing Page

Topic Page

Collections Page

Settings Page

Low-Fi Iteration

We conceptualized 3 key screens and 1 settings screen that encase the project.
The Landing Page holds the three main theme groups for the two figures.

Landing Page

Topic Page

Performance Page

Topic Page

Low-Fi Iteration

We changed navigational icons to ones that mirrored the pages themselves more.
We redesigned Collections in Performances so it no longer serves as a bookmarking archive but rather a collection of the Thrill Me musical scenes.
We enhanced visual differences by changing Leopold's text to look different than Loeb's.

Landing Page

Topic Page

Performance Page

Topic Page

High-Fi Iteration

We compiled visual aesthetics by adding all the necessary information and images.
First design system variables like overall colors and text are set.

Landing Page

Topic Page

Performance Page

Topic Page

Final Iteration

We refined the visual aesthetics to look more formal and less natural, including dramatizing the theme pages and changing the performance page to look more welcoming.
We added colors and double-sided navigation tabs for the Information page to help the user identify the different possible interactions.

The Profiles of L&L Walk Through

Impact

By targeting a niche audience captivated by Thrill Me, we created an app that bridges entertainment and information in an engaging, interactive way. The platform curates historical reports, documents, and media into an immersive experience enriched with psychological insights into Leopold and Loeb, deepening the audience’s connection to the musical. Its exclusivity broadens the scope of this project by showcasing a design strategy that can be adapted for other shows and performances, offering a new perspective on how interactive tools can transform the way audiences engage with theatre and storytelling.

Back to all projects