UI Layout-12.png
 
 
UX Layout-08.png

Description

The app enhances customer’s in-store experience by providing lively and detailed navigation as well as product-related information. It helps to reduce time-spending in a shopping section, make each journey more enjoyable and relieved.

 

Stages

UX Layout-07.jpg
 
UX Layout-09.png
 

We conducted a survey asking about the experience at supermarkets with 60 people from the age of 18 to 45 - what difficulties they confront each time shopping and why they failed to reduce shopping time.

UX Layout-10.jpg
 
UX Layout-12.jpg
UX Layout-14.jpg
UX Layout-13.jpg
UX Layout-15.jpg
UX Layout-16.jpg
UX Layout-24.png
 
 

Problem

UX Layout-18.jpg
UX Layout-19.jpg
 

Solution

UX Layout-21.jpg
UX Layout-23.jpg
UX Layout-22.jpg
UX Layout-03.jpg
Wireframe.gif
 
UI Layout-12.jpg

Color scheme

UI Layout-13.jpg

Typeface

UI Layout-14.jpg
 

Logo

UI Layout-15.jpg

The rebranding logo of CoopXtra is a logotype to give a modern and trendy look to the brand. Patinio typeface is used in the logo since the typeface is a combination of round and flexible lines together with strong and bold ends. This reflects CoopXtra's customers who are young, flexible, dynamic individuals and families.

UI Layout-16.jpg
UI Layout-17.jpg
 

Our inspiration for the mascot originates from the chipmunk. Chipmunk is a symbol of optimism, playfulness, and energy, which is also the environment that CoopXtra aims for. Besides, the chipmunk is also a symbol of prosperity, fortune, wealth.

The personality of the chipmunk is inspired by the image of a "funny neighborhood uncle." With the purpose to bring laughs to everyone, the chipmunk is recognized by its weird posing.

 
UI Layout-18.jpg
UI Layout-19.jpg
 
UI Layout-20.jpg
 

Most banner designs use mascots as the main visual to draw attention to the design. In addition to that, billboards and shelves are used as supporting graphics to draw the familiar and colorful image of the supermarket.

UI Layout-21.jpg
UI Layout-22.jpg
 
UI Layout-23.jpg
 
 
 
Feed.gif
 

Feed

The feed page provides all information related to the supermarket with both online and offline shopping

 

STEP 1

Navigation_Step1.gif
 

STEP 2

Navigation

After choosing the in-store option, the user can experience a navigation feature that can lead the customer to the exact stall of the product.

Search

Another in-store feature that users can experience is the search tool. With this tool, users can quickly search for information, update the promotion that only available when shopping offline.

 
Search_Step1.gif

STEP 1

 

STEP 2

Search_Step2.gif

Product page

As a brand of every family, Xtra always pays attention to every smallest detail and that can be shown by how information is provided on the product page. Besides providing basic information, Xtra also provides customers with useful information such as allergy ingredients.

 
ProductPage.gif
 
UI Layout_2-16.jpg
 
UI Layout_2-10.jpg
Previous
Previous

Morning Crystal

Next
Next

Wellbeing Discovery