top of page
Detective Betty

Downtown
Noir - Album Feature

Discover how I took a game's collection album feature and brought it to life through powerful storytelling

Role: UX/UI Design, Concept Art, 2D Art & Animation

Abstract illustration supporting the story's theme.
Abstract illustration supporting the story's theme.ng
Abstract illustration supporting the story's theme.

Difficulty Completing Album Sets

Abstract illustration supporting the story's theme.
Background

Design Insights

Our main objective was to create an engaging album feature in the game that would deeply connect with players. We recognized the need for a new, immersive experience built around a compelling narrative. The proposed concept: an album inspired by the cinematic charm of film noir.

The Problem

Users reported challenges in completing album sets, leading to frustration and reduced engagement.

Abstract illustration supporting the story's theme.
Pain Points:

​

​

  • Low Album Completion Rates and Engagement: 
    Players were experiencing difficulty completing album sets due to challenges in obtaining the necessary cards to finish sets. This led to frustration, a sense of lack of progress, and ultimately reduced engagement with the feature. 

     

  • Monotony and Lack of Novelty:
    Players became bored with the album concept and repetitive gameplay mechanics, resulting in a lack of long-term interest and motivation to continue playing. This merges the fatigue with the album concept and the limited variation in gameplay mechanics.

     

  • Lack of Compelling Progression:Beyond simple completion, players felt that the game lacked a sense of meaningful progression or impact based on their efforts. The existing reward system failed to adequately recognize dedication or give players a feeling of growth within the game, beyond the individual albums and the act of collecting.

Market Research & Inspiration

From Noir to Now

Gaming References  
I analyzed similar features in other Playtika games to identify successful implementations and adopt effective strategies, saving time on research and ideation. Additionally, this allowed us to streamline the creative process and focus on delivering a fresh experience. I also examined the L.A. Noire and The Wolf Among Us games to see how noir aesthetics could merge with interactive design. Their use of bold colors and graphic novel styles informed my creative approach.


Cinematic Research
I explored the shadowy visuals and dramatic storytelling of film noir, drawing inspiration from classics like Sunset Boulevard and Kiss Me Deadly, as well as modern interpretations such as Sin City. This research influenced the use of exaggerated poses, heightened tension, and dramatic gestures, which were adapted to create a playful gaming environment.
 

References supporting the Downtown Noir theme, showcasing inspiration for the 1950s Film Noir aesthetic.
References supporting the Downtown Noir theme, showcasing inspiration for the 1950s Film Noir aesthetic.
The Solutions

After conducting a survey with 5,000 users and gathering feedback from customer support, we concluded that the following steps need to be taken:

01

Simplified Album Completion Mechanics

We adjusted the rules for collecting cards, making it easier for players to complete albums and enhancing their sense of achievement.

03

Enhanced Reward System

Introduced items of higher value within sets, offering greater challenges and prestige in obtaining them. Added exclusive challenges
and premium packs containing these items to
re-engage players.

02

Revamped Visual & Narrative Design

A new album look and feel, complemented by an engaging storyline, reinvigorated the feature. This created a perception of novelty while maintaining the core mechanics, effectively minimizing development costs.

04

Introduced Dynamic Gameplay Elements 

Added new mini-games and time-limited events to diversify the user experience, creating fresh challenges and enhancing replayability.

The Screens

Solving Mysteries, Collecting Rewards

 Homepage Design - "Detective Betty's Office"

Homepage Design - "Detective Betty's Office"

The homepage sets the scene in Detective Betty's office, immersing players in a film noir atmosphere while introducing the mission to solve cases.

Set Page Design - Evidence Collection

Set Page Design - Evidence Collection

This page represents the set where players must gather evidence to solve the case. Each item is visually categorized into clues, key evidence, and suspects, guiding players step-by-step in their investigation.

 Rules Page - New Evidence Collection Method

Rules Page - New Evidence Collection Method

This page explains a new system to help players complete the album faster.  This system addresses the difficulty players face in finishing the album and provides a clear, efficient solution.

 Evidence Room - Trading Center

Evidence Room - Trading Center

This screen introduces the Evidence Room, where players can trade duplicate cards for higher chances of winning more coins. Choose a slot, make a trade with Officer Tom, and aim for the maximum prize! 

The Design

The Logo

The logo was finalized after the cohesive visual identity had been established. Combining a magnifying glass (a detective symbol) with rough textures evoked the feeling of vintage noir signage, aligning with the game's tone.

Color Palette

The color palette of the Spark logo conveys trust, stability, and professionalism, while also representing the commonly accepted indicators of rises and declines in the trading world. The colors create a sense of seriousness and security, reinforcing the brand identity.

Environmental Design: Evidence Room - Trading Center
Character Design
Animation and Scene Creation
Downtown Noir Logo
Color palette for Downtown Noir, reflecting the moody and cinematic tones of the 1950s Film Noir style.

Environmental Design

Each set reflected the narrative's progression, with backgrounds and objects integral to storytelling. For example, the Trade Center—a pivotal evidence room—was designed to occupy only 30% of the screen. Inspired by the SpongeBob SquarePants evidence room, it featured colorful yet functional layouts to balance space constraints with narrative immersion.

Character Design

The protagonist, Betty, embodies a blend of traditional femme fatale and modern detective. Inspired by characters like Jessica Rabbit, her design balances seduction and mystery, reflecting the noir tradition. Betty's outfit, featuring strategic slits, gloves, and high boots, subtly hints at her allure without overshadowing her role as a determined detective.
This nuanced approach ensures that Betty remains relatable and empowered, with her visual style enhancing the narrative without diverging from her character's core attributes.

Animation and Scene Creation

Illustrations and animations were crafted using Adobe Animate. Despite platform limitations, innovative frame-by-frame techniques brought Betty's facial expressions and subtle scene details to life. The iterative process involved adapting existing scripts while introducing spontaneous creative elements.

Conclusion:

Unveiling Success

"Downtown Noir" successfully captures the essence of Film Noir through meticulous research, thoughtful character design, and a captivating visual palette. By addressing player fatigue with fresh storytelling and high-value rewards, the project re-engaged its audience while maintaining a cost-effective development process. This case study demonstrates that by understanding the needs of its players and being willing to think outside the box, a project can not only survive but thrive. The case of "Downtown Noir" has been solved, proving that even the darkest corners can be illuminated with the right approach.

Takeaways:

  • Player feedback is essential.

  • Don't be afraid to revamp core mechanics.

  • Storytelling can enhance any feature.

  • Visual design should always support the narrative.

conclusion.png
bottom of page