+ All Categories
Home > Documents > UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp...

UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp...

Date post: 08-Apr-2021
Category:
Upload: others
View: 0 times
Download: 0 times
Share this document with a friend
64
UX FOR EVERYONE
Transcript
Page 1: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

UX FOR EVERYONE

Page 2: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

LET’S DEAL WITH IMPOSTER SYNDROME FIRST.

THE WEB CAN BE SCARY.

@PICCIA #WCNORDIC

Page 3: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THE UX PROCESS IS USUALLY CARRIED OUT BY HUGE TEAMS ON A LARGE BUDGET.

…THEN I THOUGHT OF UX.

@PICCIA #WCNORDIC

Page 4: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THERE IS ANOTHER WAY.

CAN UX HELP SOLO FLYERS & SMALL AGENCIES?

@PICCIA #WCNORDIC

Page 5: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

JUST ONE WORD.

YES.

@PICCIA #WCNORDIC

Page 6: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

FIRST THINGS FIRST.

WHAT IS UX?

@PICCIA #WCNORDIC

Page 7: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

SIMPLE, AS WELL AS ESSENTIAL.

USER EXPERIENCE.

@PICCIA #WCNORDIC

Page 8: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THE 3 BASIC COMPONENTS OF UX.

LOOKFEELUSABILITY

@PICCIA #WCNORDIC

Page 9: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

EXPERIENCE IS EVERYWHERE.

USER EXPERIENCE IRL.

@PICCIA #WCNORDIC

Page 10: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

FRUSTRATIONBEWILDERMENTANGER

Page 11: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

ORDERSAFETYANTICIPATION

Page 12: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

OVERWHELMCONFUSIONDESPAIR

Page 13: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

CLARITYCERTAINTYPEACE OF MIND

Page 14: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

BEAUTYAMAZEMENTDISCOMFORT

Page 15: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 16: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

IGNORE YOUR USERS AT YOUR PERIL

Page 17: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 18: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 19: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

UX IS INEVITABLE.

WHETHER YOU’VE PLANNED FOR IT IT OR NOT, YOUR USERS WILL INEVITABLY EXPERIENCE YOUR SITE.

@PICCIA #WCNORDIC

Page 20: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

UX IS INEVITABLE.

GOOD PLANNING WILL GIVE YOU CONTROL OVER YOUR USERS’ EXPERIENCE.

@PICCIA #WCNORDIC

Page 21: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

DON’T PLAN YOUR FAILURE: PLAN YOUR SUCCESS.

FAIL TO PLAN = PLANNING TO FAIL.

@PICCIA #WCNORDIC

Page 22: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

JUST DO IT. YOU TOTALLY CAN.

SO PLAN IT!

@PICCIA #WCNORDIC

Page 23: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

HOW TO TELL IF YOU’VE DONE A GOOD JOB.

WHEN DOES A SITE GIVE GOOD UX?

@PICCIA #WCNORDIC

Page 24: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THE 3 QUESTIONS GOOD UX MUST ANSWER.

YOUR WEBSITE OR APP GIVE GOOD UX WHEN YOU CAN ANSWER ‘YES’ TO THESE 3 QUESTIONS:

‣ Does the site or application give the user value?

‣ Does the user find the site or application simple to use and navigate?

‣ Does the user actually enjoy using the site or the application?

@PICCIA #WCNORDIC

Page 25: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

WHAT UX IS TRULY ALL ABOUT.

UX= USER-CENTRED DESIGN.

@PICCIA #WCNORDIC

Page 26: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

DEFINITION OF UX DESIGN FROM THE INTERACTION DESIGN FOUNDATION

User-centred design is an iterative design process in which

designers focus on the users and their needs in each phase

of the design process.

UCD calls for involving users throughout the design process via a

variety of research and design techniques so as to create highly

usable and accessible products for them.

”@PICCIA #WCNORDIC

Page 27: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

INVOLVE YOUR USERS

…“INVOLVING USERS THROUGHOUT THE DESIGN PROCESS…”

@PICCIA #WCNORDIC

Page 28: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

OUTLINING THE UX PROCESS USING THE DESIGN THINKING METHODOLOGY.

UX PROCESS = DESIGN THINKING PROCESS.

@PICCIA #WCNORDIC

Page 29: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

MAKE DECISIONS BASED ON WHAT FUTURE CUSTOMERS REALLY NEED.

DESIGN THINKING IS A PROCESS FOR CREATIVE PROBLEM SOLVING.

@PICCIA #WCNORDIC

Page 30: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 31: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

EMPATHISE WITH YOUR USERS.

DESIGN THINKING IS A HUMAN-CENTRIC PROCESS, AND IT STARTS WITH EMPATHY.

@PICCIA #WCNORDIC

Page 32: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 33: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

5 NON-LINEAR PHASES.

THE PHASES OF THE DESIGN THINKING PROCESS.

@PICCIA #WCNORDIC

Page 34: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

EMPATHISE DEFINE IDEATE PROTOTYPE TEST

@PICCIA #WCNORDIC

Page 35: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THE 3 PHASES OF THE ABBREVIATED UX PROCESS.

RESEARCH DESIGN VALIDATION

@PICCIA #WCNORDIC

Page 36: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

EMPATHISE DEFINE IDEATE PROTOTYPE TEST

RESEARCH DESIGN VALIDATION

@PICCIA #WCNORDIC

Page 37: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

NO POINT BUILDING A WEBSITE OR APP WITHOUT PLANNING THE UX.

HOW TO SELL THE UX PROCESS TO OUR CLIENTS.

@PICCIA #WCNORDIC

Page 38: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

A VERY BRIEF LIST OF THE MAIN ADVANTAGES OF UX.

ADVANTAGES OF GOOD UX:

‣ UX is a quality measure. It improves a business’ reputation because the

users are happy – but it can wreck it if it fails.

‣ Defining needs from the beginning makes it easier to complete on time

and on budget

‣ It’s much more expensive to fix bad mistakes

‣ Thanks to the research you’ll know what competitors are doing and how

your product will be better

‣ No point building something that isn’t needed

Page 39: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

BUILD IT IN YOUR BUDGET WITHOUT EVEN EXPLAINING WHAT IT IS.

…OR, DON’T EVEN SELL IT – JUST DO IT.

@PICCIA #WCNORDIC

Page 40: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

YOU NEED TO CONSIDER BOTH THE BUSINESS AND ITS USERS.

THERE ARE ALWAYS TWO AUDIENCES FOR A UX PROJECT.

@PICCIA #WCNORDIC

Page 41: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

YOU NEED TO CONSIDER BOTH THE BUSINESS AND ITS USERS.

STAKEHOLDERSUSERS

@PICCIA #WCNORDIC

Page 42: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

RESEARCH

Stakeholders interviews Users interviews

PHASE 1. RESEARCH

Page 43: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

PHASE 1. RESEARCH Stakeholders interviews

Questionnaires Workshops

Define

Page 44: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

PHASE 1. RESEARCH Users interviews

Questionnaires Surveys

Facebook pollsWorkshops

User personas & define

Page 45: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

CREATE DETAILED CUSTOMER AVATARS.

WHAT YOU NEED TO KNOW IN ORDER TO CREATE USER PERSONAS:

‣ Demographics (the WHO): age, gender, occupation, income, geo location etc.

‣ Psychographics (the WHY): burning problem, emotions driving it, and desired successful outcome

‣ Needs: what do they need to solve their challenges, fulfil their ambitions and get to the desired outcome?

‣ Solutions: what will we provide in order to meet their needs?

‣ Flow: where do they come from and what do they do when they get to the website/app?

‣ …and give them a name.

Page 46: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

A REAL-CASE AVATAR.

THE BOUTIQUE TRAVEL AGENCY IDEAL CUSTOMER AVATAR:

‣ WHO: Sharon. 55+, North American, retired, good income, time on her hands, likes the outdoors.

‣ WHY: She and her husband have a burning desire to complete the Camino de Santiago to fulfil a promise made to a relative who passed away

‣ FEARS: They are not sure they are fit enough. They are worried that they might need to speak Spanish to get by.And they are not sure if they left it too late to go this year or not.

‣ NEEDS: They also like to have a comfortable time and they’re concerned about having to rough it out on route.

Page 47: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

RESEARCH

Sitemap Users personas

PHASE 1. RESEARCH

=

Page 48: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

PHASE 2. DESIGN IDEATE PROTOTYPE

DESIGN

@PICCIA #WCNORDIC

Page 49: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

PHASE 2. DESIGN

Sitemap & user personas

Wireframes

User flows

@PICCIA #WCNORDIC

Page 50: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 51: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 52: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 53: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

YAY OR NAY?

WIREFRAMES.

@PICCIA #WCNORDIC

Page 54: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 55: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 56: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks
Page 57: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

PHASE 3. VALIDATION TEST

VALIDATION

@PICCIA #WCNORDIC

Page 58: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

YOU *NEED* TO GET YOUR PRODUCT TESTED.

USABILITY TESTING IS ESSENTIAL.

@PICCIA #WCNORDIC

Page 59: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

IT’S ALWAYS POSSIBLE TO FIND USERS FOR TESTING.

USABILITY TESTING ON A SHOESTRING AND ON DEADLINE:

‣ Guerrilla

‣ Literally your partner or your kids or you parents

‣ Your colleagues who haven’t worked on the project

‣ Your friends, their parents, their kids

‣ Facebook groups

@PICCIA #WCNORDIC

Page 60: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

LOTS OF ONLINE TOOLS, TOO.

A FEW ONLINE TOOLS TO CARRY OUT USABILITY TESTING:

‣ https://www.usertesting.com/

‣ https://helio.app/

‣ https://www.pickfu.com/

‣ https://usabilityhub.com/

‣ https://www.userlytics.com/

‣@PICCIA #WCNORDIC

Page 61: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

BE LEAN. BE AGILE.

STYLE DEPLOY OPTIMISE

@PICCIA #WCNORDIC

Page 62: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

EMPATHISE DEFINE IDEATE PROTOTYPE TEST

@PICCIA #WCNORDIC

Page 63: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

BECKETT HAD IT.

TRY AGAIN. FAIL AGAIN. FAIL BETTER.

@PICCIA #WCNORDIC

Page 64: UX for Everyone · 2019. 8. 28. · @piccia piccia neri piccia neri wp facebook.com/groups/designforgeeks

THANK YOU

@PICCIA PICCIA NERI PICCIA NERI WP

FACEBOOK.COM/GROUPS/DESIGNFORGEEKS/

HTTPS://DESIGNFORGEEKS.COM/FREE-UX-COURSE


Recommended