Let’s get rolling: Diced!
AI has become a very popular topic and it has been all the rage in recent business trends. How can it be implemented and how can it be useful in new and creative ways? Classically trained AI bots appear to be getting smarter, more natural, and better by the day. So how is that an experience can be applied to these chatbots in order to make the interaction process fun, exciting, and usable?
My Roles
1 Month Project
Research, conceptualize, create, and test a brand new mobile app
UX Team Lead
Primary Researcher
Usability Tester
Figma
Discord
ChatGPT
The Scope
Main Tools
1 Project Manager
1 Project Advisor
UX/UI Team of 4
The Team
1. Context and research
Moving into the research phase, I made it the goal to research how people learn to cook, solutions to commonly experienced problems with home cooking, and most importantly looking into how AI could be utilized in the cooking assistant space.
Inspiration
The project lead had been experimenting with cooking, using Chat GPT as their guide. Any question they could possibly think of they asked and were able to get useful answers. This generated the idea to add an experience and create an entirely new app to make the interactions with the AI fun and useful.
Background Research
After meeting with the clients, I adjusted my research approach to focus less on learning to cook, in favor of studying how people interact with cooking in general and more on how AI interactions could be implemented.
Secondary Research Main Takeaways
A variety of recipes is super important to practice basic cooking fundamentals
AI can improve the cooking experience with recipe suggestions, ingredient analysis, and personalized assistance of all kinds.
An AI that is consistently getting user input and updates on dietary restrictions and food preferences can learn and grow with the user to output more personalized results.
Interviews and Personas
One of my teammates and I were supposed to divide and conquer the user interviews. The original goal was to interview a total of 8 people, with each of us being responsible for 4 interviews. We drafted the interview script together, and reached out to the applicable screener survey respondents. I was able to schedule and carry out my interviews by our agreed deadline, but there was an unforeseen delay on the other 4. Our project was already off to a slow start, so I had to make the call to move forward with only the data I had collected.
Interview Takeaways
There are so many different ways to approach cooking!
Visuals are very important, such as pictures of the recipe's end result or steps involved to make it.
Keeping the content of the recipe simple is a must.
Time management between recipe steps is a common problem.
100% of participants follow a recipe while baking, but only 50% follow a recipe when cooking.
There are so many ways to approach cooking, so four personas were pulled from the interview data.
Competitive Analysis
In order to dip our toes into the problem space, I asked each member of the team to conduct competitive analysis on at least one app in the AI assistant space. Here are two examples of AI assistants I looked at: ChefGPT and Pi: Personal AI Assistant.
ChefGPT
Cons
Recipe generation takes a long time
AI generated pictures of the food
Very limited free plan
No interaction with the AI after the recipe generates
Pros
Wide variety of features and AI generation options.
Dips into ordering groceries through online vendors = potential for revenue
Very easy to navigate
Very customizable
ChefGPT Takeaways
Cooking assistant apps generally have a cookbook (for saved recipes), a way to interact with groceries (shopping, lists, etc.), and some even address meal plans.
Though visuals are important, the AI generated pictures threw me off and made the recipe seem less credible. Steer clear of these!
The AI didn't feel personable at all! Maybe it should be a goal to try for the opposite.
Pi: Personal AI Assistant
Cons
Very limited use-case as is (journaling, seeking advice, etc.)
The AI can talk too fast in the voice chatting feature - hard to follow
Onboarding did not explain the features properly
Pros
Excellent conversationalist
Chat with the AI via voice chat
Very clean UI
Pi: Personal AI Assistant Takeaways
Personable AI interactions make an app feel more alive.
Too much text can overwhelm the user, keep things simple and clean.
Future idea: include a voice chatting feature for when the user's hands are busy with the food they're making?
2. Ideation - MVPs, brainstorming, sketching, and wireframes
My team and I were tasked with conceptualizing and creating an app from scratch. We brainstormed together and defined our MVPs for the design portion of the project.
Then we put together the red routes and most important features that we were wanting to flesh out and focus on when creating the flows for usability testing.
Initial Designs
From there, we dove right into brainstorming the potential layouts of the most important pages through sketching. I tasked the team, myself included, to sketch out some quick brainstorm sketches to get their ideas on paper. Then I recommended that they pick their favorite ideations to sketch out into cleaner and more legible drawings. I focused on the dashboard, cookbook, and interactive recipe page for the rough brainstorms. Below is one example of these brainstorms.
Interactive Recipe Brainstorming
I cleaned up a few of my ideas, of which I will show three examples.
At this point I jokingly suggested we name the AI bot Cookie because the classic AI sparkle graphic reminded me of a chocolate chip cookie when recolored black on a brown background. The team liked the idea, so the name Cookie was adopted for the AI assistant.
Wireframes
I wasn’t too involved with the wireframing of the project, but I did provide feedback and design input when needed. Showcased below are just a few of the low fidelity screens shown to our clients. The screens included below are the early designs for the AI recipe generation screen, recipe overview, interactive recipe page, and the cookbook recipe.
It is important to note here that there are features and layouts demonstrated in these screens, such as the food nutrition tab and a lot of content carousels that were eventually scrapped in later iterations.
3. High fidelity, usability testing results, and iterations!
Moving into the high fidelity portion of the design process, I was more involved. On top of recruiting participants for the usability tests, I was also heavily involved in the design of the hi-fi screens and their prototyping. My thought process being: if I don’t understand the designs and the way they work and interact with each other, how could I effectively moderate the usability tests?
The goal was to focus on designing and experimenting with the AI interactions throughout the experience. There was a focus on feature development rather than visuals for this iteration. There was a huge emphasis on the AI recipe generation feature, with the intent being to make the AI as visible as possible throughout the entire app.
Recipe Generation
AI Interaction Examples
To keep the app feeling like a semi-complete experience, we also experimented with additional features like grocery lists and meal plan generation.
Usability Test Results
After prototyping the hi-fi screens, I set right to work with the usability participants I had previously recruited from the user interview screener survey responses. The demographic were ages ranging from late twenties to early thirties, 75% female, and all about equal in terms of home cooking experience: they had some experience, but no one cooked everyday.
- There were no explanatory prompts or context clues to help users learn how to interact with the AI.
- The buttons and interaction options did not stand out to users throughout the app.
- Users liked the feature, but the presentation and content left a lot to be desired.
A few of the users wanted the ability to create their own meal plan instead of relying only the AI.
- There was such a heavy focus on the AI interactions that the experience felt more like the AI was driving everything instead of function as an assistant.
Moving into iterations, giving agency back to the user had to be a primary focus.
An exciting statistic: out of all the usability test participants
100% would keep using Diced!
Iterations and improvements
I can’t showcase all the small changes and tweaks we made (spoiler: there were a lot), but I’ll highlight some of the bigger ones.
Honing in on making Cookie more of an assistant than a search bar, we added prompts and tips through the app to help the user learn and understand what the AI could do for them. Notably, we also moved Cookie’s tap-space to the top of the applicable screens to help it be more visible and prominent. We also focused on quality of life improvements like the ability to sort and categorize your saved recipes, and cleaning up the designs and screens overall.
Going along with giving the user more agency and control, I brainstormed and created the concept for the custom recipe addition feature. These inputs would have to be heavily moderated to ensure both quality and user safety. This addition paved the way for a much better and more complete experience with the meal plan features.
Visual Design
With about 5 days to the deadline, the graphic designer started to put some life into the screens by adding color, branding, and graphics while the rest of the team continued to improve the features.
There were a few iterations our clients suggested that we really tried to work through and implement. One of these being moving the timers in the interactive step-by-step up next to the step’s title. It was decided that this change was too visually cluttered, so it was reverted back to the original shown below on the right.
Last minute, previous bottom toolbar was scrapped in favor of a 5-button layout that broke up the original cookbook idea into their own tabs.
4. Diced! The final product in review
Introducing Diced! Your new favorite AI cooking assistant. Let Cookie - your virtual sous chef - offer advice, recommendations, and guidance alongside your home cooking journey.
Feel like a rookie? Just ask Cookie!
Icon designed by Ann Marie
Cookie will always be ready to answer any sort of cooking and kitchen question. From types of cookware to the difference between steak cuts, Cookie will have the answer. Chat with Cookie whenever you’d like, so you can get out into the kitchen armed with new knowledge. Forgot an answer? No worries! You can go back and reference your previous chats anytime.
In a hurry? No need to worry
Diced! offers a comprehensive recipe generator to suit your various tastes. Want a certain dish? Just type in the name and Cookie will create the rest for you! Don’t know what you want to eat? That’s okay too, just roll the dice and see what you get!
Don’t like an ingredient or two? No worries, the ability to substitute ingredients is but a button press away. If you’re not sure what to substitute, let Cookie help!
Interact with the recipe, asking questions along the way if you get stuck. The embedded timers, easy to read steps, and AI assistance make sure there’s less flipping back and forth between apps! Keeping it all in one place so you can focus on your food and making it the best it can be!
Have a recipe of your own? Let it be known!
Save your favorite recipes to your cookbook, organize them however you like, and even add your own custom recipes to keep everything in one place! Your cookbook is an extension of your palette and preferences, so fill it up with tastes you’ll always want to come back to!
Track your shopping list, that’s the gist!
Add the ingredients from specific recipes with the tap of a button, or add what you need yourself! Combine, change, and tailor your grocery lists to make your next trip to the store a breeze. Cookie can even remind you about the items you’re always adding to your lists, so you never forget your favorites! Check off your ingredients as you find them in the store, and even go back to look at past lists if you forget what you recently got!
Say “I can!” with your own meal plan!
Meal plan or meal prep by crafting your week in advance! Get organized and embrace variety to really shake your plans up week by week. Let Cookie create a plan for you by answering a few questions, make a plan yourself, or do a mix of both. Leave pantry browsing and fridge staring behind you and grab your week by the horns
5. Future Recommendations and final thoughts
Moving forward with these concepts, I’d highly recommend building integrated voice interactions with the AI. For example, adding a way to move through the interactive recipes via voice commands so the user doesn't have to worry about getting their phones messy. With voice recognition continuously improving, training the app and building these features would be a very smart endeavor.
Along a similar vein, it is important to keep in mind that when training the AI, it needs to be trained to keep its answers accurate and brief. Too easily AI responses get very wordy and they overwhelm the user with information. Keeping content digestible and readable is a must, especially when presented with a lot of information like a step-by-step recipe.
The tab that contains the user’s grocery lists was named “Pantry” because it could be smart to implement a pantry tracking feature later on. If the AI can be trained to utilize ingredients the user already has, it could take these into consideration when creating recipes. This could potentially cut down on the user’s food waste, and maybe even their normal grocery costs.
Closing Thoughts
I’m personally satisfied with the results of this project. Given the delayed timeframe, the amount of content and work that went into the handoff is nothing to sneeze at. I’m proud to report that our clients were extremely satisfied with the results, designs, and overall concepts.
If I were to do anything differently, I would have ensured that everyone on the UX team was on the same page from the get-go. I assumed everyone was coming into the project with similar expectations and experience, but boy was I wrong. There were some miscommunications that required I take on extra work to ensure the project stayed on track with the designated timeframe.
I wanted to mention a gratifying experience that came from this project. It actually came from the usability tests. In a response to my thank you email, one participant very kindly said:
“I’ve been raving to my family about your app! It’s a really good idea and I would really like to see it made!”
It reminded me that part of the reason why I’m designing is to help make people’s lives more enjoyable and fun through the experiences they have with products I’ve worked on. If I can help others get inspired, then I feel like I’ve accomplished something great.
