Application Design 1 - Project 3: Low-Fi App Design Prototype

- July 26, 2025

15.06.2025 - 29.06.2025 / Week 10 - Week 12

ZHANG HANYUAN / 0369727

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

Project 3: Low-Fi App Design Prototype

INSTRUCTION

Project 3/ Lo-Fi App Design Prototype

Instructions:

Once the UX design process is completed, can now create a low fidelity prototype of the app. We needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s.

We are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.

We need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.

Requirements For This Task

1. Visual Design Concept:

Develop a visual design concept that aligns with the branding of your application. This concept should include color schemes, typography, and imagery that convey the desired look and feel of your application.

2. Wireframes:

Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.

3. Deliverables:

Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design in your e-portfolio

WEEK 10-11/ UI Kit & Wireframe

1. UI KIT

Before starting the creation of the Easybook low-fidelity prototype, I developed a UI Kit that includes a color scheme, typography, iconography, and grid system on the first page. Since Figma has a page limit for free users, I allocated one page for the UI Kit, the second page for the low-fidelity prototype, and the third page for the final design.

2. References

I downloaded several other movie ticketing apps, such as WANDA, MAOYAN, and TGV, to study their design and layout. These apps showed efficient design and workflow, providing valuable references for the GSC project.

Made a low-fidelity (current) GSC app for comparison

3.Sketch

4.SITE MAP

5. Design process

After completing the UI/UX documentation, I began developing a low-fidelity prototype for the GSC app. My design philosophy focused on ensuring high readability.

1. The original homepage layout used a left-right scrolling widget to display popular movies and upcoming releases. However, I quickly discovered that this horizontal scrolling widget easily obscured information on small mobile screens, blurring the visual focus and preventing users from quickly grasping the key content. Therefore, I decided to separate the popular movies and upcoming releases sections into upper and lower sections, arranged vertically like cards. This made them easier to browse and increased click-through rates.

2. Many designs simply end the process after "Payment Successful," but I believe considering failure scenarios is crucial for improving the user experience. Therefore, I added a "Payment Failed" feedback page and designed a clear back button. This small change improves the system's fault tolerance.

3.While creating the "FOOD & DRINK" page, I accidentally locked a component's layer and nested it within a Frame. As a result, the outer layer wouldn't be selectable when clicked, and I couldn't figure out the cause. Finally, after troubleshooting each component individually in the Layers panel, I discovered it was caused by locking the component within itself. This reminds me to always pay attention to layer states when nesting components, and to name them appropriately to avoid hierarchy confusion.

4.During the low-fidelity phase, I used different gray and black and white color schemes, which made the images look inconsistent. After the teacher pointed this out, I unified the color scheme and changed everything to black and white, with only a few gray accents. I also ensured that the text size was consistent to avoid user perception errors between different pages.