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

01/07/2024 - 02/08/2024
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
Application Design 1
Project 3


INSTRUCTIONS






Project 3

In this project, we are to create a low fidelity prototype on the app that we have chosen. The purpose of a lo-fi prototype is to explore and validate ideas, ensuring that it is aligned with user needs and goals. 



Exploring Ideas & learning the ropes

Fig 1.1 References





Prototyping

After being familiar with the app, I started by creating a frame based on the dimensions of an iPhone 14 & 15 Pro Max.

Fig 1.2 Frame sizes

Then, I make sure to apply scroll behavior to pages that need vertical/horizontal scrolling.
Fig 1.3 Scroll Behavior

The UI kit that I used is conveniently built for flight apps (Link: https://www.figma.com/design/o0NMWL5EMCJeFHumQFb4aM/Flight-Booking-App-UI-Kits-(Community)?node-id=201-1787&t=Joj4t41CGvLLxPsh-1)

Fig 1.4 UI Kit

Then, I proceeded by creating the subsequent pages. 

Fig 1.5 Homepage


Fig 1.6 Signup page


Fig 1.7 Destination Selection page


Fig 1.8 Date Selection page


Fig 1.9 Flight Selection page

Fig 1.10 Seat Selection page

Fig 1.11 Flight Review page

Fig 1.12 Payment page

Fig 1.13 Boarding Pass page


After a total of 42 frames have been created, I started to link all of them and creating animations to complete the prototype.

Fig 1.14 User flow interaction

User Testing & Scenarios

A total of 3 different scenarios have to be created for users to do in the prototype.

Scenario 1: Sign Up
Imagine you just installed this Firefly app, and you need to create a new account, input your name, address, and mobile number, and after you have created your new account, log in and navigate to the main menu.

Scenario 2: Book a Flight

Now, make a flight booking in the app. From the menu, navigate to the flight booking page, book a one way flight from Kuala Lumpur to Alor Setar. Then, choose 1st January 2024 as the date. Next, select the 12:00 to 13:06 flight and select Seat 1B as your seat. Review your flight info, then input your card details and make payment. Once you have made payment, you can view and download your boarding pass.

Scenario 3: Check Bookings

Now that you've made a booking, you can check the boarding pass again by navigating to the "Manage Booking" page. This convenient way of accessing your boarding pass saves up the hassle of manually inputting reference numbers to gain access to boarding passes. Using your boarding pass, you can now travel seamlessly and stress free.

Below are the user testing recording of each three scenarios given to each different person.






Final Submission


Fig 1.15 Figma Preview


Lo-Fi prototype link: https://www.figma.com/proto/QAhEKlcEJVsMC4TMYJid5N/Prototype-(Firefly-Airlines)?page-id=0%3A1&node-id=1-18&viewport=634%2C500%2C0.09&t=73NjIHMSGO5PtVRK-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=165%3A306&show-proto-sidebar=1


Fig 1.16 Lo-Fi Prototype


Fig 1.17 User Feedback

Fig 1.18 Video Walkthrough of Lo-Fi prototype


Comments

Popular posts from this blog

Intercultural Design

Experiential Design: Exercises

Experiential Design: Project 1