Application Design I--Final Project High-Fi App Design Prototype

 25.06.2025 - 01.08.2025 / Week 12 - Week 15

ZHANG HANYUAN / 0369727

Application Design I / Bachelor of Design (Hons) in Creative Media

Final Project High-Fi App Design Prototype

INSTRUCTION 

Final Project/High-Fidelity App Design Prototype

Description:

For this final project, we will create a high-fidelity prototype for our mobile app. The prototype should showcase the final visual design, interactions, and functionality of the app. The high-fidelity prototype will be a realistic representation of our app, allowing users to experience and provide feedback. It should showcase a polished user interface and adhere to the branding and usability principles established throughout the design process.

Requirements for this assignment:

1. Visual Design:

Implement the final visual design concepts you created in the previous assignments. This includes color schemes, fonts, icons, and any other visual elements that contribute to the overall look and feel of the app. Pay attention to detail and ensure consistency across all screens.

2. Interactions and Transitions:

Bring your app to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural and fluid experience within the app.

3. Functionality and Navigation:

Implement the core functionality and navigation of the app. Make sure all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components unique to the app.

4. Content Integration:

Populate realistic content in the prototype to demonstrate how the app will look and feel with real data. Use representative content and consider different scenarios to showcase various features and interactions in the app.

5. Usability Testing:

Perform usability testing on high-fidelity prototypes to validate the design and collect user feedback. Recruit participants who match the target audience and observe their interactions and feedback. Note any usability issues or areas for improvement. Testing requires at least 5 participants.

1. Colour Palette 

I use the [Color Shades Finder] platform to better color match. I can enter a primary color and it will give me multiple tint and shade options.

UI KIT For Final Project

2. Design Progress

3. Usability Testing

User Feedback & Improvements

In order to evaluate the usability of the GSC application, I invited three classmates to participate in the test. During the test, users accessed the prototype interface through the Figma App on their mobile phones, and the testers operated independently to simulate the real usage scenario.

Summary of observations and feedback from usability tests:

Optimization of navigation bar color scheme

In order to improve the visual hierarchy of the interface and the efficiency of user recognition, it is recommended to introduce a complementary color matching strategy in the navigation bar to enhance the attractiveness of the interface and assist users to identify the current module more quickly.

Optimization of operation button color

In the ticket purchase-seat selection page and the meal selection page, the current "Continue" and "BUY TICKET" buttons lack obvious visual distinction. It is recommended to use functional color matching for the buttons. 

For example:

In the page where you can swipe down to view more content, the "Continue" button can use black + yellow high contrast colors to enhance its operational guidance.

In order to avoid blocking the core information content of the page, the currently used semi-transparent button style can be retained to achieve a visual balance between the operation prompt and the information display.

Interaction response adjustment

Feedback during the test pointed out that the prototype click feedback was too sensitive, resulting in an unnatural user experience. It is recommended to appropriately delay the button response time or increase the transition effect to improve the controllability and smoothness of the click and avoid accidental touches.

Amendments after receiving feedback from users:

After Improvement - Navigation Bar + Icon

Modify the color, "lemon yellow" - extracted color (GSC LOGO)

All prototypes placed

Final Outcome

Final Project: High Fidelity App Design Prototype

View in Figma:

Link to Figma file 

https://www.figma.com/design/dNjacLlAqwNNRywBJWC7MQ/GSC?node-id=0-1&t=8yUkdkybkG51j8XD-1

Link to Figma 

https://www.figma.com/proto/dNjacLlAqwNNRywBJWC7MQ/GSC?node-id=102-460&p=f&t=m7WxFr4MG7I9Bj4b-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=102%3A460

Instructional Videos

Reflection

Finally, I entered the final stage! Because I didn't lay a good foundation during the low-fidelity prototype, I was not rigorous in the final high-fidelity design. The size of the button, font size and layout were not rigorous. In the last class, when I got offline feedback, Mr. Sylvain suggested that I modify all the colors and fonts, because my bright colors had nothing to do with the LOGO itself, and there were too many font sizes, which made the overall feeling messy. In the process, I also received many improvements from Mr. Sylvain.

The main colors of this app are black and yellow, and I decided to use this combination. After consulting Mr. Sylvain and getting his advice, I started to adjust all the colors.

By adding color, I found that using a contrasting yellow can better highlight key elements, such as the payment, check-in and continue buttons. This makes it easier for users to navigate the app. I realized that not only the size of the button, font size and layout are important, but the choice of color is also crucial to the overall app design.

Finally, this module was an unforgettable experience for me. It was great to be able to create an app from scratch. From Mr. Zeon's feedback at the proposal stage to Mr. Sylvain's change of instructor later, I made the final design perfect step by step. I made progress step by step and felt very satisfied and happy. Every step strives to achieve the final effect, which makes me feel extremely satisfied. I am very grateful to my instructors, Mr. Sylvain and Mr. Zeon, for their patience, continuous progress updates and valuable suggestions.