KOOK — Designing an App to keep you inspired for lunchtime

When designing Kook, I realised that another Meal App was not what my users needed, which led me to design a different kind of solution.

To the moments we feel uninspired to cook and prepare our lunch meals, and how to get us rolling with new ideas, Kook’s got you! Then what is Kook?

Welcome to my Case Study of Kook, I will be taking you through each stage of its Design Process!

Despite the vast availability of personal metrics and health apps, people struggle to maintain a healthy lifestyle.

Being myself in a struggle to prepare delicious, balanced and regular meals for every day, I was curious to see if others had this kind of struggle too, what were their habits and strategies around it, and how I could design my proposition for a solution to it! This launched my project with the idea of designing a solution for Meal Planning. Little did I expect to create a solution very different from this initial idea as I started putting my feet into the research, defining and ideation stages.

So yes, Kook definitely has something to do with food and meals, but Kook is not a Meal Planner. What is Kook?

Teaser ☀

I wanted to share right away a teaser of Kook with 4 screens of the App 〰️
Teaser number two — there is a video at the end of the post taking us through the App and the Prototype! 〰️

Teaser from the final solution — 4 screens from The Kook App

Summary of the Case Study

• The Challenge
• The Process
• The Solution (you can scroll down to the end if you want to see it directly!)
• Key Learnings & Next steps

The Challenge

Rethink how people can adopt and commit to a health-improving routine.

Timeline — 10 days

My Role

• User Research
• Features brainstorming & prioritisation
• App creation
• Branding
• User Interface Design

Deliverables

• HI-FI
• Prototyping of the Onboarding Flow
• Prototyping of the Main Flow

The Process ☀

Summary of the Methods used for the process

To launch the Research, I started with some desk research to get my feet into the topic and quickly moved on to the Survey to start receiving inputs from users and start understanding their goals, needs and pain points.

Quantitative & Qualitative Research

Both methods were used, with a survey to reach a large number of participants, as well several interviews (5 users and 1 SM Expert, who was a nutritionist).

1 — Quantitative Method, The Survey

I asked questions in my survey to learn more about the habits of people cooking their own lunches: Do they plan ahead? How do they experience it? What are their struggles? How do they find inspiration? Do they have dietary restrictions?

Additional key feedback participants added in their survey:

“I would love to have an app that can make recipes with what I have in my fridge.”

“Maybe how can I do food for a few days at once.”

“It’s hard to plan and do grocery shopping for just one person, so maybe it would be great to integrate this aspect.”

“Adapted with my fridge and who knows a bit what I like.”

Conclusion of the Survey & the keys insights I brought on 📗

• The solution to be in the form of an App.
• Improvisation remains a big part of users’ everyday lives and don’t necessarily want to plan their meals ahead, or if they do, it would not necessarily be more than 2 or 3 days ahead (vs week).
• Finding out what to cook remains often a bit of a painful experience in users’ everyday lives, and a key goal would be to smoothen this process.
• Taking into account what the user already has in their fridge.
• Preparing for one can be more challenging than making decisions and preparation with loved ones.

2 — Qualitative Method, The Interviews

As a second step into User Research, I prepared my Interview Guide to understand different users’ approach to cooking and preparing meals on a daily basis. What was their experience towards cooking? Were they doing it on their own or with other people? Did they enjoy it? Where did they find their inspiration? Did the seasons have any effect on their cooking? Starting with broad questions, to follow the direction the interview and interviewee would take us.

I started interviewing 3 users, moved on to the Affinity Diagram to gather insights. I started to see clear user goals, needs and pain points. I did decide to extend my Qualitative Research with two additional interviews, to see how their insights would add contrast to the ones I had already gathered.

From the 6 interviews, I received key insights that would shape my design decisions 📗

• The struggle was to cook & prepare dishes for users when it was for oneself only. No issue to find inspiration & time for when it was destined to gather friends, family or loved ones.
• In busy weekdays and schedules, our focus and energy goes to something else, like work or actually taking a break and chill.
• Lunch time was the biggest pain point for all users. They would either buy something on the run which they didn’t enjoy in the end, or get to prepare something very quick but untasty, not particularly nutritious and very repetitive, “just for the sake of eating something”.
• We all have our “strategies” or our “Go-To” dishes that we easily prepare without needing mental space, a lot of energy or inspiration. They come naturally to us and we go back to them over again and again may it be while buying groceries, and therefore always cooking with the same ingredients, or may it be at home cooking.
• The need was to implement new ideas naturally, pain-free. In an easy way that would not require effort. All users strongly underlined wanting to eat tasty dishes and try new things, but were facing clear blocks. ADD BLOCKS
• Regarding inspiration when they did take the time to cook and enjoy it, it came from family and friends of course, but a lot of enthusiasm laid in discovering dishes from other cultures. May it be through Cookbooks from different countries, or when traveling, it had a strong impact on users.

User Persona

The Persona gathers the different insights from your interviews and represents your users. This is a key step to keep focusing on designing a solution for your users, based on Research.

My User Persona — Leo, 30 years old and designer, will this way continuously guide me on the project with clear goals, needs and pain points, all based on key insights from my interviews.

Leo, my User Persona for Kook!

Competitive Analysis

The purpose of this step was to find out what already was on the market in terms of Meal Planning Apps — how they were built, what interesting features they were offering, accompanied by their pain points. If my solution was different than an other Meal Planning App, I still needed to see what was existing on the market, including parts that were appreciated by the users. The 4 Apps I settled on were Plan to Eat, Mealime, Healthy Food and Meal Board.

Summary of the Competitive Analysis on Plan to Eat App

Summary of the Competitive Analysis on the Healthy Food App

These Apps offer many interesting different features and the look & feel is globally fresh, light, friendly, offering you tools to get organised and plan ahead, in parallel of making the most of what you already have in your fridge.

Conclusion — This Competitive Analysis made me realise that there were already several different Apps for Meal Planning on the market, which were appreciated by the public. The need did not seem to be creating a new but similar App, and drawing back to my users and User Persona Leo, they were not looking for a meal planning App, otherwise they would have been using it already, the need was somewhere else for Leo: getting guidance when he is at home, ready to eat but lacking inspiration on what to cook, as well as getting inspired.

Problem Statement & How Might We

After all the research done, the problem we would be designing a solution for was clear:

From there, the key question would be How might We help the user cook their lunch meals with joy, variety and inspiration?

Features Brainstorming & Prioritisation

Based on the Quantitative & Qualitative Research, and therefore based on the user needs, goals & pain points, accompanied by the Competitive analysis with the list of interesting and must-haves features — I brainstormed about the list of features for Kook (that did not have a name, yet!).

Brainstorming Features

Screenshot of the Brainstorming Research

Prioritising Features — The Moscow Method
With the help of The Moscow Method, I could define what features were Must haves, Should haves, Could haves and Won’t haves, in order to prioritise what features I would develop in the design and settled for the following:

Final Features selected to build the App

Site Map & User Flow
Time to start designing the flow the user would be navigating on the App! This stage allowed me to understand the different screens and interactions I would be designing to create Kook!

Get Caroline Skadhauge’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I focused on 2 flows:

• The Onboarding path to understand and store the user’s profile (dietary restrictions, where in the world does he want to receive inspiration from, what are his go-to dishes) so the App could guide him depending on this.
• The Main Flow that would guide the user when they needed to cook lunch but felt uninspired.

User Flow Brainstorming

Low Fidelity Wireframes & User Testing

For the Low Fidelity Wireframes, I quickly drew every step and screen of the Onboarding process, in order to be able to start testing the Flow as well as the Concept. To do so, I cut out every piece of screen and arranged them chronologically so a tester would have a paper version of the App in their hands. The purpose is to test if the construction of the App is clear and intuitive, and if given a specific task, the user would know how to navigate the App in order to complete the task.

Low Fidelity Testing Process

• 5 users/ testers
• A definite list of tasks for the user to complete
• Ask the tester to give feedback of what they think and feel while navigating through the App
• No help or guidance to give, you want to test if the App is intuitive enough and learn what adjustments to bring to improve it
• Write down the feedback, and do not adjust your low fidelity wireframe (in bold as a reminder to myself, as I may have fallen into that trap!), keep testing your Low-fidelity and adjust only on the next step: Mid Fidelity wireframing

Screenshot of the quickly hand drawn Low Fidelity Wireframes

The feedback you receive is key to continue improving your design, based on what users have experienced interacting with it!

Mid Fidelity Wireframes

Step 2 of the Wireframe process, I moved on to the Mid Fidelity stage on Figma to start working digitally — with the structure from my LOW FI, the feedback and adjustments from the User Testing, all while starting building components. I designed the 4 Navigation pages with Homepage, Kookbook, Goal tracker and the Profile Page, as well as the Main Flow (main use of the app and navigating through its different steps and screens), and at last the Onboarding flow for the Profile setup.

Screenshots of Low Fidelity and Mid Fidelity wireframes of the 2 first screens of the Main Flow

The Setup of the Onboarding Flow was an extra step — but one we found key to present the App properly, as it is an app that gets very personalised depending on its user.

Screenshot of the MID-FI Wireframes on Figma

At this stage, I could start implementing feedback I had received from the user testing, that made sense to continue improving the App.

Feedback received on Low Fi that were adjusted on the Mid Fi

The Mid Fidelity Wireframe went into testing as well, with 5 users, and following the same process as the testing during Low Fi. I received plenty of feedback that I could keep and start implementing once moving on to the Hi Fi, which is great 🎊 It allows you to bring adjustments during the designing process, instead of only receiving feedback once the product has been launched, which would miss a lot of opportunities to make it its best version before launch.

Screenshot of floating books just to show you that I do write down feedback!

You are only as good as your feedback. — As someone famously said.

Some Key Feedback received on the Mid Fi 📝

• Remove the Navigation bar from the Onboarding Flow
• Avoid crowded screens —Break them down to separate screens, as separate steps
• Homepage — Main purpose and flow of the App should take more attention and therefore more space
• Remove text & pun from navigation buttons
• Extend the Search bar to the full length of grid & place it on top
• Break down the recipe to step by step screens

These changes would be implemented later on the Hi Fi version! But before moving to the final stages, it was time to jump into the very fun part of branding!

Branding for Kook

To launch this big step of the process, I started with attributing Brand Attributes to the App. These key words would guide my choices and selection for the next steps, which are the Moodboard as well as the complete Style tile (including logo, fonts, colour palette, icons).

1 — Brand Attributes
I researched Brand opposites and a Brand Personality slider, and knew what was important for my user:

• It should feel like a little box of inspiration, with elements of surprises and making the whole experience of cooking for oneself a joyful one, and continuously.
• It should really not feel authoritarian, judging in any way, nor boring as we want the user excited to cook and learn, and for him to keep coming back and reach his goals.

I selected the following Brand Attributes for Kook’s look & feel:

2 — The Moodboard, the North star to our design 🦀
Intended to inject a particular feeling, mood, look and concept you want for your app, the moodboard is a piece of the process to continously look on when building your visual identity. I started this on the first days of the project, researching on Pinterest with my key words, as well as looking at different Apps on Mobbin, put it aside a few days working on the other parts of the process, until we arrive here. My final selection for the moodboard contains images with hand drawn illustrations, soft colours, a Marine theme with fish and lobsters, oceans of blues with touches of contrasting and vibrant colours. This clearly defined the colour palette for Kook.

Moodboard for Kook — Source of images: Pinterest

As a a friendly and playful symbol, I moved towards a hand drawn fish as a logo, made some hand drawn tests of styles and looks, as well as testing placing it on the App:

Branding brainstorming + Testing on LOW FI

I kept this concept until I started the Hi Fi. It wasn’t working on the High Fidelity digital version as it was working on paper or in my mind. For the purpose of minimalism and visual appeal, the fish would eventually be removed, as I chose to make the logo with the name conveying in itself a handwritten and playful feeling.

3 — Designing with Accessibility

It was important for me to work on a design that would be built with accessibility for Cognitive as well as Visual disabilities (autism, colour bling, ADHD).

Screenshot of a help guide on Do’s and Don’ts from the All1 Project

This explains the creamy background instead of a bright white screen, a smooth colour palette, big buttons, text accompanying images and icons.

High Fidelity 🎇

1 — Screens & Flow
At this stage, Kook is actually becoming Kook! The Feedback from Mid Fi is implemented, each screen is visually designed, polished, the last visual decisions are made, the animations are created!

Feedback received on Mid Fi that were adjusted on the Hi Fi

2 — Style Tile
Alongside creating the Hi Fi screens, I created the Style Tile — It presents and contains the Colour Palette, Fonts, Icons, Components and Variants for Kook. This serves as guide and reference to build and get back to for everything about Kook.

Kook’s Style Tile — Screenshot from Figma

Design Critique

1 day into the Hi Fidelity version, we held a Design Critique — Presenting our Hi Fidelity en cours during 5 minutes and for 7 people, showing our design and asking for feedback. I really enjoy these sessions as different eyes and brains are looking at your design at the same time and will give you their look & feel about it. It can really show the response users immediately have to your App, guide you where you have question marks and keep you improving the design.

Screenshots of Hi Fidelity Wireframes on Figma — Part of the screens presented during the Design Critique

Key Feedback I received 📝

• People really enjoyed the Name, the logo, the colours and the global look & feel of the app — it was original, minimalistic, soothing, “beautiful” (💛)
• Add name of pages on the Navigation bar (for accessibility to Color Blind disabilities — as an accent colour would not be enough for them to understand quickly where they are on the Navigation)
• The first card on the Homepage looks clickable — which it isn’t. To adjust so it doesn’t confuse the user!
• Add photos on the recipe to make it even more inspiring and making user bring imagination into it
• Add a contrasting accent colour (which would become the Yellow accent colour)

Desirability Testing

I took the opportunity to conduct a Desirability Test with the Microsoft reaction test cards method — to present and understand the look & feel the App conveys to people. My goal was especially to understand which colour palette would be the better option for what I was looking to create: Playfulness, elegance, peacefulness, friendliness (The Brand’s Attributes).

Screenshots of the 2 colour versions presented for the Desirability Test

Process

• 1 survey per version (sent out to different testers)
• including a list with the same 25 Brand Attributes, with both positive and negative elements
• ask the testers to select 5 of them, the 5 words that they find to describe the App’s look & feel
• ask for comments about their choice

I surprisingly saw that with different users (15 in total) and two versions, the 5 top key words selected were the same, being: Friendly, old (old-school), Playful, Creative, Unconventional. As additional comments, the yellow/ green version appealed more as young, fresh and joyful, whereas the blue/ red version conveyed more an academic and serious look & feel. I drew the conclusion that I was on the right track, even if I felt that the final version would be neither of both. The blocs of colours felt overwhelming and I wanted to tone it down for more minimalism.

The Solution ☀☀☀

I am thrilled to show you now the result of my design, with:

• The Onboarding path of 16 screens — with the sign up of the User’s profile in order to setup all the user’s needs and goals before starting to use the App
• The 4 navigation pages of the App — Homepage, Kookbook, Goals tracker, Profile page.
• The main flow with Leo (my User Persona) being at home and in the need to prepare lunch but is lacking inspiration on what to cook, based on what he has in his fridge. Leo can select on receiving recipes either from his own Go-To of dishes, or from his discoveries from around the world, specifically from the countries he chose through his onboarding, which he could also modify from his profile.

Screenshot of the High Fidelity version of Kook, from Figma

Discover the High Fidelity Prototype 🎊

I really hope you enjoy it and find it both playful, elegant, friendly and peaceful! I would love to hear your thoughts and you are always welcome to share your feedback!

Key Learnings & Next steps

Kook was an amazing project to work on, and has clearly defined for me that:

• I wand to keep learning about including accessibility into your design
• User-testing is really a key part of a design project and requires special attention

Thank you so much for your attention, I had so much fun designing Kook. As I wrote just above, you are always welcome to share your feedback!

xx Caro