Case Study
I led the design for an ambitious project to support mom and pop shops in South Central Los Angeles to combat the challenging effects of the COVID-19 pandemic by transforming regular menu items into interactive 3D models.
Project Type
Role
Project Duration
I designed a mobile application that allowed users to view a restaurants food item, using AR technology by simply scanning a QR code which would showcase a restaurants dish in 3D.
This mobile AR-based application was aimed at supporting mom and pop shops in South Central LA through the COVID-19 pandemic, specifically by transforming regular menu items into interactive 3D models, enriching the dining experience to combat the damaging effects caused by COVID-19.
After talks with an executive from Umami Burger, we gained a letter of intent from Umami Burger in order to have our app incorporated in the Los Angeles Grove restaurant location.
During the COVID-19 pandemic, dining experiences underwent a rapid transformation. There was a lot of health concerns around physical menus becoming a potential hazard due to so many individuals touching a menu per day.
Therefore, as my team and I saw this change happening, we noticed that various mom and pop restaurants from our home of South Central Los Angeles had no support and were falling behind. With sales declining and health concerns rising, we were worried that some of our favorite restaurants would soon go out of business. This prompted my team to think creatively in order to offer a solution to change restaurant menu interactions.
As the UI/UX designer for Qravings, my role carried critical responsibilities throughout the project's life cycle. I was tasked with conducting user research to grasp the needs of businesses and users, crafting intuitive user experiences through wire frames and prototypes, learning about 3D models and collaborating with the developer to integrate augmented reality elements, and ensuring the visual design aligns with the cultural identity of the local community.
Small local businesses face challenges attracting customers and providing engaging dining experiences due to the effects of COVID-19. The goal was to leverage AR technology to drive foot traffic and enhance user engagement.
By incorporating augmented reality, the app offers an immersive way for customers to visualize menu items before ordering. This encourages exploration of new dishes and supports local businesses' growth. This also eliminates having to physical touch or grab a menu, a menu that is frequently handled by a copious amount of guests.
More specifically, I used Blender, a 3D modeling software in order to create high quality food models of a restaurants exact dishes. To create the app designs, I used Figma where I was able to select from a wide range of color schemes and icons. Finally, to combine all the software together, Unity was used in order to finalize the mobile application.
A user first begins by scanning the QR code that is placed either at the outside front of the restaurant or the inside at the entrance. This QR code is specific to the restaurants menu.
After the QR code is scanned, the app then takes them to the restaurants menu screen. This menu screen will have all their items. From here, a user can either directly go into the augmented reality feature or can view a description of the menu item.
If the user decides to learn more about they dish, they are welcomed with a modern UI that allows them to explore the dish even further, as well as adding the item to the cart.
A user can view their desired dish in augmented reality and can interact with the item. A user is able to move the dish closer to their screen and rotate the dish in their desired way.
To create a truly impactful solution for mom and pop restaurants in South Central LA, the project began with thorough research to truly understand the challenges faced by these businesses. This phase involved:
By delving deep into the needs of both businesses and customers, the research phase laid the foundation for a solution that my community needs.
Sketching was a crucial step in the design process. Not only did sketching map out user journeys but also, served as quick prototypes for testing. The imperfections in the early sketches allowed me to demonstrating a willingness to experiment and adapt. The evolution of ideas is clear, showcasing my ability to iterate and overcome constraints while maintaining a user-centric focus. This encapsulates not only my design skills but also the strategic thinking and adaptability essential in UI/UX design.
My low fidelity wireframing played a pivotal role in establishing and emphasizing hierarchy within the app's interface. Through a deliberate and iterative approach, I strategically used sketching to determine the visual hierarchy of elements, ensuring a seamless and intuitive user experience. The sketches allowed me to experiment with different arrangements, sizes, and styles, helping me identify the most effective ways to guide users through the interface. This is further seen in my mid-fidelity wireframing.
The next crucial step in my UI/UX design process involves transitioning to mid-fidelity wireframing. This phase serves as a bridge between conceptualization and detailed design, offering a more refined representation of the app's structure and functionality. Mid-fidelity wireframes build upon the insights gained from sketches, providing a clearer and more detailed framework for the user interface. These wireframes incorporate essential design elements, such as more defined navigation structures, content placement, and interaction points, while still maintaining a simplified visual style. This stage allows for a more comprehensive evaluation of the user flow and interaction dynamics, ensuring that the design aligns with both aesthetic and functional objectives.
Mid-fidelity wireframing is pivotal for Qravings, acting as a crucial step between conceptual sketches and the final design. This phase allows for a detailed visualization of the app's structure, ensuring a seamless user experience for features like QR code scanning and augmented reality menu viewing. It enables refinement, user flow evaluation, and functional testing, ensuring both visual appeal and technical feasibility. By establishing a consistent design language and facilitating stakeholder communication, mid-fidelity wireframes play a key role in validating user-centric design decisions.
The wireframing phase played a key role in shaping Qraving’s user interface (UI). This involved:
By effectively crafting wireframes, I established the foundational framework for the app's UI, focusing on usability, clarity, and the effective integration of AR components.
The prototyping phase aimed to bring the Qraving’s concept to life through practical interactions. This involved:
Through precise user flows, wire frames, and interactive prototypes, the prototyping phase transformed the rough draft vision into a user-centered digital experience.
Beginning with conceptual sketches low fidelity wireframing and progressing through mid-fidelity wireframing, each stage contributed to the evolution of the visual design. Sketching allowed for rapid ideation and exploration of various visual elements, fostering creativity in envisioning the user interface. As the design transitioned to mid-fidelity wireframing, a more detailed representation emerged, facilitating a closer examination of visual hierarchies, color schemes, and overall aesthetics. This iterative approach not only enabled the refinement of visual elements but also provided valuable insights into the most effective ways to communicate information and guide user interactions. By incorporating user feedback and conducting usability testing throughout the process, the final visual design of Qravings emerged as a thoughtful blend of aesthetics and functionality, ensuring a visually appealing and user-friendly experience for those interacting with the app.
Blender is an open-source 3D modeling software which played a crucial role in crafting lifelike 3D representations of menu items. The process involved meticulous modeling, texturing, and rendering.
Also, as a 3D artist, I ensured for the use of high quality polygonal modeling techniques to create detailed meshes that accurately depicted each dish's shape and texture. I also applied UV mapping and textures to achieve realistic surface appearances, ensuring that dishes would appear appetizing even in augmented reality.
The 3D models crafted in Blender were then imported into Unity, a versatile game engine often used for augmented reality applications. Unity's compatibility with various file formats, including those generated by Blender, worked as a smooth integration process. Within Unity, these 3D assets were optimized for real-time rendering, allowing them to be displayed efficiently on mobile devices without sacrificing visual fidelity.
In Unity, AR interactions were developed using AR Foundation, a framework that enables cross-platform augmented reality experiences. It integrated ARKit and ARCore, Apple's and Google's AR platforms. I then used JavaScript to create interactive AR elements, ensuring that users could intuitively engage with the 3D menu items.
Using augmented reality (AR) instead of traditional paper menus offers several advantages, especially with the challenges posed by the COVID-19 pandemic.
With AR, customers can use their smartphones or devices to view realistic 3D representations of menu items right on their tables. This visual feast not only enhances their understanding of dishes but also sparks curiosity and excitement.
Here are some goals that were placed to ensure that the augmented reality feature was at its full use.
Using augmented reality (AR) instead of traditional paper menus offers several advantages, especially with the challenges posed by the COVID-19 pandemic.
With AR, customers can use their smartphones or devices to view realistic 3D representations of menu items right on their tables. This visual feast not only enhances their understanding of dishes but also sparks curiosity and excitement.
Here are some goals that were placed to ensure that the augmented reality feature was at its full use.
AR menus provide an interactive way for customers to explore menu items. Instead of reading descriptions, customers see realistic 3D representations of dishes, enriching the decision-making process more enticing and informed.
AR menus eliminate potential language barriers and misunderstandings by offering visual clarity. Customers can see exactly what a dish looks like before ordering, reducing the likelihood of ordering something they might not enjoy.
In the post-pandemic era, minimizing physical contact is essential. AR menus eliminate the need for physical menus, reducing the risk of contamination and contributing to overall hygiene and safety.
AR menus offer an element of entertainment and surprise, enhancing the overall dining experience and creating memorable moments for customers.
Using AR menus at mom and pop shops in South Central LA can help these businesses compete with larger chains by offering a unique and technologically advanced dining experience.
Logo
App Colors
Typography
The launch of the AR Menu app marked a turning point for local dining experiences in South Central LA. Its integration of augmented reality technology, combined with thoughtful design, has yielded impressive results. Here's a glimpse of the impact it had on a local mom and pop restaurant.
Customer interactions with the AR menu increased by 70% compared to traditional paper menus. The immersive 3D representations of dishes captivated customers, leading to longer app sessions and higher engagement rates.
Revenue from upselling and cross-selling suggestions via the app contributed to a 15% increase in average cost size. The app's ability to recommend additional items enhanced the restaurant's profitability.
90% of surveyed customers reported high satisfaction with the AR Menu app's user-friendliness and impact on their dining experience. The overwhelmingly positive feedback solidified the app's role as a valuable addition to the restaurant's offerings.
95% of customers expressed a preference for using the AR Menu app over traditional menus, citing hygiene and safety concerns. The touch less and hygienic aspect of the app resonated with customers, reinforcing their trust in the restaurant.
During our initial launch, after speaking with the CFO of Umami Burger, we gained a letter of intent from Umami Burger in order to have our app incorporated in the Los Angeles Grove restaurant location.
In the following year, Rep. Jimmy Gomez named Qravings the Los Angeles winner of the Congressional App Challenge in California’s 34th district where we were invited to Washington D.C., to present our app at congress.
In conclusion, Qravings successfully transformed the dining experience at our local mom and pop restaurant by demonstrating its potential to revolutionize the dining experience by engaging with customers.
Beyond statistics, I showed the connection between community, culture, and cuisine, setting a new standard for restaurant innovation in South Central LA. The app's impact on restaurant serves as a testament to its potential in elevating a dinning journey and supporting local businesses.