Application Design 2 / Task 1

22/4/2024 - 18/5/2025 (Week 1 - Week 4)
Shawn Wong Kai Hen / 0375372
Major Project 1 / Bachelor of Design (Hons) in Creative Media
Application Design 2 - Task 1



 INTRUCTIONS 




 Week 1 - Review previous work 

Application Design 1 / High-Fi Prototype

Application Design 1 / High-Fi Work File


  Week 2 - Identified Issue  


We have been assigned a task by Mr. Razif to revisit the application design developed in the previous semester. As part of this task, we are required to take screenshots of our app and submit them to ChatGPT in order to receive professional feedback. The objective is to evaluate the design’s strengths and weaknesses, particularly in terms of user interface (UI) and user experience (UX), and to identify areas for improvement.


Here are the feedback below:


Analysis Feedback - 27/4/2025

  Week 3 - Refinement Process  

Fig 1.1 Refinement Process 1 - 8/5/2025

As part of the initial design process, I began refining the homepage, movie page, and details page. One of the first major changes I made was shifting from a light-themed background to a darker theme. I felt the previous light background appeared too plain and lacked visual appeal. I chose a dark blue background to create a more engaging look, and I incorporated opacity variations for depth. A light red accent color was used for buttons and key interactive elements to clearly indicate selection and clickability.

To streamline the interface, I removed less essential features—such as the "Select Cinema" and "Categories" sections from the homepage—to achieve a cleaner, more minimalist design. Similarly, on the movie page, I removed the categories and seat display at the top, as they cluttered the layout with too much information. For the details page, I significantly reduced the amount of text and enlarged the poster image to create a more focused and visually appealing layout. These changes aim to improve clarity, visual hierarchy, and overall user experience.


Fig 1.2 Refinement Process 2 - 11/5/2025

For these remaining pages, I focused on making minimal adjustments. Since these screens mainly guide users through seat selection and confirmation of information, I wanted to keep the experience straightforward and uncluttered. The primary changes involved updating the background and text colors to match the new dark theme for consistency across the app. I avoided adding unnecessary elements to ensure users can navigate these steps smoothly without confusion.

  Week 4 - Final Showcase  


Fig 1.3 Final Showcase - 16/5/2025

Here is the final showcase of my redesigned app. To make it easier to compare the previous and updated versions, I’ve separated the "before" and "after" designs. Below, I’ve also outlined some key design improvements for a clearer understanding of the changes made. Feel free to explore the updates and see how the redesign enhances the overall user experience.

1. Visual Design

  • Before: Light theme, looks plain and a bit outdated. Low contrast makes things hard to see.

  • After: Dark theme with bold colors. Looks modern, stylish, and more like a movie app.


2. Navigation & Flow

  • Before: Bottom icons are dull. Hard to tell which screen you’re on. Screens feel disconnected.

  • After: Clear red highlights show where you are. All screens follow the same style.


3. Readability

  • Before: Text is small and blends into the background. Important info doesn’t stand out.

  • After: Bigger, clearer text. Red and white colors highlight key details.


4. Key Screens

  • Home Page

    • Before: Crowded, too much going on.

    • After: Clean layout, movie posters stand out.

  • Movie Details

    • Before: Text-heavy, small trailer.

    • After: Large image, simple info layout.

  • Seat Selection

    • Before: Basic and boring.

    • After: Bright red highlights, clearer layout.

  • Checkout & Payment

    • Before: Dull grey layout.

    • After: Clear pricing, bold red buttons.

  • My Orders & QR Ticket

    • Before: Text-heavy, no visual punch.

    • After: Card-style layout, large ticket image.


5. Overall

  • Before: Basic and functional, but not exciting.

  • After: Polished, modern, and user-friendly. It feels like a real product.


  Final Showcase Presentation Video  




  REFLECTION  

Experience
During the APP II design assignment, I hit a creative roadblock. Since most major usability and visual design challenges had already been resolved during the APP I phase, it was difficult to pinpoint new areas for improvement. To push past this plateau, I turned to Chat for insights. The analysis highlighted the critical role of animation and motion design in capturing user attention within the initial 1–3 seconds. This prompted a shift in my focus—realizing that even subtle refinements in interaction timing and visual feedback can significantly elevate the user experience, especially when the foundational layout is already well-developed.

Findings
Another insight emerged when reviewing the app’s color system. Since the app focuses on public transport, I used a variety of official route colors that are already defined. I asked Chat to help evaluate the color contrast and accessibility, and it flagged several issues—particularly with button contrast not meeting WCAG standards. I confirmed these manually and realized the challenge: the route colors couldn’t be changed, as they represent real-world transit codes. This experience highlighted a key tension between ideal accessibility and real-world limitations. It reminded me that good design sometimes means finding balance rather than perfection. Going forward, I’m more aware of edge cases like this and the need to provide visual alternatives when color flexibility is limited.

Observations
Some of the redesign exercises in class brought back my understanding of layout and usability principles. One task that stood out was redesigning a flight ticket—it felt especially engaging because I had worked on something similar during an internship a few years ago. It reminded me that effective design isn’t just about how things look, but also about how clearly and efficiently information is presented. I also picked up a new technique during this task: the prototype flow chart. Unlike standard flowcharts, this method includes thumbnail sketches of key screens at each decision point. It gave a clearer picture of the user journey and helped visualize the overall structure of the app in a more intuitive way.




Comments