LiveSpot
LiveSpot is an app that allows users to book tickets for music events online and track their favorite artists' upcoming concerts.
About LiveSpot
The LiveSpot app provides an easy-to-use system for reserving concert tickets. Its minimal and modern interface simplifies the process of booking tickets and connects user to their favorite artist’s live performances.
Minimal aesthetics
LiveSpot uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. LiveSpot’s brand plays an important role as the central, unifying scaffolding for the variety of products and brands showcased.
Livespot features red as main color. This distinctive color not only captures attention but also mirrors the intensity and excitement of a live performance. From the sleek buttons to the vibrant accents, red infuses the app with a visual vibrancy that mirrors the emotions stirred by the live music experience.
Product Architecture
LiveSpot app's information architecture uses a flow structure. A flow structure is a task-based structure, requiring screens to be accessed in consecutive order.
This structure is best for LiveSpot because it provides the flexibility needed for users interested in exploring filtered content, by making them actionable so they can book a specific choice.
Sections
LiveSpot app has four sections:
• What’s on
• Events
• Artists
• Venues
Each of these categorizes events for users to browse through. Navigate to these main sections by using the tabs along the top of the screen.
Bottom Navigation
LiveSpot’s bottom bar navigates to:
• Home
• Favorites
• Tickets
• Profile & Settings
Task Flow
LiveSpot has a one-path flowchart for a specific mission. Users can go to the event, view tickets, select tickets, and checkout.
LiveSpot’s User Flow
Layout
Grid system
LiveSpot uses grid system to ensure clean and organized layout.
LiveSpot’s Grid System
Elevation
Using color
LiveSpot's UI uses color to express elevation differences between elements, rather than shadows. For example, cards show the boundaries of their containers by having a color distinct from the background, without casting shadows.
Color
Color theme
LiveSpot's main color is red, with grey/black as the background. Red is used for buttons and clickable text to grab the user's attention.
The choice of red as LiveSpot's main color adds a vibrant and dynamic touch to the user experience. Symbolizing energy, passion, and the pulsating rhythm of live concerts, the bold use of red resonates with the heart and soul of music enthusiasts. This distinctive color not only captures attention but also mirrors the intensity and excitement of a live performance. From the sleek buttons to the vibrant accents, red infuses the app with a visual vibrancy that mirrors the emotions stirred by the live music experience.
Light Mode
LiveSpot’s color theme
Dark Mode
LiveSpot’s color theme
Accessibility
Color Contrast
Text legibility is preserved by an adequate contrast between the font color and the background. For WCAG 2.1 AA compliance, text should have a color contrast ratio of at least 4.5:1 (larger text at least 3:1).
LiveSpot has a contrast ratio of 4:6:1 which complies WCAG 2.1 AA for normal and large text.
Typefaces
Type scale
LiveSpot's type scale provides the typographic variety necessary for its app content. All items in the type scale use Gilroy as the typeface, making use of the variety of weights available with Gilroy Light, Regular, Medium, and SemiBold.
LiveSpot’s Type scale
Gilroy
LiveSpot uses the sans-serif typeface Gilroy across the entire app.
The font is characterized by its tall x-height, which gives it a strong presence and makes it highly legible. Its rounded curves and geometric shapes makes it a clear and aesthetic. The use of a single typeface across the LiveSpot app gives the UI consistently, allowing other elements (such as photography and small visual details) to stand out.
Gilroy’s letterform
Iconography
LiveSpot's custom icons are designed with a simple, clean quality to help make content feel approachable.
1. To create consistency, all of LiveSpot's icons share the same underlying grid structure.
2. A collection of LiveSpot's icons
Shape
Categories
Components are grouped into shape categories based on their size.
Shape categories let you set multiple component values at once. Shape categories include:
Small components
Medium components
Large components
LiveSpot’s shape categories
LiveSpot’s shape categories
1. Small component - Buttons have rounded corners with a 50% corner radius.
2. Medium component - 12dp corner radius
3. Large component - A backdrop has rounded corners with a 20dp corner radius.
Components
Image List
Horizontal Carousel
This image list uses a horizontal carousel inviting the user to continue to scroll sideways and explore content.
LiveSpot’s horizontal carousel
Image labels
The image list has been customized to display text labels with each item. Black gradient acts as background for the text and prevents mixing with white colors in the image at background
LiveSpot’s image labels
Cards
LiveSpot event tickets are presented using a cards. There is little padding between cards, and full ticket can be revealed by tapping at one ticket.
LiveSpot’s ticket cards
LiveSpot’s follow cards
Motion
LiveSpot’s motion design uses emphasized easing and longer durations to establish a bold and delightful tone.
Launch screen
LiveSpot’s product icon animation plays off the geometric forms of its logo.
LiveSpot’s launch screen
Navigation transitions
LiveSpot’s navigation transitions use emphasized easing and long durations to achieve a relaxed and elegant tone. Temporal offsets are used to call attention to important elements like the tickets and checkout button. An overlap is used on back layer content to create a cascading effect.
LiveSpot’s navigation transitions