About Project
Green Kitchen is a recipe app targeted at eco-friendly people who see their diet as an essential part of their well-being. Due to the growing importance of healthy eating, I decided to create an app with a huge number of healthy and easy to make recipes.
I developed the Green Kitchen app during my UI Design Course at Career Foundry in two months.
Recognizing the Problem
Today, more and more people want to live an organic and healthy lifestyle. However it's hard to balance these needs with a stressful and busy life and sometimes a low budget. Green Kitchen was created to help health enthusiasts achieve their nutrition goals easily and stay satisfied.
Today's Solutions - Competitive Analyses
I started with an in-depth market research. I analyzed several similar apps such as Kitchen Stories, Healthy Recipes and My New Roots. Through the SWOT analysis method, I found great design solutions and unique features, and noticed gaps.
I determined that advanced dietary adjustments features and an easily editable shopping list could make my product stand out in the market.
Understanding users is the key to problem solving
Survey & Interviews
To gather better knowledge about my potential users I have conducted a survey with 14 responses and 5 in-person interviews using a process called the Research Learning Spiral (RLS).
In this part, I learned about the user experiences, needs, behaviours and frustrations. Finding out about their eating habits, their successes and failures I was able to identify the problem.
Creating User Personas
Once I have synthesized my user research and found patterns, I built 3 Personas. Each of them is representing a significant group of my target and will help me focus on the specific needs and goals of my targeted users.
User Stories and Gathering Requirements
I have broken down all the user needs identified so far into short user stories and have illustrated simple user flows to define all the steps needed to complete a task and to achieve the goals.
This way I gathered all of the possible requirements for my project, and then I prioritised features based on how crucial they are to my users. To create a ”minimum viable product" (MPV) I wanted to include just the essential features that must be designed.
Creating a User Flow Diagram
I put it all together as a single flowchart. This is where I start defining all of the screens for each of the flows.
Sketching & Rapid Prototyping
With these deliverables in hand, I started to design a low-fidelity prototype. To generate divergent ideas with ease, and get some designs on paper I started with the Crazy 8s method, then I refined my design solution through rapid prototyping.
Wireframes
I started sketching low-fidelity wireframes on paper that transformed into mid- and high-fidelity wireframes.
Evaluation
Usability Testing
We have a lot of methods to evaluate our design and one of them is usability testing. To perform this test I wrote a test script for each task and conducted it with 7 testers. Defining the objectives allowed me to evaluate the ability or inability of users to complete specific tasks.
Based on the test results, I identified specific problems (using Jakob Nielsen’s error severity rating system) in its initial phase. I Improved the filtering categories, fitted better icons at the tab bar and improved the favorites section. I iterated my design from low- to high-fidelity bearing an important design pattern in mind: primary and secondary actions.
Preference Test
With high-fidelity wiremframes in hand, I was able to run a Preference Test to make better and more user-centered design decisions.
Design Workflow
I started the visual design process with creating a Moodboard.
Style Guide
The design was manifested in a Styleguide to help safeguard the integrity of a design. It defines the look, feel, and tone of the content.
Imagery
In the Green Kitchen I only used photography which creates more powerful emotions when it comes to food than a stylised illustration. Photographs are essential to my visual design. My recipe app has a mission and should stay in a realistic tone and convey the physical qualities of a product to provoke a visceral reaction. Professional and tasty looking photos of meals are also meant to inspire users and motivate them to cook and eat healthily.
Colors
The green color is now almost synonymous with health and well-being when it comes to nutrition. In the color palette I used greens and earth tones, which are associated with ecology, natural, organic and healthy food.
Typography
Gil Sans is the primary typeface, chosen for its good readability and associations. This typeface is at the same time austere and classic, yet extremely dynamic, friendly and futuristic. Baskerville is the secondary typeface, used in larger headlines to create a modern, trustworthy and classic design.
Final Mockups
The final design is the result of many iterations based on test results and peer feedback. I changed some icons, and improved the arrangement of UI elements, colors, as well as some features in the "My Kitchen" category and in the filter.
Responsive Design
As my product lives on different devices, I created mobile, tablet, and desktop breakpoints as a starting point. To adjust a design layout for different breakpoint ranges I work with the responsive grid system.
Reflection
Working on this project I gained knowledge and experience that changed my way of thinking and my perception of the role of design in the world. Looking back, how the direction of my project changed from the initial ideas to the final version (although the final version doesn't really exist) I learned what the design process is about and how important user feedback is in it.
I noticed that criticism during the work and the possibility of multiple iterations allows me to be a more open, creative and productive designer.
