The UX Essentials of Product Design

Page 1

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

email

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

email

Size

Name

ID #


User

Pic

Location

Name

Name

GPS

email

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



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.