UI/UX Workshop - FINTECH @ SBC

A quick guide to UI/UX design(and why it matters.)

“Hello there!”

- DORALIN KELLY

UI/UX designer and Star Wars fangirl

F I N T E C H S T A R T U P S

are easing payment processes, reducing fraud, saving users money, promoting financial planning, and

ultimately moving a giant industry forward.

(Yup, that’s you guys! No pressure..)

- forbes.com

Why?

What?

How?

Why good design matters

What is ‘good’ UX design?

How do I create good UX?

Why?

What?

How?

Why good design matters

What is ‘good’ UX design?

How do I create good UX?

Why?

What?

How?

Why good design matters

What is ‘good’ UX design?

How do I create good UX?

Good design is…

Good design is…

purpose driven.

Good design is…

purpose driven.

problem solving.

Good design is…

purpose driven.

problem solving.

invisible.

Good design is…

purpose driven.

problem solving.

invisible.

Design for Hackers by David Kadavy

Design for Hackers by David Kadavy

User Experience Design encompasses all.

― David Kadavy, Design for Hackers: Reverse Engineering Beauty

The user experience design of a product essentially lies between the intentions of

the product and the characteristics of your user.

“

Who is it for? How are they using it? Why are they using it?

What value proposition will engage users? How do we deliver this benefit?

There are countless factors that can be considered when coming up with your design solution.

OMG Where do I even start???

User-Centered DesignH E R E ’ S H O W !

ANALYZE

DESIGN

TEST & REFINE

Evaluate your current site/app

Learn about your users

Create personas and scenarios

Set measurable goals

User-Centered DesignH E R E ’ S H O W !

ANALYZE

DESIGN

TEST & REFINE

Determine site/app requirements

Cater to all devices

Develop a prototype

Launch!

Create a wireframe

User-Centered DesignH E R E ’ S H O W !

ANALYZE

DESIGN

TEST & REFINE

Usability Testing

A/B Testing

Data analyses

Implement and re-test!

User PersonasH A N D S O N !

1.

In your teams, get your hands on some markers and one of those massive sheets of paper.

2.

Draw out your User Personas.

User PersonasP R O - T I P

Imagine what your user’s Tinder profile would look like..

Likes/Dislikes

Daily schedule

Hobbies

Goals Frustrations

Relationships

Use CasesH A N D S O N !

1.

Write out a simple Use Case for your User Persona.

2.

Discuss and evaluate.

Consider..

How would your user complete a task on your app/website?

What is your user’s goal?

How many steps will it take them to accomplish this goal?

How will your app/website respond to an action?

Use CasesP R O - T I P

USE CASE #1 JOEY

Personal pizza order at home

When:

Where:

How:

Dinner time

At home

pizza.com

• He is a picky eater so he customises his order with specific ingredients

• Joey is hungry, he goes online to order a pizza.

• He prefers to pay with credit card

• His address is pre-populated from his previous order as well

• The website allows him to fully customise the pizza toppings

• The website has his payment details saved from his previous order

*Success Scenario - use case in which nothing goes wrong.

• Joey receives his order in 30 minutes

Consider..

How can you cater for scenarios in which a user gets stuck? i.e Form errors can be super annoying

Can you cut down on steps to accomplish the user’s goal? i.e Joey’s forms were pre-populated from his previous orders

Think about leveraging from the highs/lows in your Use Cases i.e Joey’s order arrives 15 minutes late, he gets a $10 coupon as an apology

from pizza.com

Use CasesE V A L U A T E

Don’t base anything on your assumptions.

Don’t base anything on your assumptions.

Evaluate based on data from your users.

Designing Data-Driven InterfacesF I N - T E C H

Define your personas

Identifying your User Personas upfront is an important step into gaining insight that you can build your wireframes on.

Curate the information

Especially when it comes to dashboards, be sure to show the user what they need to see first, then structure the rest of the page based on

the hierarchy of information.

Truth Labs - Erik Klimczak on Data Visualisation

This rule especially applies to mobile.

The user is presented with key information first, then followed by supporting content.

Truth Labs - Erik Klimczak on Data Visualisation

Simplify and focus.

At a high-level, text summaries can be more useful than charts. This simply tells the user what they need to know through text rather

than relying on charts or graphs that need to be interpreted.

Designing Data-Driven InterfacesF I N - T E C H

It’s a balancing act

Make sure to present your data in a distinctive way, but avoid over-designing and unnecessary distractions.

Simplify. (again)

Strip away the unnecessary to simplify experiences.

Pushing on to Demo DayF I N - T E C H

DUMMM DUMMM DUUUUUMMMMMMMMMMMM!!

Build your Minimum Viable Product

(MVP)

Simplifying doesn’t mean creating a prototype that’s so bare it can’t be used as a test.

It means considering what excess can you strip away.

User TestingH O M E W O R K

1.

Using your prototype, get 5 users to try out your app/website. Give them a task to accomplish (ideally your MVP).

2.

Observe and take notes.

*Jakob Nielsen says so.

Give your users simple but specific tasks to complete.

Observe their behaviour. Do they pause to think?

Always use open-ended, non-leading questions.

Make it casual.

Have participants talk aloud as they perform tasks.

User TestingP R O - T I P

Don’t ask leading questions. People are socially wired to

give ‘polite’ answers.

If you have specific user sets, test within that range.

Questions?I T ’ S A W R A P !

design@doralinkelly.ninja

@doralinkelly

doralinkelly.ninja