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.
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.
Week 1 - 7 Ng Zheng Kai 0359424 Intercultural Design / Bachelor of Design in Creative Media (hons)` Project 1, 2 & 3: Hanhaba Obi INSTRUCTIONS A proposal to concretise ideas, supported by research, for a final design revolving a given theme that reflects students’ understanding and interpretation of global issues and design aesthetics. The general theme is “Cultural Sensitivity in Design” You are to study a cultural phenomenon, or a particular subculture that is perceived as ‘sensitive’, and “frame” your study within the chosen theme. You are to convey this cultural aspect without altering the actual facts but within a presentable interpretation and adaptation that raises awareness from the viewers. Produce some preliminary ideas on how to visually express you interpretation using design language. Each idea is to be supported by a short ratio
21/9/2023 - 7/11/2023, Week 5 - Week 11 Ng Zheng Kai / 0359424 Advanced Typography / Bachelor of Design in Creative Media (Hons) Task 2: Key Artwork and Collateral LECTURES All lectures are completed in Task 1 INSTRUCTIONS Task 2A: Key Artwork Sketch For my key artwork, I am going for a graffiti bubble style font. Because I want to give off a sense of a chill and friendly vibe for my key artwork. Fig 1.1 Sketch Digitalize Fig 1.2 Image Trace Fig 1.3 Word Digitalization Color Palette Fig 1.4 Color Palette For my color, I decided to choose a bright and vibrant color palette. Final Design Fig 1.5 Final Design (JPG) (B&W)
Ng Zheng Kai Interactive Design / Bachelor of Design in Creative Media (Hons) Project 2 - Working Web Page INSTRUCTIONS Project 2 - Working Web Page The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes. Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes do
Comments
Post a Comment