making your design vision a reality
Post on 11-Sep-2014
567 views
DESCRIPTION
A talk about how to improve your UX design and implementation process to ensure the end product retains the beauty and integrity of your original concept. UX Fest at Fresh Tilled Soil, Watertown, MATRANSCRIPT
![Page 1: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/1.jpg)
Making Your Design Vision A RealityHow to improve your UX design and implementation process to ensure the end product retains the beauty and integrity of your original concept
![Page 2: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/2.jpg)
What are we here for?Does your end product ever look
much less awesome than the beautiful designs you made?
Does your product have obvious design flaws, but no one seems to be fixing them?
Let’s learn how to prevent this
![Page 3: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/3.jpg)
Director of Products, GrabCAD
previously rendering software engineer at Gemvara
Who is this guy?
Grant [email protected]
![Page 4: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/4.jpg)
GrabCAD
![Page 5: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/5.jpg)
Workbench
![Page 6: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/6.jpg)
Overview Typical product process
Part 1: User stories help everyone
Part 2: Test mockups and iterate before
development
Part 3: Bringing designs to life
Q & A
![Page 7: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/7.jpg)
User stories help everyone
![Page 8: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/8.jpg)
Typical Product Process
User’s
cur
rent
workfl
ow
User s
torie
s
Prod
uct
requ
irem
ents
Rank by
user pain
Rank mostfrequent actions
UI ske
tche
s
UI des
ign
User testing
![Page 9: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/9.jpg)
Who is your user?
![Page 10: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/10.jpg)
What are they trying to do? Take the user stories and rank the
actions they are trying to perform:
Grandma:1. Upload 2-3 photos2. Make one desktop
background3. Write message4. Send to daughter
Teenager:1. Upload 100 photos2. Delete some.3. Organize best ones
into album.4. Write message5. Send to 10 friends
![Page 11: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/11.jpg)
Consolidate into frequency list 1. Upload photos 2X2. Write message 2X3. Send to friends 2X4. Etc.
This list will help you figure out what buttons to make big:
And smaller:
Upload
Organize
![Page 12: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/12.jpg)
Qualaroo
![Page 13: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/13.jpg)
What next? Share this list with Product Managers,
with Engineering, with Operations, etc…
They make decisions every day that affect performance, you want them to know what are primary customer actions.
![Page 14: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/14.jpg)
GrabCAD – 3 funnels
UploadConvertInvite
![Page 15: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/15.jpg)
Test mockups and iterate before
development
![Page 16: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/16.jpg)
User testing is easy Testing just 5 users is enough to be
significant (Jakob Nielsen, 2000) Better to test more frequently with
fewer users, than vice versa.
PROFIT!!
![Page 17: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/17.jpg)
Many good ways to user testFor first page impressions (button copy, A/B testing mockups for page purpose).
For user flows and more complex interactions, even 2 videos is definitely worth it.
For almost anything, in-person reactions are free and invaluable.
For testing complexity: the Mom test!
![Page 18: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/18.jpg)
It’s about the questions Don’t: lead test subjects to know what
a button/function does:“Is ‘New’ or ‘New project’ clearer to you for the red button?”
Do: Ask open-ended questions that get at the actions a real user may want to do:
“How would you start a new project?”
![Page 19: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/19.jpg)
Example
“How do you view more results?”5/5 5/5
“Does this site have interesting content?”1/5 4/5
View more View more
A B
![Page 20: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/20.jpg)
Share these results
Variation B will be harder to build.
Engineers working on this feature actually do care to know why Variation B is better than Variation A.
![Page 21: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/21.jpg)
Bringing designs to life
![Page 22: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/22.jpg)
Get engineers involved early
![Page 23: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/23.jpg)
Make it easy to get right
![Page 24: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/24.jpg)
Screen record user flows Simple screen capture tools such as
http://www.screenr.com/ can save you countless minutes writing explanations of user flows.
But even better - It can save engineers hours figuring out what you were trying to describe and how you want it work.
Thank you to Braden Kowitz for the idea, http://www.designstaff.org/articles/story-centered-design-2012-03-22.html
![Page 25: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/25.jpg)
Fixing problems Don’t wait until it’s on a staging server, or
worse, production!
Be proactive – find out who is working on it and reach out directly to them.
Get screenshots from the engineer’s local build, or sit down next to them to go through what’s been done so far.
Write a list of issues, prioritized by what you think is most critical/obvious.
![Page 26: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/26.jpg)
Designs are a blueprint
![Page 27: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/27.jpg)
Summary Send out the user frequency list,
so everyone knows the key actions of your product early on.
Iterate mockups and share why more difficult Variation B is better than Variation A.
Encourage feedback on designs from entire organization!
1. Upload photos 2. Write
message 3. Send to
friends
![Page 28: Making your design vision a reality](https://reader033.vdocument.in/reader033/viewer/2022052819/541217738d7f7295728b46be/html5/thumbnails/28.jpg)
Q&AGo crazy