Discover

Discover is your passport to unforgettable adventures, all from the palm of your hand. With a sleek and intuitive user interface, our app makes exploring the world easier and more enjoyable than ever before.

About Discover

Unlock a world of possibilities for your next adventure. With our user-focused interface, exploring the world has never been easier. Start your journey today and let Discover be your ultimate travel companion

Minimal aesthetics

Discover uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. Discover’s brand plays an important role as the central, unifying scaffolding for the variety of products and brands showcased.


Discoverfeatures 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

Discover 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 Discover 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

Discover 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

Discover bottom bar navigates to:

• Home

• Favorites

• Tickets

• Profile & Settings

Task Flow

Discover has a one-path flowchart for a specific mission. Users can go to the event, view tickets, select tickets, and checkout.

Discover’s User Flow

Layout

Grid system

Discover uses grid system to ensure clean and organized layout.

Discover Grid System

Elevation

Using color

Discover’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

Discover’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

Discover’s color theme

Dark Mode

Discover’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

Discover’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.

Discover’s Type scale

Gilroy

Discover 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

Discover’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

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.

Discover’s ticket cards

Discover’s follow cards

Motion

Discover’s motion design uses emphasized easing and longer durations to establish a bold and delightful tone.

Launch screen

Discover’s product icon animation plays off the geometric forms of its logo.

LiveSpot’s launch screen

Navigation transitions

Discover’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.

Discover’s navigation transitions

@2024 Tyler Schmidt All rights reserved.

@2024 Tyler Schmidt All rights reserved.

@2024 Tyler Schmidt All rights reserved.