Zilin Deng
Info
I'm a design student at York/Sheridan Program in Design.
Passionate about creating awesome products and experiences!
Finding opportunities to inspire, educate, and delight.
Some of my hobbies include...
Curating Playlists, Marathon Running, Bouldering
Actively seeking new opportunities!
Interested in working together? Let's grab coffee!
Thanks for visiting my website! ✌

Lovely

Redefining the restaurant experience with augmented reality.

If your interested in playing around with the Framer Prototype.
I've provided a link here

Background

Whether your visiting a restaurant for the first time, or just feeling adventurous, trying new items on the menu can be an intimidating experience. In the food/hospitality industry, a customers first impressions can influence the chance users will return in the future. With so much competition, it’s easier than ever for users to leave and explore other options. Building customer retention through quality food, and services is crucial for the success of the business.

The Problem

The problem with how menus currently present information is that it’s difficult to interpret the written description of the menu item, and make visual connections to how the ingredients are prepared. Users are more likely to order an item on the menu if there are corresponding images that can help with the decision making.

Given the circumstances, customers are unconsciously limiting the number of options available, while restaurants run into problems where menu items lacking exposure, lead to less sales.

Competitive Analysis

What products are in the market? How can we learn from them?

Airbnb’s user interface places further emphasis towards their stunningly curated photo collection and illustrations, just as visual imagery helps users make better decisions.

IKEA Place is an augmented reality application, an extended product service created to help users make better purchasing decisions at IKEA. Utilizing ARkit, 3D, true-to-scale models give users an accurate impression, finding the right furniture that fits both functionally and aesthetically has never been easier.

Foursquare uses the overflow menu UI and the Floating action Button to show users contextual actions.

Wireframes

I spent some time researching into customer services and experiences that different types of restaurants catered towards. The purpose of this exercise was to determine which category would most likely see potential gain from an AR experience.

The next step was to map out the physical user journey, this process ultimately helped identify and explore the kinds of experiences users would approach at different stages of an interaction.

Low Fidelity Rapid Prototyping

I started out by building rough userflows to envision how users would go about viewing a digitized menu, placing an order, and viewing menu items in AR. The next step was to quickly validate the userflows that I had created amongst my peers in class.

Design System

One I was satisfied with the userflows, I began working on refining the visual language. Establishing a cohesive typography system, colour palette, and design components. The process lead to a more unified set of high-fidelity wireframes.

High Fidelity Prototyping

Once I was comfortable with the high-fidelity wireframes, I brought all of my design components into Framer where I experimented with a bunch of animations in code.

Building an AR experience required following a completely different workflow. I felt the need to spend more time prototyping because viewing static screens did not help communicate the userflows. The benefit of this was being able to make quick iterations, preview live, and valiadate simultaneously.

Quick Menu Access

The menu navigation feature was designed around the open/close drawer component. Hiding/revealing the menu can be beneficial when users want to avoid disruption and remain focused.

Initializing Augmented Reality

Once users have selected an item from the menu, the AR Scene must first be initialized. From there onwards, users can visualize menu items in augmented reality.

Discover New Menu Items

Our primary navigation still remains the list view for quick access, however once users drill into the next level, we encourage swiping left and right to examine the menu and the items with more depth.

Placing an Order

What was concluded upon during the initial wireframe exploration was the need for the orders tab to be present for users at all times in their user journey.

Recommendations

Expanding on the floating user interface, swiping upwards will reveal the recommendations tab. The philosophy with the module design was to strip the excessiveness, not losing sight of the main focus and allowing for discoverability.

Navigation

Showcasing the reverse animations for when users are moving backwards after drilling into the core of the app. The take away here is that with a majority of the application screens being somewhat hidden, the most essential functionalities are not compromised.

Reflection

Growing up as someone who has lost touch with the previous generations roots and culture. I am inspired by how technology can help rekindle those connections. There are often times where this concept would help me order dishes I remember by sight, when I'm unable to read traditional chinese menus.

Overall, I believe this project was a successful learning experience. I was given the opportunity to do a lot of my work directly in Framer, and I believe that in situations like this, rapid prototyping and motion design was an extremely beneficial asset to userflow validation, concept communication.

If I had more time, I would have continued to iterate over the user interface, but given the short three week timeline I am content with how the current product sits.