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