PyTn: UX and workflows -- How to

Workflows for users don't work at all like data flows. Both are important. You know how to do the latter; I can help you with the former.

Transcript

1. Overview of UX processes, methods, deliverables and concepts PyTn :: @lauriekalmanson :: February, 2014 UX starts with strategy, proceeds through vision, takes shape through research, becomes real with personas, workflows and wireframes, and is validated and improved with usability testing. UX contributions work best when they’re baked in from the beginning -- you can’t add them at the end.
2. Business goals and user goals PyTn :: @lauriekalmanson :: February, 2014 User goals Business goals The happy place is where business goals match user goals Happy place
3. Business process :: UX process PyTn :: @lauriekalmanson :: February, 2014 Getting to the happy place Product requirements Developer resources Scope Time Budget User research and discovery to create personas Workflows based on user types: Usability testing Interface sketch and interaction design Wireframes: Usability testing Mockups: Usability testing Prototype/Launch: Usability testing UX process Business process Happy place
4. UX process :: What do users need? PyTn :: @lauriekalmanson :: February, 2014 Getting to the happy place: Workflow User research and discovery Workflow Interface sketch and interaction design Wireframes: Usability testing Mockups: Usability testing Prototype/Launch: Usability testing UX process Happy place What do users need? What tasks will they complete? What are the steps in the tasks? How will they complete the tasks? How does this work on the screen?
5. UX process :: What do users need? :: Workflow PyTn :: @lauriekalmanson :: February, 2014 Thinking about workflow for users is different from how data moves. Users complete tasks and goals Developers create data structures.
6. UX process :: What do users need? :: Workflow PyTn :: @lauriekalmanson :: February, 2014 How data works is not how the user experience works. The engineer thinks about the motor. The driver steps on the gas.
7. Crisis housing paths on airbnb: Need a place, Offer for free PyTn :: @lauriekalmanson :: February, 2014 airbnb responded to flooding with a n Urgent Accommodations path
8. Task: Two workflows for finding a t-shirt in a color and size PyTn :: @lauriekalmanson :: February, 2014 Task: Find a t-shirt in your size and favorite color on two different shopping sites. Document the steps to create a workflow from the user’s point of view. Describe why each path is better or worse for a certain user, or scenario. Example: Specific user path Example: Casual user path Example 1: Search 1. Type, “black t-shirt, women’s” 2. See results 3. Click on result Example 2: Browse 1. Navigate to Women’s, Shirts 2. Look for T-shirts 3. Click on result
9. User research: Who are the users? What do they need? PyTn :: @lauriekalmanson :: February, 2014 Task 2: Think about two different users, with the same needs. Example 1: New employee on an intranet an experienced staff person -- how should the site speak to each of them, and what tools should be available? Broad information needs Narrow information needs New employee 1. Doesn’t know names; needs info by roles and departments. 2. Needs documents by topic. 3. Needs company policies and procedures. Experienced staff person 1. Knows people’s names and roles; needs a phone number. 2. Needs specific documents 3. Just married: Needs to make an HR change.
10. How many paths are there? PyTn :: @lauriekalmanson :: February, 2014 Alarm clock rings Sad path Turn it off Zzzzzzzzzzz Miss flight Turn it off Get out of bed Catch flight Happy path Turn it off Snooze OMG! Catch flight Opportunity: Invention of he snooze alarm Turn it off Snooze RUN!! Catch flight Opportunity: Clock you have to chase Task 3: “Clocky” offers a twist on the familiar snooze alarm -- a clock you have to chase across the room. It’s not for everyone, but it’s perfect for someone. What workflow can you reinvent to make it work for a particular user?
11. How many paths are there? PyTn :: @lauriekalmanson :: February, 2014 Action Happy path for user type 2 Step Step Step Step Step Step Happy path for user type 1 Step Step Step! Step Error path / Fail path Task 4: Identify three user paths for an app or site you are working on: For one type of user, for another type of user, and for what happens if there are errors or fails.
12. Overview of UX processes, methods, deliverables and concepts PyTn :: @lauriekalmanson :: February, 2014 Step 1 Happy path for user type 1 Step 3 Step 3 Step 1 What happens on the screen Storyboard for happy path for user type 1 Step 2 What happens on the screen Step 3 What happens on the screen Task 5: Pick one of the user paths you have created, and detail the storyboard actions -- what happens on the screen -- for three steps
13. Measure twice, cut once PyTn :: @lauriekalmanson :: February, 2014 Research Personas Workflows Storyboards Content strategy Engagement architecture, Information architecture Wireframes Interaction design Visual design Usability testing Mockups Prototyoes User experience work, in order. Get these steps right, and be more successful Interviews, surveys, customer data Types of users you will build paths for Steps toward goals How those steps will work on the screen What the words will say; size, breadth, depth Social media: sharing, return visits, membership Categories, subcategories, topics, sorting Sketches that put these pieces together How it all goes; click, and then what happens? Look and feel Test early, test often: workflows through wireframes Layer visual design on tested wireframes Clickable, with real or fake interaction points
14. Usability testing is a time to listen PyTn :: @lauriekalmanson :: February, 2014 Usability testing: Identify users who match your personas, and share work early and often. Usability testing: An exercise in humility Show your work to users who fit your personas Ask them to describe to you what they think they can do on the workflows, storyboards, wireframes and prototypes you share. If they get stuck, don’t explain: ask them to elaborate on how or why they are stuck. This is the most important part of the testing -- listening to where your ideas don’t match theirs. Repeat early and often. Five tests with five users is infinitely more valuable than one test with 25 users.
15. Homework PyTn :: @lauriekalmanson :: February, 2014 Task 1: Find a t-shirt in your size and favorite color on two different shopping sites. Document the steps to create a workflow from the user’s point of view. Describe why each path is better or worse for a certain user, or scenario. Task 2: Think about two different users, with the same needs. Example 1: New employee on an intranet an experienced staff person -- how should the site speak to each of them, and what tools should be available?
16. Homework PyTn :: @lauriekalmanson :: February, 2014 Task 3: “Clocky” offers a twist on the familiar snooze alarm -- a clock you have to chase across the room. It’s not for everyone, but it’s perfect for someone. What workflow can you reinvent to make it work for a particular user? Task 4: Identify three user paths for an app or site you are working on: For one type of user, for another type of user, and for what happens if there are errors or fails.
17. Homework PyTn :: @lauriekalmanson :: February, 2014 Task 5: Pick one of the user paths you have created, and detail the storyboard actions -- what happens on the screen -- for three steps