Restaurant reviews mobile app
I have to confess, I am a breakfast freak. I love discovering new places where I can enjoy my coffee and croissant and Prague is a great city to do so. Prague is amazing mainly because of its architecture and coffee places. SCUK website was a great way to search for new morning spots. It doesn't exist anymore, but I would still love to have a similar mobile app.
Review current desktop and mobile version of the site
I will write down everything I want to keep from this version and what I want to add. I will then look at other similar apps for spot reviews or food orders. After that, I will experiment and prepare sketches which I will later transform into designs in FramerX. I will use these designs to test them among some friends, those who are familiar with SCUK, but also the ones who are not. I will use their input to update the designs and prepare final designs.
After getting super familiar with SCUK I reviewed similar websites and apps and done several, rather messy sketches.
The design phase
I transformed my sketches into designs. I have done these in FramerX. Everyone talks about it now, how great it is, and how it will kill Sketch. It wasn’t that hard to get familiar with the program once you already know Sketch. It has several nice features from which I mainly like the Scroll option and easy sharing. I also like the components store, but compared to Sketch resources, I wasn’t impressed. Here are several screens — mainly for the map as this is my favorite feature of the web — I designed.
Task 1. You are visiting Prague for the first time and you are looking for a local coffee shop nearby. You opened the app for the first time and want to find the coffee store near your current location.
Task 2. You’ve got the tip to go to Muj Salek Kavy. Find the info about this spot and its reviews.
Task 3. You want to make sure you and your friends will get a spot at Muj Salek Kavy as you know it is a popular spot. Make a reservation for 5 people at this place.
What I’ve learned
The first task seems to cause a major problem. At first, the icon doesn’t indicate enough that you can also filter by tapping here. It might be also because of the unfamiliarity with SCUK and the way their map work and filtering options currently available. The icon should be made easier to get.
The with the lower mini menu of the spots should indicate which coffee place is selected on the map and indicate this also in the lower mini menu.
The reservation system should be changed to indicate which dates and times are available only.
I gave my final designs to users and asked them to perform several tasks which are the most fundamental on the website. It was hard to explain to the users that the app has not all functionalities and it caused confusion and crashes. Anyway, here are the tasks:
I gave this task to three participants. I scored their success rate. Full points if they succeeded at the first try, 50% if it took them some trials and errors but in the end, they succeeded and zero if they were totally lost.
Thanks to the testing and observing the users’ interaction, I could come up with several conclusions. Also, their feedback was very useful.
Before and After
I need more practice with usability testing. I mean more experience with how to interact with my test users and more patience with explaining to them what is going on.
It is much more important to watch how the users interact with the app then if they really accomplish the task.
For iPhone X and other no buttons screens, I need to make the lower menu and other components located in this area much higher and leave some space for the iPhone menu tab, oblique corners, etc.
I like FramerX, it is especially great for cooperation between (and among) designers and developers. The code from prototypes can be used to reproduce hi-fi interactivity patterns. The interaction and Scroll function are amazing. The program for me was however slow and I had trouble with importing few components.
For the next time, I will do more research about users of SCUK and similar apps. This would be helpful also during the usability testing phase.