The usability tests allowed me to get some errors out of my app Boost!. With this feedback I come to my final wireframes.
Final wireframes with the changes
Login/sign up Added the option to login with facebook or Google and removed the option to log in as waiter with a code. Every waiter will have an account to which he can simply log in so the waiter doesn't need to sign up. To improve the login screen I used Pintrest for some inspiration. I used the buttons, like on the first 3 inspiration screens, to login with Facebook or Google.
(1) https://nl.pinterest.com/pin/786300416181500242/ (2) https://nl.pinterest.com/pin/117023290307574596/ (3) https://nl.pinterest.com/pin/192669690294773834/ (4) https://nl.pinterest.com/pin/9499849192746694/
Customer overall Since it wasn't clear at which cafe the customer was navigation, I made the header all the same with 'Boost!' on top and the pub their navigating below with the coins.
Succes pages Added a cross (X) to the succes pop-up.
Home – customer I have made the rewards that the client has not yet achieved lighter, which makes the balance button stand out more.
Home – waiter
My participant didn't expected to found what he found on the home page. He expected an overview with all the things he could do in the app. After the usability test, I also found that the current homepage wasn't good. Also for this problem I used inspiration from Pintrest. Some items I think where very interesting: - On the first photo the 'card balance' section.
- On the second and third app they welcome the one who is working with the app.
- Also the 'information squares' in every photo below the header, is something I could use for showing the received rewards and the balance.
(1) https://nl.pinterest.com/pin/95771929561766693/
(2) https://nl.pinterest.com/pin/823244006867248694/
(3) https://nl.pinterest.com/pin/465770786467839182/
Currently, I offer everything on the home page, and from there they can navigate to the different tabs or use the navigation at the bottom of the page.
Balans - waiter and customer I first used '>' to open the tabs, so they could see more details about the balance. I noticed that '>' looked like you were going to continue navigating to another page, so I changed it to '+'.
Curious about the full flow of the app?
This is the link to the prototype wireframes of the app Boost!. Because the waiter and the customer have differents view of the app, you first need to choose which view you want to see. https://www.figma.com/proto/2xw0dV2Lc1aFFEam24uVbR/Final-prototype-Boost?node-id=36%3A566&viewport=733%2C1153%2C0.9496590495109558&scaling=min-zoom