Kickstart Your UX Design - From Concept To Prototype

KICKSTART YOUR DESIGN
FROM CONCEPT TO PROTOTYPE

Preston mccauley | @uidesignguide | uidesignguide.com
Saturday, November 19, 11

ITINERARY
• My background

• Visions, values & goals

• A practical UX process

• Story planning

• Creative thinking exercises

• Planning preparation

• Priority planning

• Product sketching

• Paper prototyping

• Prototyping tools

• Frameworks

• Tips & tricks

• Questions


ABOUT ME
• User experience designer
• Built hundreds of apps
• Business owner & consultant
• Article writer and creator of
uidesignguide.com

• Project manager
• Search engine optimization
expert

• Google analytics expert FLICKR:-DAV-F

• Wordpress expert


Why are you here?


HOW DO YOU GET FROM HERE?

FLICKR: ADAM L212


TO HERE


WITHOUT ENDING UP HERE?

FLICKR: Lee Haywood


THE SECRET’S IN THE PROCESS

A Practical,
Rapid UX
Process


What does it take to have
a practical design process?


A PRACTICAL DESIGN PROCESS INVOLVES:
• Creative thinking
• Critical thinking
• Understanding business & customer goals
• Clearly defining requirements & stories
• Constraint recognition
• Adequate planning
• Practice
• Speed
• Quality


Z
WHAT DOES PRACTICAL UX ENCOMPASS?

Values, Vision & Goals

Questions &
Definitions

Ideas & Concepts

Story Construction

Workflows

Sketching

Mocks & Prototypes BE ZORRO
Right the UX wrongs

Values, Visions & Goals


WHY DOES THIS MATTER?

VISION
+ VALUE

=
GOALS


UNDERSTAND OUR PRODUCT
VISION

• How might this product be used?

• Will audience usage change in the future?

• What separates our product from others?


VALUE

• Why will people want to use this product?

• Does our product perform better than our
competitors?

• Can we market & sell this product?

• Other...


GOALS

• We want X amount of subscribers in Y time.

• We want to make money.

• Other...


GOALS DRIVE OUR PRODUCT
PRODUCT
GOALS
STORIES

=

Ideas & Perceptions


WE ALL FORM PERCEPTIONS
Keep this in mind:
• Not everyone sees an object the same

• We all form ideas about what something
might be based on our own experience

• Our brain looks for common patterns to build
an answer that makes sense


ACTIVITY: WHAT DO YOU SEE?


ACTIVITY: WHAT DO YOU SEE?
No sorry, it was actually a man in a pizza costume


PRACTICAL UX DEPENDS ON ALIGNING IDEAS & PERCEPTIONS

Keep this in mind:
• Not everyone sees an object the same

• We all form ideas about what something
might be

• Our brain looks for common patterns to build
an answer that makes sense


Questions, Definitions & Stories


ACTIVITY TIME:
What’s the story?


ACTIVITY: WHAT’S THE STORY?
Write a one sentence caption for the image below
Be creative! Be funny!


YOUR PRODUCT SUCCESS DEPENDS ON STORIES
Keep this in mind:
• The length of the story

• The time you spend writing a story

• Overlap in stories

• Keeping the story short, sweet, and simple


ACTIVITY TIME:
Thinking inside the box


ACTIVITY: THINKING INSIDE THE BOX

PART 1:
Each group has A box
Can you figure out what’s inside?

TIME: 1 MINUTE
• You aren’t allowed to open the box!

• You aren’t allowed to throw the box!

• You aren’t allowed to look in the box!


Within the given constraints, what did you learn?

• How difficult was it to figure out the
contents?

• What other methods did you try that
were within the given constraints?

• DO NOT OPEN YOUR BOX!



PART 2:
1. Have one member of your group take the box turn their back and
secretly look at the contents.

2. The rest of the group members will each take turns asking a yes or no
question. Continue asking until the time is up or until someone
correctly identifies the item.

3. 1 member should record the # of guesses made

TIME: 5 MINUTES


AND NOW A WORD ON CONSTRAINTS
CONSTRAINTS
• Better defined stories &
requirements

• Clarifies what not to
investigate

• Controls budget, time &
resources

• Working within constraints
helps make your UX practical


LET’S REVIEW
• It’s extremely hard to identify
something completely unknown
without relying on senses

• Questions help to bring about story
definition

• By challenging ourselves within
constraints we are able to keep our
story focused. Kokor welshby


An in depth look at stories


THERE ARE GOOD AND BAD PRODUCT STORIES

FLICKR: NUkiwi Kokor Hekkus


A GOOD PRODUCT STORY HAS THESE CHARACTERISTICS
• A good story has clear definition

• A good story gets to the point

• A good story has minimal dependencies

• A good story ties to a goal

• A good story has “just enough detail”

• A good story considers constraints

“I need a mobile app that
“The customer needs the system to allows lawyers to add, edit
be smart enough to send an update and save case loads to an
notification when client records are online repository while at
duplicated.
trial”


A BAD PRODUCT STORY HAS THESE SYMPTOMS
• A bad story is way too large (many sentences)

• A bad story is unclear and cryptic

• A bad story has hidden meaning

• A bad story is open ended

• A bad story can’t be completed

• A bad story has no time constraint

• A bad story has too much detail

I need to have a mobile
I need a web page that
shopping app
works with twitter.


AND NOW REAL HORRIFIC PRODUCT STORIES
Client: “I need a mockup for my new website.”
Me: “OK, I need to ask you some questions to ﬁgure out
your audience, style etc.”
Client: “Can’t you just build me a web site and then we can
look and decide if I like it?”
Me: “We could do that but what works is to get a good
understanding of your business, products, etc...”
Client: “Oh, I thought this would be easier. I’ll just try
another web designer, thanks.”
Me: “Ok, nice talking to you.”

Client: “On my web application I was wondering if you can use a happy pink”

Me: “Can you be a little more speciﬁc: ”

Client: “Oh you know, the pink on there now is like a slutty pink. I want a happy pink? You
know?


TIPS

★ If you suspect multiple functions in a story, try
splitting them into separate stories.
★ A good story can quickly turn bad if a client
redefines the story while it’s being worked on.
Watch for this behavior!
★ I find that stories written specifically for UX
focus on the following: interface design
patterns, screen creations, usability testing, ux
researching, pre and future planning.
★ Love your constraints


Workflows


WHAT HAPPENS WHEN YOUR STORY GOES FROM:
THIS TO THIS


UNDERSTANDING COMPLEX WORKFLOWS
Workflows arise from themes in product stories
• Mastering workflows is essential to
decoding an elaborate customer
experience

• Understanding workflows helps bring
about more story definition

• Don’t skip mapping your workflows.
It’s valuable to understanding
interaction

• Losing sight of workflows can de-rail
your product and hamper usability


EVERY PRODUCT HAS A STORY
A single product could consist of hundreds of stories.

I need to BUILD A MOBILE APP that allows
customers to Monitor blood pressure daily

A customer can use a custom blood pressure cuff
connected to their mobile device to record BP each
day.

A customer should be able to see a chart of their
results for a week, month, year.


Possible Stories From
Real Products


A COUPLE OF SHORT STORY EXAMPLES
FACEBOOK TIMELINE
• Customer data should be
recorded and displayed in a
chronological format

• A new book cover image will
act as a treatment for an
individual customers graph
of time.

• 3rd party API will be able to
load data into the timeline
feed


A A COUPLE SHORT STORY EXAMPLES
COUPLE MORE SHORT STORY EXAMPLES
A FEW OF SHORT STORY EXAMPLES
GOOGLE +
• Customers on the Google+
network should be able to
share stories, links, articles
and updates to other +users.

• Customers on the Google+
network should be able to
create unique groups

• We need a new and unique
way to organize collections of
people


TIPS

★ Don’t focus on the interface mechanism (drop
down, text box, etc...)
★ Make your stories understandable to an
outsider
★ It’s OK to start with larger stories, but be sure to
break them apart for easier planning
★ Stories tend to repeat with similar
functionality, that’s OK


ACTIVITY TIME:
EXPLORING A PRODUCT


PLANNING FOR SUCCESS

The planning meeting can
be the most challenging
part of any product
development.


WHAT ARE WE BUILDING?

Our company has decided
to branch out into the
social realm.

Our CEO hears that this social management field is
picking up and could become quite profitable.



You’re development
team has been tasked
with figuring out what
this product could be.

We want A product that allows single & groups of
people to manage and act as social account
managers for various social entities



Our Vision: The future will rely upon a brokering
system of social networks and high profile
celebrities, politicians, etc... will use these
services to communicate with large fan bases.

We Value: An easy to use product that has both a
web & mobile capability. Account managers
want to use the system on the go

Our Goal: Is to become an industry leader in this
field. We plan on having monthly & large
corporate subscription plans.


THE CEO SAYS

“Can I have a list of customer features,
priorities and some screen sketches by
tomorrow?”

We want a product that allows single and groups
of people to manage and act as social account
managers for various social entities such as
google +, facebook, twitter.


OUR PLANNING MEETING

The goal of our meeting:

We want to end our meeting with a clear set of
feature stories, questions answered and priorities
set.


PLANNING MEETING BREAKDOWN

In your groups
• Part 1. 10 minutes to ask questions of the
client – “ME”

• Part 2. 25 minutes to brainstorm “the what”
• Part 3. 30 Minutes to write your stories



In your groups

• Part 1. Ask your product owner questions

TIME: 10 MINUTES

• Take your own individual notes



In Your Groups

• Part 2. Brainstorm – “what is this product?”

TIME: 20 MINUTES
• No sketching (yet)

• Mind maps are fine.


WHO DERAILED YOU?
Each of your groups had a mole!
• The Hater – “This person doesn’t like anything
presented.”

• The Time Waster – “They will do anything to prolong
the time wasted in the meeting.”

• The Control Freak – “They attempt to take control of
the group, but nothing gets done.”



In groups of 2

• Part 3. Write your product stories.
• Each group should have 10 stories

TIME: 10 MINUTES
• No sketching (yet)

• Mind maps are fine.


Let’s Take A Short Break:
Get your priorities straight!


CUSTOMER & BUSINESS BALANCE
• Often times you don’t have say in
the priority

• It still helps though to remind the
CEO, boss, client, etc... of values,
visions and goals.


ACTIVITY: BALANCE PRIORITIES

Use the provided activity
sheet and balance your
features according to
business & customer
priority.

TIME: 10 MINUTES

• Each feature column can only use the numbers 1 – 5 once.

• 1 is high priority, 5 is lowest.


LET’S REVIEW

★ Did you notice any overlap points between
customer and business priorities?
★ Did you run into difficulty ranking one story
against another?
★ Questions ?


ACTIVITY: Role-play your design


THE CEO AGREES ON YOU PRIORITIES

“I agree with what you
have outlined. What
does it look like?

We want a product that allows single customers
and customer groups to act as social account
managers for various social entities such as
Google +, Facebook, Twitter.


ACTIVITY: ROLE-PLAY YOUR DESIGN

Deadlines can hinder creativity.
You have to train yourself to just
start creating.
In this activity we will randomly
roll design patterns and build to
our #1 priority.


1. Roll your 20 sided dice for the group.

2. Use the table to reference your rolled design
pattern. Make a note of the pattern rolled.

3. Roll the 20 sided dice again and write down
this design pattern. (re-roll if it’s a duplicate).

4. Develop a screen sketch individually using
your two chosen patterns applied to our #1
priority

5. Create one for a web app & one for a mobile
app.

TIME: 15 MINUTES


• Was it hard to just start sketching?

• Did you find it hard to stick with your core design
patterns?

• Did you feel the time crunch?

• Did you arrive at a viable design that you could improve?


LET’S REPEAT THE PROCESS
• Repeat this process for one more of our
priority items.

• Changing Constraint: you now have 10
minutes to complete this activity!

TIME: 10 MINUTES


TIPS

★ For complex stories it helps to create
workflows to reveal secret traps in your product
★ The more you think the less you actually do.
Put the pencil to work and you will find the hazy
details become much clearer
★ I use this method if I am completely stuck on a
subset of stories


LET’S REVIEW
• We looked at the different
types of interruptions that can
happen during planning.

• We looked at the complexity of
workflows and the importance
they hold to interaction.

• We used creative roleplaying Kokor welshby

to formulate a random design
within given constraints.

• We forced ourselves to work in
tighter and tighter time
constraints.


Wireframes & Prototypes


WHY WIREFRAME & PROTOTYPE
• Justification to stakeholders

• Visual representation for the non-technical

• Helps to spur more creative thought

• Digital wireframes may look more “professional”

• Greater understanding of deep interaction

• Hands on feel

• Very quick to put together concepts and interaction

• Sanity check to your workflows


TOOLS COMPARISON

NAME COST LEARNING CURVE
Flairbuilder 100+ Moderate
Balsamiq 100+ Easy
Axure 500+ Moderate-Difﬁcult
Adobe Acrobat Pro 150+ Easy
Justinmind Prototyper 500+ Moderate
IPLOTZ 100-500+ Moderate
Keynote 30 Easy - Moderate


TIPS

★ Use what is comfortable
★ New tools come out every day, be sure to keep your eyes
open
★ Never let your tool become a hinderance
★ Keep color out of the mock as long as possible
★ If it makes more sense to go to a prototype, don’t
wireframe for the sake of wire framing
★ Develop an interaction language on your sketches or
wires. This will help indicate interactions points.


A quick word about frameworks


FRAMEWORKS
Frameworks can replace prototyping tools completely

• HTML frameworks remove the coding repetition
• Allow you to get to market quicker with near final
HTML & CSS

• Large open community support to help solve problems
• Tremendous amount & variety


FRAMEWORK COMPARISON

NAME PRIMARY USE LEARNING CURVE
Skeleton Web & Mobile 1- 2 weeks
960 Grid Web & Mobile 1-2 weeks
Cabin Web & Mobile 1-2 weeks
JQUERY Mobile Mobile 2-3 weeks
JQTOUCH Mobile 2-3 weeks
Sencha Mobile 2-4 weeks
Phone Gap Mobile 2-4 weeks


CONCLUSION
s


WE COVERED A LOT OF MATERIAL
• Practice is going to help make any of these processes
faster

• It’s imperative to understand your values, vision and goals

• Building goals to your product stories helps us gain
product perspective and clarity

• Craft good stories

• Split stories when appropriate

• Understand workflows is crucial to getting the application
flow right.

• Constantly be aware of your constraints. You won’t always
like them but they will exist


WE COVERED A LOT OF MATERIAL
• If you get stuck working on a product design. try
an activity to gain fresh insight

• Keep an eye out for the moles in your planning
meeting. Remind them how important it is to stay
on task. Every team member is responsible for
doing this

• It’s important to set aside time to learn to learn a
framework for mobile. Industry usage is going to
sky rocket.

• Always try to have fun and enjoy the process! or
else....


OR ELSE...
Evil Cat Will Get You

Thank You All!
Follow: @uidesignguide

www.uidesignguide.com


Kickstart Your UX Design - From Concept To Prototype

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Kickstart Your UX Design - From Concept To Prototype

Ähnlich wie Kickstart Your UX Design - From Concept To Prototype (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Kickstart Your UX Design - From Concept To Prototype