The UX Toolbelt for Developers, given at Columbus Code Camp on October 11, 2014

1. The UX Toolbelt for
Developers
Sarah Dutkiewicz
Cleveland Tech Consulting
sarah@cletechconsulting.com

2. What is UX?

3. All About the Users

4. The Breadth of UX
According to ISO, UX encompasses the following – before, during, and after use:
• Emotions
• Beliefs
• Preferences
• Perceptions
• Physical responses
• Psychological responses

6. Image taken from Dan Willis’s UX Umbrella talk

7. Convenience + Design – Cost =
User Experience

8. Why should developers care?
Without users, our software has no reason to exist.
More happy users means better chance of getting them to recommend our software
to others.
While designers can make things look visually appealing, at the end of the day, if the
functionality is awful, people will get frustrated and stop using a product.

9. Tying UX to the
Software Development
Phases

10. Software Development Phases
Analyze
Design
Develop/Implement
Testing
Evolution/Finalize

11. Analyze
Understand the problem that needs to be solved

12. To Analyze….
Figure out the content of the problem and how to tackle it
Get a better understand of the end users through user research and interviewing
Brainstorming ideas on the problem
Gathering requirements in terms everyone understands

13. Brainstorming
Mind mapping tools

14. Mind Maps

16. Site Maps

17. Site Maps

18. Tools
Mind Maps
Xmind
Freemind
Flows
Dia
Site Maps
Balsamiq

19. Personas

20. What are personas?
Fictional characters based on real users
Composites of research
Usually presented in 1-2 page documents

21. Personas
José
Business
Owner
Irene
Older
Resident
Sarah
Younger
Resident

22. José
Business Owner
What are the city’s demographics?
Are they appropriate for me to
bring my business there?
What incentives do they have for
businesses?
Are there good networking or
community opportunities for
promoting my business?

23. Irene
Older Resident
Are there any senior programs for
me to participate in?
What doctors and hospitals are
there?
Are there parks or places for me to
walk?

24. Sarah
Younger
Resident
Where can I learn about the local
school system?
Are there any summer recreation
programs for my kids to participate in
when they’re older?
How safe is the city for my kids to play
in?
What’s the diversity like of the
residents in the city?
Are there parks for my kids to play in?
Will they be safe there?

25. How These Help Developers
Assigning personas to screens helps us to make sure the functionality is designed
appropriately.
Sometimes, developers become empathetic with the personas, putting themselves in
the personas’ positions. This helps them to realize flows easier.

26. Features and
Requirements
Gathering

27. Features
During brainstorming, break a project into features.
Use the features to help write the code and determine tests.
Write the features in English with gherkin.
Consistency
Works on multiple platforms

28. Gherkin Syntax

29. Given-When-Then Cadence
Consistent wording to describe a scenario
Given this known situation
When the user does something
Then something happens

30. Tools
Behat (PHP)
SpecFlow (.NET)
Cucumber (Ruby, gherkin syntax)
Cucumber-JVM (Java, including Android)

31. Design
Draw out your understanding of the problem and your
idea on how to solve it

32. Designing a solution
Things that need designing…
User interfaces
Interaction design
Accessibility experiences
Prototyping
Processes
Tools that we can use as devs include…
Balsamiq Mockups
Wireframes.org
Pencil
Dia

33. User Flows

34. Wireframes

35. Wireframes.org
Built in templates
Wireframes, flow charts, etc.
Runs right in the browser

36. Balsamiq

37. Pencil

38. Tools
Balsamiq Mockups
Pencil
Wireframes.org

39. Develop/Implement
Write the application or script to solve the problem

40. Things to consider in development
We want as few clicks and as little thinking as possible
If everything is set up well, you can take a TDD approach.
Using the gherkin from the “gathering requirements” stage
Transition by writing a failing test for a feature
Then make the test pass with the appropriate code
Keep it simple and easy to use

41. Testing
Make sure what you create is working as expected in
order to solve the problem

42. Things to see in testing
Test to make sure the code is covering all the features – can be done in automated
testing
Have users test and report issues – exploratory testing
Use focus groups to help test the app, and use heat maps and analytics to see how
people are using the app

43. Heatmaps & Analytics

44. Heatmaps

45. Google Analytics
Track information about
visitors including:
Time on site
Pages visited
Location
Traffic source
Browser usage

46. Feedburner
Used for tracking
RSS feed
subscriptions
Great for
tracking people
who read blogs
in a feed reader

47. Tools
Heat Maps
Free Website Heatmap Generator
ClickTale
CrazyEgg
ClickHeat
Analytics
Google Analytics
KissMetrics
Feedburner

48. Evolution/Finalize
Run through what’s done and release it and improve
upon it

49. Development is cyclical. Use
these tools to improve your
productivity and the quality of
your work!

50. Additional Tools and
Resources

51. Additional Tools and Methods in UX
Field Research
Interviewing
User Tests
Usability
Accessibility
Copywriting
Graphics Design
UI Design

52. Additional Resources
All About UX
UX for the masses - 25 great free UX tools
MSDN - Windows UX Design Principles
OS X Human Interface Guidelines
Mobile UX and Mobile UI guidelines: The 2014 Collection
UX is not UI
The Secret to Designing an Intuitive UX