Uxui Design Challenge

e e n o M p p A k n a B o r P n o i t u l o S a h C Fang

o

l a s po

1. OVERVIEW 2. RESEARCH 2.1. Users 2.2. Competitive Analysis 3. DEFINE 3.1. Needs & Insights 3.2. Value Proposition & Lean Canvas 4. IDEATE 4.1. Application Map 4.2. Wireframing 4.3. Wireflow 5. PROTOTYPE 5.1. Interactive prototype 5.2. Hi-Fi Wireframes

OVERVIEW The irruption of fintech has redefined the banking sector. Monee, a startup based in Barcelona, joins the revolution and is here to stay.

As a UX Designer, I was given the task to create a dashboard of their mobile application, based on the UX study and their core values.

RESEARCH Basing on the briefing and UX study, we know that our main target is millennials (22-35). Among these there are two different kind of profiles:

Young Students

Young Workers

Financially dependent on their parents

Financially independent

Don't have much banking experience

Live alone, with their partner or friends.

Their parents control their accounts and use

Many of them are with their first work

them to put a limited amount of money for

experience

their children's monthly expenses.

They begin to have their first experiences in financial services They are the decision maker

COMMON PATTERNS

Use all kind of digital devices

Distrust of banks,

Leisure and free

Only basic

Not a loyal target

influenced by

time are important

operations

in general

other people's opinions

PROTO-PERSONA

Based on the UX study, I make

a quick proto-persona with this two profiles: young workers and young students

RESEARCH COMPETITIVE ANALYSIS In order to make a market-fit product, it is fundamental to determine how well our competitors are performing. For this project, I use

netnography

to gather information about them.

Go further: to understand the sector, I have downloaded and tried several apps

COMPETITORS Imagen Bank (Caixa Bank)

ING

COMPETITORS (CONT.) Simple

Bnext

COMPETITORS (CONT.) Monese

N26

BENCHMARKING & POSITIONING MAP

DEFINE

We need to go deeper on users' needs and pain points (their fears, motivation, and frustrations, etc.), and most importantly, to gather some insights to define what our product might be in order to fulfill their expectation.

NEEDS & INSIGHTS INSIGHT 1

INSIGHT 2

INSIGHT 3

Millennials tend to be frugal, especially when it comes to fees. Approximately reported that

banking

93%

no-fees

is important when

choosing a financial institution.

Millennials are used to being able

instantly ,

to get things

from a car share

to a support agent.

Millennials have

fears and

anxieties about managing money .

NEEDS & INSIGHTS (CONT.)

INSIGHT 4

INSIGHT 5

Compared with older generations, Millennials Millennials are three times more likely to have had a rough start and are earning less. This situation had led them to

life events

delay major

(e.g. get married before 32, have

a baby or buy a home), though more than

want to get married , have children ,

more than

and more than

a new account with their phone

vs. in

person (the average millennial checks their phone 43 times per day).

70%

74% want to

90% want to

own a home ).

[Desk Research] Source: Infographic from the American Bankers' Association Gallup (https://www.gallup.com/analytics/237734/ways-banks-win-keep-millennial-customers.aspx)

open

According to Gallup, Millennials tend to prefer mobile app and online banking.

WHAT SHOULD WE OFFER? P r o v id e

ractical p d n a l u f p Hel content

nne on cha

ls

build ps relationshi

to ow us t h a t a ll

trust and

il le n n w it h m

ia ls .

a

ch pp

at.

iv e

s and se r v ic e s

that ca n do a b e t t e r jo b o f h e lp in g m il le n n ia ls in an

emergency s ituation

than a c r e d it c ard.

P o s s ib

nt a t s n I on i t a c uni m m co inke i l ns, o i t p o

product

in n o v a t

il t y t o

share their accounts.

o n s to D ig it a l so lu ti money m a n a g e th e ir

h e lp th e m b u il d th e ir fi n a n c e s.

and

VALUE PROPOSITION CANVAS

LEAN CANVAS

IDEATE

Now we can start trying to come up with a possible solution, with all the information we have in hands.

APPLICATION MAP

↑

Click on the image to see the original file

WIREFRAMING

These are actually Mid-Fi wireframes, created with Balsamiq Mockups

WIREFRAMING (CONT.) Why a stiky tap bar? The three key things about an intuitive navigation system have to tell users:

1. Where are they? 2. Where else they can go? 3. What will they find when they get there?

The tab bar fulfills all three requirements.

is more appropriate that the nav bar is visible on every screen and therefore always In a banking app, I think it

gives users a visual orientation. That's why I choose it instead of a hamburger menu.

Not to mention that hamburger menu used to be on the top left corner on the mobile app. As the phone screen grows bigger and bigger each year, that it is the hardest place to reach on a mobile device for a right-handed user, so it lacks efficiency (according to

Fitt's Law). ↑

Click on the image to see the original file

WIREFLOW

↑

Click on the image to see the original file

PROTOTYPE INTERACTIVE PROTOTYPE

http://bit.ly/MoneePrototype

FINAL DESIGN Work in progress...

FINAL DESIGN

To see the image on your device: http://bit.ly/MoneeDash

Thanks for reading:)

Fang Chao [email protected]