Movie ticketing app in Vietnam
Movie ticketing app in Vietnam
A personal UI-focused project
A personal UI-focused project
Role
Team Leader
Team Leader
UI Designer
UI Designer
Team
3 Designers
3 Designers
1 Advisor
1 Advisor
Timeline
3.5 weeks
3.5 weeks
Feb - Mar 2025
Feb - Mar 2025
Overview
Overview
Final Design
Final Design
Discovery
Discovery
Concept
Concept
UI elements
UI elements
Design patterns
Design patterns
Prototype
Prototype
Reflection
Reflection
Project Overview
opportunity space
opportunity space
From personal observation & experiences, movie-ticketing apps are functional, but could be more exciting & visually pleasant.
From personal observation & experiences, movie-ticketing apps are functional, but could be more exciting & visually pleasant.
solution
solution
Lumea aims to bring an immersive cinematic experience for movie lovers, even just for booking tickets.
Inspired by new design trends & cinematic concepts of northern lights, Lumea boosts excitement of planning a movie night.
Lumea aims to bring an immersive cinematic experience for movie lovers, even just for booking tickets.
Inspired by new design trends & cinematic concepts of northern lights, Lumea boosts excitement of planning a movie night.
user group
user group
Movie lovers & cinema-goers (early 20s — 30s) that occasionally go to cinemas with friends, families and loved ones.
Movie lovers & cinema-goers (early 20s — 30s) that occasionally go to cinemas with friends, families and loved ones.
anticipated needs & behaviors
anticipated needs & behaviors
More likely to look for coupons & discounts.
More likely to look for coupons & discounts.
Quickly scan movie details & other info.
Quickly scan movie details & other info.
Tend to buy tickets in advance using apps
Tend to buy tickets in advance using apps
My role
My role
My role
I led the team of three, mainly delegating tasks and supporting the team to get to the finish line strong. I focused on driving the overall concept and detailed design of the home page, while my teammates designed the other screens.
I led the team of three, mainly delegating tasks and supporting the team to get to the finish line strong. I focused on driving the overall concept and detailed design of the home page, while my teammates designed the other screens.
Side note: This project is 100% for practice purpose on visual design that my team and I couldn't discuss metrics or impact too much (but hope we'd have a chance in the future).
Side note: This project is 100% for practice purpose on visual design that my team and I couldn't discuss metrics or impact too much (but hope we'd have a chance in the future).
final designs
final designs
Home page
Home page
Home page
Designed as a scrollable, visual-first experience, the homepage makes it easy for users to discover what’s playing now and what’s coming soon.
Designed as a scrollable, visual-first experience, the homepage makes it easy for users to discover what’s playing now and what’s coming soon.
Purchasing ticket
Purchasing ticket
Purchasing ticket
Just a few taps from trailer to ticket — booking your next cinematic experience is quick and effortless.
Just a few taps from trailer to ticket — booking your next cinematic experience is quick and effortless.
Managing ticket
Managing ticket
Managing ticket
Easily access and organize all your movie tickets in one place. The Tickets tab keeps your booking details ready for check-in.
Easily access and organize all your movie tickets in one place. The Tickets tab keeps your booking details ready for check-in.
Our Process
Our Process
Our Process
1) Context
1) Context
Desk Research
Desk Research
Competitor Analysis
Competitor Analysis
User Group
User Group
2) Ideation
2) Ideation
Visual Research
Visual Research
Moodboard
Moodboard
Visual Styles
Visual Styles
3) Design
3) Design
Wireframing
Wireframing
Hi-fi designs
Hi-fi designs
Competitor Analysis
Competitor Analysis
Competitor Analysis
Goal: To understand & learn from apps' logic, visual, navigation, and interaction.
Goal: To understand & learn from apps' logic, visual, navigation, and interaction.
By looking into multiple categories of apps that share commonalities to a movie-ticketing app, we quickly learned the common user flows, UI patterns, and whether they are great designs or not.
By looking into multiple categories of apps that share commonalities to a movie-ticketing app, we quickly learned the common user flows, UI patterns, and whether they are great designs or not.
Below is our summary of CGV (most-used in Vietnam), and AMC (widely used in the US)
Below is our summary of CGV (most-used in Vietnam), and AMC (widely used in the US)
Visual Research & Concept
Visual Research & Concept
Visual Research & Concept
keywords/themes
keywords/themes
These three (3) keywords describe the interface's visual, and more importantly,
they evoke cinematic emotions & sensations that one can only experience & be captivated within theaters.
These three (3) keywords describe the interface's visual, and more importantly, they evoke cinematic emotions & sensations that one can only experience & be captivated within theaters.
moodboard
moodboard
With our chosen keywords in mind, our team began collecting inspiration. We explored a wide range of scenes, themes, and color palettes. This variety left us both inspired and a bit overwhelmed.
With our chosen keywords in mind, our team began collecting inspiration. We explored a wide range of scenes, themes, and color palettes. This variety left us both inspired and a bit overwhelmed.
Eventually, we selected several colors and atmospheres we felt best captured our vision. These were to be experimented with UI mockups later in the process.
Eventually, we selected several colors and atmospheres we felt best captured our vision. These were to be experimented with UI mockups later in the process.
-> Among the many references, one stood out — the Northern Lights.
-> Among the many references, one stood out — the Northern Lights.
the 'northern lights' concept
the 'northern lights' concept
Imagine stepping into a world where the magic of cinema unfolds like the Northern Lights—
unpredictable, mesmerizing, and breathtaking.
This is our inspiration because it embodies everything movies & cinematic experiences represent.
Imagine stepping into a world where the magic of cinema unfolds like the Northern Lights—
unpredictable, mesmerizing, and breathtaking.
This is our inspiration because it embodies everything movies & cinematic experiences represent.
UI Elements
UI Elements
UI Elements
The competitor analysis and visual direction gave us a better idea of the application's logic and flow. We quickly incorporated elements and sections into the UI mockups, and utilized Figma tools to experiment with colors and visuals.
The competitor analysis and visual direction gave us a better idea of the application's logic and flow. We quickly incorporated elements and sections into the UI mockups, and utilized Figma tools to experiment with colors and visuals.
The next part, I'll share what we chose and how we used the elements below in the final screens.
Color
Typography
Icon
The next part, I'll share what we chose and how we used the elements below in the final screens.
The next part, I'll share what we chose and how we used the elements below in the final screens.
Colors
Colors
Colors
colors
colors
Used for: background color, background patterns, buttons/CTA
Used for: background color, background patterns, buttons/CTA
Enhances depth & interesting mixture to the dark background
Enhances depth & interesting mixture to the dark background
Movement of northern lights is eye-catching, and evokes emotions. Utilizing this in sections that need higher focus.
Movement of northern lights is eye-catching, and evokes emotions. Utilizing this in sections that need higher focus.
This dark palette allows better contrast for white-colored content.
-> Better readability for users
This dark palette allows better contrast for white-colored content.
-> Better readability for users
buttons
buttons
Button colors are drawn from the core palette to maintain a cohesive and visually unified experience throughout the app
Button colors are drawn from the core palette to maintain a cohesive and visually unified experience throughout the app
neutral color
neutral color
Used for: content, icons, icon background.
Used for: content, icons, icon background.
Neutral White: For content that needs highlighting, more attention.
Neutral White: For content that needs highlighting, more attention.
Neutral Grey: For content with secondary need of attention.
Neutral Grey: For content with secondary need of attention.
Both colors are easy to use, while having enough contrast for readability (WCAG) on any background color in this app.
Both colors are easy to use, while having enough contrast for readability (WCAG) on any background color in this app.
Typography
Typography
Typography
lato
Sans serif typeface
Sans serif typeface
Sleek, modern letterforms that are both contemporary and approachable, while displaying languages of English & Vietnamese elegantly. Using a simple-looking font brings out harmony when displayed on the complex background/gradient.
Sleek, modern letterforms that are both contemporary and approachable, while displaying languages of English & Vietnamese elegantly. Using a simple-looking font brings out harmony when displayed on the complex background/gradient.
Icon
Icon
Icon
Outline & Filled Icons
Outline & Filled Icons
At display level, outline icons are used. Once clicked/activated, filled icons are displayed. The switch between each form allows users to navigate more informatively.
At display level, outline icons are used. Once clicked/activated, filled icons are displayed. The switch between each form allows users to navigate more informatively.
Icons are round-shaped, highlighting modern-ness for the app.
Icons are round-shaped, highlighting modern-ness for the app.
Glassmorphism
Glassmorphism
Glassmorphism
Used for: Movie posters, tickets, and more.
Used for: Movie posters, tickets, and more.
This trendy UI design technique has been around for a few years because of its sleek look. Our team loves it because the blur, glass-like effect is great to display content.
This trendy UI design technique has been around for a few years because of its sleek look. Our team loves it because the blur, glass-like effect is great to display content.
Users can view information with ease, as the effect subtly separates content from the background while keeping the overall experience cohesive and visually rich
Users can view information with ease, as the effect subtly separates content from the background while keeping the overall experience cohesive and visually rich
Design Patterns
Design Patterns
Design Patterns
Movie Ticket
Movie Ticket
Movie Ticket
We used the shape of a movie ticket as a recurring design motif to present information in a more playful and memorable way.
We used the shape of a movie ticket as a recurring design motif to present information in a more playful and memorable way.
The gradient backgrounds are dynamically created by blending the two most dominant colors from each movie poster, enhancing the immersive feel and allowing each film to visually own its space.
The gradient backgrounds are dynamically created by blending the two most dominant colors from each movie poster, enhancing the immersive feel and allowing each film to visually own its space.
Horizontal scroll
Horizontal scroll
Horizontal scroll
Horizontal scroll is used to showcase content categories without turning the experience into an endless vertical scroll, keeping navigation clean and focused.
Horizontal scroll is used to showcase content categories without turning the experience into an endless vertical scroll, keeping navigation clean and focused.
wireframes
wireframes
prototypes
prototypes
My learnings
My learnings
My learnings
Create fast, fail fast, and iterate smarter
Create fast, fail fast, and iterate smarter
Rather than getting stuck overthinking every visual detail, I learned the value of creating quickly to generate something tangible. This made it easier to gather objective feedback from mentors and make thoughtful improvements along the way.
Rather than getting stuck overthinking every visual detail, I learned the value of creating quickly to generate something tangible. This made it easier to gather objective feedback from mentors and make thoughtful improvements along the way.
There’s no single path to bringing out a vision
There’s no single path to bringing out a vision
I learned that there’s no “right” way to bring a vision to life. As long as the direction is clear, the tools — whether Figma or anything else — shouldn’t get in the way. What matters is making progress, not perfection.
I learned that there’s no “right” way to bring a vision to life. As long as the direction is clear, the tools — whether Figma or anything else — shouldn’t get in the way. What matters is making progress, not perfection.
Balancing creative freedom with usability
Balancing creative freedom with usability
Even without direct input from users, we embraced the opportunity to let visual inspiration guide our exploration. At the same time, we grounded our decisions using practical metrics like accessibility and clarity to ensure the experience remained intuitive and inclusive.
Even without direct input from users, we embraced the opportunity to let visual inspiration guide our exploration. At the same time, we grounded our decisions using practical metrics like accessibility and clarity to ensure the experience remained intuitive and inclusive.
Back to Top
In the meantime, check out my other work!
Jasmine (Phuong) Bui
©
Made with Love
2024
Jasmine (Phuong) Bui
©
Made with Love
2024