top of page
Slide 16_9 - 1 2 (1).png

San Francisco Fleet Week Mobile App - Full Time Job

An entertainment application that helps attendees to follow and obtain up-to-date information about the air show event held in San Francisco.

My Role

App Developer and Designer

Timeline

2022 Jun - 2023 Nov

Type

User Experience Design

User Interface Design

Mobile App Design

Mobile App Development

B2C Project

Tools Used

Figma, Front-End Programming, App Machine

Team

Lewis / Executive Director
Diana / Chief of Staff
Michael /Senior Engineer
Tre / Concert Series Coordinator
Barbara / Volunteer Coordinator
Others

Overview

Overview

My Role

I develop and design the app for San Francisco Fleet Week's annual air show event, which attracts over 1 million attendees each year. I am mainly responsible for finding UX problems, providing better design solutions, redesigning visual components, translating my design ideas into code, and deploying and managing the app.

Design Process

our approach.png

About The Air Show

The San Francisco Fleet Week Air Show, held annually between the Golden Gate Bridge and Alcatraz and presented by United, attracts over 1 million fans from all over the globe.

Group 1337.png

My Original Duty

Update the annual information, including the ticket, showtime, discount stores, and other relevant details.

Using Google Docs to summarize and organize the information I need.

Group 1340.png

Doing quite well and receiving positive feedback.

Group 1339.png

Not satisfied with the 2021 UX/UI Design 

Unfriendly User Interface

Unintuitive User Flow

Group 1365.png

Current Problems & Design Implementations

I was dissatisfied with the app's user experience when I joined the team due to its unfriendly user interface and unintuitive user flows. To address this, I prototyped my initial designs, estimated the required time, and proposed them to the director. After several rounds of discussion, we agreed on the necessary time and effort. I will explain three main improvements in my design process.

Problem 1 | Poor Navigation

I was dissatisfied with the app's user experience when I joined the team due to its unfriendly user interface and unintuitive user flows. To address this, I prototyped my initial designs, estimated the required time, and proposed them to the director. After several rounds of discussion, we agreed on the necessary time and effort. I will explain three main improvements in my design process.

Group 1115.png

Poor Navigation

Solution 1

Eliminate repeated and unnecessary information.

Group 1346.png

Use clear and concise labels and page titles.

Group 1348.png

Poor Navigation

Before & After Comparison

Home Page

Group 1351.png

User Flow - Find the restaurant discount

Before

Group 1353.png

After

Group 1352.png

Outcome 1 | Intuitive User Flow

Now users can find the restaurant discount within the app in less than one minute.

Problem 2 | Inconsistent Design

Inconsistent design elements, such as icons, background images, and variations between web and app versions, can confuse and frustrate users.

Group 1385.png

Inconsistent Design

Solution 2

Typography & Color Palette

Group 1386.png

Redesign visual components

Group 1387.png

Ensure consistent page structure between the web and app versions

Group 1375.png

Outcome 2 | Consistent Design

This reduces cognitive load, saving users time and effort while also enhancing visual appeal.

Problem 3 | Poor Accessibility

The lack of visual hierarchy, excessive content, small font size, and absence of images make reading difficult for users.

Group 1378.png

Poor Accessibility

Solution 3

Increased accessibility, including aligning text to the left, adding an icon, highlighting the CTA button, and restructuring the visual hierarchy.

Group 1380.png

Outcome 3 | Good Accessibility

Accessible design enhances usability, reduces frustration, and improves user satisfaction, leading to a better overall user experience.

Comparison 2022/2023 Version

Group 1382.png

Development & Collaboration

Front-End Programming

Group 1389.png

Deploy and Manage the app

Group 1388.png

Reflection

My Impact

Reflection

After our improvement, let's take the restaurant discount as an example again: now users can find the restaurant discount within the app in less than one minute, which is a significant improvement in user experience. One of my friends also told me that the app is much more useful after my redesign.

Reflection

Our Team

Group 1196.png

Reflection

Feedbacks From my Co-Workers

Group 1384.png
SFFW 3 (1).png
bottom of page