QR Payment App & Responsive Website
– Project Overview –
Role: UXUI Designer from conception to delivery
Tools: Figma, Google doc, Adobe Suite and Miro
Team: Self-directed, with feedback from mentor and peers
Project Duration: November to December 2022, 6 weeks
Deliverables: Mobile prototype and responsive website
Problem
It is inconvenient for someone who doesn’t have time to wait for the staff to take an order or make a payment for a long time at short-handed restaurants and the busiest time. Some elder recurrent customers with weak eyesight and visual impairment who are health-conscious Japanese food lovers are difficult to complete orders and payments.
Solution
Design an app for Aoi sushi that allows busy users to easily order and make a payment with a QR code at their table whenever they need to which can also help short-handed restaurants. Visual impaired and weak eyesight users are accessible with screen reader technologies with inclusive design to make them come back to the restaurant more often.
-Empathize–
Market research, Persona, User Journey Map using Persona, Competitor Analysis
Market research
I could understand the potential users and industry deeper by conducting the market research.
Persona
Here are target users for this product.
Sophie’s User Journey Map
The user journey map was created in order to understand Sophie’s pain points and emotions on touchpoints with the restaurant.
Competitor Analysis
The following opportunities are found in competitor analysis, this app will try to fill in the gaps and opportunities.
- An app with smooth navigation, booking, and advance booking would be ideal.
- QR code system to easily order and pay when the restaurant gets busy might work well, but no competitors have the option.
- Screen reader technologies
- Other languages can be helpful
- Easy pick up/ delivery and reservation page with previous order history and payment/card history
-Ideate-
I have hand drawn the storyboard to make stakeholders easy to see the initial design concept and designed a user flow chart to understand which UIs are required for users to complete the tasks.
Storyboard
User Flow chart
Wireframe and Low Fidelity Prototype
A paper wireframe of each screen of the app was drafted to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I used pictures to help users to operate the ordering and payment process intuitively.
Sticker Sheet in Design System
Creating the design system helped to design the app efficiently and consistently.
– Prototype and Testing –
I have conducted second rounds of usability studies interviewing five users each to see how easy to complete tasks and if any unnecessary difficulties.
1st Round Findings
- Most users found it not easy to visit a profile
- Hard to see the screen with weak eyesight/visual impairment
- Unable to choose other payment than a card
2nd Round Findings
- The profile page needs a save button
- “Payment” CTA button is not clear
- The payment confirmation page does not have a close button
Iteration
Based on the insights found in the user testing, the UIs were iterated and improved according to the prioritised findings.
After the usability studies, I added a screen reader technology icon, profile registration buttons and explanations for ordering and payment to clarify the functions on the home screen.
The second usability study revealed the function is not so clear with the previous CTA and frustrated some users. Therefore, CTA “Payment” has been amended to “Pay and Go”.
Refined Mockup
After the iterations, the final mockup has been ready to view.
– Final Product –
– Takeaways –
Impact:
The app makes users feel like Aoi sushi really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it easy and convenient, QR code to pay is unusual in the UK. I would use this app if I visit the restaurant often.”
What I learned:
I learned how users feel and think differently when they operate the app depending on their age and familiarity with the application and how important to know the actual users. Usability studies and peer feedback influenced and improved each iteration of the app’s designs.
Next Step:
Downloading the app on a phone was a pain point for some international users. “Pay and Go” “Pre Order” functions will be added on the website for users not to download without an unnecessary step.
Aoi Sushi Responsive Website
Goal:
Aoi Sushi’s responsive website allows busy users to “Pre-Order” upon booking as well as “Order” and “Pay & Go” at the restaurant through this website not even downloading the app since some international users hesitated to download the app they rarely use. The booking function is more frequently used on the website, therefore, this time “Pre-Order” upon reservation has been designed first.
Site Architecture
I have come up with the homepage structure/site architecture first to design UIs for Aoi Sushi website.
Low fidelity Wireframe
The low-fidelity wireframe was designed after hand drawing based on the site architecture and user flow to book Aoi sushi
– Usability Study –
The usability testing has been conducted by interviewing five people after completing the reservation process with the final mockup.
Findings
Here are most prioritised insights after conducting the user interview. UIs were iterated with the findings.
1.The”CTA”, Call to Action, button should be “reserve” not “search” since it may confuse users.
2. It’s easy to operate if numbers can be manually input on “Time” and “Guests” when booking and the ” Time” slots can be scrolled down not clicking to the right or left frame by frame.
3. It is not necessary to have a tick box for the cancellation policy. (only if the rule includes cancellation charges and other strict policies)
Mock-up
The final mock up has been created reflecting these findings in the usability study above.
– Final Product/Responsive Website-
– Conclusion –
Impact:
Quotes from peer feedback:
“QR code to pay even on the website is a hassle-free without downloading the app since international customers/ visitors need to change apple store’s country setting to download an app ”. “The preorder function can be useful for a party with a large number of people!”
What I learned:
I learned that how users felt the website totally differed depending on their age and familiarity with websites and functions. Most users found it easy to book on the website as they are familiar with the functions and flows. Some people still want to directly call to make a reservation.
The usability studies and peer feedback influenced iteration and improved the user experience of the website’s designs.
Next Step:
I will design “Order” and “Pay & Go” functions on the website and conduct more user research to see if any other difficulties when completing these tasks and places to improve for users.