July 3, 2020

SEATED

Seated is a city-wide dining app that rewards users for dining out in select urban areas, with plans for national expansion.

When users book a reservation and dine out, they get rewarded with brand-name giftcards of their choice, such as Amazon, Uber, and Airbnb.

Users can earn up to 30% back every time they dine out through Seated.


The Challenge


Seated is a mobile application that gives rewards for restaurant reservations. I recently discovered this app and instantly fell in love with the product, as I’m a huge fan of dining out. I’m also a huge fan of rewards, so this app felt like a reimbursement that I’ve been missing out on. I could not put it down! However, upon using the product I found a few difficulties and room for improvements; I wanted to see what UI components can do for a brilliant service like Seated.

Locating The Problem

I opened my notes and started reading reviews on Google, the Apple Store and Google Play.

Most of the negative reviews were cases of miscommunication between users and customer service/rewards, but I did manage to find a few reviews that mentioned the lack of a search bar that would allow users to locate a specific restaurant, leaving them with little recourse to access their favorite restaurants. (this was updated not too long ago. )

Design Directions


I’ve set a limited time on this project (1 week), as I’m in the middle of finishing up an intensive bootcamp, so decided to prioritize addressing a few problems to stick to a  realistic timeline.

Issues I need to tackle:
Branding
Organizing functionalities
New approach & system for searching/sorting
Reimagine the map
Other touch-ups

Based on the reviews I found and the realistic timeline, I decided to fix some design principles and revamp the app accordingly:

The app should encourage users to feel excited for dining out.

The app should be easy to use, and it should feel effortless to book new reservation.

The app should be engaging for the users to return to the app, wanting more.

Style Directions

I looked at both direct and indirect competitors, and it was a sea of red. Red everywhere I looked.

Opentable: Red
Resy: red(ish)
Yelp, Grubhub, Seamless,
Doordash, Food network …

Red seemed like the “pumpkin spice latte” of food industry branding.

So I decided on red. Why? Red is the color that makes a user hungry. It catches attention and stimulates the palate. It also signifies something is fast and immediate. If it’s the color that’s being used by everyone, it’s a safe bet that this color is already working successfully in the industry. Besides, the sky’s the limit: this is my personal project. I’m gonna paint it red. Then I’ll pair that with some mint green because I like 50’s diners.


Bottom Nav

What are the core functionalities of the Seated app?

Find restaurants.
Reserve + Dine out.
Get rewarded.

I came up with new bottom nav that will represent these core functionalities.

Home
Discover  
Map View
Rewards

Home

The current reservation box looks like a search bar, and all the icons on the top are a bit busy and distracting.

So I’ve updated the filters to appear next to the map view. (I’ll be honest: Opentable is doing this. However, even in Opentable, the map/list view doesn’t work as smoothly as it  should, since they drop the user into a separate map screen with a back button that isn’t related to how the user got there in the first place.)

This layout would work like a FLIPPABLE CARD between the map view and list view, without having to navigate with more than one click.

Discover + Map View

I suggested a new sorting system based on different cuisines and tweaked the "favorite" section to use the same format of cards for consistency. I also added an option to favorite a place without clicking into individual restaurant page.

The current colors and the frequency of the displays were overwhelming, so I focused on designing a clean and coherent map view that was similar to the current layout, but with new additions and iterations, explained in my other screens.

Rewards

Talk to customer support: There are different buttons that all perform the same function of connecting a user to a  customer service representative.

The confusion is only increased by the fact that they are called multiple things throughout  the app such as “ask a foodie” or “chat help,” or showing a message icon. Moreover,  they can be found in multiple pages, but there is no consistency from page to page in terms of  placement.

To address this,  I’ve added a chat option  to the rewards menu, since users talk to the customer representatives for rewards.

Invite friends: The current gift box icon on the top left is for sending invitation code. Lyft does this in their Hamburger Menu as well, and I know it’s  good for growth—but it’s taking up a very important space in the home screen. I suggest moving the invite functionality to  the rewards menu, with perks clearly indicated.


Other Updates

  • The top image header was taking up a lot of real estate, so I cleaned it up.
  • The search icon on top of “home” also appears  in the bottom navigation as “explore.” Icon inconsistency often confuses users.
  • The location of the “sign up with Facebook” and  “send verification code” should be switched.
  • The two “back” icons from the onboarding were not matching. This results in unnecessary use of elements (aka the developers will be angry) I’ve updated it.

There is no doubt that Seated is a good product already. However this has been a great opportunity for me to think on my feet to solve a good product’s UI problems within limited time and resource from an actual user’s POV.

Added: This case study got me an interview with the good people at Seated!

No items found.