what is this ux thing?

WHAT IS THIS USER EXPERIENCE THING?

Presented by Youmna Aoukar and Oskar von Hauske

HI MY NAME IS YOUMNA!@yaoukar umna.net

HI MY NAME IS OSKAR@ovonhauske

hausk.co

INTRODUCTIONS1-Introduce yourself (Name,Profession?) 2-Why are you interested in learning UX? !

WHAT IS UX?

IN THIS COURSE WE WILL...1-LOOK AT EXAMPLES OF UX IN DIFFERENT DISCIPLINES !2-DO AN EXERCISE TO DEFINE THE PARTS OF UX !3-LOOK AT THE COMPONENTS OF THE BASIC THEORY/FRAMEWORK OF UX !4-LOOK AT EXAMPLES OF GREAT USER EXPERIENCE AND UNDERSTAND WHY THEY ARE GREAT? !5- UNDERSTAND THE UX PROCESS BY SHOWING YOU EXAMPLES OF OUR WORK !6-QUESTIONS? RESOURCES? HOW TO GET INTO UX

WHY SHOULD YOU BE EXCITED ABOUT UX?

INSTAGRAM

LUMO LIFT

FAT DUCK

UX CHECKLISTBeing in this field requires

Problem solving

Listening

Observation

Innovative

Analytical

Methodological

Holistic

Risk taker

Realistic

Rational

EmpatheticCommunicative

Storytelling

Source: quirky.com

EXERCISE WHAT IS UX?

Think about words that come to your mind when you think about UX

Development

Prototyping

Business requirements

User research

Content Strategy

Interaction Design

Testing

QA

Copywriting

Information Architecture Visual Design

UX DISCIPLINE

USER RESEARCH

• Informs Strategy • Tests solutions • Compares performance • Measures success

Good design starts with research

Some questions we hear : Is there a customer need or a market for this product? Are we solving a problem that respond to users needs and behaviors? What problem are we tackling? How many users used this website in the past? What is the data? Is this the right feature for this website/product?

INFORMATION ARCHITECTURE

!

• Facilitates understanding of the system • Orders creates meaning and clarity •Make sure the structure fits the mental model of your user •Goal to clearly navigate and find what they want easily

Structure your content and prioritize it

Some questions we hear : How is the navigation of the site organized ? How are we going to prioritize content? How many main pages does our site/app have? Where does this page link to?

INTERACTION DESIGN

• Designs the pieces • Creating flows and refining them. (How do I from A to B) • Determines the errors • Documents the process through wireframes

Creating the behavior of the product

Some questions we hear : Is the product behavior predictable, expected, and usable? Can our user accomplish her goals without many steps or much conscious effort? What are the main features of the website? !

SO...WHAT IS UX ?

UX IS A RESULT!1-How user feels : Effect you have(happy, sad, confused...) 2-How users act: Your return of investment (ROI)

WHAT IS GREAT ABOUT THESE EXPERIENCES?

Instagram Netflix

BMW Car DashboardHerman Miller

ChairiPhone

Xbox

Square Cash MTA Kiosk

Oculus Rift Mario Kart

Uber App

WHAT IS GREAT ABOUT THESE EXPERIENCES?

!1-Solves a problem 2-Creates habits 3-Inspire Emotions 3-Becomes Indispensable !

HOW DO WE MEASURE WHAT IS GREAT ?

!1-Business goals (increased sales, acquired users) 2-Competition (Competitive offerings against competition) 3-User testing(Validation of the UX with users) 4-Data analytics (Metrics:clicks, number of visits etc..) 5-Social media stats (social buzz on Twitter, Instagram, Facebook etc..)

IA HEURISTICS

Source: Abby Covert IA Heuristics

UX DESIGN PROCESSis a set of tools and techniques to take users needs into account at every stage of the product lifecycle.

DISCOVER

•Determine business needs and goals by working closely with the strategy team or product managers !Technique: Stakeholder interviews or issue card exercise !---> Business requirements

Issue card exercise for the redesign of a consulting company website. The goal of this exercise was to understand business needs and pain points

DISCOVER!

•Determine users needs by engaging and observing target audience !Technique: User interviews, surveys, ethnographical studies !---->Personas/ User journeys !*For interviews, users can be recruited or guerrilla style interviews can be conducted in problem space !

Interview script for product development of an professional network for the art world

Survey sample for curriculum development of online education platform

DISCOVER

!

•Look at your competitors !Technique: Competitive Analysis !----> Understand best practices and patterns of behaviors !!

Competitive analysis diagram for donation based website

DISCOVER!

•Create personas which are fictional users that represents the target audience of the product:who they are (demographics), theirs behaviors, needs, goals and pain points. !They can be also be created by looking at a the data collected from the user interviews/surveys/ethnographical studies and the similarities and differences in patterns of behavior !Tool: Persona table !!

Personas template

PERSONAS

WHO?

DEMOGRAPHICS

BEHAVIORS

NEEDS/GOALS

FIND THE PROBLEMS THAT PEOPLE FACE WHILE NETWORKING IN THE ART WORLD IN ORDER TO FIND SOLUTIONS/ IMPROVEMENTS

Personas of Mail Chimp Source: Mail Chimp

DISCOVER!

•Create user journeys which are the key stages of a users activities in the problem space, how they behave in each stage as they move to complete their tasks !Tool: User journeys !----> Identify opportunities, obstacles and possible features for the product !!!

Andy app / User journey that defines key tasks that people perform before, during and after an art event (like Art Basel) . This diagram maps out the different tasks, different environments and different feelings that the person has.

task gridWalk me through your networking activities BEFORE an art event

MAIN TASK: MAIN GOAL:

Sub-Tasks

Scenario

Improvements

Pain points

Functionalities

DISCOVEROnce the team has a clear idea of the who?what?where?how and why? of the product experience then you can start thinking of the scope !

•Define what can be built/designed in scope(what features for example) with certain amount of time and money !Tool: Post-its !---->Prioritize feature by dividing them in high, medium and low !!

Source: Macadamian Blog

DESIGN

Thinking about the Information Architecture !

•Design the site map which determines the structure, navigation and taxonomy of the website !*Taxonomy is how we classify content.

Example of site map

DESIGNDesigning the interactions !

•Wireframes is a blue print of the experience which have different resolution from a sketch to a high fidelity mockup !--->Hierarchy of information is tackled, features and functionality are established, rules of displaying content (by default, on load, on click, on hover, if logged in) !!!!

Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color)

Low fidelity Source: Harvest App

High fidelity

Mockup

Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color)

...VISUAL DESIGNLook and Feel GUI(Graphical User Interface)

...DEVELOPMENTProgrammers code front and back end experience Release a beta version in QA (Quality Assurance) (Find bugs and errors)

...TESTING IN BETWEEN EACH PHASE

Creating quick and easy prototypes is essential to the development of the experience and product. It is recommend to have as many iterations as possible

Prototype !

•A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from !!!!!!

Paper prototype

Functioning prototype using InVision software

HOW TO GET INTO UX?• Take classes and workshops online and offline (more

extensive/advanced classes are available at GA)

• Build a portfolio • Freelance or work for free or a side project • Go to Meetups (THE UX LAB, HUGE UX EVENTS,

NYTECH, BKUX,)

• Be curious and meet people in the field

WORKING ENVIRONMENTS IN THE UX FIELD

• Agencies • Clients • Start-ups • Tech companies • Freelance

AS A UX DESIGNER YOU MIGHT WORK ON

• Marketing Experiences (Smart Water) • Digital Products (Google maps) • Hardware products (Fitbit) • Retail Experiences(Fragrance IQ by Sephora)

• Interactive Environments( Cooper Hewitt Smithsonian Museum)

• Games (LA Noire)

UX REFERENCES• UX booth DIGITAL PUBLICATION

• A list apart DIGITAL PUBLICATION • Smashing Magazine DIGITAL PUBLICATION

• IXDA ASSOCIATION/COMMUNITY • The Interaction Design

Foundation ASSOCIATION/COMMUNITY

• Product Hunt PRODUCT • Nielsen Norman Group UX FIRM

• User Testing or Peak PRODUCT

• Design Kit by Ideo METHOD TOOLS • Google Ventures VC FIRM • Service Design Tools METHOD TOOLS • Omnigraffle SOFTWARE / COMMUNITY

• Axure SOFTWARE / COMMUNITY • Boxes and Arrows COMMUNITY

!

!

QUESTIONS?

WATCH THIS