what is this ux thing?

53
WHAT IS THIS USER EXPERIENCE THING? Presented by Youmna Aoukar Friday, June 12, 15

Upload: youmna-aoukar

Post on 15-Aug-2015

13 views

Category:

Documents


1 download

TRANSCRIPT

WHAT IS THIS USER EXPERIENCE THING?

Presented by Youmna Aoukar

Friday, June 12, 15

HI MY NAME IS [email protected]

Friday, June 12, 15

Friday, June 12, 15

WHY SHOULD YOU BE EXCITED ABOUT UX?

Friday, June 12, 15

Olly the web connected smelly bot http://www.ollyfactory.com/

Friday, June 12, 15

Fat Duck restaurant experience:Like a kid in a sweet shop

http://www.thefatduck.co.uk

PLAY

Friday, June 12, 15

ICE BREAKER 1-Introduce yourself (Name,Profession?)2-Why are you interested in learning UX?

Friday, June 12, 15

CARD SORTING EXERCISEWHAT IS UX?

1- Gather in groups of 42- 2 people from the group will write keywords using post-its about what comes to your mind when you think of UX3- 2 other people from the same group will give a title to categorize these keywords using another color of post-its4-Each group presents 5-Lets compare by finding similarities and difference to gather insights

Friday, June 12, 15

UX CHECKLISTBeing in this field requires

Problem solving

Listening

Observation

Innovative

Analytical

Methodological

Holistic

Risk taker

Realistic

Rational

EmpatheticCommunicative

Storytelling

Source: quirky.com

Friday, June 12, 15

UX FRAMEWORK

=work of multiple people

Development

Prototyping

Business requirements

User research

Content Strategy

Interaction Design

Testing

QA

Copywriting

Information ArchitectureVisual Design

Friday, June 12, 15

INSTAGRAM

Friday, June 12, 15

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?

Friday, June 12, 15

INFORMATION ARCHITECTURE

• Facilitates understanding of the system• Orders meaning• Creates clarity• Establishes consensus

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?

Friday, June 12, 15

INTERACTION DESIGN

• Designs the pieces• Refines the flow• Determines the errors• Documents the solutions

Designing 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?

Friday, June 12, 15

SO...WHAT IS UX ?1-User Needs2-Business Goals

Friday, June 12, 15

USER NEEDSEverything that affects the users interaction with that product

Friday, June 12, 15

BUSINESS GOALSUX designer need to take into account the business need too.

Friday, June 12, 15

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

Friday, June 12, 15

WHAT IS GREAT ABOUT THESE EXPERIENCES?

Friday, June 12, 15

Instagram Netflix

BMW Car DashboardHermin Miller

ChairiPhone

Friday, June 12, 15

Xbox

Square Cash MTA Kiosk

Oculus Rift Mario Kart

Uber App

Friday, June 12, 15

WHAT IS GREAT ABOUT THESE EXPERIENCES?

1-Solves a problem2-Creates habits 3-Inspire Emotions3-Becomes Indispensable

Friday, June 12, 15

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..)

Friday, June 12, 15

IA HEURISTICS

Source: Abby Covert IA Heuristics

Friday, June 12, 15

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

Friday, June 12, 15

DISCOVER

•Determine business needs and goals by workingclosely with the strategy team or product managers

Technique: Stakeholder interviews or issue card exercise

---> Business requirements

Friday, June 12, 15

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

Friday, June 12, 15

DISCOVER

•Determine users needs by engaging and observing target audience

Technique: User interviews, surveys, ethnographical studies

----> Customer journeys/Personas

*For interviews, users can be recruited or guerrilla style interviews can be conducted in problem space

Friday, June 12, 15

Survey sample for curriculum development of online education platform?

Friday, June 12, 15

DISCOVER

•Look at your competitors

Technique: Competitive Analysis

----> Understand best practices and patterns of behaviors

Friday, June 12, 15

Competitive analysis diagram for donation based website

Friday, June 12, 15

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

Friday, June 12, 15

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

Friday, June 12, 15

Personas of Mail ChimpSource: Mail Chimp

Friday, June 12, 15

DISCOVER

•Create customer 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: Customer journey map

----> Identify opportunities, obstacles and possible features for the product

Friday, June 12, 15

Andy app / Customer 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

Friday, June 12, 15

Awareness Consideration Validation Aquire

The user is aware theproduct exist (heard, read or saw)

The user start thinking about their needs andwhich product toconsider

The user knows what he wants but needs morevalidation to feel secure

The user is sold butneeds incentivesto stay loyal

Friday, June 12, 15

DISCOVEROnce the team has a clear idea of the who?what?where?how and why? of the product experience they 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

Friday, June 12, 15

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.

Friday, June 12, 15

Example of site map

Friday, June 12, 15

DESIGNDesigning the interactions

•Design user flows which represent the different actions the users takes while doing a certain task.

•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)

Friday, June 12, 15

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

Low fidelitySource: Harvest App

High fidelity

Friday, June 12, 15

Mockup

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

Friday, June 12, 15

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

Friday, June 12, 15

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

Friday, June 12, 15

...TESTING IN BETWEENEACH PHASE

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

Friday, June 12, 15

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

Friday, June 12, 15

WORKING ENVIRONMENTSIN THE UX FIELD

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

Friday, June 12, 15

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)

Friday, June 12, 15

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

Friday, June 12, 15

QUESTIONS?

Friday, June 12, 15