San Francisco Fleet Week Mobile App ⎮ App Design
Overview:
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
Timeline
5 months (Jun - Oct 2022)
Team
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.
.png)
Usability
Problem
-
Difficulty finding military discount information.
-
Unrelated and redundant categories and information.
Approaches
-
Restructure the information architecture to show a clear and easily accessible interface.
Accessibility
Problem
-
White font on light-colored background strains eyes.
-
Small font size challenges readability.
-
Confusing visual hierarchy.
Approaches
-
Enhance font size and contrast.
-
Revamped visual hierarchy design.
Desirability
Problem
-
Outdated gray color scheme.
-
Inconsistent design details.
-
Monotonous page style.
Approaches
-
Update color scheme to modernize app design.
-
Establish font and color consistency.
-
Create distinct visual styles for pages.
Credibility
Problem
-
Annual updated for information accuracy.
Approaches
-
Ensure annual information updates for accuracy.
Design
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.
Restructure the information architecture - Site-Map
Consistent menus and Clear titles
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.
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.
Final Design
Takeaways & Next Steps
Future Improvement of the App
What I Learned
.png)