The goal of the project was to create a sustainable and efficient way to create a platform for users who are looking for healthy food, need it in bulk, have reasonable delivery time and it's environmentally friendly.
Green Spatula UI Project Team
It was a team project where I assumed the UI Designer role.
Logotype, Design system, sketches, wireframe, Prototype, and testing.
At this project we had to focus on both “Content requirements” such as photos, prices, ingredients, details, and information and also “Functionality requirements” such as Sign in/Sign up, Customizing the options, modifying the ingredients.
Traditionally one of the core tasks in the branding design process is creating a logo, and this case was not an exception. Green Spatula is a brand that wanted to be fun, modern, youthful, and wished to think in the direction of a symbol logo with a wordmark.
As usual, the logo design process started with the creative search for a general visual idea. What the designer had to consider was the flexibility of logo usage for website and phone applications and social networks.
User Interface Design
After finalizing the sketches, we started to make a digital version of our work by Figma. With the help of the User Flow, we created our Mid-Fi prototype for the Mobile application and Desktop website for a usability test.
The usability test was done by 25 different people. The next step was the evaluation. The goal was to understand how real users interact with our product and we made changes based on the results.
User Interface Design, Mobile Application
Landing page, Walkthrough pages
As the Green Spatula is aimed at planning meals operations and quite a diverse target audience, the user interface has to be super easy and accessible for users with different levels of tech literacy and all types of mobile devices.
The application layout is structured around intuitive navigation, high readability, light background, and eye-catching visuals.
The light and airy background set the effective space for a variety of photos and graphics that may come with the photos of the meals.
Clear and solid typography based on san-serif fonts makes the information scannable and legible on screens of different sizes.
Color contrast is used for amplifying quick navigation: bright color accents attract users’ attention to interactive zones and active states of the layout elements.
The search field is easily found on the top of the screen: its functionality is clarified for users with both text prompt and search icon.
Sign In, Sign Out
Home Page, App Menu
At the start of the interaction, users can answer some questions and create a customized meal plan based on their needs, keeping a healthy diet, and the like. Also, they may mark the ingredients they don’t like so that the app didn’t show the meals containing them.
So, search results will provide the personalized list of meals was selected based on their response. They can add more or delete meals, also they can see more details of meals.
Questionnaire, Customized Meals List, Preferences
One more way to personalize meals selection is the system of filters. The filter panel allows a user to sort out the list of meals:
Meal type, Allergy, Calories, Preferences
The panel is placed in the top part of the screen to add more convenience to the operations with the app by one hand.
Meals Cards and Engaging Photos
Photography is a good way to impress users with realistic and clear visuals as well as set the needed associations. With rapidly developing photo stock websites, designers have more and more opportunities to find good images.
The card and the screen of a specific meal for the mobile user interface look mouthwatering. Big meal cards enable photo content to attract maximum attention.