top of page
Group 967 (1).png
San Francisco Fleet Week Mobile App ⎮ App Design

As an app developer and designer at the San Francisco Fleet Week Association, I created and revised a mobile app for SFFW. To achieve this, I identified previous UX issues and summarized them to set project goals. I collaborated with different departments to solve app issues and improve it. After several design iterations, I deployed the final app version. I am proud of this project because I turned many negative comments into positive ones through before and after user testing and feedback. This demonstrates my success in dealing with design problems and improving the app. That is why I am proud of this internship project to build an app that satisfies users.

About The App:
The San Francisco Fleet Week Mobile App lets you search schedules, tickets, and discounts instantly and conveniently.

My Role

App Developer & Designer


5 months (Jun - Oct 2022)


Diana / Product Manager 
Michael /Senior Engineer 
Barbara / Volunteer Coordinator

Tool Used

App Machine, Photoshop, Illustration,Figma, Excel

My Impact
  • Collaborated with design peers and cross-functional teams to clarify app functionality and establish design direction.

  •  Modified HTML and CSS code to implement customer-facing mobile app UI on Android and iOS.

  • Managed deadlines and ensured timely project delivery by maintaining open communication.

  • Designed visual components, such as background images and icons, with a consistent style using Figma.

Current Problems & Approaches 

Usability, Accessibility, Desirability, Credibility

Task Flow

  • Tester spent almost 7 minutes searching for information about restaurant military discounts.

Task Flow



  • Difficulty finding military discount information.

  • Unrelated and redundant categories and information.


  • Restructure the information architecture to show a clear and easily accessible interface.

Small font size, confusing visual hierarchy



  • White font on light-colored background strains eyes.

  • Small font size challenges readability.

  • Confusing visual hierarchy.


  • Enhance font size and contrast.

  • Revamped visual hierarchy design.

Outdated Gray Color Scheme & Inconsistent Design Detailsg
Monotonous Page Style



  • Outdated gray color scheme.

  • Inconsistent design details.

  • Monotonous page style.


  • Update color scheme to modernize app design.

  • Establish font and color consistency.

  • Create distinct visual styles for pages.



  • Annual updated for information accuracy.


  • Ensure annual information updates for accuracy.

Annual Updates for Information Accuracy

Implement and revise design based on approaches

Increase Usability

I plan the information architecture to make the app user-friendly. This includes creating a clear sitemap and removing any unnecessary or outdated information. I also work with the product manager to ensure consistent menus and clear titles for easy navigation and improved user experience.

Eliminate unnecessary information

Restructure the information architecture - Site-Map

Organize the content

Consistent menus and Clear titles

Increase font size & Align left & Highlight CTA buttons & Increasing Line Height
Increase Accessability

To create a user-friendly app, I take various measures to enhance readability and accessibility. These measures include increasing the font size, aligning paragraphs to the left side, highlighting CTA buttons, and increasing line height. By implementing these design elements, users can easily read and navigate the app.

Increase Desirability

To make the app more user-friendly, I improved its clarity and navigation. I did this by creating unique background images and navigation styles to differentiate pages and make it easier for users to quickly find information.
I ensured consistency by using the same size and style for all icons, including the "Ships" and "Air show" buttons. This created a cohesive visual identity and helped users easily recognize key features and functions.

Group 1048.png
Increase Credibility

To ensure accurate updates, I use an Excel file from the product manager that includes tab and page names and content that needs changes. If there are unclear tasks or lacking information, I note them down. Once I complete the list, I sign my name and the date. To improve efficiency, I prefer to organize and summarize information, such as the red rectangle part.

Organize and summarize
Final Design
Group 911.png
Takeaways & Next Steps
Group 991.png
Future Improvement of the App
Group 974.png
What I Learned
Group 1050 (1).png
bottom of page