Comprehensive case studyGIT 520 · Master’s-level project

Mood

A mobile ticketing prototype that connects discovery, purchasing, account management, and entry across three Phoenix-area venues without relying on search.

Mobile UX
Product flows
Information hierarchy
Figma

Summary

A complete product journey, summarized first and documented in full.

Mood explores how a deliberately limited event catalog can still feel flexible. The work progresses from mid-fidelity structure into four end-to-end high-fidelity flows.

26: Mid-fidelity screens; The complete structural prototype and its core purchase paths.
42: High-fidelity screens; Final screens, form states, validation, filters, and confirmations.
4: End-to-end flows; From onboarding and discovery through purchase and venue entry.

Constraint

No search feature

Visible date, genre, and venue filters had to carry discovery without making a small catalog feel limited.

Approach

Reveal decisions in order

Event details, quantities, payment, terms, and review appear in a deliberate sequence with clear feedback states.

Outcome

One coherent product language

Repeated navigation, event, form, and ticket patterns connect the experience from first launch to entry.

Highlights

The strongest moments at a glance.

Start with six representative screens, then continue into the complete flows when you want to inspect every state and decision.

Cover interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Cover
High fidelity · Highlight

Filtered event results interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Filtered event results
High fidelity · Highlight

Individual event interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Individual event
High fidelity · Highlight

Review and terms: initial state interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Review and terms: initial state
High fidelity · Highlight

Account interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Account
High fidelity · Highlight

Virtual ticket interface in the Mood ticketing flow, demonstrating the high fidelity · highlight state. — Virtual ticket
High fidelity · Highlight

↑ Back to case study contents

Final prototype

Four complete high-fidelity flows.

Every meaningful screen and interface state is preserved below. Use the flow index to jump directly to a journey, or move through the work in assignment order.

FLOW 01

Sign up to event information

Account creation moves from method selection and validation through optional profile details, then into event discovery.

Explore all 15 screens in this flow

Cover interface in the Mood ticketing flow, demonstrating the high fidelity · 01 of 15 state. — Cover
High fidelity · 01 of 15

Verification code: initial state interface in the Mood ticketing flow, demonstrating the high fidelity · 07 of 15 state. — Verification code: initial state
High fidelity · 07 of 15

Verification code: entered state interface in the Mood ticketing flow, demonstrating the high fidelity · 08 of 15 state. — Verification code: entered state
High fidelity · 08 of 15

Verification code: validated state interface in the Mood ticketing flow, demonstrating the high fidelity · 09 of 15 state. — Verification code: validated state
High fidelity · 09 of 15

Account created interface in the Mood ticketing flow, demonstrating the high fidelity · 10 of 15 state. — Account created
High fidelity · 10 of 15

Personal information: empty state interface in the Mood ticketing flow, demonstrating the high fidelity · 11 of 15 state. — Personal information: empty state
High fidelity · 11 of 15

Personal information: completed state interface in the Mood ticketing flow, demonstrating the high fidelity · 12 of 15 state. — Personal information: completed state
High fidelity · 12 of 15

Personal information saved interface in the Mood ticketing flow, demonstrating the high fidelity · 13 of 15 state. — Personal information saved
High fidelity · 13 of 15

Main events interface in the Mood ticketing flow, demonstrating the high fidelity · 14 of 15 state. — Main events
High fidelity · 14 of 15

Individual event interface in the Mood ticketing flow, demonstrating the high fidelity · 15 of 15 state. — Individual event
High fidelity · 15 of 15

↑ Back to case study contents

FLOW 02

Sign in to purchase a featured event

The primary purchase journey covers authentication, event selection, quantity, contact and payment details, review, and confirmation.

Explore all 14 screens in this flow

Cover interface in the Mood ticketing flow, demonstrating the high fidelity · 01 of 14 state. — Cover
High fidelity · 01 of 14

Sign in: empty state interface in the Mood ticketing flow, demonstrating the high fidelity · 02 of 14 state. — Sign in: empty state
High fidelity · 02 of 14

Sign in: completed state interface in the Mood ticketing flow, demonstrating the high fidelity · 03 of 14 state. — Sign in: completed state
High fidelity · 03 of 14

Main events interface in the Mood ticketing flow, demonstrating the high fidelity · 04 of 14 state. — Main events
High fidelity · 04 of 14

Individual event interface in the Mood ticketing flow, demonstrating the high fidelity · 05 of 14 state. — Individual event
High fidelity · 05 of 14

Quantity selection: initial state interface in the Mood ticketing flow, demonstrating the high fidelity · 06 of 14 state. — Quantity selection: initial state
High fidelity · 06 of 14

Quantity selection: updated state interface in the Mood ticketing flow, demonstrating the high fidelity · 07 of 14 state. — Quantity selection: updated state
High fidelity · 07 of 14

Contact information: empty state interface in the Mood ticketing flow, demonstrating the high fidelity · 08 of 14 state. — Contact information: empty state
High fidelity · 08 of 14

Contact information: completed state interface in the Mood ticketing flow, demonstrating the high fidelity · 09 of 14 state. — Contact information: completed state
High fidelity · 09 of 14

Billing and payment: empty state interface in the Mood ticketing flow, demonstrating the high fidelity · 10 of 14 state. — Billing and payment: empty state
High fidelity · 10 of 14

Billing and payment: completed state interface in the Mood ticketing flow, demonstrating the high fidelity · 11 of 14 state. — Billing and payment: completed state
High fidelity · 11 of 14

Review and terms: initial state interface in the Mood ticketing flow, demonstrating the high fidelity · 12 of 14 state. — Review and terms: initial state
High fidelity · 12 of 14

Review and terms: accepted state interface in the Mood ticketing flow, demonstrating the high fidelity · 13 of 14 state. — Review and terms: accepted state
High fidelity · 13 of 14

Purchase confirmation interface in the Mood ticketing flow, demonstrating the high fidelity · 14 of 14 state. — Purchase confirmation
High fidelity · 14 of 14

↑ Back to case study contents

FLOW 03

Filter to find an event

Calendar, genre, and combined filter states make a deliberately search-free event catalog easy to narrow.

Explore all 7 screens in this flow

Main events: default state interface in the Mood ticketing flow, demonstrating the high fidelity · 01 of 7 state. — Main events: default state
High fidelity · 01 of 7

Calendar filter: opening state interface in the Mood ticketing flow, demonstrating the high fidelity · 02 of 7 state. — Calendar filter: opening state
High fidelity · 02 of 7

Calendar filter: date selection interface in the Mood ticketing flow, demonstrating the high fidelity · 03 of 7 state. — Calendar filter: date selection
High fidelity · 03 of 7

Calendar filter: selected date interface in the Mood ticketing flow, demonstrating the high fidelity · 04 of 7 state. — Calendar filter: selected date
High fidelity · 04 of 7

Filtered event results interface in the Mood ticketing flow, demonstrating the high fidelity · 05 of 7 state. — Filtered event results
High fidelity · 05 of 7

Main events: results state interface in the Mood ticketing flow, demonstrating the high fidelity · 06 of 7 state. — Main events: results state
High fidelity · 06 of 7

Genre filter interface in the Mood ticketing flow, demonstrating the high fidelity · 07 of 7 state. — Genre filter
High fidelity · 07 of 7

↑ Back to case study contents

FLOW 04

Sign in to present a ticket at the door

A returning customer signs in, moves through events and account navigation, and opens a scannable virtual ticket.

Explore all 6 screens in this flow

Cover interface in the Mood ticketing flow, demonstrating the high fidelity · 01 of 6 state. — Cover
High fidelity · 01 of 6

Sign in: empty state interface in the Mood ticketing flow, demonstrating the high fidelity · 02 of 6 state. — Sign in: empty state
High fidelity · 02 of 6

Sign in: completed state interface in the Mood ticketing flow, demonstrating the high fidelity · 03 of 6 state. — Sign in: completed state
High fidelity · 03 of 6

Main events interface in the Mood ticketing flow, demonstrating the high fidelity · 04 of 6 state. — Main events
High fidelity · 04 of 6

Account interface in the Mood ticketing flow, demonstrating the high fidelity · 05 of 6 state. — Account
High fidelity · 05 of 6

Virtual ticket interface in the Mood ticketing flow, demonstrating the high fidelity · 06 of 6 state. — Virtual ticket
High fidelity · 06 of 6

↑ Back to case study contents

Process

The complete mid-fidelity prototype.

This earlier pass establishes screen hierarchy, navigation, form sequencing, filters, two purchase paths, account management, and the virtual ticket before visual refinement.

Explore all 26 mid-fidelity screensCollapsed by default to keep the final work easy to reach.

Cover interface in the Mood ticketing flow, demonstrating the mid fidelity · 01 of 26 state. — Cover
Mid fidelity · 01 of 26

Verification code interface in the Mood ticketing flow, demonstrating the mid fidelity · 05 of 26 state. — Verification code
Mid fidelity · 05 of 26

Account created interface in the Mood ticketing flow, demonstrating the mid fidelity · 06 of 26 state. — Account created
Mid fidelity · 06 of 26

Optional personal information interface in the Mood ticketing flow, demonstrating the mid fidelity · 07 of 26 state. — Optional personal information
Mid fidelity · 07 of 26

Personal information saved interface in the Mood ticketing flow, demonstrating the mid fidelity · 08 of 26 state. — Personal information saved
Mid fidelity · 08 of 26

Main events interface in the Mood ticketing flow, demonstrating the mid fidelity · 09 of 26 state. — Main events
Mid fidelity · 09 of 26

Filters open interface in the Mood ticketing flow, demonstrating the mid fidelity · 10 of 26 state. — Filters open
Mid fidelity · 10 of 26

Filters active interface in the Mood ticketing flow, demonstrating the mid fidelity · 11 of 26 state. — Filters active
Mid fidelity · 11 of 26

Individual event interface in the Mood ticketing flow, demonstrating the mid fidelity · 12 of 26 state. — Individual event
Mid fidelity · 12 of 26

Cart quantity selection interface in the Mood ticketing flow, demonstrating the mid fidelity · 13 of 26 state. — Cart quantity selection
Mid fidelity · 13 of 26

Added-to-cart state interface in the Mood ticketing flow, demonstrating the mid fidelity · 14 of 26 state. — Added-to-cart state
Mid fidelity · 14 of 26

Cart interface in the Mood ticketing flow, demonstrating the mid fidelity · 15 of 26 state. — Cart
Mid fidelity · 15 of 26

Checkout: contact information interface in the Mood ticketing flow, demonstrating the mid fidelity · 16 of 26 state. — Checkout: contact information
Mid fidelity · 16 of 26

Checkout: billing and card interface in the Mood ticketing flow, demonstrating the mid fidelity · 17 of 26 state. — Checkout: billing and card
Mid fidelity · 17 of 26

Checkout: review and terms interface in the Mood ticketing flow, demonstrating the mid fidelity · 18 of 26 state. — Checkout: review and terms
Mid fidelity · 18 of 26

Purchase confirmation interface in the Mood ticketing flow, demonstrating the mid fidelity · 19 of 26 state. — Purchase confirmation
Mid fidelity · 19 of 26

Direct checkout quantity selection interface in the Mood ticketing flow, demonstrating the mid fidelity · 20 of 26 state. — Direct checkout quantity selection
Mid fidelity · 20 of 26

Direct checkout: contact information interface in the Mood ticketing flow, demonstrating the mid fidelity · 21 of 26 state. — Direct checkout: contact information
Mid fidelity · 21 of 26

Direct checkout: billing and payment interface in the Mood ticketing flow, demonstrating the mid fidelity · 22 of 26 state. — Direct checkout: billing and payment
Mid fidelity · 22 of 26

Direct checkout: review and terms interface in the Mood ticketing flow, demonstrating the mid fidelity · 23 of 26 state. — Direct checkout: review and terms
Mid fidelity · 23 of 26

Direct purchase confirmation interface in the Mood ticketing flow, demonstrating the mid fidelity · 24 of 26 state. — Direct purchase confirmation
Mid fidelity · 24 of 26

Account interface in the Mood ticketing flow, demonstrating the mid fidelity · 25 of 26 state. — Account
Mid fidelity · 25 of 26

Virtual ticket interface in the Mood ticketing flow, demonstrating the mid fidelity · 26 of 26 state. — Virtual ticket
Mid fidelity · 26 of 26

↑ Back to case study contents

Source files

Inspect the original Figma work.

The website presents every frame as an accessible, navigable case study. The original files preserve the editable layouts and full canvas organization.

Open mid-fidelity file ↗Open high-fidelity file ↗