CSSE 490:

Fundamentals of Product Management

Week 5: Users, Research,

and Design

Agenda

• Design stakeholders
• Personas, user stories, and user journeys
• User research and usability testing
• All about design
• What needs to be designed
• A11Y, L10N, I18N
• Design tools

Design stakeholders

Common design stakeholders

• User Researchers
• Designers
• Visual
• User Interface (UI)
• User Experience (UX)
• Interaction
• Industrial (for hardware)
• Product
• Engineers
• UX Engineer
• “Frontend engineer”

Personas make it easier to build products

Fictional character that represents

a category of user

Persona attributes

• Name
• Demographics: gender, age, location, economics, etc.
• Professional info: role, decision making ability, etc.
• Goals and needs
• Motivations
• Frustrations
• Key quotes

Example persona: Bob the Buyer

• Bob, 28, unmarried, middle class, lives outside a major city
• Wants to safely buy a watch online (more variety, lower cost), needs the confidence he’s not going to get scammed
• Frustrated by the amount of work he has to put in to making sure a seller is legitimate
• “My friend once lost $4000 to a scam on reddit and I don’t have that kind of money to lose”

Persona exercise

User Stories:

Concise description of a task

As a persona...

… I want goal ...

… for reason

Example user stories

• As a buyer, I want a way to trust the seller, so I can avoid being scammed
• As a buyer, I want a method to dispute my transaction if I am scammed, so I don’t lose my money
• As a buyer, I don’t want additional fees, because they add to an already expensive purchase
• As a seller, I want to verify the buyer has the funds, so I can avoid getting scammed
• As a seller, I don’t want to have to pay additional fees, because they add to the overhead of my business

User story exercise

User Journeys:

Specific steps to complete a story

Common user journeys

• Sign up/sign in flows
• “I want to create an account on your product”
• Account management/settings
• “I want to update my profile picture”
• Product specific actions
• “I want to buy something on your product”
• “I want to search for an item”
• “I want to…”
• Failure modes
• “Some action failed, what do I do now”
• etc...

Example journey: buying a watch online

• Find an item on r/watchexchange, etc.
• Research the seller’s history to see if they’re trustworthy
• PM seller to negotiate a price and payment method
• Send money into a void (Venmo, Paypal, Zelle)
• ???
• Receive item
• If item doesn’t match ???
• Potentially try to issue a stop payment with your bank, or contact payment processor
• Post bad reviews of the seller
• Sue in small claims court

Critical User Journeys (CUJs)

More on CUJs

• These should be the 99% use cases for your product
• E.g. if you’re building an e-commerce product, “buying something” is a CUJ, while “viewing past history” may not be
• Optimize these journeys relentlessly
• Use metrics to track progress (and improvement)

“Simplify, then add lightness”

Colin Chapman

Disruptive products are able to simplify

a CUJ and make it delightful

Example journey: buying a watch w/uEscrow

• Find an item on r/watchexchange, etc.
• Research the seller’s history to see if they’re trustworthy
• PM seller to negotiate a price and payment method
• Send money into a void to uEscrow (Venmo, Paypal, Zelle)
• Receive item and verify receipt with uEscrow
• If item doesn’t match follow uEscrow dispute process

Example journey: selling a watch w/uEscrow

• Post your item on r/watchexchange, etc.
• Negotiate a price
• Verify money is in uEscrow
• Ship item
• Money is sent to you when the seller verifies the item has been received
• If buyer disputes sale, follow uEscrow dispute process

Example journey: dispute resolution process

• Seller posts a picture alongside a handwritten, unique code
• Buyer posts payment to uEscrow
• Seller sends item w/handwritten code
• Buyer receives item and verifies the code
• If the code matches, the buyer accepts the item and seller receives payment
• If the code doesn’t match, the buyer posts a picture with the received code as well as a unique code of their own; seller forfeits item and buyer gets money back
• If the buyer doesn’t respond within a certain time period (say three days), the payment automatically clears

uEscrow CUJs

• Buying an item using uEscrow
• Resolving buyer fraud
• Selling an item using uEscrow
• Resolving seller fraud

CUJ exercise

Prototyping

• Wireframes
• Low fidelity examples of a UI/product
• Mocks
• Full fidelity examples of a UI/product
• Storyboard
• Full walkthrough (using wireframes or mocks) of a journey
• Demos
• Interactive examples of a product that actually work
• Note: they don’t necessarily have to be “real” ;)

​

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/

https://www.toolshero.com/problem-solving/storyboarding/

User research

Understand user needs, motivations, fears

Gather feedback on user journeys

Common user research tasks

• Come up with personas, finding real examples of a persona
• Gathering feedback about user journeys
• How do users do this today outside of our product
• How do users do this within our product (if it exists)
• How would users *like* to do this
• Verifying assumptions the product/engineering team has made

Common user research techniques

• Often depends on prototype materials
• Qualitative
• User observation
• Interviews/focus groups
• Quantitative
• Card sorting/surveys/min-max/etc.
• Analytics and A/B testing

Asking good questions

• Open ended
• Eliminate framing bias in questions

Usability testing

• Walk through a journey with a user, using a prototype/mock/demo
• Present an end goal, ask how they would accomplish it given:
• What they know about the product
• Their experience with similar products
• What they see in the prototype
• Aim is to determine if users can accomplish the task, and if not, where they get stuck
• Doesn’t have to be “heavyweight”! Do this with coworkers or friends
• No right/wrong answers, just trying to understand what users do
• Let the user lead

Non-obvious Design 101

What you need to design (outside the product)

• Name
• Branding (logo, icon, etc.)
• Domains
• Website and information architecture

Picking a good name

• Distinctive
• You may want to copyright/trademark it
• You’ll want to get a domain
• Descriptive (people should know what you do nearly instantly)
• E.g. Pets.com and Chewy (pet food), CashApp (p2p payments)
• Alt. made up (so they form an association)
• E.g. Venmo (p2p payments)
• Avoid trends (or steer into trends)
• “Remove vowels” (e.g. flickr, tumblr, etc.)
• Misspellings (Lyft)
• Puns

Example brand guidelines

firebase.google.com/brand-guidelines

Picking good domains

• .com is still king, get it if you can
• E.g. getfoo.com, foohq.com, etc. are common additions to get a .com domain
• Name hacks are neat, but not necessarily memorable
• E.g. howdns.works, howdelayed.is/sfo
• domai.nr is a great tool for finding similar domains
• Certain registrars have certain TLDs
• Namecheap, GoDaddy, Google Domains, Gandi, etc. may have different prices as well
• Note restrictions on domains due to TLD owner (e.g. .io, or other country specific restrictions)

Information Architecture

• Overall navigation of a page
• Common categories include:
• Header
• Products/features
• Pricing
• Docs
• Footer
• Legal
• FAQ
• Support
• Careers
• About

Common design tools

• Offline: Photoshop, Sketch, Omnigraffle
• Online: Zeplin, InVision, Figma
• Stumbled on Namecheap’s logo maker: fun, simple tool; probably not production ready but easy to get ideas
• Your browser (document.designMode = “on”)
• Easily edit existing assets, copy/paste into one of the above tools and “photochop” something together quickly

Working with designers

• Provide sufficient context as well as rationale/end goal
• If there are guidelines (e.g. material design), be explicit
• Let them exercise their creativity, talent, and individual style

A11y (accessibility)

• Software is designed for people of different abilities
• ~25% of Americans have some disability (visual, auditory, etc.)
• E.g. 5-10% of men are red/green colorblind
• Design with this in mind:
• Color and contrast are important
• Text size and font style are important
• Don’t rely on a single piece of information (e.g. color) to differentiate
• Use built-in a11y features (alt text, font size scaling, etc.)
• Test software with screen readers, run it through color blindness simulators, use lighthouse scores, etc.

i18n/l10n (internationalization/localization)

• i18n is purely mechanical
• Adding proper unicode support, ability for localized strings, etc.
• Ensuring different currencies/date formats/measurements/etc. can be used
• l10n is adapting the product to a particular market, using i18n frameworks
• Picking the right translations, dates, currencies for an app
• Colors, symbols, images, etc. are also critical here!
• Adapting auth or payment systems to local norms
• Dealing with any local laws/regulations

For next week

• Add personas, user stories, and CUJs to your PRD
• Add wireframes/mocks to the PRD (in the design section) supporting two or more CUJs
• Find a domain (buy it if you like), come up with a logo