Traditional mobile apps and websites for ordering food and groceries are outdated and cumbersome, especially when you're on the go. They often require multiple taps, endless scrolling through menus, and entering detailed info like addresses and payment methods. This clunky process is not only impractical but downright unsafe when attempted while driving. That's where Mavi steps in, revolutionizing the experience from the ground up. We've prioritized the driver's convenience, safety, and efficiency, making ordering seamless and stress-free—because you deserve better.

Getting the facts straight

We dove deep into research to really get what users want and need, focusing on crafting a seamless, hands-free, voice-enabled ordering experience while driving. Their major discoveries? People crave a truly hands-free system because current apps are just too distracting and clunky on the road. Plus, drivers need smart order routing and pickup options that jive with their destinations for maximum convenience and efficiency. Participants also wanted curated and limited options to keep ordering simple and stress-free, reducing cognitive load. And guess what? Integrating loyalty programs and rewards was a big hit for boosting engagement and satisfaction.

500 survey respondents and 50 in-depth interviews

Armed with insights from over hundreds of people and charged up interviews, the team laid down some core design principles. Simplicity is king—minimize choices, decisions, and inputs for the driver. Integration is key—sync the ordering system seamlessly with the car’s navigation and other systems. Intelligence shines—use predictive algorithms to suggest the best pickup times and locations, upping the convenience factor. Curation rules—offer limited, pre-packaged food and retail bundles from partners for a streamlined selection. And a multimodal approach—support voice commands and minimal touch or visual interactions to keep everything safe and effective while on the road. With these bold, dynamic design principles, Mavi is set to revolutionize hands-free ordering for drivers, making it not just user-friendly but downright enjoyable.

Car constraints and we don’t mean seat belts

Designing automotive interfaces came with its own set of exciting challenges: limited screen real estate, driver distraction laws, and OEM-specific guidelines.

We teamed up with powerhouses like Harman and Google's Android Automotive OS team to nail safety best practices in their UI. They had to think about the physical constraints of the vehicle's dashboard, making sure all the info was crystal clear and concise, without overloading the driver. Prioritizing essential functions and crafting intuitive navigation paths that minimized driver interaction was the name of the game.

Staying on top of the latest regulations and industry standards was a must, and we seamlessly wove these into their design to keep things compliant. The magic happened through vibrant collaboration with engineers, UX researchers, and safety experts, testing and refining the interface to deliver a seamless yet safe user experience. This meticulous process allowed us to create a UI that not only met stringent safety requirements but also supercharged the overall driving experience.

Flows, maps and AI

The team meticulously mapped out key user flows, starting with account setup, order placement, driver switching, order tracking, and the transition between the mobile app and in-car dashboard views. For the account setup, we prioritized a user-friendly interface, streamlining the process to minimize steps and create an efficient experience. When designing the order placement flow, we focused on making it intuitive, enabling users to complete transactions effortlessly.

In addressing payment systems, we implemented secure and diverse payment options to cater to various user preferences and integrated vendor and bank systems. This step was vital in providing a sense of security and flexibility to users. For driver switching, we aimed to make the process hassle-free by offering clear instructions and feedback at each step. Order tracking was enhanced with real-time updates and easy access to driver information and estimated delivery times, offering users peace of mind.

Voice AI and conversational UX were crucial elements of the user experience. We meticulously mapped out voice user flows and conversational branches, utilizing flowcharts and decision trees. Key aspects included defining voice triggers such as "Hey Mavi," integrating with in-car systems, and designing multimodal experiences combining voice commands with visual prompts and modifyers. We ensured seamless transitions between voice and visual interfaces and conducted iterative user testing to refine the system. This thorough approach validated the voice AI before full development.

Design system nesting dolls

We've built a top-tier design system that's jam-packed with components, typography, spacing, and guidelines specifically tailored for automotive displays and interactions. Our library of reusable UI components—like buttons, icons, and form elements—guarantee a sleek, consistent user experience across all screens. With typography chosen for prime legibility under various lighting conditions typical in automotive settings, we've got you covered day and night. Our meticulously defined spacing guidelines ensure visual harmony and usability, making every screen a joy to navigate.

Rooted in human-machine interface (HMI) principles, our design system supercharges the user experience for drivers. Flexibility? Absolutely. It allows for customization across different OEM brands so each brand can flaunt its unique identity while leveraging our standards. Plus, we've got responsive designs adaptable to different screens and vehicle specs, ensuring a seamless experience no matter the display size or configuration.

Hold the onions

To supercharge feature richness and ensure sky-high user retention and engagement with minimal fuss, Mavi teamed up with restaurants and grocers to offer pre-packaged bundles perfect for seamless, on-the-go ordering. This curated approach lets customers quickly pick from a variety of pre-designed meal options, ditching the need for extensive customization. And guess what? We integrated Voice AI to handle simple tweaks like "Hold the onions," making the user experience effortlessly awesome with real-time adjustments when needed or if allergies were a consideration.

But the ideas didn't stop there. We embedded loyalty programs and reward systems directly into the ordering interface, so customers can rack up and redeem points without even leaving their car while seamlessly encouraging deeper partner relationships with customers and Mavi systems.

And here’s the kicker: Mavi’s AI remembers orders and preferences not just for you, but for your family and friends too. With voice recognition and order recall, we ensure everyone's favorite meals are just a command away, making dining convenient and personalized for the whole crew over time.

look mom no hands

We dove into prototyped user testing with gusto, closely watching how drivers navigated our designs in the wild. We set up pickup scenarios on various routes, letting drivers get hands-on with the interface. During these sessions, we used tools like FullStory to capture detailed session recordings, giving us a front-row seat to user behavior and interaction patterns. Heat mapping tech came into play too, spotlighting areas that drew the most attention and helping us pinpoint usability tweaks.

This phase was a game-changer for gathering feedback, understanding user needs, and fine-tuning the system’s design and functionality to meet the top-notch standards of usability and safety in automotive applications. The insights we gained drove iterative design enhancements, crafting a more intuitive and driver-friendly interface. Our rigorous testing process transformed challenges into triumphs.

The Mavi engineering team then built the platform using cutting-edge frameworks like React Native, chosen for its ability to deliver a consistent and seamless user experience across both mobile and automotive operating systems. React Native also sped up development cycles and made maintenance a breeze, allowing the platform to quickly adapt to future tech advancements and user needs. The team didn't cut corners, investing in rigorous testing and quality assurance to guarantee top-tier performance and reliability.