Make shopping quick & simple

'scan x' will make shopping more easy and convenient for the supermarket customers.

Use our app to skip the checkout queue by scanning and paying the product directly by yourself.

Make shopping quick & simple

'scan x' will make shopping more easy and convenient for the supermarket customers.

Use our app to skip the checkout queue by scanning and paying the product directly by yourself.

Mobile UI

Design Phase

Design Phase

Typography & colors

Typography & colors

Roboto is specifically designed for use on screen and has been designed to balance content density with reading comfort. It ensure maximum quality in the display of text for users.

Roboto is specifically designed for use on screen and has been designed to balance content density with reading comfort. It ensure maximum quality in the display of text for users.

Roboto Sans

Regular

Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Teal symbolizes Renovation, Individuality and Calmness. It's composed of shades of blue and green.Teal is helpful for applications designed for stress relief.

Color 1

HEX

008 08 0

RGB

0, 128, 128

HSB

18 0, 100, 50

CMYK

100, 0, 0, 49

Coffee brown is a color often associated with security, and safety.

Color 2

HEX

704E2E

RGB

112, 78, 46

HSB

29, 59, 44

CMYK

0, 30, 58, 56

Night black is a common color used for texts for better readability.

Color 3

HEX

161616

RGB

22, 22, 22

HSB

0, 0, 9

CMYK

0, 0, 0, 91

White can help to convey cleanliness, simplicity, and minimalist designs.

Color 4

HEX

FDFFFF

RGB

253, 255, 255

HSB

180, 1, 100

CMYK

0, 0, 0, 0

4 Columns grid system

4 Columns grid system

A grid is like an invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together, this app is designed in such a way to present a clear and minimal user interface.

A grid is like an invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together, this app is designed in such a way to present a clear and minimal user interface.

App icon

App icon

Icons Used

Icons Used

Concept behind logo

Concept behind logo

Scan.X is an acronym for scanning experience. The purpose of the X in Scan.X is to improve customers' shopping experiences in the supermarket. Users of the app can quickly skip the checkout line, saving a lot more time.

Scan.X is an acronym for scanning experience. The purpose of the X in Scan.X is to improve customers' shopping experiences in the supermarket. Users of the app can quickly skip the checkout line, saving a lot more time.

Evolution of logo

Evolution of logo

Rough sketching

Digital sketching

Digital sketching

Final logo

Final logo

lo-fi Sketching

lo-fi Sketching

lo-fi Wireframing

lo-fi Wireframing

Mid-fi Wireframing

Mid-fi Wireframing

Final Design

Final Design