This viewport is currently not available.
PLease view the website on a desktop device.

Read Full Case Study

scroll
down

citymapper

Overview

project:

conceptual - citymapper

Date:

jan 2022 - march 2022

My Role:

User interview

uX design

uI design

prototype

Presentation video

Tools:

Figma

photoshop

Lottie

after effects

spline 3D

Team:

Xavier Chen

George Beretas

The task

What does Citymapper want ?

Following the easing of Covid-19 restrictions, Citymapper is seeking solutions that not only can motivate individuals to resume their travel routines by choosing Citymapper as their navigation companion, despite Covid-related concerns, but also aim to develop innovative strategies and initiatives to establish business relationships between retailers in the UK and Citymapper.

I were assigned to work on this conceptual team project, which involved exploring people's behaviour and travel preferences in the present situation, as well as generating innovative solutions to secure Citymapper's legacy in the "new normal."

The task was to design a feature that would help Citymapper regain lost traction due to Covid-19 and find a solution to build business relationships between the Citymapper users and local retailers.

🔊 Don't miss out on the audio. Click to unmute to enhance your viewing experience.

design  system

DEsign system

Typography

H1 Headline

bold

36px

H2 Headline

bold

20px

Body

Regular

16px

DEsign system

Buttons

Discover Button

Press to experience the newest features on Citymapper.

H

50px

W

370px

Circular

12px

Font

24px, Proxima Soft - Bold

– Button Structure

– State: Default

– State: Click

Scan Button

Press to scan QR codes at places of interest to earn city coins.

H

30px

W

70px

corner

Round

Icon

15px, 15px

– Button Structure

– State: Default

– State: Click

Wallet Button

Press to view your hard-earned city coins in your wallet.

H

30px

W

70px

corner

Round

Icon

15px, 15px

– Button Structure

– State: Default

– State: Click

Reward Button

Press to view the tasks you have completed and rewards you can receive.

H

100px

W

350px

Circular

8px

Icon

85px, 85px

– Button Structure

– Gift icon is used within reward button

– State: Default

– State: Click

Reward Card

The reward card indicates the progress you have made so far.

H

50px

W

370px

Circular

14px

Font

12px, Proxima Soft - Bold

– Button Structure

– State: Uncompleted

– State: Completed

DEsign system

ICONS

Green-faced Pins

These pins indicate places where you can spend your city coins.

Yellow-faced Pins

These pins indicate places of interest where both knowledge and rewards await. By visiting these places, you can earn city coins and experience the captivating history of the places.

DEsign system

COLOURS

#F03A00
#87E3CF
#D1E5A6
#FFDE94
#CCABD9

Reveal each colour hex code on mouse hover.