top of page
SKYFOODS

Sky Foods

Food for the BODY,
Fly for the SOUL.

SKYFOODS

Freely customize your
favorite coffee blend

SKYFOODS
SKYFOODS
SKYFOODS

Choose a favorite dish for your family 

SKYFOODS

Hundreds of possible delicious combinations

SKYFOODS
SKYFOODS

The Challenge

In this project, we encountered various difficulties and challenges that had to be overcome. We had to create a complex interface in which the user has the freedom to navigate freely between different kinds of food categories and also be able to edit the chosen product as he wishes. One of the main challenges was understanding the complexity of coffee blends and presenting them in a simple-to-use interface while preserving a maximum array of possibilities.

SKYFOODS

User Journeys

The user creates custom coffee:

Home Page Cofee presets Choose yourblend Edit cofeesettings Summary pop-up(add to cart) Cart Check out

User edits coffee presets and buys snacks:

Home Page Cofee presets Cofee presetpop-up Edit cofeesettings Summarypop-up(Add to cart) Summary pop-up(add to cart) Extras Screen Summary pop-up(add to cart) Cart Check-out Home screen Extras screen

User buys sandwich

Home Page Snadwichpresets Sandwichpreset pop-up Edit sandwichsettings Summary pop-up(add to cart) Cart Check out

Flow Chart

Splash Screen Home Page Cart Extras Shakes Salads Sandwiches Hot drinks CofeePresets ChoosePreset Presetpop-up ChooseBlend Createyour cofee ChoosePreset Createyour tea Sandwichpop-up TeaPresets EditPreset Add to cart EditPreset Add to cart Add to cart EditPreset Add to cart SandwichPresets CreateSandwich SaladPresets CreateSalad ShakePresets CreateShake Add tocart EditPreset Add to cart Add tocart EditPreset Add to cart Add tocart Presetpop-up ChooseMix Choosesettings Choosesettings Add to cart Add to cart Add to cart Add to cart Add to cart Add to cart Chooseingredients Saladpop-up Chooseingredients Shakepop-up Chooseingredients Extraspop-up Add tocart Payment Timerscreen Checkout

Design System

Colors

Primary

Secondary

Icons

Typography

Heading 1
font family: Raleway
font size: 36px
font style: Black

Subhead 1
font-family: Raleway
font-size: 24px
font-style: Semibold

Body 1
font-family: Raleway
font-size: 18px
font-style: Regular

Heading 2
font family: Raleway
font size: 30px;
font style: Semibold

Subhead 2
font family: Raleway
font size: 24px
font style: Regular

Body 2
font-family: Raleway
font-size: 10px
font-style: Regular

Heading 3
font family: Raleway
font size: 18px
font style: Semibold

Components

Buttons

SKYFOODS

Header

Side menu

SKYFOODS

Product’s Pop Up

SKYFOODS
SKYFOODS
SKYFOODS
SKYFOODS

Product's Cards

SKYFOODS

Product’s choosing

SKYFOODS

Hot drinks settings

SKYFOODS
SKYFOODS

Product's pictures

SKYFOODS
SKYFOODS
SKYFOODS

All Screens

bottom of page