Application Design I - Project 3: Low Fidelity App Design Prototype

6.10.2023 - 19.11.2023 (Week 6 - Week 12)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application Design I
Project 3: Low Fidelity App Design Prototype

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1nxyvAjMX46s2ZEC2w2n8V9ghiu2ezfLI/preview" width="640" height="480" allow="autoplay"></iframe>

PROJECT 3

Low Fidelity Prototype

Instruction

In this task, we were assigned to create a low-fidelity prototype for our chosen mobile application. This prototype should include wireframes and a visual design concept aligned with the branding of the application. The purpose of this task is to test and validate the user flow and user experience of the application before progressing to higher-fidelity prototypes. Creating a low-fidelity prototype enables us to quickly iterate on our design and make necessary adjustments based on user feedback.

Requirements For This Task

Visual Design Concept:

Develop a visual design concept that aligns with the branding of your application. This concept should include color schemes, typography, and imagery that convey the desired look and feel of your application.

Wireframes:

Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.

Usability Testing:

Conduct usability testing on your low-fidelity prototype to validate the user flow and user experience. You can recruit friends, family, or classmates to test your prototype and provide feedback. Make sure to document the feedback and use it to iterate on your design.

Deliverables:

Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design in your e-portfolio

1. Wireframe

After completing the previous task, which involved preparing the UI/UX document, I proceeded to develop a low-fidelity prototype for the Batik Air application. To begin, I downloaded several other airline apps, such as Malaysia Airlines, AirAsia, and Singapore Airlines, to study their design and layout. These apps exhibited effective design and workflow, serving as valuable references for application to the Batik Air project. Additionally, I explored online projects and portfolios related to airline app design, taking time to understand their creation processes and examine the final products. Before initiating the construction of the low-fi prototype in Figma, I turned to YouTube to refresh my knowledge and gather useful tips for prototype building in Figma.

Below are some YouTube tutorials which I found very helpful:

Below are the references to the layout and flow of an airline app:

Fig. 1.1 - References for airline app

2. Process of Designing the Prototype in Figma

Having watched several YouTube tutorials, I feel quite familiar with the Figma software. The process of developing the prototype in Figma turned out to be smoother and easier than I initially thought. The only aspect that consumed most of my time was designing the app's interface, particularly the book flight pages. Given the numerous steps involved in booking a flight, such as selecting the destination, date, number of passengers, choosing seats, picking the cabin class, and so on.

To begin, I set the frame size for a mobile device and applied a layout grid with 4 columns, 25 for margins, and 8 for gutters. With the guidance of the layout grid, designing the app's interface becomes more manageable for me.

Fig.2.1 - Layout Grid

For iconography, I decided to use a plugin-free template in Figma, which really saved me time as I didn't need to draw it myself.

Fig. 2.2 - Iconography

For the home page, there will be a bunch of content, so I decided to implement horizontal scrolling for specific sections, such as recent searches. Additionally, I will create vertical scrolling for the entire home page to make the interface appear more organized. Here are the steps to create a scrolling effect:

Ensure all content is aligned and arranged accordingly.
Select the elements and create a frame for them.
Adjust the frame to fit the user's viewing area.
Ensure the frame is checked for clip content.
Switch to the prototype tab, and select the scroll behavior as either horizontal or vertical.

Fig. 2.3 - Arranged the content accordingly

Fig. 2.4 - Apply scrolling effect

And the next step is to proceed with designing each of the pages.

Fig. 2.3 - On Boarding and Login Page

Fig. 2.4 - Home Page

Fig. 2.5 - Check-in Page

Fig. 2.6 - My Trips Page and More Page

Fig. 2.7 - Book Flight Page

Fig. 2.8 - Select Flight Page

Fig. 2.9 - Passenger Details Page

Fig. 2.10 - Review Booking Page, Seat Selection Page, Payment and E-ticket Page.

After completing the design of the interface with a total of 25 canvas, I proceeded to link and create animations for them to ensure a smooth workflow.

Fig. 2.11 - All designed pages

Fig. 2.12 - User Flow Interaction

Click HERE to access Figma file

3. Usability Testing

Moving to the next phase, which is usability testing, I created three scenarios/tasks with detailed descriptions that required users to perform specific actions within the application.

Fig. 3.1 - User's view during usability testing, with tasks indicated on the left.

Task Given:

Scenario 1: Logging into the Batik Air App

As a user, imagine you've just downloaded the Batik Air app, and your first task is to log in. Open the app and navigate to the login screen. Enter your registered email as the username and your password. After successfully logging in, explore the app's features and functionalities.

Scenario 2: Booking a Flight Ticket

Now, imagine you are planning a trip using the Batik Air app. Your task is to book flight tickets for your upcoming travel. Start from the app’s home page; find and navigate to the "Book Flight" page. On this page, select your departure flight from Penang to the arrival city Kuala Lumpur. Choose a one-way ticket for November 19, 2023, and select a specific passenger, opting for a business class seat. Next, search for available flights, review the options, and fill in your personal details. Finally, proceed to make the payment. Once you've confirmed your payment, you can easily check and download your virtual ticket.

Scenario: Online Check-In

In this scenario, picture yourself as a traveler eager to perform an online check-in for your upcoming Batik Air flight. Within the app, locate and navigate to the dedicated check-in page. Enter your booking details and seamlessly follow the prompts to complete the online check-in process. Upon successful completion of the check-in, the app promptly delivers your online boarding pass. This convenient digital pass not only saves you the hassle of physically registering or checking in but also enhances the efficiency of your travel experience. Now, equipped with your virtual boarding pass, you're all set to embark on a stress-free and enjoyable journey.

Below is the video walkthrough of the low-fidelity prototype, demonstrating how users perform tasks in the application.

YouTube Link: https://youtu.be/1MpWAUBrFcE

4. User Feedback

I collected feedback from three participants through online video calls. I apologize for not being aware that I needed to record the process of user testing; I only realized this after being reminded by Mr. Shamsul. I will ensure that this mistake does not happen in the high-fidelity prototype phase. However, I have prepared a set of questions to ask the respondents after they complete the user testing. Please refer to below the doc for a summary of user feedback:

Fig. 4.1 - User Feedback from 3 respondents

Summary of improvements based on user feedback:

Consider replacing the main darker button, labeled 'Get Started' with 'Log In' as the login feature is crucial. Placing it at the bottom makes it less noticeable. Alternatively, changing the 'Skip' button to 'Get Started' is an option.
Improve the visibility of the slider indicating multiple pages. Consider using dots or lines to make it more obvious.
When selecting the date for a flight in the calendar, consider including the price below each day. This feature can assist users in comparing prices across different months or weeks.
Explore adding information about the member card for collecting points and displaying the accumulated points value.
Enhance the initial user experience by having the app logo appear first before entering the boarding page upon entering the app.

5. Improvements

Based on user feedback, I have made some minor changes to the onboarding page, clarifying the name of the button for better clarity. Below are the changes:

Fig. 5.1 - Improvement on the Onboarding Pages

To enhance the participants' user experience, I decided to add the typing feature with a keyboard to make the app look more realistic.

Fig. 5.2 - Typing feature on Login Page

Fig. 5.3 - Typing feature on Check in Page

Fig. 5.4 - Typing feature on passenger details Page

For the flight booking page's date selection, initially, I did not make it active for users to click. After getting suggestion from Mr. Shamsul, I searched for YouTube tutorials to learn how to use variants for date selection. I also made some changes to the layout, as the initial design did not include month selection.

Fig. 5.5 - Date Selection

For the cabin class and number of passengers selection, I was confused about creating the plus and minus counter interactive animation. However, after watching a tutorial, I realized it's the same process as the previous step, using variants.

Fig. 5.6 - Plus and Reduce Counter Animation

For the review booking page, I decided to add the baggage selection feature, and I also changed the color of both the baggage selection and seat selection to a lighter shade to indicate that the user hasn't clicked into those sections yet.

Fig. 5.7 - Review booking page

To ensure a clear and organized layout for the baggage selection page, I created a drop-down menu with options for users to select. Below are the tutorials I learned from:

Fig. 5.8 - Dropdown Menu for baggage selection

Similar to the previous date selection, I initially did not make it active for users to select, so I used variants to create the seat selection.

Fig. 5.8 - Seat Selection

After users complete their payment and return to the homepage, I have added a badge to the notification icon. Users can click on it to be directed to their inbox, indicating their confirmation order.

Fig. 5.9 - Added Inbox Page

6. Color Theme & Typography

Color Theme

After gathering feedback from the respondents regarding their comments on the app color in Project 2: UIUX documents, it became apparent that the use of the brand colors (purple and dark redish-purple) throughout the entire app interface made users feel uncomfortable and gave an unprofessional impression. In response to this feedback, I made a decision to adjust the color scheme of the application.

For the new color scheme, I opted to primarily use grey and white for the app interface. The brand colors would be reserved for specific elements such as buttons, icons, and headings. However, I made further adjustments to the brand colors, making them darker and less saturated to address the concerns raised by the users. This approach aims to create a more balanced and visually appealing color palette while retaining the brand identity through selective use of the original brand colors in key elements.

Typography

For the fonts, I decided to choose Inter for the application. It is one of the popular fonts recommended by designers for use in app interfaces. According to my research, Inter's lowercase letters have a tall x-height, which aids the readability of sentences with mixed-cased texts. This characteristic makes Inter well-suited for app interfaces, allowing information to be read quickly, with ease and clarity. I appreciate that the Inter font family offers a wide range of weights and styles. This variety allows me to create a visual hierarchy for the content, improving readability and ensuring clear communication.

Fig. 6.0 - Color Theme & Typography

FINAL OUTCOME

Project 3: Low Fidelity Prototype

YouTube Link: https://youtu.be/IM_iAnaO7q0

Fig. 6.0 - Video walkthrough Final Low-Fidelity Prototype

Click HERE to access the Final Low-Fidelity Wireframe in Figma.

Fig. 6.1 - Low-Fidelity Wireframe in Figma

Fig. 6.2 - Final Low-Fidelity Prototype : Batik Air Mobile Application

FEEDBACK

24.11.2023- Week 13 (Lo-fi Prototype & Mood board)

The tasks for the Check-In page are too minimal, consider expanding them by incorporating actions like entering personal information or selecting seats, etc.
You can use the variants to create the calendar's date and seat selection.
On the departure flight page, ensure that the clip content is checked to prevent issues when scrolling. Otherwise, it will scroll out of the selection frame.
Upon completing flight booking, users can click the close button to be directed to the home page with a notification badge indicating their recent booking.
Implement a login feature on the Check-In page.
Regarding the More page, you can keep the other features inactive. However, link the receiving inbox to the notification page, as mentioned earlier.
In the high-fidelity prototype, consider using light colors for backgrounds and darker colors for buttons, icons, headlines, and hover effects. Use the right side of the color palette for backgrounds.
Since you didn't record the process for user testing, create a video walkthrough demonstrating the task scenarios.
Overall, good job! Make the suggested adjustments and proceed with refining your high-fidelity prototype.

Search This Blog

TAN YI-TYNG (0353327)