The UX Essentials of Product Design.
Bim.
Brad.
David.
Allison.
Who are you? What do you do? Cool thing this summer?
Warmup!
Product vision. User and Job stories. Content structure. Whiteboard wireframes.
Product vision
No direction on the project! Roadmap is unclear! Scope keeps changing!
Plan
Vision
No Plan
No Vision
Plan
Vision
No Plan
No Vision
Awesome!
Plan
Vision
No Plan
No Vision
Ready to plan!
Plan
???
???
Vision
No Plan
No Vision
How do you currently define vision?
Work backwards.
Ensure that your service meets the needs of the customer.
Press Release!
What it does. Why it exists.
Headline. Subheader. Problem. Solution.
Headline.
Subheader.
Problem.
Solution.
Oprah!
Page 9. Problem. Solution. Headline.
How did you start? Where did you have difficulty? Headline: easy/difficult?
Headline? Problem? Solution?
Company quote. Customer quote. Get Started. Closing. CTA.
Company quote.
Customer quote.
Get Started. Closing. CTA.
How could a press release be helpful to a project?
This will be your North Star.
Page 11. Customer quote. Company quote. Get Started. Closing & CTA.
What was the hardest part? What was the easiest part? Anything surprise you?
What was your Company quote? What was your Customer quote? How did you “Get Started?”
Recap
Press Release.
What it does. Why it exists. Oprah!
Headline. Subheader. Problem. Solution.
Customer Quote. Company Quote. Get Started. Closing. CTA.
Break!
Where do you start?
User and Job Stories!
What is a User Story?
A description of a problem told from the user’s perspective.
User-centered. Persona-driven. Focusing on the “who.�
As a _____ (user/persona), I want to _____ (action/motivation) So that _____ (outcome).
As a UX professional, I want to learn about more UX stuff, So that I can make useful things.
As someone new to UX, I want to learn about UX stuff, So that I can jumpstart my UX career.
As a speaker, I want to use big words, So that the attendees think I'm smart.
As a designer, I want to access my PSD files remotely, So that can I design from any computer.
Creativity. Collaboration. Alignment. Project planning. Value.
Page 19. Identify Users. Write outcomes and motivations. Be specific. Don't overthink it.
As a _____ (user/persona), I want to _____ (action/motivation) So that _____ (outcome).
Personas? Outcomes? Troubles?
Preview File that has been uploaded?
Add a Comment to an existing File?
Add a new user to Dropbox?
Job Stories
What is a Job Story?
A description of a feature from a Job-to-be-Done perspective.
Action-focused. Situational context. Overlapping Personas. “What” not “who.”
When _____ (situation), I want to _____ (action/motivation), So that _____ (outcome).
When at the Product Workshop, I want to learn valuable skills, So that I can justify to my boss that it was worth missing a day of work.
When viewing messages on my lock screen, I want to respond to a message, So that I can quickly reply without opening my message app.
Page 21. Write Job Stories. Think about the situation. Be hyper-specific.
When _____ (situation), I want to _____ (action/motivation), So that _____ (outcome).
Situation? Outcome? Struggles?
Preview File that has been uploaded?
Add a Comment to an existing File?
Add a new user to Dropbox?
When _____ (situation), I want to _____ (action/motivation), So that _____ (outcome).
Recap
Creativity. Collaboration. Alignment. Project planning. Value.
User Stories. User > Action > Outcome. The Persona. The “who.”
Job Stories. Situation > Action > Outcome. The situation. The “what.”
Lunch!
Activity!
Product Vision. User & Job Stories.
Content structure.
Content first.
System through the lens of the real-world Objects.
Putting content design before action design.
Identify Objects. Define core Object content. Determine Object relationships.
Identify Objects.
A thing with descriptors.
Look for recurring nouns. Focus on tangible nouns. Has other things that define it.
A user can upload a picture to Dropbox. When a picture is uploaded, the file size and GPS coordinates of the location are appended to the Picture. A User can update the name of the Picture.
A user can upload a picture to Dropbox. When a picture is uploaded, the file size and GPS coordinates of the location are appended to the Picture. A User can update the name of the Picture.
User
Pictur
e
Location
Page 29. Read your brief. Highlight the nouns. Write Objects on blue Post-Its.
How did you start? What were some roadblocks? Did anything surprise you?
Is a Folder an Object? Is “Date Modified” an Object? Personas?
Define core Object content.
Content associated with an Object.
Attribute. User-updateable information. Forms, toggle, descriptions, etc.
Metadata. System-generated information. Dates (submitted, created, etc.).
User
Pic
Location
Name
Name
GPS
Size
Name
ID #
Page 30 & 31. Form small groups. Find a whiteboard.
Attributes on yellow Post-Its. Metadata on red Post-its. Page 32 for order.
How did you approach this? Identify Attributes? Identify Metadata?
Determine Object relationships.
Objects are related.
User
Pic
Location
Name
Name
GPS
Size
Name
ID #
User
Pic
Location
Name
Name
GPS
Size
Name
ID #
User
Pic
Pic
Location
Page 34. Reform groups. Determine Object relationships!
What was your process? Which Objects were difficult? Which Objects were easy?
To the whiteboards!
Recap.
Content first.
Content model for our data. Objects, Attributes, Metadata. Object relationships.
Break!
Product Vision. User & Job Stories. Content Structure.
Whiteboard Wireframes!
How do you currently plan and concept user flows?
Wireframes and prototypes are the long-play.
A tool for everyone. Collaboration and alignment. Rapid ideation.
Rule #1: Have a Story.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
Focus. Solve for a singular problem. Keep the team on track.
Rule #2. Obey the Legend.
Page.
Modal.
External.
Page width about one foot wide. Draw to scale. Include just enough info.
Layout & Actions
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
CTA
CTA
Clicked on.
Next step.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
Page Content.
Use the Content Structure exercise! Make it so anyone can understand it. Define the details.
CBX: Radio: Input: SDD: DD: Table: Col: CTA:
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
Page 48. Concept your ideal flows or Refer to Dropbox actual flow. Form groups.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
How did you start drawing? How did you decide what to draw? What part was difficult?
Gallery time!
Recap
Have a Story. Obey the Legend.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
When arriving on Services, I want to understand what is enabled So that I know what my platform can do.
Microsoft Lens.
Wrap up!
Product Vision. User & Job Stories. Content Structure. Whiteboard Wireframes.
What did we learn?
Beer!
dtelepathy.com/workshops/survey