Startup UX: A story of tradeoffs and constraints

Startup UX A story of tradeoffs and constraints

!

Random facts + can milk a cow by hand + made a pencil into a cartoon

totem pole (in calculus class) + can play the drums…but can’t

dance

!

Non-random facts • 3+ years UX lead for

game & software startups • 6+ years leading brand &

interaction design for Disney • 1 product rebrand • 3 console games • 6 languages • 40 million+ users • > 1 million DAUs

➡

!

Today’s talk on UX Through the lens of a startup, focusing on tradeoffs and constraints:

+ introductory concepts + case study: what ‘should’ have

happened vs. what actually happened + some recommendations & learnings

!

Introductory Concepts

!

!

MVPa product proven to solve a real problem

better than alternatives & better than expected

!

$#

bus

ine

ss

💻

soft

war

e

👥

use

r ex

pe

rie

nce

pro

fita

ble

use

rs

how tech business works

!

#

bus

ine

ss

💻

soft

war

e

👥

use

r ex

pe

rie

nce

$

pro

fita

ble

use

rs

how tech businesses fail

🚀tCONSTRAINTS

create tradeoffs

!

⏲

✓

$

!

everything is possible; not everything is

in scope

Tradeoffs produce: + technical debt + design debt + increased risk to the business + a faster path to learning

!

!

!

!

How do you figure this out? ➡

Lean UX (at its simplest)

!

make something

learn something

…as quickly and cheaply as possible

!

📋 👤 + , ✎ . / 🔎Research Personas Experience

MappingInformation

ArchitectureWireframe Prototype

+ Test

Mockup + Test

Build Examine + Retest

User Experience Design Process tools and processes move toward increasing fidelity

Abstract Concrete

!

Case Study

!

February 2014 December 2015

21 Months / 2 major web versions / 1 ios app …and countless cut corners

real world (getting out of the hypothetical)

!

🌐␡

1. research

!

📋

👤 + , ✎ . / 🔎📋

+ recruited through friends & acquaintances

+ 4 phone interviews + 1 group interview

recorded on video + 1 contextual inquiry

session for one type of user

2. personas

!

👥📋 👤 + , ✎ . / 🔎

–Johnny Appleseed

“Type a quote here.”

+ 3 personas + lean UX method

(summary + sketch; demographic info; pains; solutions)

+ co-created with key stakeholders

3. experience mapping

!

+

, ✎ . / 🔎📋 👤 +

customer happiness

1 0 -3 2 1 0 3 1 -1 0 0 -2 2 1

pre-application

pre-application

pre-application

registration & setup







season prep season prep season prep hockey season starts

customer touchpoints

google search for hockey association

sports association web site

application forms

success confirmation email

receive DevOne invite

create account & success message

browse content in available sections

sign up for coaching

wait for Association response

success confirmation email

buy equipment

coach training prep first practice

first practice

customer touchpoints

after talking with other parents who have their kids in hockey, decides to take plunge and enroll child

looks over website to get a sense of what’s happening with the sport locally. Confused by overwhelming amount of information

Fills out forms to get child enrolled. Stressful due to time pressure and limited space. Practice times, team composition and many other details are uncertain

Relief when email arrives confirming successful spot for child.

happy to get a resource with helpful info as part of the expensive program. Hopes it’s as good as it’s touted to be, not time-wasting, confusing.

No one likes filling out forms. But glad this is short :)

browse through available content. ‘Intro to minor hockey,’ is especially relevant, with tips for getting equipment, what to expect with other adults etc.

signing up online is obvious, but a bit time consuming

…takes forever to hear back.

relief mixes with apprehension; glad to be involved at an extra level in child’s life, but nervous about the added responsibility of coaching

Irritated about going to store to spend a lot of money on gear that will be too small in a matter of months. Nervous about safety. But excited to see child all decked out.

Classroom session is 4h of wasted time; hate sitting still and listening.

Happy to find the practice all laid out with diagrams and supporting videos.

Glad to meet all the parents and kids. Overall high stress due to noise, chaos and new environment. Glad to remember a bunch of helpful tips discovered while browsing

Product/Support

DevOne is promoted on the association website; well-resourced org is welcomed.

can we somehow aid the signup process?

well-formatted email with direct links to one or two helpful videos/resources

utilize as much Association data as possible to lower the amount of effort required for parents

when viewing ‘my team’, it’s immediately apparent if/who is the coach. If there is already a coach assigned, a welcome message to parents is on message board.

online form with standardized questions useful to associations.

Email from association indicates they have been added as a coach. Association assigns coach status in system. Automated email confirms this and suggests content.

comprehensive guide in system covers all major areas of equipment requirements

useful information available for viewing throughout the season

System focuses on first practice of season. Suggested and related content is ‘getting started’ and other intro topics

System has content to prep for such things as ice and locker room etiquette, how to address parents etc. Tactical stuff for practice easily accessible

-2.25-1.5

-0.750

0.751.5

2.253

Category Axis

!

"# # # #

☺️ ☺️☺️ ☺️ ☺️!

"&

+ focused on a single persona (potential coach) + mapped out a single scenario: coach signs up

for the first time + modelled after information originating from

contextual inquiry and internal sources

4. information architecture

!

,

✎ . / 🔎👤 + ,📋

DevOne-user flow-v00a.graffle

Product Intro Benefit statement product description feel good mission/ done

skip

Home page

Footer

Coaches

Become a coach

request invite(with value add info)

log in

create account

sell message

assessment of sports knowledge/

application form

coaching resources

kids & group dynamics

prepping for game day

making parents happy

Assessing player skill levels

Dressing room etiquette

inspiration for coaches

Ask an Expert

this week’s practice nextprevious

year at a glance

drill 1, drill 2, drill 3 etc.

change password

Parents/families

administrator access

Initiation

invite users

import registrations

Novice - Evans

log in

Health & sports lifestyleIntro to Minor

Hockey

Sportsmanship & the love of the game

Equipment GuideDressing Room

Etiquette

(global features)

Search

send feedback account/ log in

update info

Who’s who on the team (parent roles)

sports nutrition

raising athletes

group dynamics and other people’s kids

Injuries & first aid

print

drill videos

drill diagram

share

related content (terms, related skills,

common errors, other links)

try this at home: off-ice activities

Your divisionrecommended videos

search results

Atom House

Novice - Lutz

etc.

search/browse content

video content

blog/written content

PDF/download content

functionality required

submit a question

global nav

validated code/link

approve/assign to division

coach login

admin

parents login

public

multiple viewers

Your division

Legend

view other division

view other division

kids

promo membership!lock but viewable related content

watch code of conduct video

share contentvideos: shared videos have

watermarks; possibly remove watermarks for logged in users

Featured content (videos)

Company info

Privacy

Terms

+ year 1: visualization of relationship structures based on research; preliminary user flows, implying features and tech architecture

+ year 2: re-architect (almost) the whole thing based on new research

+ discussion of flows with developer, stakeholders

DevOne-relationships structure.graffle

Association

team

team 2

kid 2

kid 3

team 3

Coach (1)

parent (2)

kid 1

Division

coach (3)

kid 4

Association Admin

kid 7

parental relationship

Division

coach (2)

kid 5

kid 6

5. wireframe + test

!

✎

. / 🔎📋 👤 + , ✎

+ year 1: desktop only + year 2: start with mobile web (responsive), then

adapt key layouts to iOS and desktop web + intentionally crappy-looking

(“Just the facts ma’am”) + internal testing for usability & clarity

6. mockup + test

!

.

/ 🔎👤 + , ✎ .📋

+ year 1: desktop only + year 2: start with mobile web (responsive), then

adapt key layouts to iOS and desktop web + as good-looking as possible without breaking

technical feasibility + internal testing for usability & clarity

7. build

!

/

🔎👤 + , ✎ . /📋

+ year 1: desktop first, then responsive, with limited feature set.

+ year 2: simultaneous development of responsive web, API for iOS app

+ full of compromise throughout + lightweight QA and no user testing

8. retest & new research

!

🔎

👤 + , ✎ . / 🔎📋

!

we did a survey

!

international reach / impressive retention / backing of major corporations + NHL alumni

etc.

!

Recommendations & Learnings

Some things learned:

!

+ define processes early

+ talent ratio is critical to product quality

+ getting a good project manager is a smart move for any company

+ have a well-thought-out design workflow

+ UX strategy is massive, even for a startup

+ invest more than you think you should into UX research

+ budget for user testing at the beginning

+ UI copy matters. A lot.

Allocation of Design Resources

interviews + research

personas + mapping

diagramming

wireframing

test wireframe prototype

high fidelity mockups

high fidelity prototype test

test builds with users

0 200 400 600 800

year 1 year 2

0 125 250 375 500

idealinterviews + research

personas + mapping

diagramming

wireframing

test wireframe prototype

high fidelity mockups

high fidelity prototype test

test builds with users

0 125 250 375 500

year 1 year 2

Allocation of Design Resources

do this


MappingInformation


+ Test

Mockup + Test


100% 100% 100% 100% 100% 100% 100% 100%

when you have to be ‘lean’ with design,

…or this100% 100% 100% 100% 100% 100% 100% 100%


MappingInformation


+ Test

Mockup + Test


…or even this100% 100% 100% 100% 100% 100% 100% 100%


MappingInformation


+ Test

Mockup + Test


…but not this.100% 100% 100% 100% 100% 100% 100% 100%


MappingInformation


+ Test

Mockup + Test


!

If you skip UX processes, you

won’t figure this out soon enough

➡

!


MappingInformation


+ Test

Mockup + Test


Abstract Concrete

tread lightly—but don’t skip steps

credit: Dan Olsen (Lean Product Playbook)

emotional design

usable

reliable

functional

emotional design

usable

reliable

functional

not this

this

MVP

~thanks for being awesome~

📋 👤 + , ✎ . / 🔎

! @_schnee_