Quandoo — designing for higher engagement and personalisation — a UX case study

The challenge: To start using an application I was unaware of about two months ago, start using it, study it, and then see how far I could push myself creatively as a designer, and redesign, as well as rebrand it from scratch.

I used this opportunity to push my boundaries, explore my skills in all areas of design I could touch upon, and present Quandoo completely brand-new.

I am a newbie on Quandoo as I have been using the service since a month ago. Unfortunately, as reservations are not available in my location, I couldn’t make any successful bookings yet.

Side note: Neither do I work for Quandoo nor do I know anyone who does. All my views on this case study are strictly my own. Unlike the team at Quandoo, I don’t have full access to all the user data that influenced their current design. As a result, this case study is not exhaustive, and I am certainly not suggesting that Quandoo abandon their current design and adopt my redesign (for both re-branding and UX redesign).

Some screenshots from my redesign

Goals for the redesign

  • To design a more engaging, personalised, seamless experience when it comes to exploring and discovering
  • To design an intuitive user interface that is more engaging and with more depth in content
  • To design by applying human factors/ergonomics, usability knowledge, and techniques
  • Analyse the current design implemented and build upon (or improve upon) that to design better UX through a more intuitive User Interface
  • Follow the UX Pyramid, UI Stack principles throughout the design (as much as possible)
UX processes in creating interfaces — UX Pyramid, and the five states to consider when you are doing a UI design, known as the UI Stack. I have tried to follow these methods in the redesign process.

The roles I assumed during the process of building this redesign:

  • User Researcher
  • Data Analyst
  • UI/UX Designer
  • Visual Designer
  • Product Designer
  • Branding/Marketing Designer
  • Art Director

Current Design Analysis

The biggest pain point that I identified was in the information architecture of Quandoo’s mobile app. One prominent frustration was the disconnect from the desktop web, where you get to see many features and options, compared to the much scaled down mobile app.

The reason why your users are confused or overwhelmed (most of the time) is not because of the visual design but the disorganized Information, which is IA — the Information Architecture. In other words, the way of arranging content in your app or website.

To better understand the current IA of Quandoo’s landing page, I mapped out their current content and colour coded the related sections. I visualized the current information architecture to compare between web and mobile to see where to start working on it:

Sidenote 1: For the mobile version, I am following Quandoo’s Android app here and my redesign is for the Android app. My design is focused to be a part of design system which reflects the same concepts and UI across all platforms. The elements I have used in the designs are core components that can be seamlessly used across iOS platforms, Android and web. This way we can ensure a similar customer experience across all platforms.

Quandoo Landing page — Desktop view

After organising the content, I made few cards out of the most important sections on the landing page in order to conduct card sorting activities to proceed with.

Most important cards from the current content

My (limited) user research and data

Before I proceeded further, I talked to a number of friends I have across Europe so that I get a better understanding of whom I was designing for:

  • What does a typical Quandoo user look like?
  • What are their reasons for using Quandoo?
  • What keeps them coming back to Quandoo?

I also read a few articles to help me understand the industry.
Those are: —

1). Customer Attitudes towards Restaurant Reservations Policies
by Sheryl E. Kimes

2). The Impact of Online Reservation Systems for Chain Restaurants
by Ryan Smith

Target Audience Demographics

Among the people I talked to, the services they use varied differently. Most of them preferred phone booking. Some use services like Yelp or OpenTable. In terms of discovery, they use Foursquare as well.

On asking why they would use a service like Quandoo, these were the top answers I got (I had to tell them all the services/ benefits you get from Quandoo)

  1. If booking adds value to their dining experience
  2. If this helps discover cuisines and restaurants based on their location, or to places they travel
  3. For offers, deals, loyalty points (which can be converted to cash for payment)
  4. Ease of going through menu in a restaurant, ease of payment within the app.

Design Inception

I tried thinking further to understand the user goals and discover the moods of Quandoo. Thus I further defined the visual language with colour, space, movement, and shape in the design inception diagram.

  • Why do you use Quandoo?
  • What mood would expedite your needs to be fulfilled?

User Flow

Having considered these insights, I sat down re-picturing the “Ideal user flow” of Quandoo. I divided users into two groups according to different needs.

  1. Users who know where to go (mostly in this case, users who look for reserving tables at his/her usual visiting places, or the user looking for restaurants around his/her area of knowledge. In other words, a user who uses just the ‘booking a table’ service).
  2. Users who don’t know where to go (mostly in this case users who are travelling and looking to explore restaurants in those places, looking to try out local cuisines, or in general foodies who love exploring food anywhere)

Revised Information Architecture

Before starting with the revised IA, let’s look at the pain points of the existing IA —

1. Hidden & unorganized features —Many features in Quandoo’s mobile app are either hidden or unorganized. The navigation drawer is a perfect example for this. The booking button in restaurant details is also an example where the CTA is not clear (without any label)

2. Wasting Real Estate — The screen is often left out with unwanted space which could have been used to show meaningful data and content.

In redesigning the Information Architecture, I made many key changes to the user interface (UI) itself.

My main goals in reorganizing the information architecture were:

  1. Increase visibility of key features in the app for easy access
  2. Include features that will be meaningful and intuitive for users
  3. My design is aimed as a DESIGN SYSTEM, which means the design should look, act and behave the same across all platforms (Android, iOS, web)

Here’s my version of the revised IA: —

Revised Information Architecture

UX Suggestions and Redesign

Experience #1: Launch Screen

One of the most important changes that I made was getting rid of three onboarding screens and have all that in the initial screen for Login/SignUp.

Redesign launch/ initial screen

Moving away from the comical illustrations in the onboarding screens and a simple screen for login/signup functions, I decided to take a serious, sharp, vibrant, colourful, real photo’ed look for the initial screen. This was intentional to set the mood of a user.

Problem: Content Dragging reaching Homepage

Immediately after opening the Quandoo app, a considerable amount of time is spent on the onboarding screens until you reach the login/sign up page to the homepage.

Note: The design is a complete overhaul from the existing visual language Quandoo has. I decided to keep the new design minimal.

For the solution, I chose to integrate onboarding along with the launch screen.

  • The comical feeling of the onboarding is avoided. Much more serious toned points on the launch screen.
  • The launching time is reduced, and the first time login for a user takes half the time compared to existing.
  • The food/restaurant related hero banner can act as a carousel to give an immersive-food-related experience for the user.

Experience #2: Simplified Login / Registration

The existing login/registration screens were not following Material Design guidelines, and look more like web-forms. It also had many fields and the CTA below the fold.

The redesigned look is aimed to be simple, contrasting only what the user wants to read. Everything else is excluded from the screen — no fancy colours or visual noise.

A new field added is Anniversary Date, which can encourage users to submit their anniversary date, the info of which can be used to inform them about the date and offering table reservation for the day.

Problem #1: Lack of meaningful content, personalisation, or strong suggestions in the homescreen.

A fresh take on the homescreen is designed for Quandoo. The new Explore screen has the existing top cities, dubbed under “Discover Restaurants.”

A set of frequently reserved locations will be shown based on the user’s location, or the location the user selects.

Problem #2: The much controversial “Hamburger menu”

This perhaps need no further explanation. Hamburger menu has been widely considered as a bad UX for mobile apps, as primarily what it does is hide content from the user’s view.

With the inclusion of “bottombar navigation” in Matrial design, all mobile platforms can now have bottombar/tabbar. This helps maintain a consistent design system across all platforms.

The content that was in the navigation drawer (hamburger menu) has been moved to the bottom bar.

Problem #3: The hard reach In Restaurant button

The hard reach In Restaurant button on the appbar has been redesigned as a floating button and placed on the top. This will activate after a delay of loading the home screen. The interaction for the flow is added above.

The leftmost GIF shows the interaction of how the floating button behaves when it appears for the first time.

The middle GIF shows the interaction of the coach-mark which appears the first time a user clicks the floating button.

The rightmost GIF shows the confirmation (or detail) of the button, which shows an abridged detail of the button before the user can hit continue.

Interaction flow for the In Restaurant floating button

Wrapping up what I have done.

Getting into this project, I knew this would be a challenging opportunity to brush up my branding/identity designing skills, and doing more thought processes for UX issues.

Looking back now, within the last month I was able to polish all the skills I had kept rarely used and this exercise helped me deliver so much more.

Within the last four weeks, I was able to work on different aspects of design, and I set out to deliver the best I can.

I thought, ideated, drew, I designed, I iterated, and iterated again. I would admit that this is too short of a time to completely redesign the product, or give a rebranding without knowing the brand in-depth through the people in Quandoo. But I believe this is a first step in a change for the better.

Or, you can download to install and run the prototype build (APK file) on Android phones. Direct link to download the prototype APK is at:- https://goo.gl/1uZ38B (file size: approx 40mb)

It would have been great to get real data on how customers are actually using Quandoo, and how business is being made since the above redesign were made solely based on my personal experience.

“A design is never done. It never ends. You design, and iterate, and repeat. Only then you, and your design gets better.”

unknown

I would greatly appreciate any feedback. Please do reach out to me at prasil@live.com or at my LinkedIn — I’m always down for a conversation!

The original article was posted on Medium, and published on UX Collective. Some section were omitted here to keep the writing short. Read the original article to read the complete writeup.

Leave a Reply

Your email address will not be published. Required fields are marked *