5401581 - Copy copy.jpg

Green Spatula

OVERVIEW

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

Team

It was a team project where I assumed the UI Designer role.

Tools

Figma
Adobe photoshop
Adobe Illustrator

Project Timeline

 June-August 2021

DESIGN PROCESS

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. 

Logo Design

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.

Logo Green Sprout.jpg

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. 

Design System

Design System.jpg

Site map

SAMS’O’N Team (1)_Page_3.jpg

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.

Frame 6303.jpg

Sign In, Sign Out

Frame 6304.jpg

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.

Frame 6305.jpg

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.

Frame 6306.jpg

Order Summary

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.

Frame 6307.jpg

User Interface Design, Desktop

Usability Test & Iteration

Before

Before Landing Page.png

After

After Landing Page.png
Picture4.jpg
Picture3.png