Project Overview

Branding & UI Kit

PROJECT INDEX

Project Overview

UX Design Process

Design Thinking

User Personas

User Flow

Branding & UI Kit

App Feature Discovery

AlloCiné Home 2025

PROJECT INDEX

Project Overview

UX Design Process

Design Thinking

User Personas

User Flow

Branding & UI Kit

App Feature Discovery

AlloCiné Home 2025

UX Design

UX Design

UX Design

UX Design

PROCESS

PROCESS

PROCESS

PROCESS

UX DESIGN PROCESS

Q%e4>[

T(B$4]*{

We followed a structured design process to transformtransform researchresearch and intuition into ainto a cohesive,cohesive, user-centereduser-centered experience.experience.
This project builds on established design foundations, reinterpreting past learnings through updated research, refined UX methods, and a renewed focus on visual storytelling. Each phase was guided by a product-driven mindset, emphasizing clarity, consistency, and alignment with the AlloCiné brand’s cinematic identity.

UX DESIGN PROCESS

@unj6t

JR6,T5BH

We followed a structured design process to transformtransform researchresearch and intuition into ainto a cohesive,cohesive, user-centereduser-centered experience.experience.
This project builds on established design foundations, reinterpreting past learnings through updated research, refined UX methods, and a renewed focus on visual storytelling. Each phase was guided by a product-driven mindset, emphasizing clarity, consistency, and alignment with the AlloCiné brand’s cinematic identity.

UX DESIGN PROCESS

^9w!^|

~<30!0<~

We followed a structured design process to transformtransform researchresearch and intuition into ainto a cohesive,cohesive, user-centereduser-centered experience.experience.
This project builds on established design foundations, reinterpreting past learnings through updated research, refined UX methods, and a renewed focus on visual storytelling. Each phase was guided by a product-driven mindset, emphasizing clarity, consistency, and alignment with the AlloCiné brand’s cinematic identity.

UX DESIGN PROCESS

]:3it{

3^$X)F<M

We followed a structured design process to transformtransform researchresearch and intuition into ainto a cohesive,cohesive, user-centereduser-centered experience.experience.
This project builds on established design foundations, reinterpreting past learnings through updated research, refined UX methods, and a renewed focus on visual storytelling. Each phase was guided by a product-driven mindset, emphasizing clarity, consistency, and alignment with the AlloCiné brand’s cinematic identity.

1.

Research

The project began with benchmarking and problem framing, analyzing apps like JustWatch, TV Time, and Reelgood to identify gaps in usability and engagement. This clarified the goal: easing decision fatigue while making film and series discovery more personal and enjoyable.

Competitor Analysis

User research

Problem Framing

Ideation

1.

Research

The project began with benchmarking and problem framing, analyzing apps like JustWatch, TV Time, and Reelgood to identify gaps in usability and engagement. This clarified the goal: easing decision fatigue while making film and series discovery more personal and enjoyable.

Competitor Analysis

User research

Problem Framing

Ideation

1.

Research

The project began with benchmarking and problem framing, analyzing apps like JustWatch, TV Time, and Reelgood to identify gaps in usability and engagement. This clarified the goal: easing decision fatigue while making film and series discovery more personal and enjoyable.

Competitor Analysis

User research

Problem Framing

Ideation

2.

UX Flow

Once the problem space was clear, I mapped user scenarios and defined the app’s core logic. Two primary personas emerged: the explorer and the organizer, guiding how users browse, save, and revisit content. These insights shaped the first navigation model and flow hierarchy.

User Scenarios

UX Logic

Personas

User Flows

Information Architecture

2.

UX Flow

Once the problem space was clear, I mapped user scenarios and defined the app’s core logic. Two primary personas emerged: the explorer and the organizer, guiding how users browse, save, and revisit content. These insights shaped the first navigation model and flow hierarchy.

User Scenarios

UX Logic

Personas

User Flows

Information Architecture

3.

UI Direction

With the foundations set, I defined the visual direction. The original AlloCiné yellow was replaced with a deeper red (#DC1034) for a warmer, softer look suited to low-light viewing. Typography, iconography, and UI elements were refined to balance brand familiarity with a more contemporary, cinematic feel.

Branding

Color Swatch

Visual Exploration

Font System

UI Kit

3.

UI Direction

With the foundations set, I defined the visual direction. The original AlloCiné yellow was replaced with a deeper red (#DC1034) for a warmer, softer look suited to low-light viewing. Typography, iconography, and UI elements were refined to balance brand familiarity with a more contemporary, cinematic feel.

Branding

Color Swatch

Visual Exploration

Font System

UI Kit

3.

UI Direction

With the foundations set, I defined the visual direction. The original AlloCiné yellow was replaced with a deeper red (#DC1034) for a warmer, softer look suited to low-light viewing. Typography, iconography, and UI elements were refined to balance brand familiarity with a more contemporary, cinematic feel.

Branding

Color Swatch

Visual Exploration

Font System

UI Kit

3.

UI Direction

With the foundations set, I defined the visual direction. The original AlloCiné yellow was replaced with a deeper red (#DC1034) for a warmer, softer look suited to low-light viewing. Typography, iconography, and UI elements were refined to balance brand familiarity with a more contemporary, cinematic feel.

Branding

Color Swatch

Visual Exploration

Font System

UI Kit

4.

Screens & UI

This phase translated concepts into tangible visuals. I produced high-fidelity mockups for key flows such as Discover, Watchlist, and Profile, including interactive states and transitions. Each screen was crafted to balance functionality with a cinematic aesthetic.

Wireframes

UI States

High-Fidelity Mockups

Layout Design

Interactive Flows

4.

Screens & UI

This phase translated concepts into tangible visuals. I produced high-fidelity mockups for key flows such as Discover, Watchlist, and Profile, including interactive states and transitions. Each screen was crafted to balance functionality with a cinematic aesthetic.

Wireframes

UI States

High-Fidelity Mockups

Layout Design

Interactive Flows

4.

Screens & UI

This phase translated concepts into tangible visuals. I produced high-fidelity mockups for key flows such as Discover, Watchlist, and Profile, including interactive states and transitions. Each screen was crafted to balance functionality with a cinematic aesthetic.

Wireframes

UI States

High-Fidelity Mockups

Layout Design

Interactive Flows

4.

Screens & UI

This phase translated concepts into tangible visuals. I produced high-fidelity mockups for key flows such as Discover, Watchlist, and Profile, including interactive states and transitions. Each screen was crafted to balance functionality with a cinematic aesthetic.

Wireframes

UI States

High-Fidelity Mockups

Layout Design

Interactive Flows

5.

Communication

The final step focused on storytelling. Motion principles, transitions, and micro-interactions were defined to bring the interface to life. A short narrative presentation was built to communicate the vision clearly, emphasizing usability and emotional resonance.

Storytelling

Motion Design

Product Narrative

5.

Communication

The final step focused on storytelling. Motion principles, transitions, and micro-interactions were defined to bring the interface to life. A short narrative presentation was built to communicate the vision clearly, emphasizing usability and emotional resonance.

Storytelling

Motion Design

Product Narrative

5.

Communication

The final step focused on storytelling. Motion principles, transitions, and micro-interactions were defined to bring the interface to life. A short narrative presentation was built to communicate the vision clearly, emphasizing usability and emotional resonance.

Storytelling

Motion Design

Product Narrative

5.

Communication

The final step focused on storytelling. Motion principles, transitions, and micro-interactions were defined to bring the interface to life. A short narrative presentation was built to communicate the vision clearly, emphasizing usability and emotional resonance.

Storytelling

Motion Design

Product Narrative

UX DESIGN PROCESS

1mpg

T17@?L?O

We developed user personas to better understand the habits,habits, motivations,motivations, and frustrationsand frustrations of everyday viewers navigating multiple streaming platforms.

UX DESIGN PROCESS

Yyqe

OVJ7.7NY

We developed user personas to better understand the habits,habits, motivations,motivations, and frustrationsand frustrations of everyday viewers navigating multiple streaming platforms.

UX DESIGN PROCESS

H%c!

_)D87{#C

We developed user personas to better understand the habits,habits, motivations,motivations, and frustrationsand frustrations of everyday viewers navigating multiple streaming platforms.

UX DESIGN PROCESS

Gzf<

I6^ME&G6

We developed user personas to better understand the habits,habits, motivations,motivations, and frustrationsand frustrations of everyday viewers navigating multiple streaming platforms.

P1.

The Explorer

Curious, spontaneous, emotion-driven

75%

Spontaneity

85%

Curiosity

40%

Patience

70%

Social

35%

Organization

"I never know what to watch, so I end up scrolling for 20 minutes and giving up.”

Problem:

  • Spends too much time scrolling through different streaming apps without finding something appealing.

  • Feels overwhelmed by too many choices and generic recommendations.

  • Struggles to remember movies or shows discovered earlier or suggested by friends.

Goal:

  • Wants a fun, intuitive way to discover films and series based on mood or theme.

  • Aims to save and revisit discoveries effortlessly across all streaming platforms.

  • Seeks a personalized experience that feels inspiring, not algorithmic.

P1.

The Explorer

Curious, spontaneous, emotion-driven

75%

Spontaneity

85%

Curiosity

40%

Patience

70%

Social

35%

Organization

"I never know what to watch, so I end up scrolling for 20 minutes and giving up.”

Problem:

  • Spends too much time scrolling through different streaming apps without finding something appealing.

  • Feels overwhelmed by too many choices and generic recommendations.

  • Struggles to remember movies or shows discovered earlier or suggested by friends.

Goal:

  • Wants a fun, intuitive way to discover films and series based on mood or theme.

  • Aims to save and revisit discoveries effortlessly across all streaming platforms.

  • Seeks a personalized experience that feels inspiring, not algorithmic.

P2.

The Organizer

Pragmatic, methodical, efficiency-driven

90%

Organization

80%

Planning

60%

Curiosity

45%

Social

75%

Analytical

"I like keeping track of what I’ve already watched, otherwise I forget where I left off.”

Problem:

  • Finds it hard to track what has been watched or what’s left to finish.

  • Uses multiple lists across apps or notes, leading to duplication and confusion.

  • Loses interest when platforms don’t sync progress or release notifications.

Goal:

  • Wants a single space to manage and organize all viewing activity across services.

  • Aims to monitor upcoming releases and episode progress at a glance.

  • Seeks a clean, structured interface that saves time and keeps everything up to date.

P2.

The Organizer

Pragmatic, methodical, efficiency-driven

90%

Organization

80%

Planning

60%

Curiosity

45%

Social

75%

Analytical

"I like keeping track of what I’ve already watched, otherwise I forget where I left off.”

Problem:

  • Finds it hard to track what has been watched or what’s left to finish.

  • Uses multiple lists across apps or notes, leading to duplication and confusion.

  • Loses interest when platforms don’t sync progress or release notifications.

Goal:

  • Wants a single space to manage and organize all viewing activity across services.

  • Aims to monitor upcoming releases and episode progress at a glance.

  • Seeks a clean, structured interface that saves time and keeps everything up to date.

UX DESIGN PROCESS

Wc}7

,.#0

The goal was to translate user motivationsuser motivations into simple, consistent flows that make content discovery anddiscovery and trackingtracking feel seamlessfeel seamless.
AlloCiné Home is structured for two complementary behaviors: guided suggestions and self-directed exploration. Onboarding collects viewing preferences, which power a personalized Homepage.
From there, users can dive deeper through Explore, AI, Lists, and Inspiration. Profile sits in the top navigation for account and activity.

UX DESIGN PROCESS

}]#&

@;D@

The goal was to translate user motivationsuser motivations into simple, consistent flows that make content discovery anddiscovery and trackingtracking feel seamlessfeel seamless.
AlloCiné Home is structured for two complementary behaviors: guided suggestions and self-directed exploration. Onboarding collects viewing preferences, which power a personalized Homepage.
From there, users can dive deeper through Explore, AI, Lists, and Inspiration. Profile sits in the top navigation for account and activity.

UX DESIGN PROCESS

G]$z

<GY?

The goal was to translate user motivationsuser motivations into simple, consistent flows that make content discovery anddiscovery and trackingtracking feel seamlessfeel seamless.
AlloCiné Home is structured for two complementary behaviors: guided suggestions and self-directed exploration. Onboarding collects viewing preferences, which power a personalized Homepage.
From there, users can dive deeper through Explore, AI, Lists, and Inspiration. Profile sits in the top navigation for account and activity.

UX DESIGN PROCESS

Fy_@

@BKP

The goal was to translate user motivationsuser motivations into simple, consistent flows that make content discovery anddiscovery and trackingtracking feel seamlessfeel seamless.
AlloCiné Home is structured for two complementary behaviors: guided suggestions and self-directed exploration. Onboarding collects viewing preferences, which power a personalized Homepage.
From there, users can dive deeper through Explore, AI, Lists, and Inspiration. Profile sits in the top navigation for account and activity.

PREVIOUS

Project Overview

PREVIOUS

Project Overview

PREVIOUS

Project Overview

PREVIOUS

Project Overview

UP NEXT

Branding & UI Kit

UP NEXT

Branding & UI Kit

UP NEXT

Branding & UI Kit

UP NEXT

Branding & UI Kit

EXPLORE

]rti!_<!(.]7wa0c|zu

Guid'z
Guid'z
Guid'z
Guid'z
Pixwoo
Pixwoo
Pixwoo
Pixwoo
750g
750g
750g
750g
Seven Deadly Sins
Seven Deadly Sins
Seven Deadly Sins
Seven Deadly Sins
Personal Branding
Personal Branding
Personal Branding
Personal Branding
Pickasso
Pickasso
Pickasso
Pickasso