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
Exploring Ideas & learning the ropes
Prototyping
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.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.
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
Comments
Post a Comment