Application Design I - Final Project: High Fidelity App Design Prototype

19.11.2023 - 08.12.2023 (Week 12 - Week 15)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application Design I
Final Project: High Fidelity App Design Prototype

INSTRUCTIONS

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

FINAL PROJECT

High Fidelity Prototype

Instruction

In this final project, we are assigned to create a high-fidelity prototype for our mobile application. This prototype should showcase the final visual design, interactions, and functionality of the application. The high-fidelity prototype will serve as a realistic representation of our application, enabling users to experience and provide feedback on the final design. It should demonstrate a polished and refined user interface that aligns with the branding and usability principles established throughout the design process.

Requirements For This Task

Visual Design:

Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.

Interactions and Transitions:

Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.

Functionality and Navigation:

Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.

Content Integration:

Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.

Usability Testing:

Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 5 participants for the testing.

1. Colour Palette

Initially, I created a mood board, including the color palette, and updated it under Project 2: Low Fidelity Prototype. However, when it came to applying the primary colors on the prototype, it didn't give me a sense of visual appeal. This might be due to the primary colors being less saturated and too dark. Hence, I experimented with colors to find an appealing look when applied to the app, ensuring it also matches the brand identity.

Fig. 1.1 - Experiment with different colours

Luckily, I found a very helpful website where I can enter a primary color, and it will provide multiple options of color tones and shades. It also allows me to personalize adjustments to the color's lightness and saturation. Since I decided to use a monochrome color scheme for the app, based on the options provided on the website, I could then choose the suitable shades and tints for the app.

Fig. 1.2 - Website Link

Fig. 1.3 - Final Colour Palette for Batik Air app

2. Design Process

Basically, I spent more time and effort on the previous project, which is the low-fi prototype, getting feedback from others and making improvements for the app. It was considered a quite complete design, but the only missing elements were color and images. Initially, I thought that the completion process for this high-fi prototype would be faster compared to the low-fi stage. However, things didn't go as planned. I soon found out that finding images also took me quite a lot of time.

Since Batik Air didn't have many high-quality images online, it was challenging for me to find relevant ones for the app. Moreover, for the images used in the app, I needed to select images that not only suited the content but also had colors matching the primary color, which is the brand's color. For example, the primary color is somewhat like a dark red-purplish color, so the images should not have too many blue or green colors, as this would disrupt the overall harmony in the app.

Below are the images that I found to be well-suited and create a harmonious look for the onboarding pages in the app:

Fig. 2.1 - Onboarding Pages

For the carousels at the top of the home page, since the text on the images was not standing out from the background, so I applied a layer of linear gradient on the images. This way, the text contrasts better with the background. I also made some color adjustments by tweaking their brightness, saturation, and temperature for the images to achieve the desired outcome.

Fig. 2.2 - Comparison of Improvements on Carousels

Continuing to work on creating user interaction with the carousel on the homepage, I was initially confused. This case differed from the onboarding pages because, for the onboarding pages, I created the interaction by dragging to change to the next whole new canvas. However, for the carousel on the homepage, it's only part of that particular section and doesn't change to a new canvas. I was confused and stuck on this part. But once I watched a YouTube tutorial, I realized that the way of creating that interaction is somehow the same. Instead of swiping to a new canvas, using variants will be a more effective way.

Fig. 2.3 - Creating carousel on the homepage using variants

Continuing to work on the high-fi prototype, I soon realized that I had to make a lot of changes. Most of the elements were created as single objects, but when it came to applying color to them, it became very time-consuming, especially with more than 60 canvas. Since I had recently learned how to use variants, so I spent some time arranging the elements into variants. This way, in the future, when changes are needed, I can easily make them.

Starting with the navigation bar, I had the idea that when users click on a page, the icon will be in bold color, while the icons of the others will be in grey. This way, it will be clearer for users to identify which page they are currently on when using the app. To create this effect, I had to apply what I had learned about using variants, which proved to be more effective.

Fig. 2.4 - Using variants for the navigation bar

Fig. 2.5 - Improvement on the navigation bar

Similarly to the seat selection, I applied variants for all the seats except the occupied ones, giving users more freedom to choose from the available options. Additionally, I decided to change the design of some seat icons, for example, adding a cross icon to the occupied seats to indicate more clearly that those seats are not available.

Fig. 2.6 - Using variants for seat selection

Fig. 2.7 - Improvement on seat selection page

I created a processing payment loading page animation using the after-delay interaction. After users make their payment, this loading page will show up, and users don’t need to click anything, they just need to wait for a second. Then, it will show a confirmation order page. This improvement enhances the user experience, indicating that they have completed the payment process.

Fig. 2.8 - Animation for the payment process

Fig. 2.9 - Improvement on the payment process

Since in the low-fi prototype, some of the sliders or sections had repeated content, for this high-fi prototype, I started to add accurate and fully detailed content for all sections. Below are the sections where I replaced images, texts, and contents.

Fig. 2.10 - Contents for the "promotion for you section"

Fig. 2.11 - Contents for the selection of departure and arrival cities

Fig. 2.22 - Contents for the options of departure flights

For the cabin class page, I designed it so that users can swipe to view not only the information text about the type of cabin class but also preview images of the class.

Fig. 2.23 - Preview of the type of cabin class

Fig. 2.24 - User interaction on the Cabin class page

An important thing to note is that when I was adding hover effects for certain buttons or elements, I realized that the hover state only works on desktop devices since mobile devices don't have mouse interactions. I'm glad I noticed this early on when I was just starting to create a few hover effects. As a result, I stopped working on this aspect and shifted my focus to other design areas.

After completing the design of the interface with a total of 66 canvas, I double-checked to ensure that all the canvas were properly linked, ensuring a smooth workflow.

Fig. 2.25 - Overall flow of the app

3. Usability Testing

Moving to the next phase, which is usability testing, similar to the previous task, I have already created three scenarios/tasks with detailed descriptions that require users to perform specific actions within the application. However, I noticed during the user testing for the previous task that users found it slightly challenging to read large blocks of text in paragraphs. To address this, I plan to improve the usability of the scenarios by breaking down the content into numbered lists, making it shorter and easier for users to understand.

Fig. 3.1 - Previous tasks

Task Given:

Scenario 1: Login

Open the Batik Air app.
Navigate to the login screen.
Enter your registered email as the username.
Enter your password.
Successfully log in.
Explore the app's features and functionalities.

Scenario 2: Booking Flight Tickets

In the "Book Flight" page
Select your departure flight from Penang to the arrival city Kuala Lumpur.
Choose a one-way ticket for November 19, 2023.
Select specific 2 passengers and opt for economy class seats.
Search for available flights.
Review the options.
Fill in your personal details.
Select no add-on baggage.
Select seats for 2 passengers
Proceed to make the payment.
Confirm your payment.
Check and download your virtual ticket.

Scenario 3: Online Check-In

In the “Check-In” page.
Enter your booking details.
Follow the prompts to complete the online check-in process.
Successfully complete the check-in.
Receive your online boarding pass promptly.
Equip yourself with your virtual boarding pass for a stress-free journey.

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

4. User Feedback

For the usability testing, I recruited 5 participants who match the target audience of the Batik Air application. I conducted the usability test through a Zoom video call, where I shared the screen of the prototype in Figma and gave participants control of the screen.

Here is the recording where I combined all the videos of them performing the tasks during the usability testing. It's important to note that some parts of the video may appear laggy or glitchy. However, participants mentioned during the usability testing that this issue did not occur for them. It may be a result of the Zoom recording.

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

Fig. 4.1 - Recording of the Usability Test (5 Participants)

After they completed testing the prototype, I asked them a set of prepared questions. Below is the document where I collected all the user feedback.

Fig. 4.2 - User Feedback (5 participants)

5. Improvements

Based on the user feedback, I noticed that in the review booking page, some users did not realize they needed to select the baggage and seat before clicking the 'Go to Payment' button, which made them confused. After receiving feedback from one of the users, I changed the button color to grey, indicating that the button is inactive until they perform the required tasks.

Fig. 5.3 - Improvement on the Review Booking page

I have also made some improvements on the process payment page by adding an animation of loading and confirmation payment. This could enhance the user experience, making them feel satisfied after making the payment.

Fig. 5.4 - Improvement of the payment process

Following one of the users' feedback, I also designed the app so that after users complete their payment, they can click the 'Share & Save' button, and it will show a share sheet. I created this using the overlay interaction with an added grey opacity background.

Fig. 5.5 - Save and Share the tickets

Fig. 5.6 - Comparison between the original Batik Air mobile app and the redesigned version

FINAL PROJECT

High Fidelity Prototype - Batik Air Mobile Application

Fig. 6.1 - Final High Fidelity Prototype: Batik Air Mobile Application

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

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

Fig. 6.3 - Video Walkthrough High Fidelity Prototype: Batik Air

Link to Figma File:
https://www.figma.com/file/yRyunfFv1xDFCvaP9a07N1/Batik-Air---High-Fi-Prototype?type=design&node-id=268%3A1573&mode=design&t=iflodazBZeRe1eoI-1

Fig. 6.4 - Figma File

Link to Final High Fidelity Prototype:

https://www.figma.com/proto/yRyunfFv1xDFCvaP9a07N1/Batik-Air---High-Fi-Prototype?page-id=268%3A1573&type=design&node-id=268-1608&viewport=290%2C206%2C0.08&t=TOqHVr5NztZolRbW-1&scaling=scale-down&starting-point-node-id=268%3A1608&show-proto-sidebar=1&mode=design

Fig. 6.5 - Final High Fidelity Prototype - Batik Air Mobile Application

REFLECTION

Here comes the end of the semester. Overall, I would say that I enjoyed and became more interested throughout this semester. I've always been passionate about designing app interfaces, and having the opportunity to redesign the app was satisfying, leading to a sense of achievement. Although there were moments of stress and challenges, most of them were due to mistakes I made while working on Figma. I'm grateful to Mr. Shamsul for providing us with enough time to complete the projects, allowing me to produce a good final outcome.

One main lesson I learned while working on the low and high-fidelity prototypes is the importance of equipping myself with skills on Figma. Watching more YouTube tutorials helped me learn effective techniques and methods. For example, when working on the low-fidelity prototype, I wasn't familiar with using variants, and I used to copy and paste repeated elements. Learning about variants has significantly saved me time, enabling easy changes with automatic updates to all related elements.

I believe that with a good understanding and practice of using Figma can be save us a lot of time, that produce better work and explore more design interfaces and user interactions. In conclusion, I've gained a lot of new knowledge during this semester, not only in terms of user interface design and Figma skills but also in the effective planning and research of user experience during Projects 1 and 2.

Search This Blog

TAN YI-TYNG (0353327)