Posted by

Application Design/Project 3: High-fi App Design Prototype

2/12/2024-12/1/2024 Week11-Week 15

Jie Xuan/ 0356515

Application Design/ Bachelor of Creative Media/Taylor's University

Project 3: Lo-fi App Design Prototype

TABLE OF CONTENTS

1. Instruction

2. Project 3: Hi-fi App Design Prototype

3. Feedbacks

4. Reflections

INSTRUCTIONS

PROJECT 3: HI-FI APP DESIGN PROTOTYPE

Instructions:

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:
1. 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.

2. 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.

3. 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.

4. 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.

5.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 3 participants for the testing.

Week 13/ High-Fidelity Prototype
In this week we have to do our High Fi Prototype. After the first user testing I know that my app design now have the weakness so I decided to improve it. 

Improvement:
For the ticket booking page I remove the ticket record function because is repeated with the ticket page and I also remove the ticket voucher button because the function also repeated with voucher which user can immediately check the voucher page. 
On this part I remove the upcoming ticket page because is repeated with the check my ticket page. 
For this part I make the font size bigger from 10 change to 20. 

For here I add on the navigation on the Lowest Price so that user can sort the ticket properly. 
For navigation bar I make the navigation more smoother so that when they click on the icon can link to the other page because previous version got some button cannot click. 
For this keyboard section I just change the icon place so that make the whole visual more tidy and not messy. 
On this part I also make the font bigger previous version the font too small. 
Base on the feedback I also add a share icon in here too make the design more consistent. 
Overall Design


Week 14/ User testing 
Scenario 1: Buy A Train Ticket And Check The Ticket Record

Imagine you need to travel to Ipoh by using KTM and you want to buy a ticket from App for convenient.

First, open the app. A loading screen will appear, followed by the login page. To proceed, you must first sign up for an account. Once registered, you can log in by entering your username and password.

After logging in, the Home Page will be displayed. Here, you can select your starting point, destination, and quickly search for available tickets.

Clicking the search button will take you to the booking page, where a list of available tickets is shown. In this section, you have the option to sort the tickets based on your preferences.

Once you've sorted the tickets, select the one you want. This will lead you to the seat selection page, where you can choose your seat and view a brief seat information summary.

Next, click the "Proceed" button to go to the passenger information page. Here, you’ll need to fill in your personal details.

After entering your details, click the "Make Payment" button to access the payment page. On this page, review your ticket and personal information for accuracy. Once everything is correct, choose your payment method—credit card, TNG, or FPX. The app will process your payment, displaying a loading screen until the transaction is successful.

After completing the payment, click the "View Ticket" button to access your digital boarding pass. You can download the ticket for offline access and share it with fellow passengers if you're traveling with others.

If you prefer not to download the ticket, you can simply click the home button located at the top left corner.

After purchasing now go to navigation bar click on ticket page check my ticket.

Now click on the ticket record and check the upcoming ticket history and check do you have any cancelled ticket.

Scenario 2: Check Railway Point and claim voucher
Imagine you need to claim your rewards points to buy a ticket from App.

Open the app and log in by entering your username and password.

After log into the homepage you can go to the navigation bar and select the "Reward Points" option to access your railway points details.

On the Reward Points page, check the available balance of your railway points.

Click on the "Deals and Offers" section to explore more rewards and offers that are available.

In the Deals and Offers section, navigate to the "Points Merchant Claims" section to view the available vouchers you can redeem with your points.

Select the voucher you wish to redeem from the list.

Confirm your selection by clicking the redeem button. The app will process your request and display a confirmation page to notify you that the voucher has been successfully redeemed. You have completed the redemption process.

Scenario 3: Purchase ticket and apply voucher

Imagine you want to purchase and apply a voucher using the KTMB Mobile app.

Log in to the app, and the Home Page will appear. From here, you can select your starting point and destination and quickly search for available tickets.

Click the search button to navigate to the booking page, where a list of available tickets is displayed. You can sort the tickets based on your preferences.

After sorting the tickets, choose the one you want. This will take you to the seat selection page, where you can pick your seat and view a brief summary of seat details.

Next, click the "Proceed" button to access the passenger information page, where you’ll need to fill in your personal details.

Once your details are entered, click the "Make Payment" button to proceed to the payment page. Review your ticket, personal information, and payment details for accuracy. You’ll also see an option to apply a voucher code during the payment process.

To redeem a voucher, press the "Check Voucher" button. This will take you to the "My Voucher" page. Select the voucher you want to use, and you’ll be redirected back to the payment page with the voucher details automatically filled in.

After confirming all details, choose your preferred payment method—credit card, TNG, or FPX. The app will process your payment and display a loading screen until the transaction is complete.

Once payment is successful, click the "View Ticket" button to access your digital boarding pass. You can download the ticket for offline access or share it with fellow passengers if traveling with others.

If you don’t wish to download the ticket, you can simply click the home button in the top-left corner to return to the Home Page.


High-fi User Testing
High-Fi feedback form: 

High-fi interview video: 

Final Submission
Hi-Fi App Design Prototype:



Figma Prototype: 

FEEDBACK

WEEK 13
The design need to be consistent and the content don't be too pack. The color scheme cannot to different than the original App. 

WEEK 14
-

REFLECTION
Observation:
During this project, I observed the significant impact of user feedback on the design process. Early usability testing revealed areas of improvement, such as navigation issues, font sizes, and redundant features. These insights underscored the importance of continuous iteration to enhance user experience. I also noticed how small changes, such as aligning buttons or enlarging fonts, can dramatically improve usability and visual appeal. 

Findings:  
Maintaining visual and functional consistency across screens helps users navigate seamlessly and reduces confusion. For example, ensuring the navigation bar works properly and including consistent icon styles contributed to a smoother user journey.  

Reducing redundancies, such as removing duplicate functions (e.g., ticket record and upcoming ticket sections), clarified the user flow and made the app more intuitive.  

Suggestions from testing participants were invaluable in identifying pain points, such as improving navigation smoothness, increasing font size, and refining button placements.  

Experience:
This project allowed me to deepen my understanding of high-fidelity prototype design and the iterative nature of user-centered design. Creating a polished prototype on Figma enhanced my skills in visual design, interaction design, and usability testing. I learned to balance aesthetic appeal with functionality, ensuring the app met user needs while maintaining a cohesive visual identity.  

Usability testing further reinforced the importance of adaptability. Addressing user feedback, such as integrating a voucher sorting feature or improving navigation links, required creative problem-solving and attention to detail. These iterative cycles helped me refine my approach to design and improve my efficiency in prototype development.  

Moving forward, I aim to prioritize user testing earlier in the design process to identify potential issues sooner. Additionally, I plan to experiment with advanced interaction designs to create even more engaging user experiences. This project has been a valuable learning experience, shaping my approach to designing user-friendly applications. 

Comments

Post a Comment

Popular Posts