UI/UX of a Voice Enabled Mobile Application
PROJECT BACKGROUND:
KloveChef is a voice-guided recipe app that utilises AI and machine learning to customise recipes based on user preferences. The app allows the user to interact with assets such as smart shopping lists, dynamic cooking timers, expert chef tips, & various voice alerts during each recipe.
This project was completed while I worked as a product designer for the VC firm SOSV. Klove was accepted into SOSV’s accelerator program, Food-X, where I worked closely with the development team in launching a beta version of the product. The product was shipped to the App Store and Google Play.
Design Challenges:
Choosing a Recipe
One of the most challenging design processes was creating an efficient and easy to use journey for the many different users of the Klove application. Klove partners with different food related organizations to provide a voice guided solution to the partners recipes. Such partners include, publishing companies and cookbooks, meal kit services and consumer packaged goods such as ‘dry baking mixes’.
Screen flow for choosing a meal kit recipe.
TIPS AND TIMERS
Throughout various stages of a recipe, Klove provides expert chef tips. Also, recipes provided from partners such as Meal Kits can contain up to five timers being used simultaneously. Designing a easy to use interface that allowed users to follow the speech dialog while checking timers throughout recipes was important to ensure ease of use and engagement for the user.
The UI for the conversation dialog used design elements of existing conversational interfaces such as Google Home and Amazon Alexa. This was decided to ensure familiarity amongst users and improve learnability of the new Klove system.
To solve the potential screen real estate issue of having 5 timers running simultaneously, I decided to create a ‘stacked timer’ design. Only the timer that needed immediate attention was displayed, with an icon suggesting how many additional timers were also running. All timers are stored in a separate page and can be easily displayed by audibly prompting the Klove voice assistant. This future proofed the design for recipes containing multiple timers.
Dialog and timer screens.