Cue: Introduction Video (created by Interaction Studio of NAVER)
In this project, I bridged LLM technology with practical impact in users' daily lives by defining scenarios for 'browsing restaurants' and designing user flows and interfaces.
December 01, 2023
March 19, 2024
Naver, a leading South Korean tech company.
NAVER offers services like search engine, AI, email, maps, e-commerce, cloud, and LINE messenger. It dominates Korea's search market with over 70% share with around 15,000 employees working collaboratively.
Cue: is NAVER's Generative AI-powered Search Service.
Cue utilizes 'Multi-Step Reasoning,' which is capable of planning how to use NAVER's data, such as articles, blogs, and videos, and ensuring logical and efficient responses to user queries. The goal of CUE is to enhance NAVER's search functionality, making it quicker, more precise, and user-friendly.
Large-scale collaboration around Cue: Project
Cue generates responses by leveraging Naver's diverse data assets. As a result, numerous teams that hold this information have participated in the Cue project. I was responsible for designing Cue responses specifically tailored to the maps and place services.
Cue generates responses by leveraging Naver's diverse data assets. As a result, numerous teams that hold this information have participated in the Cue project. I was responsible for designing Cue responses specifically tailored to the maps and place services.
When users search for restaurants with a specific context, like 'restaurants with a Christmas atmosphere,' AI search tools like Cue would be the best option for searching. Because users can obtain satisfactory search results by typing queries into the search bar conversationally as if speaking to another person.
Text-only results by Cue made it challenging for the user to obtain the desired content in one go. As a result, the user had to go through secondary and tertiary searches to find the specific information they were looking for, resulting in less-than-ideal user experience. Consequently, designing contextually appropriate materials and determining the order for presenting information became crucial.
Project Goal
Optimized Information & Interface
Design to uncover the underlying intent in user queries and deliver the most relevant information module through the most suitable interface.
The Highest Coverage
Since it's not feasible to design a specifically optimized interface for every user query, let's focus on creating a design that can address the highest coverage of queries by grouping them.
Retraining AI to Fit the Interface
Retrain the AI to make the length and import data of the answers aligned with the designed interface.
Deliver suitable answers aligned with
the highest-coverage query responses.
The top 3 queries that come into Cue account for 75% of all questions.
I categorized the user question data entered through Cue, which resulted in 3 top categories covering 75% of the entire dataset. Based on this finding, representative scenarios have been defined with a focus on these prominent categories.
Defining 3 representative scenarios from the top 3 queries.
Recommend me a restaurant with a Christmas interior near Jongro Station.
Find me a restaurant near Gangnam with a 12-person private room available for this weekend at 7:00 PM.
Classifying the information users need and assembling them as the most suitable interface for each scenario.
Image Module
It is essential to provide the basic informations about each restaurant and offer the contextual information, including interior images during Christmas and the summary of them.
I've structured a restaurant card into two section: Basic Information and Context Information.
In the Context Information section, I've designed it so user can first view a large-sized thumbnail and then read LLM-generated responses.
Here is the final UI design:
#scenario 2. Reservation
Reservation Module
In this case, the user has provided specific criteria, indicating a clear intent to make an immediate reservation. Therefore, it was necessary to provide the Naver booking API, enabling them to make a reservation right away.
Furthermore, since there was also a context query about a 'private room,' it was integrated into a single module.
Floating Image Viewer
Since multiple modules were combined, resulting in excessive length for a single card's information, I introduced a 'View Image' text button, which allows users to seamlessly view images through a floating image viewer layer without disrupting their browsing flow.
Here is the final UI design:
#scenario 3. parking
Tell me about a parking space near Osteria Paro.
Maps Module
In this scenario, the location of the restaurant and parking lots, as well as the relative distances between parking lots, are crucial. Therefore, providing the NAVER Maps API was necessary.
And, since NAVER provides a data set of detailed parking information, it is possible to display parking lot opening hours, prices, and more.
Here is the final UI design:
Communicating with a data-driven approach
in large-scale collaboration
Ultimately, for AI technology to have meaningful usability in real products, it's the responsibility of UX designers to choose suitable datasets and APIs and determine how to expose them. Through this project, I've learned approaches and perspectives to make AI work effectively in users' daily lives.
Even though AI can generate numerous responses within a second, the most important part is determining which information to display, in what order, and how to present it, which is the responsibility of the UX designer.
© Jeongmin Lee 2024
