Application Design /Project 3: Lo-Fi App Design Prototype
Start from 1.7.2024
01.7.2024 -22.7.2024 /Week 11- Week 14
Kong Cai Yi / 0363862
Application Design 1 / Bachelor of Design (Hons) in Creative Media
Kong Cai Yi / 0363862
Application Design 1 / Bachelor of Design (Hons) in Creative Media
Project 3/ Lo-Fi App Design Prototype
INDEX
1. Lectures
3. Feedback
4. Reflections
LECTURES
Week 11/ Wireframe & UI kit
This week, we are starting Project 3: Lo-Fi App Design Prototype. Our first
task is to choose a UI Kit that includes our design's typography, color
palette, and iconography. Once the UI Kit is finalized, we will begin
creating the Low Fidelity Prototype using black, grey, and white colors.
Fig 1.1 Week 11 Lecture (01.07.2024-Week 11)
Week 13/ User Testing
I couldn't attend classes this week because I was sick. My friend
and Mr Zeon informed me that we need to create 3 scenarios for users
to test and provide feedback, with compulsory recording. After
receiving and analyzing the feedback, we can make improvements and
proceed to create the high-fidelity prototype. The submission
deadline remains 5 August (refer to page 67) and always e
nsure our e-portfolio is progressing well.
- For better color matching, please use this platform: [Color Shades Finder](https://colors.artyclick.com/color-shades-finder?color=#70E6D2).
Fig 1.2 Week 12 Lecture (08.07.2024-Week 12)
INSTRUCTIONS
Project 3/ Lo-Fi App Design 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/ Invision Studio 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
WEEK 11-12/ UI Kit & Wireframe
1. UI Kit
Before starting the creation of the Easybook 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 final design.
Fig 2.1 UI Kit (5.07.2024-Week 11)
Fig 2.2 Project 3-Pages (5.07.2024-Week 11)
I downloaded several other bus booking apps, such as Red Bus and
BusOnlineTicket, to study their design and layout. These apps exhibited
effective design and workflow, serving as valuable references for the
Easybook project. Below are the references to the layout and flow of an bus
bookings app:
Fig 2.3 References (5.07.2024-Week 11)
Fig 2.4 Loading and log in Page (7.07.2024-Week 11)
Fig 2.5 Features in home page (7.07.2024-Week 11)
Fig 2.6 Seats selection- section pop up (7.07.2024-Week 11)
Fig 2.7 Payment Status (7.07.2024-Week 11)
Fig 2.8 Overall (7.07.2024-Week 11)
Amendments after getting feedback from Mr Zeon:
Fig 2.9 Added Easybook Voucher (11.07.2024-Week 12)
Fig 2.10 Additional Payment Page for TNG and Credit Card
(11.07.2024-Week 12)
Fig 2.11 Loading Page before payment success (11.07.2024-Week 12)
4. Low-fidelity prototype (Overall)
Fig 3.1 On boarding & Login Page (17.07.2024-Week 13)
Fig 3.2 Home design- Search bus (17.07.2024-Week 13)
Fig 3.3 Select prefer bus, timing and filter option, select seats
(17.07.2024-Week 13)
Fig 3.4 Fill in personal information, Billing Details & Payment
Option(17.07.2024-Week 13)
Fig 3.5 Payment Status (17.07.2024-Week 13)
Fig 3.6 View booking ticket -Active, completed and cancelled
(17.07.2024-Week 13)
Fig 3.7 Ticket Details & Digital Pass (17.07.2024-Week 13)
Fig 3.8 Check in Page (17.07.2024-Week 13)
Fig 3.9 Easypoint rewards & Easybook Voucher (17.07.2024-Week 13)
Fig 3.10 Profile & More Page (17.07.2024-Week 13)
Fig 3.11 Prototype (3 Scenarios) (17.07.2024-Week 13)
Fig 3.12 My profile page (22.07.2024-Week 14)
Fig 3.13 Language, country & currency settings page(22.07.2024-Week 14)
Fig 3.14 Wallet & Card and change password page (22.07.2024-Week 14)
Fig 3.15 Overall Lo-fi Prototype (22.07.2024-Week 14)
WEEK 13/ User Testing
To conduct usability testing, we need to have low-fidelity prototype
ready with three user scenarios (specific actions want the users to
take, such as checking account balance and transaction history). Provide
written instructions for each scenario. Recruit 3 participants,
assigning one scenario to each user. Conduct the testing via Zoom and
send them the Figma link. After the testing, gather feedback from the
participants. Prepare questions to guide their feedback. Collect all the
feedback and use it to improve low-fidelity wireframes.
Fig 4.1 User testing prototype (3 Scenarios) (20.07.2024-Week 13)
Scenario 1: Booking a Bus Ticket
Imagine you’re planning a bus trip and need to book a ticket through the Easybook app.
- The process starts with the app opening to a loading page, followed by a login page where you enter your credentials to access your account.
- On the home page, you select your departure and destination cities, along with your travel date, and then click the “Search Bus” button. A list of available buses and their schedules appears, and you can use the filter option to narrow down your choices based on your preferences.
- Once you’ve chosen your bus and timing, you select your preferred seats from the available options. Proceeding to the passenger details page, you fill in your personal information and decide whether to choose a protection plan or use Easybook rewards, then press the “Pay” button to continue.
- On the payment page, you review your booking details and choose your payment method – credit card, TNG, or FPX. The app processes your payment, displaying a loading screen until the transaction is successful.
- After a successful payment, you can view your ticket and track your bus. You also have the option to download your ticket for offline access and forward it to your passengers if you’re traveling with others.
- Finally, to self check-in, you go to “My Trips” and enter your details or scan the QR code. This streamlined process ensures a convenient and efficient way to book your bus tickets, making your travel planning stress-free and enjoyable.
Scenario 2: View and Check-In Bus Ticket
Imagine you need to view and check in for your bus ticket using the Easybook app.
- Start by clicking on the navigation bar and selecting “Bookings.” This leads you to the “My Bookings” section, which is divided into three categories: active, completed, and canceled. All your tickets will be listed here, and you can click the “View Details” button next to each ticket to see more information.
- After viewing and checking your ticket details, you’ll find a “Download Ticket” button, which provides a summary of your bus order. There is also a “Self Check-In” button available. Clicking this button takes you to the self check-in page, where you can either manually enter your boarding code or ticket ID, or scan a QR code to check in.
- Once you’ve checked in, the app will show a message confirming that the check-in was successful. You can then view your ticket details again, confirming that you’re all set for your trip.
Scenario 3: Purchase and Apply Voucher
Imagine you want to purchase and apply a voucher using the Easybook app.
- Start by navigating to your profile and selecting the “EasyPoint Rewards” section. Here, you can view your points and see a list of available Easybook vouchers.
- Choose the voucher amount that suits you, and decide whether to use promo pricing or your points to make the purchase. Press the “Proceed” button to continue.
- On the next page, you’ll see the voucher information along with payment details and personal information fields that need to be completed.
- After filling in the required details, choose your payment method – credit card, FPX, or wallet. Wait for the payment to process, and once the transaction is successful, you can view your voucher.
- You’ll have options to share or download the voucher for future use. To apply your voucher code to your bus booking, press the “Use Now” button during the payment details section of the booking process.
I have conducted an online ZOOM with my user, after I recorded the
section, they are allowed to control my mouse and try to navigate the
prototype by themselves.
Recording:
Fig 4.2 Zoom user testing (20.07.2024-Week 13)
User Feedback:
Fig 4.3 User Feedback from 3 respondents (21.07.2024-Week 13)
Summary of Feedback for Low-Fi Prototypes
Flow 1:
- Add a page after self check-in.
- Make the home transportation section wider.
- Increase the font size for pick-up and drop-off details after selecting seats.
- Enlarge the icons for seat selection.
- Improve alignment consistency.
- Overall minimalist design allows clear visibility of information; icons are used consistently.
- The scrolling effect from the parcel delivery section is not obvious enough; users might miss it.
- Increase the font size for seats and timing on the bus selection page.
- Filters feature enhances the effectiveness of selecting bus preferences.
Flow 2:
- Replace the home icon with a back icon on the ticket details view. After check-in, allow users to click on “ticket details” and also add a home icon.
- Increase the font size for the digital pass.
- Align the EasyPoint rewards section consistently with the voucher info section.
- Make the "total" section bar larger than the quantity.
- Increase the font size throughout.
- After purchasing a voucher, redirect users back to the main page to book a bus.
- Add a "my voucher" feature in the payment details to let users choose the most suitable voucher on the spot.
- Ensure the back icon has consistent alignment across all pages.
Fig 4.5 Improvements on the navigation bar (21.07.2024-Week 13)
Fig 4.6 Improvements on the home Page (21.07.2024-Week 13)
To enhance participants' user experience, Mr. Zeon suggested adding an onboarding page before directing users to the login page and choosing one feature to design, specifically the bus details navigation bar (seats page).
.
Fig 4.7 Onboarding Page (22.07.2024-Week 14)
Fig 4.8 Ratings and review feature (22.07.2024-Week 14)
Final Outcome
Project 3: Lo-Fi App Design Prototype
Demonstrating Video:
Fig 5.0 Lo-Fi App Design Demonstration video (24.07.2024-Week 14)
View in Figma:
Link to Figma File :https://www.figma.com/design/nRd2wMFBHIJDk9NJEukSEh/Kong-Cai-Yi-Final-Project?node-id=0-1&t=JZeBlDag7wbV3DtN-1
Fig 5.1 Lo-Fi App Design (24.07.2024-Week 14)
Fig 5.2 Lo-Fi App Design Prototype (24.07.2024-Week 14)
FEEDBACK
Feedback from Mr Zeon
General Feedback: Overall, your effort is commendable as
usual.
Specific feedback:
- Please add an additional payment page where users can input their credit card information.
- Introduce a loading page before displaying the successful payment confirmation.
- Consider expanding with a few more pages. You should create scenarios for usability testing with 3 users, so ensure you have at least 3 scenarios prepared. Currently, you only have a scenario for booking bus tickets. Perhaps you can include scenarios for the car rental booking process, parcel delivery process, and voucher redemption.
WEEK 13:
Specific feedback:
- Add few onboarding page to make the loading page more attractive.
- Choose one feature to design among the bus details navigation bar (seats page)
REFLECTIONS
Actually, I am very excited about Project 3 - Lo-Fi App Design Prototype. From the initial proposal research on the Easybook app to data analysis, I have imagined countless times what the redesigned app would look like in my mind. Now, I can finally start designing! At first, I was quite confused and didn't know where to begin. I wanted to make the entire design much better than the original app, aiming for an 80% improvement. So, I kept looking at other competitors' app designs and searching online for good examples of booking app designs.
Due to the tight schedule, I had to push myself to design quickly, and it actually took almost four days to complete. Initially, I was worried about how to create the wireframe, but after some research, I found it quite simple. As I progressed, I became more adept, and designing new pages or features became effortless. I knew exactly what style and design philosophy I wanted to follow. During user testing, they were quite satisfied with my design. However, the downside was that many features were not yet developed, and if they were, the app would be even better.
So, later on, I developed all the features for My Profile, making the app more complete. Next, it's time to move on to complete high fidelity prototype!
Comments
Post a Comment