Designing a Wellness App

Discover KOOK

A little Preview of the Designed Solution, for the creation of a Wellness App

Time Frame —

10 days

Role —

UX Designer, UX Researcher, Branding Designer, User Interface Designer

We get excited and well prepared when cooking for a gathering with friends and family, but need a little help to ensure our week personal lunches are a success. That little extra push for the easeful and joyful experience we want to connect to.

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! But what is Kook?

The Starting Point

From Researching the User need to Creating the brand and designing 2 User Flows, “Kook” was a great ride!

We strive for more energy, better health, looking and feeling better.

Yet, despite the vast availability of personal metrics and health apps, we easily struggle to maintain a joyful and healthy lifestyle. One that feels exciting and chosen more than submitted to.

Scope —

UX/ UI Design, Qualitative and Quantitative Research, Visual Design, Branding, Interaction Design, Prototyping

Summary of the Project

The Challenge

  • Specs

  • My Role

The Solution

  • A Mobile App

  • A tool to guide your lunches + keep you excited about discovering new dishes from around the world

  • An elegant & playful design

The Process

  • UX Research

  • Features brainstorming & priorization

  • Brand Creation & Accessibility

  • Wireframing

  • User-Testing

  • UI Designing

Key Learnings & Next steps

  • When getting too complex, focus on simplifying

  • The Appreciative format of a Design Critique

  • Adding language choice

The Solution ~ Teaser

The Challenge

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

Specifications

  • 10 days

  • Designing a mobile App

  • UI Tool — Figma

  • Deliverables — HI FI, Prototyping of the Onboarding flow, Prototyping of the Main Flow

The Process

UX Research

  • Secondary Research

  • Quantitative Research & Qualitative Research

  • Affinity Diagram

  • User Persona

  • Competitive Analysis

  • Problem Statement

  • Features Brainstorming & Priorization

  • Site Map & User Flow

Brand Creation & Accessibility

  • Brand Attributes

  • Moodboard

  • ADHD Accessibility Research

  • Branding choices

  • Style Tile

UI Design

  • Lo-Fi Wireframing

  • From Mid-Fi to Hi-Fi

  • Designed User Flow of Onboarding Path & Main Flow

  • Designed screens of the App

  • Prototyping

Discover the process in details below

Testing along the way

  • Design Critique

  • Desirability Testing

  • Lo-Fi, Mid-Fi, Hi-Fi User Testing

UX Research

Secondary Research

To launch the Research, I started with some introductory 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 through Google Form: 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 that I focused on 🔍

  • The solution to be in the form of a mobile 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 — Qualiative Method, The Survey

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 guide 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.

  • 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.

UX Research

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.

UX Research

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.

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.

UX Research

Problem Statement & How Might We

After this research part, 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?

UX Research

Features Brainstorming & Priorization with the Moscow Method

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!).

UX Research

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!

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.

UI Design

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

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

UI Design

From Low Fi to Mid Fi

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.

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.

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

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.

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!

Brand Creation & Accessibility

To launch this 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).

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.

Brand Creation & Accessibility

The Moodboard

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.

Testing a Logo

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.

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.

Brand Creation & Accessibility

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 blind, ADHD).

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

Brand Creation & Accessibility

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.

UI Design

From Mid Fi to Hi Fi Wireframing

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!

UI Design

High Fidelity

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.

UI Design

Prototyping

I 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!

Thank you so much for going through my Case Study on Kook, I hope you enjoyed it!