© 2013 Regents of the University of California.

1. Designing the User Experience
Tips & Techniques for Quick and Cheap UX Design
Ray Vadnais
User Experience Architect
Academic Web Technologies
University of California, Irvine
Tuesday, August 6, 13

2. What I do
• User Experience Architect - UX and UI design for:
• EEE: UCI’s course management system
• UC Recruit: The UC’s academic employee recruitment management
system
Tuesday, August 6, 13

3. Why should I care about UX?
• You want people to ...
• Use your app
• Want to use your app
• Tell others about your app
• But you also want to ...
• Make sure you’re developing something people need
• Make the best use of the limited time you have
Tuesday, August 6, 13

4. What’s involved in UX?
Image from http://usabilitygeek.com/user-experience/
Tuesday, August 6, 13

5. What we’ll focus on today
• What people want & how they will use your app
• Requirements gathering
• User stories
• Storyboarding
• Wireframes
• Testing
Tuesday, August 6, 13

6. Requirements Gathering
• Stakeholder interviews: Talk to your users! Figure out what they need (both
spoken and unspoken)
• Competitive analysis: What else is out there? What does it do well? What
does it do poorly? How much does it cost? Big question: Why not go with it
instead?
• Ask lots of questions – there’s no such thing as a stupid question
• Tools: Google Docs (collaborative creation and review of requirements), in-
person meetings
Tuesday, August 6, 13

7. User Stories
• Based on your requirements, what will users be doing in the system?
• Write a couple sentences to form the user story
• Validate by asking your stakeholders if the user stories make sense; are
these things that might actually happen?
• Tools: Google Docs or Microsoft Word (or Notepad or a piece of paper)
“One or more sentences in the everyday or business language of the end
user or user of a system that captures what a user does or needs to do as
part of his or her job function.” – Wikipedia
Tuesday, August 6, 13

8. User Stories: Examples
• Format: As a <person>, I want to <do something> so that <reason>.
• UC Recruit: As a reference, I want to type in my letter of recommendation so
that I can provide the letter even if I can’t upload it to the system.
• UC Recruit: As an analyst, I want to be able to import applicant data into a
recruitment so that I can conduct my recruitment activities in an external
system but still contribute data to reports.
• EEE: As a professor, I want to create a quiz that randomizes the questions for
students so that I can encourage academic honesty.
Tuesday, August 6, 13

9. Tangent: User Stories & Agile
• Integral component of agile
• Even if not using agile, still very useful for design
Tuesday, August 6, 13

10. Storyboarding
• Figure out how people would want to use the feature
• Ideal vs. realistic vs. worst case
• Storyboarding will help you to build your workflows
• Use the user stories you created
• Validate your proposed workflows by chatting with your users again
“Graphic organizers in the form of illustrations or images displayed in
sequence for the purpose of pre-visualizing a motion picture,animation,
motion graphic or interactive media sequence.” – Wikipedia
Tuesday, August 6, 13

11. Storyboarding: Example
Tuesday, August 6, 13

12. Storyboarding: Example Expanded
Tuesday, August 6, 13

13. Storyboarding: Tools
• Diagramming software: OmniGraffle or Visio
• Save time by creating stencils:
Tuesday, August 6, 13

14. Wireframes
• Start laying out the basic frame of the page
• Very low-fidelity
• Validate by meeting with users
• Conduct usability tests using wireframes to avoid contention over colors and
other UI design choices
“Depicts the page layout or arrangement of the website’s content, including
interface elements and navigational systems, and how they work together.”
- Wikipedia
Tuesday, August 6, 13

15. Wireframes: Example
• Start on a whiteboard
or piece of paper
• Sketch out the various
states (refer back to
the workflows
created earlier)
• Iterate!
• User story for this:
“As an analyst, I want to
quickly update the
status for an applicant so that I can easily manage my applicant pool.”
Tuesday, August 6, 13

16. Wireframes:
Examples
• Use a program like
Balsamiq Mockups
if you want to create
digital artifacts
• Or, start on a whiteboard
and then move to
Balsamiq
• Use your wireframes to
validate your
assumptions with your
stakeholders
Tuesday, August 6, 13

17. Wireframes: The Implemented Result
Tuesday, August 6, 13

18. Wireframes: More Examples
Tuesday, August 6, 13

19. User Tests
• Validate your workflow and interface design assumptions with actual users
• Don’t need to write code - use your mockups
Tuesday, August 6, 13

20. User Tests: Getting Participants
• Keep in touch with your users – involve them every step of the way
• Identify and get time commitments from a few stakeholders and involve them
in requirements gathering, analysis, storyboarding, workflow, etc.
• People usually will be happy to help!
• Worst case: bribe them ($5 gift cards to the campus bookstore can work
wonders)
Tuesday, August 6, 13

21. User Tests: Creating the Tests
• Identify what needs to be tested
• Create focused tests for each item
• Overly broad tests -> overly broad results
• Overly narrow tests -> overly narrow results
• Have a script to maintain consistency
Tuesday, August 6, 13

22. User Tests: Sample Tasks
Tuesday, August 6, 13

23. User Tests: Sample Script
Tuesday, August 6, 13

24. User Tests: Conducting Tests
• Be prepared - have multiple states mocked up
• Know your mockups! Mark them if you need
• After the test starts, don’t talk – if something doesn’t go well, take notes and
fix it later
• Make sure you tell your users that the design is being tested, not them
• Be ready for weird awkward pauses and silences
Tuesday, August 6, 13

25. User Tests: Example
• Task #1: Locate an evaluation for Math 3A taught by Professor Davis
Tuesday, August 6, 13

26. User Tests: Example
Tuesday, August 6, 13

27. User Tests: Example
Tuesday, August 6, 13

28. But wait!
Nobody used the search feature in our user
tests
Tuesday, August 6, 13

29. Tuesday, August 6, 13

30. Tuesday, August 6, 13

31. Why go through all this work?
• I know you just want to get started and code but...
• You can make sure you’re implementing what your client wants
• Saves time
• Saves money
• Makes your client happy!
• If we hadn’t met with users and run them through paper prototypes, we would
have wasted weeks of effort implementing a search feature that few users
would actually use.
Tuesday, August 6, 13

32. Summary
• Spend some time doing this before writing any code:
• Requirements gathering
• User stories
• Storyboarding
• Wireframes
• Testing
Tuesday, August 6, 13

33. Balsamiq Mockups
Great tool for creating wireframes and quick-and-dirty mockups. Use this
instead of a napkin.
Windows and Mac • $79 from http://balsamiq.com/ with a free time-limited trial
Apps Mentioned
OmniGraffle
High fidelity static prototypes. This is the primary tool we use for both EEE
and UC Recruit. (Try Microsoft Visio if you prefer Microsoft Windows)
Mac • $60 ($120 for Pro) from https://store.omnigroup.com/edu/
Tuesday, August 6, 13

34. Thank you!
• Questions?
• Drop me an email later:
rvadnais@uci.edu
Tuesday, August 6, 13