UX design: Restaurant reviews app SCUK.cz

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 is a great way to search for new morning spots.

SCUK doesn’t have lots of tourist bullshit reviews like TripAdvisor or so. It’s locals for locals. It’s colorful, fun, young. You can search for places nearby but also filter based on a specific location or topic.

I always wished SCUK would be an app. The mobile version of the web is hard to navigate and map feature works so so. I decided to design SCUK app and show it to a few people familiar as well as unfamiliar with SCUK.

Goals for this project

  • Create an app based on SCUK website with a friendly interface and easy to navigate information structure.
  • Perform usability testing and update design based on the users’ interaction.
  • Try FramerX and compare it with Sketch, which I always used before.

What will be my design approach

First, I will review the website, how it looks on desktop and mobile. 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 order. 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.

Sketch phase

After getting super familiar with SCUK I reviewed similar websites and apps and done several, rather messy sketches.

Some messy sketches 1
Some messy sketches 2.
Some messy sketches 3.

The design phase

I transformed my sketches into designs. I 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.

Screen 1.
Screen 3.
Screen 7.

Usability testing

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 several confusions and crashes. Anyway, here are the tasks:

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.

I gave this task to three participants. I scored their success rate. Full points if they succeeded at 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 to several conclusions. Also, their feedback was very useful.

Usability Tesing results

Results

  • 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 more easy to get.
  • The with the lower mini menu of the spots should indicate which coffee place is selected in the map and indicate this also in the lower mini menu.
  • Reservation system should be changed to indicate which dates and times are available only.

Before

After

What I’ve learned

  • 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 iPhoneX 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 troubles 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.