— May 2020 ~ March 2021 — Public release on July 2020
Context
NAVER Maps
NAVER Maps has over 20 million monthly active users (As a reference, South Korea’s population is 50 million). This is twice as many users as competitors like T-Map, Kakao Map, and Google Maps.
The strength of NAVER Maps lies in its extensive regional information, with approximately 2.15 million data points registered by store owners. This allows them to update their information and take advantage of convenient features such as reservations, ordering, and marketing messages.
Project Background
Usually, there is a single restaurant at a single location.
With the growing success of the NAVER Order platform, we decided to expand and make it possible to use the platform in the above environments.
Design Space
When you are at a baseball game, did you ever miss a home run on your way to buy a hot dog? It would be nice if you can order food & drinks from your seating and receive them without leaving the game.
Airports are often hectic, leaving us with limited time to get on line at different places for food and beverages before departure. When traveling with companions, there may be additional stops required. The ability to place a single order in advance from multiple places and simply pick them up would save time significantly.
Design Question
How can we balance the hierarchy of information across menus and different vendors?
When choosing food at places like food courts, we can narrow down the choice by exploring the type of vendors or by comparing the dish you want. These are interrelated factors that play a role in helping people to make their decisions. How do we effectively deliver this information within the constraints of a small screen?
How can we optimize the ordering experience across contexts that are vastly different?
Imagine ordering a burger at a baseball stadium, an airport, or a hotel room. The ordering experience can differ greatly based on the context, with each requiring specific information like nearby food court, room number, delivery fees, and pickup locations. How can we design a seamless UX that adeptly handles the complexities of each context?
Design Exploration
1. Browsing the menu
Direction A: Dish-centric menu. This allows for you to see what kind of menu is available right away.
Direction B: Store-centric menu, as if you are exploring the food court. You can first discover the types of stores, and then decide which ones you want to go to.
.
2. User interviews using prototypes
In order to validate the above directions, I created interactive prototypes and put them in front of real users. Here are the two versions and a summary from the focus group interviews I conducted.
.
3. Cart & Pay
Because users can have items from multiple vendors in the same cart in a food court setting (and payment gets made to each vendor separately), we needed to indicate additional elements such as pickup vs. delivery and delivery fee per vendor onto the same page. In order to incorporate these in a way that wouldn't overwhelm the users, I implemented exchangeable modules to cover the various format.
.
4. Filter & Sorting
I designed a versatile UI pattern that adapts to different situations. It includes sorting options like “Default,” “Popularity,” and “Reviews,” as well as a toggle for “Pick-up” and “Delivery.”
Furthermore, to accommodate a larger number of stores, I designed a category bar that dynamically appears when there are more than 10 options available. The UI seamlessly transitioned from radio selection to a drop-down menu when multiple sorting features were present.
.
5. Illustrations that distinguish between different users’ situations
Since each user may encounter unique ordering situations, we developed supporting illustrations to guide them in a clearer manner.
.
.
Final Design
Main UX Flow
Through this project, we added support for sports stadiums. Users can now browser all the vendors from their phone save themselves time from waiting a line. Even possible to deliver to your seat! Simply scan the QR code from your seat and order.
Inside a mall or a department store, cafes and restaurants are split across different floors. We've added support so that users can see all their options in a single page and be able to filter by cuisines and floors.
Running to your gate, but also hungry to grab a bite? You can now use NAVER Order to see what's available before your flights and order ahead.
Similarly, users can order ahead for restaurants in rest stops on the highway. No need to worry about ordering and then not finding a seat. Grab a seat first, and they will call your name when the order is ready.
Lastly, this project extended NAVER Order to major hotels and golf resorts. Instead of using the printed menu, scan the QR code to see dishes from the restaurants in the hotel and pay directly with NAVER's payment service.
.
In Action
This service was also used for special events, such as food fairs and restaurant weeks. Some hotels launched wine parties on summer nights with NAVER Order.
JW Marriott Wine & Busker - May 19~22, 2019, Seoul
The Michelin Guide gourmet fair - October 4~6. 2019, Seoul
