QR Code Menu Website
Supporting Local Restaurants
As the sole Product Designer with a multifaceted background, I conceptualized and executed the branding, web design, and front-end development for MenuSavvy, a QR code-driven digital menu platform, amidst the pandemic.
Problem Statement
The pandemic brought hesitation to dining out. Patrons wanted to venture out, yet they were wary of handling menus, fearing inadequate sanitation. There was a need for a touch-free alternative to the traditional printed menu; MenuSavvy presented a streamlined solution that maintained the intimacy of dining out while eliminating the concerns associated with physical menus.
TEAM COMPOSITION
2 Product Owners
1 Product Designer
2 Software Engineers
MY Impact
Led design efforts across mediums, devices, and experiences
Provided hands-on expertise in starting a new business
Created landing page for outreach and onboarding
Menus without Physical Contact
Advocacy & Representation
This project moved fairly quickly and we launched a website over the course of a couple weeks. In the time I worked on it, I brought creative thinking to the table by envisioning the responsive interface and how users would interact with the brand.
The pandemic brought unprecedented challenges to the restaurant industry. With safety at the forefront of everyone's mind, the desire to go out and enjoy meals was fraught with concerns. Amidst this crisis, a team comprising a software engineer, two forward-thinking stakeholders, and a designer (yours truly) saw an opportunity to provide a solution. We recognized the necessity for restaurants to continue functioning safely during these tough times.
The concept for MenuSavvy was to create a web application and responsive mobile website that would allow restaurants to craft digital menus and produce QR codes for easy access. This was considered a B2B2C venture due to the nature of onboarding restaurant clients in a portal, who would then create menus for patrons; they would display these codes throughout their restaurant as they see fit, and we would provide the framework for custom aesthetics to fit their brands, via print and web design.
Branding Disparate Experiences
My job was to envision the aesthetics and end-to-end experience that involved multiple touchpoints for both restaurant clients and patrons. I started with the brand, creating iterations of the logo in Adobe Creative Cloud, to showcase its potential appearances across various assets. I helped the team visualize how the logo would seamlessly integrate into platforms, from the website portal to tangible print materials like business cards, postcards, and stickers.
The logo encapsulated the essence of MenuSavvy: modern, accessible, and pertinent to the dining experience in the new norm. Several logo prototypes were tested for adaptability and resonance with target users. The final design, chosen for its versatility, offered a consistent brand identity whether viewed at a restaurant's entrance or a diner's mobile device.
Developing a Corporate Website
To captivate potential restaurant owners and potentially turn MenuSavvy into a profitable SaaS venture, we rolled out an inviting corporate landing page. Owners could get signed up and start using their menus right away, but it did take time for them to enter all of their line items. In a later iteration, we offered MenuSavvy as an API, so restaurateurs could create their menus and hook them into their website, styling them however they wanted.
Complex Problem Solving
This project centered around providing extensible design that could be utilized in different environments. I leveraged my visual design skills to focus on typography, icons, and graphics to bridge the gap of communications.
I emphasized a sleek design, paired with enticing CTAs, to encourage restaurant owners to dive into the world of digital menus. The corporate site also featured success stories, testimonies, an instructional video, and a FAQ section. Our approach was to build trust, assuring potential clients of MenuSavvy's reliability and the benefits of transitioning to digital menus.
Forming a Responsive Experience
The pandemic accelerated the ubiquity of mobile browsing for menus. Many restaurants were adopting contactless menu experiences, some of which even had ordering and bill pay capabilities built-in. I wanted to ensure our solution was well-received, so I focused on designing a familiar experience, similar to what a patron might find using popular food delivery services.
Lesson Learned
I learned web development patterns from working in a responsive environment, from using CSS-style breakpoints to flexboxes, to building interactive elements and deep links.
I delved deep into designing custom interactions and components that would translate well on mobile screens, considering interaction patterns like horizontal scrolling, accordions, anchor links, and above-the-fold content. I helped play a critical role in translating these designs into a live site, leveraging HTML, CSS, and PHP. Special attention was given to loading times, ensuring swift menu access post-QR scan. The mobile site was also designed with intuitive navigation, making it easy for diners to explore dishes, read descriptions, and view pricing.
Beyond the Pandemic
MenuSavvy’s launch was met with an overwhelmingly positive response. More than 1,500 restaurants in 25 states and 7 countries recognized its value, signing up to revolutionize their in-person menu experience. The transition from scanning a QR code to viewing a menu was well received by diners, resulting in over a million menu views.
Process Improvement
I learned about better process integration regarding design from a holistic branding perspective; by designing for different deliverables I could better represent the brand in context.
The success of MenuSavvy showed our team’s ability to adapt and innovate during challenging times. Beyond metrics, MenuSavvy became a symbol of resilience and adaptability for the restaurant industry. The platform's success showcased the power of collaborative innovation, redefining dining experiences while addressing pressing health concerns.
Outcomes and Results
In response to the concerns about hygiene during the pandemic, we introduced MenuSavvy, a touch-free, digital menu solution for restaurants. Through QR code integration, diners could access menus without physical contact, eliminating the apprehension associated with unsanitized print menus. Over 1,500 restaurants adopted this innovative approach, resulting in a safer and more streamlined dining experience.
Disclaimer: Work shown was created while employed at Nearby Creative and displayed with permission. Header image from Unsplash.
