UXG1560

ASSIGNMENT 3:
MOCKUPS & STYLE GUIDE

LOH PEI LING (2002367)

PS: The font of this mock up design

in taken from Canva. Thus, size
might vary*
DESIGN CONCEPT

Money-x is an e-wallet currency exchange app designed

with millennial travellers as our target audience in mind. It
offers users a variety of currency exchange options.

The exchange rates will be constantly updated to provide

users with the best option possible, allowing millennial
travellers to easily and accurately exchange money to
their desired currency, such as SGD to USD.

Users will also be able to earn rewards based on the

number of points they have earned while using the app.
RESEARCH: MOODBOARD

Focusing on the colour scheme and style/appearance of the application's

various interfaces.
RESEARCH: MOODBOARD

Focusing on the different types of elements and functions that should be

included in the application.
RESEARCH: MOODBOARD

Focusing on the type of fonts that should be used in banking or currency

exchange applications.
RESEARCH: MOODBOARD

Focusing on abstract vector art style for the background elements.

DESIGN ELEMENTS

FONTS COLOUR SWATCH

Poppins
ABCDEFGHIJKLMNOPQRSTUVWXZY
#5D36BA #C7AFF9 #737373
abcefghijklmnopqrstuvwxzy
1234567890

Poppins Bold
#A6A6A6 #FAFAFA
ABCDEFGHIJKLMNOPQRSTUVWXZY
abcefghijklmnopqrstuvwxzy
ICONGRAPHY
1234567890

Poppins Medium
ABCDEFGHIJKLMNOPQRSTUVWXZY
abcefghijklmnopqrstuvwxzy
1234567890
TYPOGRAPHY

Heading
Font Size 15
Sub body text
Subheading Font Size 8
Font Size 12

Body text
Font Size 10
UI ELEMENTS

Login and Sign Up buttons Top up button Exchange button Back button
LOG IN LOG IN
Default State Pressed State Default State Pressed State
Default State
SIGN UP SIGN UP Transfer button On/Off button
Default State Pressed State
ON OFF
Pressed State
Option Check button Default State Pressed State On State Off State

Card Selection
Uncheck State Checked State
Default State

In app buttons
Pressed State
CONFIRM CONFIRM

NEXT NEXT Navigation buttons

OK OK
Selected State Default State
Default State Pressed State
UI ELEMENTS
Drop downs Currency Exchange

From To
SGD KRW
You have 107.58 SGD You have 02.32 KRW

$100.00 ₩89,742.00

$100.00
1.00 SGD to 897.42 KRW
Options of the
currencies will
swap accordingly
when the user
From To press on the
SGD exchange button
KRW
You have 02.32 KRW You have 107.58 SGD

INSUFFIENT ₩89,742.00

₩100.00
1.00 KRW to 0.0011 SGD
UI ELEMENTS
Number Pad Currency Graph
Key to input amount 930

920

897.42
910
Default State
Default State (show the latest
890 exchange rate)

880
28 01 02 03 04 05
FEB MAR MAR MAR MAR MAR

930

Pressed State 920

Selecting options 910 893.21

Selected State
(show the
previous
890 exchange rate)

880
Pressed State
28 01 02 03 04 05
Default State FEB MAR MAR MAR MAR MAR
MOCK UP SCREENS

LOGIN PAGE SIGN UP PAGE

Animation: The circle-shaped elements would be floating around at a slow speed.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME TOP UP SUCCESSFUL

If pressed
"BACK"

This section
will be
scrollable
(Left and Amount
right) keyed
will be
If pressed "TOP UP" shown in
this area

This section
will be
scrollable
(Up and
down)

Interactable
keypad

If pressed "CONFIRM"

If pressed "OK"

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

TOP UP CARD SELECTION

If pressed
"CHANGE"

Can be
dragged down
to return to the
main "Top Up"
screen

Select to
change card

Select to add
new card

Animation: All background elements would be static on these pages.

 MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME EXCHANGE CURRENCY ENTER AMOUNT

If pressed
"BACK"
Press to
show profile Select to
view the
currency
graph
based on
days,
month,
If pressed week and
Amount
"EXCHANGE" year
keyed
will be
shown in
this area

Select to
view
transaction
of that
current
month

Interactable
keypad

If pressed "CONFIRM"

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME TRANSFER SUCCESSFUL

If pressed
"BACK"

If pressed Amount
"TRANSFER" keyed
will be
shown in
this area

Interactable
keypad

If pressed "CONFIRM"

If pressed "OK"

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

TRANSFER

Drop down
of contacts
will be
shown when
pressed

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME CARD
If pressed
"BACK"

Press to
toggle
settings

If pressed
"CARD"

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME CARD
If pressed
"BACK"

Drop down for

Sorting option
when pressed

Select to
claim
rewards

Animation: All background elements would be static on these pages.

MOCK UP SCREENS
Legend:
Interactable
Descriptions

HOME SETTINGS
If pressed
"BACK"

Press to
toggle
settings

Animation: All background elements would be static on these pages.

 MOCK UP SCREENS OVERVIEW
1 2 3 4 5 6 7

8 9 10 11 12 13 14