designing for users: a primer on using ux principles for effective design
DESCRIPTION
I created this presentation for graphic design students, with the hope of distilling down some principles of UX design that can be applied to any media. The idea is that a goal-oriented, user-focused approach results in more effective design.TRANSCRIPT
DESIGNING FOR USERSA PRIMER ON USING UX PRINCIPLES
FOR EFFECTIVE DESIGN
@KBAGOY, HEAD OF UX +DESIGN, @GETALMA
ABOUT ME
• FELL IN LOVE WITH DESIGN BACK WHEN IT WAS CALLED “DESKTOP PUBLISHING”
• STARTED CAREER COPYING & PASTING AT NIKE. LEARNED A TON, DESIGNED LITTLE
• JUMPED INTO STARTUP LIFE AFTER GRAD SCHOOL. BECAME JILL OF ALL TRADES.
• LANDED DREAM JOB VIA LINKEDIN
Burnout Breakdown Broke
PA
2003 2014
MARKETINGMANAGER
PRODUCTMANAGER
CONSULTANT& DESIGNER
UX LEAD
HEADOF UXMy dream job!
THINGS I’VE LEARNED
• YOU HAVE A UNIQUE SET OF EXPERIENCES, KNOWLEDGE & VALUES. ASK YOURSELF WHERE OR HOW YOU CAN ADD THE MOST VALUE EVERY DAY.
• DONT STAY IN A JOB THAT MAKES YOU MISERABLE. IF YOU AREN’T PASSIONATE ABOUT WHAT YOU DO, YOU’RE NOT DOING ANYONE A FAVOR.
• ITS OKAY TO FAIL. BUT DO IT QUICKLY & LEARN FROM YOUR MISTAKES.
And finally..
PERFECT IS THE ENEMY OF DONE.
Please forgive me for the lack of design in this deck. Form follows function, right?
ON A TYPICAL DAY
SKETCHES, WIREFRAMES, COMPS, USER FLOWS, PERSONAS, MARKUP, BRAND ASSETS OR ILLUSTRATIONS
I WORK WITH THE:
AND I CREATE:
• PRODUCT MANAGER & ENGINEERING TEAM TO DEFINE & IMPLEMENT OUR PRODUCT VISION
• SALES & MARKETING TEAMS TO DEFINE CLIENT NEEDS & MAINTAIN BRAND ID
WHAT IS UX?
OFTEN USED TO DESCRIBE THE OVERLAP OFUSABILITY & VISUAL DESIGN IN THE DIGITAL REALM
FORM(UI)
UX
FUNCTION(USABILITY)
USER EXPERIENCE IS THE HOLISTIC FEELING A PERSON HAS ABOUT A COMPANY, IT’S
PRODUCTS AND IT’S SERVICES.
But actually...
UX IS...A CULMINATION OF EVERY INTERACTION FROM
AWARENESS TO POST-PURCHASE ACTIVITY
SUPPORT
BRANDDIGITAL
PRODUCT
SALES
PR
DESIGN
MARKETING
ENGINEERING
BUSINESS
BUSINESS & MARKETING
PSYCHOLOGY
AESTHETICS
UX DESIGN IS...
UX DESIGN
USER GOALS + BUSINESS GOALS + VISUAL GOALS
BUSINESS GOALS
• BUILD LOYALTY• REACH A BIGGER AUDIENCE• INFORM, MOTIVATE OR ENTERTAIN• SOLVE A PROBLEM• FILL A NEED
BUSINESS GOALS ARE OFTEN DISCUSSED IN CREATIVE WAYS, BUT 99% OF THE TIME, THE BUSINESS GOAL IS TO MAKE MORE MONEY.
USERS GOALS
SUCCESSFUL USER-FOCUSED DESIGNS MEET A NEED, EVEN IF THE USER
DOESN’T KNOW IT
• SAVE TIME• SAVE MONEY• LOOK GOOD• FEEL GOOD• SOLVE A PROBLEM
MaslowsHierarchy of Needs
VISUAL GOALS
• ORGANIZED DATA• CLARITY OF FORM• MOTIVATE & INSPIRE • SURPRISE & DELIGHT
EFFECTIVE VISUAL DESIGNS UTILIZE GESTALT THEORY TO MOTIVATE USERS TO
TAKE ACTION (I.E. MAKE A PURCHASE)
• UNDERSTAND THE CLIENT NEEDS• DEFINE THE PROBLEM• DEFINE THE USERS• DEFINE THE STAKEHOLDERS• DEFINE GOALS & OUTCOMES
DESIGNER GOALS
SOLVE THE RIGHT PROBLEMS,FOR THE RIGHT PEOPLE
DESIGNS CAN BE USER FOCUSED, REGARDLESS
OF THE MEDIUM
UX IN PRACTICE
CLIENTS MAY ASK FOR A SOLUTION, BUT BE
UNAWARE OF THE REAL PROBLEM THEY
NEED TO SOLVE
We need a new logo
We’ve had it since 1978
We want it to be hip + new
Sales are down and we to appeal to a younger audience
Why now?
Why?
Why?
Core problem
DEFINE THE PROBLEM ASKING A SERIES OF “WHY” QUESTIONS CAN BE
HELPFUL IN FINDING THE ROOT OF PROBLEMS
DEFINE USERSDESIGNING WITHOUT KNOWING YOUR AUDIENCE IS
LIKE THROWING DARTS BLINDFOLDED.
• WHO IS MY AUDIENCE?• WHO IS MOST IMPORTANT?• HOW DO I REACH THEM?• WHAT DO THEY NEED?• WHAT MOTIVATES THEM?
Q's:
SOMETIMES WHO YOU ARE DESIGNING FOR IS DIFFERENT THAN WHO PAYS THE BILLS
DEFINE STAKEHOLDERS
• WHO ARE MY STAKEHOLDERS?• WHAT DO THEY NEED?• HOW DO I COMMUNICATE WITH THEM?• HOW WILL I SELL MY DESIGN?
Q's:
EXAMPLE FROM DTELEPATHY.COM
A QUICK PICTURE OF WHO YOU ARE DESIGNING FOR, WITH BULLET POINTS ON WHO THEY ARE.
PROTOPERSONAS
• “GUESSTIMATED,” & LATER VALIDATED
• USED FOR USERS & STAKEHOLDERS
MIGHT INCLUDE NEEDS, GOALS, BACKSTORY, FRUSTRATIONS, IDEAL EXPERIENCE,
BEHAVIOR OR MOTIVATORS
DTELEPATHY.COM
ImeldaThe Teacher
Need: To message my students & parents quickly, individually or by class
Problem: Currently my fastest method is to copy the email link from a students profile and email them outside the app. If I want to include the parents, I need to click through to find their address too.
AdamThe Admin
Need: To message students & parents quickly, individually or by class
Problem: Currently my fastest method is to copy the email link from a students profile and email them outside the app. If I want to include the parents, I need to click through to find their address too.
SarahThe Student
Need: To quickly message my teacher
Problem: Currently I have no access to my teachers contact information, I need to ask a question about an assignments
PeterThe Parent
Need: To message child’s teacher
Problem: Currently I have no access to a teachers contact information, and I’d like to reach out them about my kids grade. I’d also like to be more informed of my childs progress.
MICRO-PERSONASAT ALMA, WE USE MICROPERSONAS TO REMEMBER
OUR USER NEEDS FOR NEW FEATURES
MAKE A LIST OF GOALS BEFORE YOU DESIGN. LATER, VALIDATE YOUR WORK &
ASSUMPTIONS AGAINST THEM
• WHAT DOES SUCCESS LOOK LIKE?• HOW DO I ACHIEVE SUCCESS?
VALIDATE GOALS
Q's:
NOW YOU GO MAKE MAGIC HAPPEN.
DON’T FORGET THE “WHY.”
DESIGN TOOLS & LEARNING RESOURCES
APPENDIX:
• MOLESKIN & PENCIL• ILLUSTRATOR CC - SYMBOL LIBRARIES, BRUSH LIBRARIES, CHARACTER STYLES & GUI KITS• ALFRED• DROPBOX• EVERNOTE & POCKET• FEEDLY• HARVEST FOR TIME TRACKING• OMNIGRAFFLE FOR SITE MAPS• BOOTSTRAP FOR WEB DESIGN• SUBLIME TEXT FOR CODING• INVISION FOR PROTOTYPING
FAVORITE TOOLS
• THE DESIGN OF EVERYDAY THINGS• THE LEAN STARTUP• THE ACCIDENTAL CREATIVE• ABOUT FACE 3: THE ESSENTIALS OF INTERACTION DESIGN• CRUCIAL CONVERSATIONS• THE 10-DAY MBA• SECRETS OF 6-FIGURE WOMEN• LEAN IN• DARING GREATLY• SMASHING MAGAZINE• MASHABLE• LITTLE BIG DETAILS• TINY BUDDHA
RECOMMENDED READING