Visual Identity & UI design
As part of my journey to earning the Google Professional UX Design Certificate, I designed a mobile app for a movie theater that allows users to easily purchase tickets and order food in advance. My focus was on crafting a distinct visual identity and building a scalable design system to ensure a consistent and engaging user experience.
Objective
Create a cohesive brand and user interface that would motivate users to download and regularly use the app for both ticketing and concessions.
Design Challenge
Develop a recognizable color scheme that stands out without clashing with the diverse visual styles of movie posters and advertisements.
Choose an accessible, legible typeface that enhances usability across different lighting conditions and screen sizes.
My Role
I was responsible for the visual identity, user interface design, and design system development.
Branding
Develeping a visual identity
Color Scheme
The color palette evokes a sense of modern sophistication with cinematic depth, using rich, dark tones contrasted by a bright neutral. The primary background colors, a deep burgundy (#321D29) and a bold plum (#480B31) establish a moody, immersive atmosphere, reminiscent of the dramatic lighting and ambiance found in classic theaters. The secondary color (#3A0A28) reinforces this layered depth, offering subtle flexibility for UI elements while maintaining visual harmony. The main neutral (#F3F4F4) plays a crucial balancing role, providing contrast and clarity that ensures readability and accessibility across digital touchpoints. It allows the deeper tones to stand out without overwhelming the user. Together, these colors create a cohesive system that is both expressive and functional, perfectly suited for a movie-focused experience.
Logo and Icon
User Interface
Building a Design System
Colors
Color plays a pivotal role in shaping a brand's identity, capturing user attention, and conveying its message. A well-crafted design system ensures visual consistency while supporting adaptability through dynamic color management, where updating a primary color seamlessly adjusts all linked UI elements, maintaining cohesion across the entire product experience.
Typography plays a vital role in visual communication, directly influencing how users perceive and engage with a product. To support readability, accessibility, and brand consistency, I selected the Lexend font family. Its clean, modern design enhances legibility across digital interfaces while reinforcing a user-friendly and approachable brand identity.
Typeface
Icon
The CineScopes icon set is designed with simplicity and clarity in mind, aligning seamlessly with the brand’s cinematic and modern aesthetic. From universal actions like home, search, and profile to contextual icons for dining, timing, and alerts, each symbol supports intuitive navigation and user interaction. The minimalist linework and thoughtful negative space echo the brand’s focus on immersive, distraction-free design.
Buttons
Buttons are essential touchpoints that guide users through the CineScopes experience. Designed with clarity and purpose, they feature distinct states and accessible contrast to support seamless interaction. Thoughtful spacing and consistent sizing contribute to a visually balanced interface, reinforcing the brand’s focus on usability and polished cinematic design.
Inputs
Input fields are core interaction elements within the CineScopes experience, enabling users to seamlessly engage with the app. Designed for clarity and ease, inputs feature accessible contrast, intuitive states, and consistent spacing, ensuring a smooth, user-friendly flow that aligns with the brand’s cinematic and modern visual language.