Application Design 1- Project 3 Lo-Fi App Design Prototype

2/12/2024 - 10/1/2025 (Week9 - Week 16)

Teu Yu Tian / 0371923
Application Design 1 | Bachelors of Design (Honour) in Creative Media | Taylor's University
Project 3 - Lo-Fi App Design Prototype

---

2. INSTRUCTIONS:

Requirement:

1. Create a low fidelity prototype of the app based on 3 MVP in Project 2.
2. 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. 
3. Record the process and produce a document containing detail analysis of this task and the solutions to the problems faced by users.

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

Progression

Week 11

1. Mood board

2. Select UI Kit: Material Design 3 

I look for the UI kit in Figma community. At the end i choose Google Material UI Kit. It have extremely complete UI kit set including hover, pressed interactions, the button all are well set, i can easily switch button status, style and conditions. It is also easy to hunt symbols or icon for the same style using material symbol plug in. 

3. Search for reference and start construct Lo-Fi Wireframe.

reference for current booking screen

I plan to make a circular progression bar to show time and a draggable safety button for end session (to avoid miss click).

Reference for filter and home page. I also look for reference on competitor app such as Justpark, ChargeSini, and Parkster.

Screenshot from current ParkEasy app.

4. Progressions

Onboarding page

Sign up and Login

Reserve(Homepage), search

Parking information/set time and confirm

My Booking/Unlock bay, other functional button, ongoing session

Finance page/set uo credit card/top up/confirmation

5. Prototype

Usability Testing:

Task : 

Flow 1- Onboarding and Top Up

1. Go through onboarding page
2. Sign up
3. Use navigation bar and go to Finance page
4. Press Top Up
5. Select Other
6. Enter amount
7. Payment method: choose credit/debit card.
8. Set up card detail and save
9. Top up
10. Confirm your payment and Done
11. Check your new balance.

Flow 2-  Search and Reserve Parking

1. On Reserve page, tap the search bar.
2. You can apply filter.
3. Type in the location you want to book, relevant locations will show up as list.
4. You can click on the card to check for the parking bay information.
5. Scroll to check all details, edit your start and end booking time.
6. Make reservations.
7. Check the pricing, if all good, select a payment method.
8. Confirm and Pay.
9. Check the booking summary.
10. You can press Navigate Me to redirect to Google Map or Waze, or choose Home to exit the page.

Flow 3-  Manage Parking Session

1. The parking you booked will show on My Booking page under Current Tab.
2. Click on the card to access your booking.
3. Once you had arrive the parking, click on Unlock My Bay.
4. You will see the ongoing session screen with time progression circle and pricing.
5. Slide the End session button once you are ready to leave the parking bay.
6. After the bay sensor detected your car is removed, it will show a confirmation again. Tap the Raise Barrier to continue.
7. Check the Session summary and Rate your experience.
8. Press Done button
9. Check your Past Session record under Past tab.

Usability Testing : 

Recording for all testing

https://drive.google.com/drive/folders/1fluzStitIULAZwImAdDiJqbdoGxncONw?usp=sharing

User 1-Wee Jun Jie

Flow 1:

1. Tutorial need to be accessible even after onboarding. (Under Help section inside settings)

2. "Finance" can to change to "balance", user expected it is a graph data. (Solved: Changed to "Wallet")

3. The finance payment method and top up payment method is repetitive, is confusing.

4. Button can go up abit. (Solved)

Flow 2:

1. That section cat put together with the title, make into a card design. (Solved)

2. pricing no need show because not so matter. (No changes)

3. Home can put together with the navigate me.  (Solved)

Flow 3:

1. Arrived within should be more obvious, on top of the page or below the bay number.

2. the bay number prompt can be under the photo. 

3. Pricing no need. 

4. "Raise Barrier", nobody will raise the barrier, unless people pay deposit and payback after. 

5. Change to "end session" (Changed to proceed)

6. The navigation bar font not same, icon not same, too many thing, navigation button slide up and have help, setting, finance and so on. to navigate. (Solved)

7. Booking process is fast, short and complete. 

8. Too much information on the parking information page might lead to discouraging people to use the app to book the parking.

9. This app can have more feature to keep customer, this app can't bring more benefit to the customers.

10. finance more icon(refund), can put into help. 

User 2-Teoh Sing Jian

Flow1:

Q: Do you face any difficulties?

A: "No, and the process quite smooth."

Q: One of the user mention that the top up page and the main page is repetitive, what do you think?

A: "I think is good for repetitions for the payment in the app."

Flow 2: 

"Do I get refund if I cancel? Can set a time for cancellation, but if within 30 minutes before the booking time, no need to refund"

Flow3:

"Compare to the original app, this is a big improvement."

Q: Do you feel the flow is redundant?

A: "No i think is quite smooth."

"The raise barrier button is abit confusing, should give another text instead of raise barrier."

User 3-Ng Kar Yee

Flow 1:

Q: Do you have any issue on first flow?

A:"I think is quite smooth"

Q: One of the user mention that the top up page and the main page is repetitive, what do you think?

A" Add one more top up page in between(wallet>top up and select amount>payment method for the top up) to differentiate the page."

Flow2:

Q: Do you face any issue?

A: "I think is quite okay."

Flow 3:

Q: What do you think about the Raise Barrier button? Do you feel this button is no needed or confusing?

A: "i think is needed, and "Raised barrier" text is okay."

" It should show sign in first instead of sign up."  (Solved)

Modifications

show sign in first instead of sign up.

before

after

the bay number prompt moved to after photo

4. Raise Barrier changed to Proceed

2. "Finance" can change to "balance", user expected it is a graph data. (Solved: Changed to "Wallet")

Before

After

Final Outcome - Lo-Fi App Design Prototype

Walkthrough Video:

Figma file:

Figma Prototype:

---

2. Feedback:

Week 12:

• Mr Zeon gives comment on some part of the layout and spacing. 
• suggested to add location filter for the search functions.

Week 14:

• Mr Zeon questioned about the Raise Barrier button: what if the people not pressing the button?
• Continue on the work.

---

3. Reflection: 

Experience

The overall process is a long journey for me. I am slow in progression for this semester. It makes me feels overwhelm at the end as this project is considered a time based project, where we need to first done the wireframe, make it into prototype, conduct usability testing and see where can be improved, then make the improvement based on the comments. Although, I think I experience a very complete UI/UX journey. This was my first time doing usability testing and I found this process is very helpful, a lot of good suggestions comes from this process. 

Observation

The good UI design in industry requires a lot of concise handling from small manner such as spacing between the font, size of the buttons, navigation animation to next page, and functionality planning such as where should the button placed, how should the user view and search the information and is all the process streamlined without extra steps? I found UIUX need a lot of consideration on doing the design, sometimes it is simple, but definitely need to put a lot of time and effort on it. I found myself are more suitable to start working from sketch and rather than start on from Figma directly.

Findings

Through this project, I have come to deeply appreciate the value of user-centered design and the iterative process it entails. Usability testing was particularly enlightening, as it shed light on areas where the app fell short of user expectations. For instance, simple changes like renaming “Finance” to “Wallet” or replacing “Raise Barrier” with “End Session” significantly enhanced clarity and usability. This highlighted the importance of aligning terminology and design with user behavior and expectations.