what is this ux(user experience) thing?

WHAT IS THIS UX THING? UC Youmna Aoukar, UX Designer

HELLO!

MY NAME IS YOUMNA @yaoukar umna.net

HELLO!

HELLO! HELLO!

HELLO!

INTRODUCTIONS 1- Introduce yourself

2- Why are you interested in learning about UX?

HELLO!

WHAT IS UX?

AGENDA AGENDA

‣ Look at examples of UX in different disciplines

‣ Do an exercise to understand the different parts of UX

‣ Look at the components of the basic theory/framework of UX

‣ Look at examples of great user experiences and understand why they are great

‣ Look at a case study of my work to better understand the UX process

‣ Questions? Resources? How to get into UX?

WHY SHOULD YOU BE EXCITED ABOUT

UX?

INSTAGRAM

LUMO LIFT

FAT DUCK

UX CHECKLIST

Problem solving

Listening

Analytical

Methodological

Realistic

Rational

Communicative

Observation

Innovative

Holistic

Risk taker

Empathetic

Storytelling

‣ Body Level One ‣ Body Level Two ‣ Body Level Three ‣ Body Level Four ‣ Body Level Five

‣ Body Level One ‣ Body Level Two ‣ Body Level Three ‣ Body Level Four ‣ Body Level Five

EXERCISE 1 – WHAT IS UX?

Think of keywords

__

WHAT COMES TO YOUR MIND WHEN YOU THINK OF

UX

UX ECOSYSTEM

Development

Prototyping

Business requirements

User research

Content Strategy

Interaction Design

Testing

QA

Copywriting

Information ArchitectureVisual Design

USER RESEARCH

GOOD DESIGN STARTS WITH RESEARCH • Informs Strategy • Tests solutions • Compares performance • Measures success

‣ Informs strategy

‣ Tests solutions

‣ Compare performance

‣ Measures success

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

STRUCTURE YOUR CONTENT AND PRIORITIZE IT • Informs Strategy • Tests solutions • Compares performance • Measures success

‣ 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

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

CREATE THE BEHAVIOR OF YOUR PRODUCT • Informs Strategy • Tests solutions • Compares performance • Measures success

‣ Designs the pieces

‣ Creating flows and refining them. (How do I go from A to B)

‣ Determines the errors

‣ Documents the process through wireframes

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

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

WHAT IS GREAT (OR BAD) 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?


‣ Solve a problem

‣ Create habits

‣ Inspire emotions

‣ Becomes indispensable

HOW DO WE MEASURE WHAT IS GREAT?


‣ Business goals (increased sales, acquired users)

‣ Competition (Competitive offerings against competition)

‣ User testing(Validation of the UX with users)

‣ Data analytics (Metrics:clicks, number of visits etc..)

‣ Social media stats (social buzz on Twitter, Instagram, Facebook etc..)

IA HEURISTICS


Source: Abby Covert IA Heuristics

UX DESIGN PROCESS IS A SET OF TOOLS AND TECHNIQUES TO TAKE USERS NEEDS INTO

ACCOUNT AT EVERY STAGE OF THE PRODUCT LIFECYCLE.

CASE STUDY

ELECTROLUX.COM REDESIGN • Informs Strategy • Tests solutions • Compares performance • Measures success

DISCOVER

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

‣ Determine business needs and user goals by working closely with product managers, stakeholders of the business and users

‣ Technique: Workshop with Stakeholders and Users or/and Interviews

‣ Output: BRD (Business Requirement Document)

DISCOVER


DISCOVER


AS A _______ I WANT ______ SO THAT _______

DISCOVER


AS A _______ I WANT ______ SO THAT _______

‣ As a business I want to offer shoppers free shippiing so that I can be competitive with other stores to find new product so that they can buy them

‣ As a business I want owners to register their product so that they can learn about their benefits (extended warranty, special offers etc…)

‣ As a shopper I want to compare my product so that I make the best purchase decision

‣ As a shopper I want to easily add my product to my cart so that I can checkout

‣ As a shopper I want to create an account so that I can see my order history

‣ As an owner I want to easily find service so that I can repair my product

‣ As an owner I want to easily find manuals so that I can install my product

DISCOVER


DISCOVER

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

‣ Determine users needs by engaging and observing target audience

‣ Technique: User interviews, surveys, ethnographical studies

Output: User interview script

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

DISCOVER


DISCOVER

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

‣ Look at your competitors to understand best practices and patterns of behaviors

‣ Technique: Competitive Analysis

Output: UX/UI Patterns

DISCOVER

Patterns: Single page layout/ Opening cover page/ Visual Global Navigation

DISCOVER

Patterns: Keyword Carousel/ Comparison Functionality / Quick Links in footer/ Utility links/ Zoom in and out functionality

DISCOVER

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

‣ 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

DISCOVER


PERSONAS

WHO?

DEMOGRAPHICS

BEHAVIORS

NEEDS/GOALS

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

DISCOVER


DISCOVER

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

‣ 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

‣ Output: Identify opportunities, obstacles and possible features for the product

DISCOVER

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

The user is aware the product exist

(heard, read or saw)

The user start thinking about their needs and

which product to consider

The user knows what he wants

but needs more validation to feel secure

The user is sold but needs incentives

to stay loyal

DISCOVER

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

‣ Once 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

DISCOVER


DISCOVER


ESSENTIAL TO THE USER )

NICE TO HAVE

HIGH EFFORT / HIGH COST

LOW EFFORT / LOW COST

DESIGN

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

‣ Design the site map which determines the structure, navigation and taxonomy of the website

Output: Sitemap

*Taxonomy is how we classify content


Link to sitemap

DESIGN

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

‣ Designing the interactions

‣ Wireframes is a blue print of the experience which have different resolution from a sketch to a high fidelity mockup

Output: Wireframes that illustrate the hierarchy of information, features and functionality. The rules of displaying content are illustrated as well (by default, on load, on click, on hover, if logged in)

DESKTOP WIRES


Link to Desktop Prototype

MOBILE WIRES


Link to Mobile Prototype

DESIGN

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

‣ Look and Feel

‣ GUI(Graphical User Interface)

‣ Imagery

DESIGN


PROTOTYPE & TESTING

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

DESIGN

PROTOTYPE y • Tests solutions • Compares performance • Measures success

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

Types of prototypes:

Paper prototype made of sketches, high fidelity wireframes and comps

Link to Marvel Prototype

DESIGN

MARVEL y • Tests solutions • Compares performance • Measures success

DESIGN

TESTING & ITERATIONS y • Tests solutions • Compares performance • Measures success

Usability testing using usertesting.com

Link to Usertesting.com

DEVELOPMENT

IMPLEMENTATION y • Tests solutions • Compares performance • Measures success

Programmers code front and back end experience

Create a library with the GUI that can be reused in the future

Release a beta version in QA (Quality Assurance)

(Find bugs and errors)

DEVELOPMENT

DEPLOY! y • Tests solutions • Compares performance • Measures success

HOW TO GET INTO UX

y • Tests solutions • Compares performance • Measures success

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

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

‣ Sketch SOFTWARE / COMMUNITY

‣ Axure SOFTWARE / COMMUNITY

‣ Boxes and Arrows COMMUNITY

QUESTIONS?

WATCH THIS