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 Oct - 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
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.
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.
Doing quite well and receiving positive feedback.
Not satisfied with the 2021 UX/UI Design
Unfriendly User Interface
Unintuitive User Flow
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.
Poor Navigation
Solution 1
Eliminate repeated and unnecessary information.
Use clear and concise labels and page titles.
Poor Navigation
Before & After Comparison
Home Page
User Flow - Find the restaurant discount
Before
After
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.
Inconsistent Design
Solution 2
Typography & Color Palette
Redesign visual components
Ensure consistent page structure between the web and app versions
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.
Poor Accessibility
Solution 3
Increased accessibility, including aligning text to the left, adding an icon, highlighting the CTA button, and restructuring the visual hierarchy.
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
Development & Collaboration
Front-End Programming
Deploy and Manage the app
Reflection
My Impact
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
Reflection
Feedbacks From my Co-Workers
