A BIT ABOUT ME

My name is Marie. I am just finishing a 10-months program on UX

design with Career Foundry and I would like to move now to a UX
position within Renault.

My current and previous positions at Renault (RRG) taught me

transferrable skills I can use in the field of UX: project management,
change management, leadership, agile and design thinking, facilitation
(brainstorming sessions and workshops).

The Career Foundry program helped me develop following UX skills,

thanks to a project-based learning approach:

Competitive Analysis

Discovery/Exploratory Research

User Stories & Personas

User Journeys & Sitemapping

Low and High Fidelity Prototyping

Responsive Design

Accessibility & Inclusive Design

Usability Heuristics

Usability Testing

User Interface Design

One of the projects I worked on as a part of the Career Foundry course

is TRANSFAIR, a responsive web application for ethical online banking.

TRANSFAIR
Your Money - Your Impact

TRANSFAIR is a neobank helping you with budgets and finances, while

letting you have a direct impact on ethical causes that matter to you.

P R O B L E M S TAT E M E N T
ur users need a way to manage their money in a
O

smarter and more ethical way because they want to

gain back control on their finances.

HYPOTHESIS

TRANSFAIR will have to offer digital bank services

which are ethical by design and giving users the
ability to impact causes they value most.

DIRECT & INDIRECT COMPETITORS

NEOBANKS

N26

TRANSFAIR
REVOLUT MONZO
MONZO
N26
BUNQ
TOMORROW

STARLING TOMORROW NEOBANK

NEOBANK

ETHICAL ETHICAL

ETHICAL

BANKS One of the most One of the first One of the first Another ethical
BUNQ successful challenger banks banks being both neobank with a
TRIODOS neobanks. Monzo in continental digital and ethical. focus on the
LLOYDS offers a wide Europe. N26 is Bunq is not environmental
range of digital considered a direct specialised in one cause. Tomorrow
banking features.

competitor to particular cause. is less established

Monzo and other The app offers than Bunq and
HSBC top banking apps.

very innovative offers only a few

features in ethical digital features.

banking.

TRADITIONAL

BANKS

Kiss Kiss Bank Bank and Kickstarter are setting

standards for users’ crowdfunding experience.
This is inspiration for TRANSFAIR as the app will
offer a feature where ethical and profitable
projects can be presented to users for investment.
STEP

BY STEP

FORM

RAT ION TUTORIAL PROGRESS

BAR
INS PI
G
S URIN
REAS

TA R G E T A U D I E N C E
T h e t a r g e t u s e r s o f T R A N S FA I R a r e a w a r e o f i s s u e s
re l a t e d to s u s t a i n a b i l i t y a n d t ra n s p a re n c y. T h e y a re
convinced that something should be done, but they
fi n d i t h a r d t o p u t t h e s e i d e a s i n t o p r a c t i c e i n t h e i r
everyday life. Especially when it comes to banking.
T h e s e p e o p l e a re u s u a l l y d i g i t a l l y - s a v v y.

AS A USER A S A C H A R I T Y / E T H I C A L C O M PA N Y

A s a u s e r, I w a n t t o d o n a t e t o A s a c h a r i t y / e t h i c a l c o m p a n y, I w a n t
charities without having to enter their to be able to submit an application to
bank details, so that I can donate e n t e r T R A N S FA I R ’ s n e t w o r k s , s o t h a t I
e v e n w h e n I a m i n a r u s h .

can be more visible for donations /

f u n d r a i s i n g .

A s a u s e r, I w a n t t o c h o o s e o n w h i c h
project(s) my money is being A s a c h a r i t y / e t h i c a l c o m p a n y, I w a n t
i n v e s t e d , s o t h a t I c a n a l i g n fi n a n c i a l t o g e t i n c o n t a c t w i t h T R A N S FA I R ’ s
choices with my core values and u s e r c o m m u n i t y, s o t h a t I c a n g e t
e t h i c s .

s o m e f e e d b a c k o n m y p r o j e c t s a n d

investments.
A s a u s e r, I w a n t t o s u g g e s t
T R A N S FA I R n e w p r o j e c t s I b e l i e v e a r e
e t h i c a l , p r o fi t a b l e a n d i n t e r e s t i n g t o
others, so that I can help them be
fundraised.

P ERSONAS & J OURNEYS

S ...
ATE
N
DO
H
RA
SA
DONATE

..
TS.
S
VE
IN
R AH
SA
DONATE

R
FO
E S
I
PL
AP ..
A IS N G.
I
AN IS
D RA
N
FU

Protot yping

Based on the user personas and journeys, prototypes have been designed.

These will help stakeholders and developers imagine the final product.

The prototypes will also help designers

to gather feedback from test users.

Invest in an ethical project

Low Fidelity

High Fidelity

View prototype

2. Fundraise for your startup

Low Fidelity

High Fidelity

View prototype

USER TESTING

6
2
4

Participants Research Methods Feat ures Tested

The main testing method was the moderated remote usability testing. I
had 6 participants and did 1 loop. I processed results with a rainbow
sheet and took further design decisions thanks to preference testing.

86%

Overall Satisfaction

(6 test users / scale 1-7 / “satisfaction with usability”)

I miss a recurrent transfer option for donations.

“

O ld design Iterated design

I would like to share photos/links on my

“ fundraiser ad and have a preview before it
gets published.

O ld design Iterated design

O ld design Iterated design

I would like my latest investments to be

“ visible on the dashboard.

O ld design Iterated design

STYLE GUIDE

01 BRAND PERSONALITY

Trust Ethical Digital Transparent

Trendy Confident

02 COLOR PALETTE

The primary colors of our brand are blue and yellow.

As a bank, TRANSFAIR needs to convey calm and

confidence. Blue is known for helping users to build up trust.

But we are also a challenger bank and our target audience is

young. That is why we chose to combine the initial blue with
a strong yellow. Especially CTA buttons will need to have
that color encouraging optimism and action.

03 TYPOGRAPHY

Title 1, Roboto, 45PT, Bold

The application’s text should follow specific patterns as
described below.

Title 2, Roboto, 40PT, Bold

Consistency and structure in typography will help to

Title 3, Roboto, 35PT, Bold

shape an experience that is predictable, thus reassuring

Title 4, Roboto, 30PT, Bold
for users. After all, we are dealing with our clients’
money. And the application and typography is their first
Title 5, Roboto, 25PT, Bold
and most repeated customer experience with us.
Title 6, Roboto, 20PT, Bold

Body, Roboto, 35PT, Regular.

Body, Roboto, 30PT, Regular.

Body, Roboto, 25PT, Regular.

Body, Roboto, 20PT, Regular.

Overline, Roboto, 19PT, Regular.

Overline, Roboto, 18PT, Regular.

04 UI ELEMENTS & STYLE (INCLUDING LOGO & ICONS)

Logo
The same idea of consistency applies to UI elements. If
No overuse of the logo. It can be used on different backgrounds, preferably new icons should be added to the design system, these
white or dark blue (HEX 0D4874).

should convey the same smooth and reliable

TRANSFAIR experience.

UI elements can have a fresh, young design but they

Buttons
should not suprise or make customers unsure about
CTA buttons are in bright colors, preferably yellow (HEX ECB822). Navigation their journey.
buttons follow the specific pattern as suggested below. Sign-up buttons are
always yellow, log-in buttons white with a black stroke.

Sign-up Log-in Sign-up and Log-in Button

Learn more Standard CTA Button

Back Next Navigation Button (inactive)

Back Next Navigation Button (active)

P rogress bars

Whenever users have to go through a journey with several steps on several

screens, make their journey visible through these progress bars. Colors are
neutral as we don’t want them to stand out, but information of where the user is
in the process should be visible and understandable thanks to these bars.

Input fields

Input fields should always have text in Roboto Light 25PT describing the content
expected to be filled in by users.

I nput field

I nput field with drop-down menu

Other UI Elements

Selected

Slide r
Radio Buttons

Unselected

Ticked

Icons
Check Box

Unticked

Pot 3
1 2 3 Steps
Pots

€ 221

Scale

0 10

U S E R I N T E R FA C E

Desktop Version

Mo bile Version

LEARNINGS

The first major challenge I encountered was the user-centric approach. I

learned to silence my own assumptions and intuitions to better listen to
what users had to say. In this process, I also made progress in
understanding how relevant a specific user observation is and in
identifying discrepancies between what a user says and thinks to what
a user does.

Another challenge was to consider business requirements. As a Career

Foundry student, I had a strong time constraint and no budget. So I
needed to make the best out of these constraints. Just as I will do once
I am on a position working for a company or a client.

A third challenge was and still is to consider IT feasibility when

designing. That is why I would like to strengthen my understanding of
HTML, CSS, Javascript etc.

If I had to re-do this project, I would...

Test UI desig
Do multiple rounds of usability testin
Take less features into scope to avoid compromises and maintain
design quality.