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, MA

1. Making Your
Design Vision A
Reality
How to improve your UX
design and implementation
process to ensure the end
product retains the beauty
and integrity of your original
concept

2. 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

3.  Director of Products,
GrabCAD
 previously rendering
software engineer at
Gemvara
Who is this guy?
Grant Thomas-Lepore
grant.thomas.lepore@gmail.com

4. GrabCAD

5. Workbench

6. 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

7. User stories help everyone

8. Typical Product Process
User
testing

9. Who is your user?

10. What are they trying to do?
 Take the user stories and rank the actions
they are trying to perform:
Grandma:
1. Upload 2-3 photos
2. Make one desktop
background
3. Write message
4. Send to daughter
Teenager:
1. Upload 100 photos
2. Delete some.
3. Organize best ones
into album.
4. Write message
5. Send to 10 friends

11. Consolidate into frequency list
1. Upload photos 2X
2. Write message 2X
3. Send to friends 2X
4. Etc.
 This list will help you figure out what
buttons to make big:
 And smaller:
Upload
Organize

12. Qualaroo

13. 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.

14. GrabCAD – 3 funnels
Upload
Convert
Invite

15. Test mockups and iterate
before development

16. 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!!

17. Many good ways to user test
For 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!

18. 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?”

19. 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

20. 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.

21. Bringing designs to life

22. Get engineers involved early

23. Make it easy to get right

24. 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

25. 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.

26. Designs are a blueprint

27. 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

28. Q&A
Go crazy