Labels

Application Design 1 | High Fidelity App Design Prototype

26/06/2025 - 28/07/2025
Nadia Chong Wen | 0355736 | Bachelor's of Design (Honours) in Creative Media
Interactive Design | Final Project: High Fidelity App Design Prototype

Table of Contents

  1. Instructions
  2. Final Project
  3. Reflection

Instructions

Final Project

We are required to create and integrate visual assets to refine the prototype into a complete working and functional product experience for this project. There are 6 requirements needed for this assignment that were assigned to us students.

  • Introduction
  • User Testing & Changes
  • UI Kit
  • Prototype Design
  • Gamification & Monetization
  • Flow & Interaction

Introduction

mmCineplexes is Malaysia's third-largest cinema circuit, known for its focus on value and comfort. It is operated by MM2 Screen Management Sdn Bhd, and its headquarters is located in Petaling Jaya, Selangor. The app offers facilitating bookings of seats in their movie theaters and feature offers that the users can get (Cinema Snacks, Discounts, etc.) and offering premium experiences for their users.

The cinema chain focuses on providing value and comfort which makes it an appealing choice for families, casual movie fans, and those looking for an affordable yet enjoyable cinematic experience.

User Testing & Changes

Here is a summary of the changes made from the user testing feedback.

A. Add working carousel to main posters

  • For this, I adjusted the animation on the material to be "dragged" in order to move the posters.
Figure 3.1 Adjusting Interactions

B. Some buttons don't work.

  • For this, I resolved to make sure that whatever button was connected to an existing page. Ones that are left blank doesn't have an existing page.
  • I also noticed in the playtest and going through my own walkthrough that some buttons are bugged to show different animations. That is fixed now.
Figure 3.2 Making Interactions

C. Add more color accents.

  • As I did the user testing for lofi, there were not many colors on the app itself. The colors and accents will be covered in the next part.

UI Kit

Colors

For the redesign, I decided to use the primary colors and secondary shades of the brand in order to color the application as a whole. I realised halfway through putting purple, black, and white might not be enough so I decided to test it out with the other colors and found that they work really well. As a result, these were the colors I have chosen.

Figure 3.3 Colors

Layout & Grid Size

As it was recommended to us to use the latest version of an iPhone, I ended up using the iPhone 16 Pro Max as a base and columns as my guide to the placement of elements in the frame.

Layout Size:

  • Width: 440px
  • Height: 956px

Grid:

  • Column Count: 10
  • Type: Stretch
  • Gutter: 20
Figure 3.4 Layout and Grids

Figure 3.5 UI Kit Figma

Gamification / Monetization

Since it is necessary for us to include some gamification elements and monetization elements for our redesigned app. So I decided to go for this. 

A. Gamification

Figure 3.6 Points System

For gamification, I decided to go with a points system which allows users to collect points from their use of the app and purchases that will garner them rewards such as free snacks/drinks, upgrades to seats, etc.

B. Monetization

Figure 3.7 Monetization

I decided to include ads on promotions that will occasionally appear as you use the app and its services. The promotions page also serve as a page that is able to hold monetized elements.

Flow & Interaction

Figure 3.8 Purchasing Ticket

Purchasing Ticket:

  1. Tap on Poster
  2. Select Experience and Time
  3. Select Seat & Press Confirm
  4. Continue to Press Confirm
  5. Scroll down to three Payment methods
  6. Select Payment Method
  7. Loading
  8. Confirm and press "Next"
  9. Brought to Purchases Tab
Figure 3.9 Optional Purchasing Snacks

Optional Purchasing Snacks:
  1. Select Snack by pressing on image
  2. Tap on Drink wanted
  3. Button turns purple and you can press confirm
  4. Price total increases
  5. Select Payment Method
  6. Loading
  7. Confirm and press "Next"
  8. Brought to Purchases Tab
Figure 3.10 Checking in

Checking In:
  1. Select available purchase
  2. Allow for scan of QR Code
  3. Loading
  4. Confirmation

Final Compilation

Figure 4.1 High Fi App Design Prototype

Figure 4.2 High Fi App Design Prototype Flow

High Fi Prototype Video can be found here.

High Fidelity App Design Prototype by Nadia Chong Wen

Reflection

It was really hard to pinpoint what needed to be changed since many of the user testers seemed content with the process of going through the application.

Labels:

Comments

Post a Comment