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

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
http://www.meetup.com/UXPALA/
info@marcellacreative.com
@Marcella_UX
3/30/201

Intro to UX Development Process

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Intro to UX Development Process

Ähnlich wie Intro to UX Development Process (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to UX Development Process