Concept and Prototype – AR based Food Visualization

How many times have you ordered food online and surprised or saddened by the portion of the order? It may be less or more. Either way, there is a gap in UX for ordering food.

This is a quick one hour exercise to come up with a concept to address the issue of visualizing the food before ordering. I wanted to explore AR as a medium of visualization which is currently more in image format. Shown below are UI of two prominent online food ordering apps.

Swiggy UI — Food item/Dish browser

Though the images clearly show what the customer is going to get it doesn’t show or give much information about quantity. The scenario isn’t suited for a single order but much likely for ordering large quantity.

Zomato — Food item/dish browser UI

Zomato doesn’t even show images of the items, leaving customers to the imagination what they are going to get.

Part of the food image problem also lies in the operational issues of capturing photos of the food, post-processing and maintaining the updates in dishes. And also quality control of the content of mapping images of the dish with the exact food item. I have taken liberty in this aspect and assumed we’ll have a better operational infrastructure to capture images of food.

Below is a sketch note of the process I followed in coming up with the concept.

Sketchnote — Food visualization using AR

The problem with an AR concept is that it is difficult to visualize! So I made a quick mobile phone prototype using the Torch app. Below is a short snippet.

Learnings

AR cannot be standalone or primary app

Augmented Reality is just a medium. Like photo/image or video, augmented reality presents us with a view of the virtual elements in the current physical world. For certain scenarios, it can be the only medium of consuming and interacting with digital content but not all. At least with current day hardware, we are far away from having AR has the only medium of consuming data.

Minimum interaction, Maximum visual

Users today are not used to interacting with visual elements lying around in physical space the same way they do on a flat screen. It takes time to adjust to the new medium. Even I struggled a bit to move my phone around to discover the elements first and interact with them. However, I was always looking for the visual treatment of the elements that should feel part of the real world and those that are used to interact with them. Affordance is the key here.

Landscape mode for a better view of the spread

As you can see in the prototype, things were spread across in the physical world and either I have to move far to get a full view of all the elements or pan my phone to view different elements in detail. Landscape view mode will be best suited for giving the maximum screen area for viewing virtual elements.

Realism is important

This point is very specific to the concept. In food visualization, if we show abstraction it’s as good as not showing one.


Kumar Ahir is an independent consultant working in the field of Immersive Technologies, Product Design, Design Leadership, and Strategy. He is evangelizing Design for Immersive Technologies and UX by actively doing workshops on Design Thinking, Design for AR and VR, Prototyping for Mixed Reality technologies.

He aims to create a better Design Ecosystem for Immersive Technologies.

Know more about him at KumarAhir.com, LinkedIn and Twitter

Don’t forget to give your 👏 !