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

@2024 Copyright by Ghanendra Sahu