intro to ux development process

Marcella Missirian

03/24/15

Lavalab USC

User Experience and the

UX Process

Marcella Missirian

President UXPA of Los Angeles

CEO Media Mash UX, Inc.

CEO Marcella Creative, Inc.

Entrepreneur, UX fanatic, designer, mentor and

cook. Marcella's work has been seen globally and

has inspired an entire generation of UX

professionals. She continues to set the standard for

usability and UX that is functional, delightful and rich

in emotional experience!

Marcella is the President of UXPALA (User

Experience Professional Association of Los Angeles)

and active participant at many design, ux and

technology events throughout the world.

http://www.meetup.com/UXPALA/

@Marcella_UX

Linkedin

3/30/201

5 Attitude Adjustment — Valuing Developers in UX and Usability — 2


https://twitter.com/marcella_ux

https://www.linkedin.com/in/marcellamissirian

3/30/201

5 Intro To UX And UX Process | Lavalab | ‹#›

LET’S START WITH –WHAT IS UX AND USABILITY?

Wikipedia User Experience:User Experience (UX) involves a person's behaviors, attitudes, and emotions

about using a particular product, system or service.

Marcella’s definition:UX is the study of the human and everything that is not human and how we

relate and use those objects around us.

Wikipedia Usability:Ease of use and learnability of a human-made object.

Marcella’s definition:Usability means structuring things so you don't leave your users angry,

frustrated, and complaining about you on Facebook or Twitter.

What do you start? – Ideation.

3/30/201


THE IMPORTANT OF UX AND USABILITY

What is the first thing people will do when a product is

difficult to use?

3/30/201


DOES THIS SOUND FAMILIAR?

1. “It’s hard to use & ugly!”

2. “I just don’t understand

how to use this!”

3. “The performance of this

application sucks!”

4. “Was this application

designed for me or an

engineer?”

3/30/201


The cycle of development keeps turning around and if you’re doing it right,

you’re always improving.

3/30/201


UX WORKFLOW BASICS

1. Ideation – Let’s make a new umbrella!

2. Persona Development – Who will use the

umbrella? (Test it)

3. Prototyping – Let’s make a model (Test it)

4. User Journey – How will the user use

it?(Test it)

5. Wire Framing/Visual Design – How does

the user go through it and do they get to

where we want them to be? (Test it)

6. Back/Front End Development – Build it

(Test it)

7. Release – MVP (Test it)

3/30/201


SO WHERE DO YOU START?

• Who are your users?

• What do you want them to do on your site?

• What do they want to do on your site?

• How tech-savvy are your users?

• Where will your users go if your site isn't

working for them?

3/30/201


1. REQUIREMENTS AND IDEATION

• What is your product?

• What need does it fill?

• Requirements or what will it do? Create a list of the most common procedures or tasks on

your site.

Create a definition of success.

3/30/201


2. PERSONA DEVELOPMENT

• Create Personas An aggregate of traits including data traits and emotional

traits of the user of your product

3-5 Persona’s per project or product

As your product changes, persona’s need to be reviewed, re-

evaluated and revised

Your persona or user, is who you’re going to test your

product with throughout the iterative life cycle

3/30/201


*TESTING

• Testing – At different stages through

development, find someone who best fits a

persona

• Write a script to talk through with them – such as

asking them to complete tasks on your product.

• Ask them neutral questions and tasks. Record

each session for review.

• What to test? Old design

Competitor's websites

Sites popular with your users

Proposed site

3/30/201


3. PROTOTYPING

• Mock-up the project or product. Balsamiq, etc. Use anything that’s fast and easy to work with

and you feel comfortable using.

• Prototyping Tools: Paper, pencil, pens, crayons, markers

Clay

PowerPoint

Word

Axure

Balsamiq

Illustrator, InDesign, Photoshop

3/30/201


3. PROTOTYPING, CONTINUED

Test the prototype. Draw screens for each swipe or tap or touch.

Indicate function

Videotape your testing sessions

• Test on family and friends.

• What to do with data - Make adjustments.

3/30/201


4. JOURNEY AND EXPERIENCE MAPPING

• Story board your product (Journey Mapping) Where does the user start?

Do they login?

Do they customize their home page?

How do they find information?

What’s the end result?

• Lay your product out - what screens go/connect to

what screens (Experience Mapping) What’s the lay of the land?

Are screens connecting logically?

Is there easy ways for the user to get where he/she wants to go?

3/30/201


5A. WIREFRAMING

• Create skeleton layouts that show function

and form but no graphics

• Test these layouts

with people that fit

your persona

development

• Adjust, tweek, test,

adjust, tweek, test

3/30/201


5B. VISUAL DESIGN

• Separately from wireframing, build the visual

elements to your product. Logo

Navigation buttons

Colors

Other visual elements

3/30/201


6. DEVELOPMENT

• Now – bring in your developers and give them

solid testing data to build your product. That

data would include: Persona characteristics and behavior

User Journey

Experience Mapping

Testing through each step

Strategy

Success indicators

Back and front end coding begins

3/30/201


*TESTING – YOU ARE STILL TESTING?

RIGHT?!!• Testing – At different stages through

development, find someone who best fits a

persona

• Write a script to talk through with them – such as

asking them to complete tasks on your product.

• Ask them neutral questions and tasks. Record

each session for review.

• What to test? Old design

Competitor's websites

Sites popular with your users

Proposed site

3/30/201


7. MVP

• Nothing will ever be perfect.

• MVP = Minimum Viable Product

• If you think you’re done, you would be wrong

• Iterative process means you keep going and

changing things based on user feedback and

testing

3/30/201


Lather. Rinse. Repeat.

3/30/201


*WHAT MAKES A GREAT TEAM?

A desire to give control over something to a

colleague who can make it bigger, better, more

beautiful!

–Nic Ford, dConstruct

3/30/201


MORE:

Marcella Missirian


[email protected]

@Marcella_UX

3/30/201



mailto:[email protected]

intro to ux development process

Technology

ux process lavalab

important of ux

ux fanatic

user experience ux

ux workflow basicsideation

wikipedia user experience

test itprototyping

ease of use