The Collaborative UX Designer's Toolbox

The Collaborative UX Designer’s Toolbox #UXLondon May 30, 2014

@thinknow Lane Halley [email protected] @thinknow

@thinknow • Stimulate necessary conversations • Advance with a shared
vision • Create engaged teams • Generate trust • Cultivate a culture of learning How can we...?

@thinknow Who are you? What’s your work context?

@thinknow Agency Enterprise Startup Coach Small team Distributed Large team
Freelance Co-located Enterprise Work contexts

@thinknow What are the qualities of satisfying work?

@thinknow Trust Ownership Creativity Empathy Fun Empowerment Flow Communication Productivity
Satisfying Work

@thinknow Good work comes from good teams Good teams collaborate
effectively

@thinknow What are the challenges of collaborative design?

@thinknow Attention Distance Time pressure HiPPO Confusion Ego Changing mandate
Lack of ownership Silos Collaboration Challenges Lack of information

@thinknow The way we work now

@thinknow “Software is eating the world.” Marc Andreessen photo: Peter
DaSilva

@thinknow • More businesses moving online • Broadband internet •
Connected devices (smartphones) • Low start up costs A digitally wired global economy

@thinknow Design Thinking empathy, creativity and rationality Agile Development self-organizing
teams, quality code, iterative & incremental delivery Lean Startup products people want, learning experiments

@thinknow Design Thinking diverge converge diverge converge interpret ideate discover
evolve experiment

@thinknow Image credit: http://www.mountaingoatsoftware.com/ Agile Development (Scrum)

@thinknow Redrawn from http://theleanstartup.com/principles Lean Startup Cycle

@thinknow Learning experiments Iterative design & delivery Collaborative teams different
patterns of generalists and specialists Customer information rich information about customer behavior

@thinknow Learning experiments TEST WITH USERS DEFINE EXPERIMENT prototype observations
and metrics oppportunity statement DECLARE ASSUMPTIONS Metrics Solution persona User Problem REVISE REVISE

@thinknow Photos: Carbon Five, LUXr Collaborative teams

@thinknow Customer information Adapted from work by: @clevergirl, @luxrco quantitative
qualitative generative evaluative Optimizely Analytics A/B Metrics Pirate Metrics Support tickets Surveys Net promoter score Starbucks Interviews Contextual Inquiry Hallway usability five users on friday usability lab

@thinknow • Huge, connected device landscape • Every company is
a digital company • We create businesses, not just SW • A good user experience must span all touchpoints A great opportunity for UX

@thinknow User advocate Strategist Design advocate Facilitator Synthesizer The UX
Designer’s Role Problem-solver Maker Generator Trainer Conscience

@thinknow “Do what you do now, but do less of
it and do it continually.” @williampietri

@thinknow Quick, Visual, Collaborative & Continuous

@thinknow Why document our design ideas?

@thinknow Memory So we get paid Raise money Distributed team
Feedback Prove we did it Large team Milestones Coders not hired yet Enforces clarity Reasons to document

@thinknow If documents are a necessary evil, make them work
for you

@thinknow Focus on outcome instead of output

@thinknow Help the team understand “who” “what” and “why”

@thinknow Your goal is alignment PEOPLE USES FEATURES NEEDS people
product BUSINESS OPPORTUNITY

@thinknow Good documents visualize the team’s shared understanding

@thinknow storyboards, wireframes, visual design journey maps Artifacts
document shared beliefs personas, scenarios opportunity statement, hypothesis, business canvas user stories PEOPLE USES FEATURES NEEDS BUSINESS OPPORTUNITY

@thinknow Lead with conversation, trail with documentation

@thinknow Lowest responsible fidelity

@thinknow What is “enough time?”

@thinknow • User Research • Personas • Interaction flow •
Screen design • Visual look • User testing 1 week

Screen design • Visual look • User testing 1 day

Screen design • Visual look • User testing 1 hour

UX Recipes

@thinknow • Persona 4x4 • Opportunity statement • Six-ups •
Project brief • Wireframe walkthrough • Customer conversations A few of my favorite recipes

@thinknow Let’s use some of these recipes on a sample
project

@thinknow Activity: pick an idea

@thinknow bit.ly/idea-mixer

@thinknow Activity: persona 4x4

@thinknow Activity: opportunity statement

@thinknow Activity: pick a key interaction

@thinknow Why will your persona love this solution? What’s a
big pain point you can solve?

@thinknow Activity: sketch the UI

@thinknow

@thinknow Activity: wireframe walkthrough

@thinknow Thanks @davehendee, @carbonfive, @originate Wireframe Walkthrough WHAT • Collaborative
design critique • Build team consensus • Understand trade-offs HOW • Post sketches on the wall • Tell a story • “What happens when...” • Annotate and add stickies

@thinknow Putting it all together: Wheel Nice Guys

@thinknow Picking the right tool for the job Question What’s
the objective? What might we do? How is this going to work? Where do we start? How do we build it? Does it work? Activity Opportunity statement, persona 4x4, project brief, conversation guide Six-ups, dot-voting, scenarios, storyboards, experience map Layouts, sketches, wireframe walkthrough Prototype, experiment, MVP User stories, Story map Hallway usability, five on friday, rainbow spreadsheet

@thinknow Create a shared vision opportunity statement (hypothesis) persona 4x4
six-ups conversation guide

@thinknow Opportunity statement Problem: Custom bike shoppers find it difficult
and time-consuming to learn about options, configure and price the bike they want to buy. Solution: A Web application that lets custom bike shoppers explore different components, envision different combinations and dynamically understand price.

@thinknow persona 4x4 create provisional personas

@thinknow six-up draw and discuss six-ups

@thinknow conversation guide plan customer conversations

@thinknow Set a course dot voting project brief

@thinknow dot vote ideas to explore dot voting

@thinknow Adapted from @jmspool: http://www.uie.com/articles/short_form_creative_brief/ last updated opportunity persona(s) scenarios
metrics create a project brief

@thinknow Just in time design scenario UI elements and layouts
thumbnails live style guide

@thinknow Peter explores bike profiles on the CHOOSE BIKE PAGE
Sees info about what he can do here Sees multiple bike images w/ basic info & price Uses controls to pan through them Chooses a bike to see in more detail Peter sees the bike he picked on the CONFIGURE BIKE PAGE Sees large image of bike he chose Sees list of parts with info and prices Sees the total price etc... create a scenario

@thinknow Peter explores bike profiles on the CHOOSE BIKE PAGE
Sees info about what he can do here [Content box] Sees multiple bike images w/ basic info & price [Carousel] Uses controls to pan through them [Carousel] Chooses a bike to see in more detail [Carousel] Peter sees the bike he picked on the CONFIGURE BIKE PAGE Sees large image of bike he chose [Bike config picture] Sees list of parts with info and prices [Bike config list] Sees the total price [Bike config list] etc... name the UI elements

@thinknow Header Talk to us Marketing message(s) Bike images Bike
config picture Bike config list Footer organize elements & layouts

@thinknow sketch interactions

@thinknow UI elements Responsive layouts plan page layouts

@thinknow Live style guide • Describes typography, colors, patterns and
widgets • System-of-record for front-end of patterns and styles • Code examples to help engineers to implement quickly and accurately Thanks @wardpenny

@thinknow From design to code wireframe walkthrough 1-week experiment user
stories

@thinknow wirefame walkthrough

@thinknow 1-week experiment

@thinknow user stories

@thinknow Learn and reflect five on friday project cadence

@thinknow five on friday Photo: www.flickr.com/photos/mr_t_in_dc/7772899182/

@thinknow Monday APRIL MAY week 18 Tuesday Wednesday Thursday Friday
reflect & define specify build & refine build & refine customer feedback Credit: @chemphill, @carbonfive project cadence

@thinknow • Stimulate necessary conversations • Advance with a shared
vision • Create engaged teams • Generate trust • Cultivate a culture of learning Now you know how to...

@thinknow Zeitgeist @chemphill @clevergirl @davidhussman @dhendee @Jboogie @jeffpaton @jmspool @jseiden
@katerutter @mralancooper and everyone at @balancedteam

@thinknow Lane Halley [email protected] THANK YOU @thinknow

The Collaborative UX Designer's Toolbox

The Collaborative UX Designer's Toolbox

More Decks by Lane Halley

Other Decks in Design

Featured

Transcript