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

Slide 1

Slide 1 text

Michelle Chin • Kat Kuhl Design 4 Drupal Boston | August 2, 2014

Slide 2

Slide 2 text

Kat Kuhl - Director of Technology | @webbykat 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 handoffs ● Lots of revisions ● 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

UX CHALLENGES Designing wireframes in a vacuum

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

UX CHALLENGES Hefty annotations… …still get misinterpreted.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

DESIGN CHALLENGES Later involvement in project = playing catch up

Slide 12

Slide 12 text

More difficult to get buy-in from team members DESIGN CHALLENGES

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

HOW DO WE SKETCH collaboratively?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 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 24

Slide 24 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 25

Slide 25 text

SKETCHING SESSION

Slide 26

Slide 26 text

SKETCHING SESSION

Slide 27

Slide 27 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 28

Slide 28 text

DISCUSSION SESSION

Slide 29

Slide 29 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 30

Slide 30 text

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

Slide 31

Slide 31 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 32

Slide 32 text

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

Slide 33

Slide 33 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 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 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 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

● Build out menus based on the sitemap. ● Set up content types, taxonomies, & views. ● Set up aliases & breadcrumbs. SITE-BUILDING TASKS

Slide 41

Slide 41 text

● Make persistent block associations. ● Install modules for more complex functionality. SITE-BUILDING TASKS

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Migrate content. Lots of content. CONTENT MIGRATION TASKS

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

SUCCESS STORIES

Slide 46

Slide 46 text

No content

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

BENEFITS OF COLLABORATIVE SKETCHING & DIGITAL PROTOTYPES

Slide 56

Slide 56 text

● Navigate challenges early. ● Get buy-in from your team. ● Get buy-in from your client. ● Do usability testing. USE YOUR PROTOTYPE TO...

Slide 57

Slide 57 text

THINGS TO REMEMBER

Slide 58

Slide 58 text

Start with a small project first. THINGS TO REMEMBER

Slide 59

Slide 59 text

Keep communication open. THINGS TO REMEMBER

Slide 60

Slide 60 text

Get new staff involved early. THINGS TO REMEMBER

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

THANK YOU! Kat Kuhl | @webbykat Michelle Chin | @soysaucechin Rock Creek Strategic Marketing @rockcreeksm

Slide 63

Slide 63 text

? QUESTIONS