Application Design/Project 3: Lo-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: Lo-fi App Design Prototype
3. Feedbacks
4. Reflections
INSTRUCTIONS
PROJECT 3: LO-FI APP DESIGN PROTOTYPE
After completing my UI/UX Design Document, the next step is to focus on the prototype. Before coming to the final prototype, we are required to do a low fidelity prototype.
Instructions:
Once the UX design process is completed, can now create a low fidelity prototype of the app. We needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD, Figma or any other prototype software’s.
We are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.
We need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.
Requirements For This Task:
1. 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.
2. 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.
3. 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.
4. 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
Week11/UI Kit
Before starting the creation of the KTMB Mobile App low-fidelity prototype, I developed a UI Kit that includes a color scheme, typography, iconography, and grid system on the first page. Since Figma has a page limit for free users, I allocated one page for the UI Kit, the second page for the low-fidelity prototype, and the third page for the High-fidelity prototype design.
I use Arial for my App font because is clear and the visual will be tidy.
For the color scheme part I decided to use this few color on my High fi prototype is because these color are relate with the original App.
For Icon set I search from google.
Icon Set Link: https://www.flaticon.com/uicons/interface-icons
Final Ui Kit: https://www.figma.com/design/aYnAWNXcJlDY9i8DlARpNS/App-Design-1?node-id=313-2872&t=rPtILCf7T6crN1HC-1
Ui Kit
Week 12/ Low Fidelity Prototype
After finishing the UI kit part, I moved on to creating a low-fidelity prototype for the KTMB Mobile application. My design prioritizes easy reading and uses boxed layouts to keep everything neatly organized. I also included elements that allow users to scroll both horizontally and vertically, making it easier to navigate and explore all the content within the app. This setup is aimed at enhancing user interaction by simplifying access to information and improving the overall user experience.
Idea Inspiration
My design idea inspiration mostly are from Pinterest.
Low Fidelity Prototype Design Process:
From loading page to landing page and than to home page
First Version:
After Feedback Than I change the alphabet to more consistent.
For the sign up page, After Mr. Zeon Feedback I change the spacing
I change it to become more spacing and look more nicer.
For the upcoming page I also adjust the size and the spacing.
I also design a customer service chatbot section. This is base on the previous interview and add this new features.
Low-fi Prototype
Overall Low Fidelity: https://www.figma.com/design/aYnAWNXcJlDY9i8DlARpNS/App-Design-1?node-id=0-1&t=rPtILCf7T6crN1HC-1
Week 13/ User testing & Low-Fidelity Prototype
To start usability testing, make sure you have a low-fidelity prototype that includes three specific user scenarios. These scenarios should outline clear actions for users, like creating an event or accessing a course.
Here's how I carry out the testing:
Prepare Instructions:
Write clear, step-by-step instructions for each scenario to help guide the participants through their tasks. Make sure these instructions are easy to understand.
Find Participants:
Choose three people, each to test one scenario. Try to pick individuals who represent different types of users to get a variety of feedback.
Set Up for Testing:
Arrange a time to meet on Zoom and send participants the link to the Figma prototype before the meeting. This ensures they can access the prototype and are ready to go when the testing starts.
Run the Test:
During the Zoom session, have each participant share their screen as they follow the instructions you've provided. Watch how they interact with the prototype and note any problems they encounter or areas where they seem confused.
Get Feedback:
After they complete the tasks, ask them prepared questions to get their thoughts on the experience. These questions should help you understand what worked well and what didn't.
Analyze the Responses:
After the session, go over all the feedback you collected. Look for common issues or suggestions that multiple participants mentioned.
Update the Prototype:
Use the feedback to make changes to the low-fidelity wireframes. This might involve tweaking the design, making navigation easier, or clearing up any confusing parts.
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.
3 Flow:
Lo-fi User Testing
I carried out the user testing using Zoom, which allowed me to record the sessions. During the testing, I shared a link to the prototype with the participants. They then shared their screens and followed the specific scenarios I had outlined for them. This approach helped me see how they interacted with the prototype in real-time, which is very useful for spotting problems and making necessary adjustments.
User testing 1
User testing 2
Interview feedback from 3 interviewee:
Interview Summary File
Final Interview Video:
Interview Summary:
Main Problems Identified from Interviews
Navigation and User Interface Issues
1. Homepage and Navigation Bar:
- Homepage categories are somewhat easy to identify, but navigation often leads to confusion (e.g., buttons leading to the wrong pages).
- Some navigation bar options are non-functional or fail to link to the intended pages.
- Users get stuck on certain pages (e.g., voucher viewing page) and cannot navigate to other sections.
2. Alignment, Spacing, and Font Size:
- Fonts are too small, reducing readability.
- Side margins and overall layout appear messy, making the design feel unpolished.
Ticket Purchasing and Voucher Application:
3. Ticket Purchasing Flow:
- Buying tickets is confusing due to a lack of clear steps and the absence of a dedicated ticket search page.
- Duplicate sections like “Upcoming Tickets” and “My Tickets” cause redundancy.
4. Voucher Application Issues:
- Vouchers do not automatically apply after being selected, leading to a confusing experience.
- Applied vouchers sometimes fail to reflect discounts on the final payment page.
- Users are unable to properly view vouchers before applying them.
Functionality and Features:
5. Bugs and Inconsistencies:
- Bugs in the app cause unexpected behavior (e.g., voucher codes not appearing or being applied).
- Inconsistent button designs (e.g., "Download" has an icon, but "Share" does not) diminish user experience.
6. Additional Features:
- Details like larger buttons or linking entire voucher sections to detailed views could enhance usability.
- Need functional customer service chatbot could improve user assistance.
Improvement:
- Enhance navigation functionality to ensure all buttons and links work correctly.
- Simplify and streamline the ticket purchasing process, including adding a dedicated search page.
- Fix bugs in voucher application and ensure proper discounts are reflected.
- Improve the visual design by increasing font size, aligning elements, and maintaining consistent button styles.
- Consider adding user-friendly features like a chatbot for better support.
Lo-fi Submission
Screen Record Prototype:
Figma Link: https://www.figma.com/design/aYnAWNXcJlDY9i8DlARpNS/App-Design-1?node-id=0-1&t=TDCQCByYopJCePwb-1
FEEDBACK
WEEK 11
App design content too pack. The font need to be consistent. The word need to have different colour to differentiate the title and content.
WEEK 12
Quite ok can continue design the lo-fi prototype but need to do faster.
WEEK 13
WEEK 14
REFLECTION
Observation:
During this project, I noticed how crucial consistent visual design is for helping users understand and navigate the app. Usability testing revealed specific areas where users encountered difficulties, such as spacing problems on the sign-up page and inconsistent navigation paths.
Findings:
Maintaining visual consistency, including proper spacing and clear typography, is vital for improving readability and ensuring user satisfaction. Incorporating features like a customer service chatbot, inspired by user interviews, can greatly enhance the app’s overall functionality. Users highly value easy navigation and intuitive layouts, especially when completing tasks like purchasing tickets.
Experience:
This project was a valuable learning experience that deepened my understanding of the design process. Developing the UI Kit and low-fidelity prototype allowed me to strengthen my design skills, while usability testing highlighted the importance of focusing on user needs. Addressing feedback and refining the prototype taught me how to adapt and solve problems effectively—essential skills in application design.
The project also underscored the collaborative and iterative nature of app design. Constantly improving the design based on user feedback was key to creating a functional and user-friendly prototype. Moving forward, I plan to improve my efficiency in creating prototypes and focus more on effectively integrating user feedback into the design process.
Comments
Post a Comment