Un-siloing Your Project Team with Collaborative Sketches and Digital Prototyping

Slide 1

Slide 1 text

Michelle Chin • Kat Kuhl • Ika Lestari User Experience Design Track | June 4, 2014

Slide 2

Slide 2 text

Kat Kuhl - Director of Technology | @webbykat Ika Lestari - Sr. Graphic Designer Michelle Chin - Sr. UX Strategist | @soysaucechin A LITTLE ABOUT us Rock Creek Strategic Marketing Washington, DC | @rockcreeksm

Slide 3

Slide 3 text

● UXers / Designers ● Developers ● Project Managers A LITTLE ABOUT you

Slide 4

Slide 4 text

WIREFRAMING CHALLENGES ● Lots of revisions ● Lots of handoffs ● Lack of engagement throughout the project

Slide 5

Slide 5 text

WIREFRAME DESIGN Site Building, Module Installation, Module Development DEVELOP Migration Theming DEVELOPMENT CHALLENGES

Slide 6

Slide 6 text

DEVELOPMENT CHALLENGES “But now that I see it…”

Slide 7

Slide 7 text

DESIGN CHALLENGES Later involvement of project = playing catch up

Slide 8

Slide 8 text

Easy to misinterpret functionality especially when it comes to responsive designs DESIGN CHALLENGES

Slide 9

Slide 9 text

Tons of time and effort getting buy-in from team members DESIGN CHALLENGES

Slide 10

Slide 10 text

UX CHALLENGES Designing wireframes in a vacuum

Slide 11

Slide 11 text

UX CHALLENGES Creating really high-fidelity wireframes… ...also means updating them.

Slide 12

Slide 12 text

UX CHALLENGES Hefty annotations… …still get misinterpreted.

Slide 13

Slide 13 text

ACCESSIBILITY CHALLENGES Wireframe concepts make it difficult to identify accessibility trouble spots.

Slide 14

Slide 14 text

WHAT DO WE REALLY NEED? ● Something easier to understand ● Something quicker to iterate upon ● Something more realistic ● Something that involves everyone earlier

Slide 15

Slide 15 text

WHAT’S THE SOLUTION? Collaborative Sketching and Digital Prototyping!

Slide 16

Slide 16 text

MAKING THE CHANGE: COLLABORATION Pick a small project. ● Less risky ● Manageable in size ● Quicker to recover

Slide 17

Slide 17 text

MAKING THE CHANGE: COLLABORATION Get buy-in from your teammates. “Hey, would you be up for trying out this sketching approach?”

Slide 18

Slide 18 text

MAKING THE CHANGE: COLLABORATION Involve the right people. Everyone! UXers, developers, designers, accessibility analysts, content strategists, project managers...

Slide 19

Slide 19 text

Set expectations. ● Sketching will lead to a prototype; no paper wireframes. ● Could make your life easier… maybe. ● Could be a bumpy road; but get pumped! MAKING THE CHANGE: COLLABORATION

Slide 20

Slide 20 text

HOW DO WE SKETCH collaboratively?

Slide 21

Slide 21 text

● Markers ● Paper ● Masking Tape ● Scissors ● Sticky Notes ● Snacks! ● Music! WHAT YOU’LL NEED

Slide 22

Slide 22 text

CHOOSE THE right SPACE ● Open area ● Ample wall space ● Freedom from distractions

Slide 23

Slide 23 text

WHAT TO SKETCH ● Main pages - homepage, landing pages ● Pages with unique functionality/features (galleries, data-heavy pages, etc.) ● Responsive versions of the above

Slide 24

Slide 24 text

PRE-SKETCH MEETING 30 min 1 1 3 WHEN TO SKETCH SKETCHING SESSION 1.5 - 2 hrs SKETCHING SESSION 1.5 - 2 hrs 2 1 DISCUSSION SESSION 1.5 - 2 hrs 3 1 DISCUSSION SESSION 1.5 - 2 hrs

Slide 25

Slide 25 text

● Set expectations. ○ Goals of the sketching ○ What happens in each session ● Provide background info. ○ Site map ○ List of pages to sketch ○ User research - personas / scenarios ○ Previous project work PRE-SKETCH MEETING

Slide 26

Slide 26 text

SKETCHING SESSION

Slide 27

Slide 27 text

SKETCHING SESSION

Slide 28

Slide 28 text

SKETCHING SESSION

Slide 29

Slide 29 text

PRO TIPS FOR SKETCHING ● Encourage everyone to sketch. ● Remember that no idea is a bad one. ● Pay attention to everyone’s energy level.

Slide 30

Slide 30 text

DISCUSSION SESSION

Slide 31

Slide 31 text

DISCUSSION STEPS 1. Pick a page. 2. Go over ideas. 3. Pick one sketch or parts of some. 4. UXers - use your UX skills. 5. Someone - take notes!

Slide 32

Slide 32 text

PRO TIPS FOR DISCUSSION ● UXer / PM - use your facilitation skills. ● Make sure everyone is heard. ● Vet the ideas with your teammates (experts!).

Slide 33

Slide 33 text

WHAT’S NEXT? The UX Designer: 1. Creates lo-fi reference sketches. 2. Works in tandem with the developer to begin building the prototype.

Slide 34

Slide 34 text

SO… YOU NEVER WIREFRAME? Wireframes are a communication tool; so are prototypes. Use whatever is most appropriate for a task.

Slide 35

Slide 35 text

“When PDFs, JPEGs and other static artifacts get thrown around, there’s a tendency to forget the medium for which you’re designing. - BRAD FROST “ bit.ly/html-wireframes BUT REMEMBER...

Slide 36

Slide 36 text

HTML PROTOTYPES ● Quick to build ● Time-consuming to modify content ● Throwaway code

Slide 37

Slide 37 text

DRUPAL PROTOTYPES ● Slow(er) to build ● Faster to modify content ● Groundwork for your site

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

WIREFRAME DESIGN Site Building, Module Installation, Module Development DEVELOP Migration Theming DEVELOP Theming, Module Development SKETCH PROTOTYPE Site Building, Module Installation, Migration DESIGN DEVELOP Migration, Module Development ORIGINAL NEW

Slide 40

Slide 40 text

This isn’t a throwaway product… ...so you have to remove the things you don’t need. WARNING!

Slide 41

Slide 41 text

HOW DO WE CREATE DIGITAL PROTOTYPES? FRONT-END TASKS SITE-BUILDING TASKS CONTENT MIGRATION

Slide 42

Slide 42 text

● Install a prototype theme. ● Consider source order and positioning. ● Adjust the mobile experience as needed. FRONT-END TASKS (minimal)

Slide 43

Slide 43 text

● Build out menus based on the sitemap. ● Set up content types, taxonomies, & views. ● Make persistent block associations. ● Set up aliases & breadcrumbs. ● Install modules for more complex functionality. SITE-BUILDING TASKS

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Migrate content. Lots of content. CONTENT MIGRATION TASKS

Slide 46

Slide 46 text

SUCCESS STORIES

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

BENEFITS OF COLLABORATIVE SKETCHING & DIGITAL PROTOTYPES

Slide 57

Slide 57 text

Navigate challenges early. BENEFITS

Slide 58

Slide 58 text

Iterate more quickly on a design concept. BENEFITS

Slide 59

Slide 59 text

Reuse your work - no throw-away products! BENEFITS

Slide 60

Slide 60 text

Prototypes easily demonstrate responsive behavior. BENEFITS

Slide 61

Slide 61 text

Use your functional prototype to... ● Get buy-in from your team. ● Get buy-in from your client. ● Do usability testing. BENEFITS

Slide 62

Slide 62 text

THINGS TO REMEMBER

Slide 63

Slide 63 text

Start with a small project first. THINGS TO REMEMBER

Slide 64

Slide 64 text

Keep communication open. THINGS TO REMEMBER

Slide 65

Slide 65 text

Get new staff involved early. THINGS TO REMEMBER

Slide 66

Slide 66 text

Remember, this is a process. Be adaptable. THINGS TO REMEMBER

Slide 67

Slide 67 text

THANK YOU! Michelle Chin | @soysaucechin Kat Kuhl | @webbykat Ika Lestari | convince her to join Twitter Rock Creek Strategic Marketing @rockcreeksm