Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Along with Kat Kuhl, we delivered our presentation from Drupalcon at Design4Drupal Boston.

Creating great user experience is critical to the success of a web project. Yet in the traditional approach, most of the site's experience is decided by one user experience professional, expressed in PDF wireframes, and interpreted by other team members after the fact. On rushed projects, the time for feedback from others may be limited, resulting in final wireframes that have your designer shaking his head, or your developer wondering what data is going to drive that neat "Related Publications" block the client loved.

By replacing wireframes with collaborative sketching and Drupal prototyping, you can get your whole team involved early and keep them engaged as the project moves from phase to phase. You can also build sites faster and better by answering the question of "How will it work?" and "How will it act on a mobile device?" while you're thinking through the functionality. We've had success with this method at Rock Creek, and we'll go over:

The benefits of collaborative sketching for the project and team members
How to conduct the sketching activity and the Drupal prototyping efficiently
Challenges of this approach and ways to implement it at your company
Case study samples
The trips and tricks we’ve learned along the way to make this a successful approach

(Slide design by Ika Lestari)

76b46d4f7b9501e85fccc24a7910927f?s=128

Michelle Chin

August 02, 2014
Tweet

Transcript

  1. Michelle Chin • Kat Kuhl Design 4 Drupal Boston |

    August 2, 2014
  2. Kat Kuhl - Director of Technology | @webbykat Michelle Chin

    - Sr. UX Strategist | @soysaucechin A LITTLE ABOUT us Rock Creek Strategic Marketing Washington, DC | @rockcreeksm
  3. • UXers / Designers • Developers • Project Managers A

    LITTLE ABOUT you
  4. WIREFRAMING CHALLENGES • Lots of handoffs • Lots of revisions

    • Lack of engagement throughout the project
  5. WIREFRAME DESIGN Site Building, Module Installation, Module Development DEVELOP Migration

    Theming DEVELOPMENT CHALLENGES
  6. DEVELOPMENT CHALLENGES “But now that I see it…”

  7. UX CHALLENGES Designing wireframes in a vacuum

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

  9. UX CHALLENGES Hefty annotations… …still get misinterpreted.

  10. ACCESSIBILITY CHALLENGES Wireframe concepts make it difficult to identify accessibility

    trouble spots.
  11. DESIGN CHALLENGES Later involvement in project = playing catch up

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

  13. WHAT DO WE REALLY NEED? • Something easier to understand

    • Something quicker to iterate upon • Something more realistic • Something that involves everyone earlier
  14. WHAT’S THE SOLUTION? Collaborative Sketching and Digital Prototyping!

  15. MAKING THE CHANGE: COLLABORATION Pick a small project. • Less

    risky • Manageable in size • Quicker to recover
  16. MAKING THE CHANGE: COLLABORATION Get buy-in from your teammates. “Hey,

    would you be up for trying out this sketching approach?”
  17. MAKING THE CHANGE: COLLABORATION Involve the right people. Everyone! UXers,

    developers, designers, accessibility analysts, content strategists, project managers...
  18. 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
  19. HOW DO WE SKETCH collaboratively?

  20. • Markers • Paper • Masking Tape • Scissors •

    Sticky Notes • Snacks! • Music! WHAT YOU’LL NEED
  21. CHOOSE THE right SPACE • Open area • Ample wall

    space • Freedom from distractions
  22. WHAT TO SKETCH • Main pages - homepage, landing pages

    • Pages with unique functionality/features (galleries, data-heavy pages, etc.) • Responsive versions of the above
  23. 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
  24. • 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
  25. SKETCHING SESSION

  26. SKETCHING SESSION

  27. PRO TIPS FOR SKETCHING • Encourage everyone to sketch. •

    Remember that no idea is a bad one. • Pay attention to everyone’s energy level.
  28. DISCUSSION SESSION

  29. 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!
  30. PRO TIPS FOR DISCUSSION • UXer / PM - use

    your facilitation skills. • Make sure everyone is heard. • Vet the ideas with your teammates (experts!).
  31. WHAT’S NEXT? The UX Designer: 1. Creates lo-fi reference sketches.

    2. Works in tandem with the developer to begin building the prototype.
  32. SO… YOU NEVER WIREFRAME? Wireframes are a communication tool; so

    are prototypes. Use whatever is most appropriate for a task.
  33. “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...
  34. HTML PROTOTYPES • Quick to build • Throwaway code •

    Time-consuming to modify content
  35. None
  36. DRUPAL PROTOTYPES • Slow(er) to build • Faster to modify

    content • Groundwork for your site
  37. 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
  38. HOW DO WE CREATE DIGITAL PROTOTYPES? FRONT-END TASKS SITE-BUILDING TASKS

    CONTENT MIGRATION
  39. • Install a prototype theme. • Consider source order and

    positioning. • Adjust the mobile experience as needed. FRONT-END TASKS (minimal)
  40. • Build out menus based on the sitemap. • Set

    up content types, taxonomies, & views. • Set up aliases & breadcrumbs. SITE-BUILDING TASKS
  41. • Make persistent block associations. • Install modules for more

    complex functionality. SITE-BUILDING TASKS
  42. This isn’t a throwaway product… ...so you have to remove

    the things you don’t need. WARNING!
  43. Migrate content. Lots of content. CONTENT MIGRATION TASKS

  44. None
  45. SUCCESS STORIES

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. BENEFITS OF COLLABORATIVE SKETCHING & DIGITAL PROTOTYPES

  56. • Navigate challenges early. • Get buy-in from your team.

    • Get buy-in from your client. • Do usability testing. USE YOUR PROTOTYPE TO...
  57. THINGS TO REMEMBER

  58. Start with a small project first. THINGS TO REMEMBER

  59. Keep communication open. THINGS TO REMEMBER

  60. Get new staff involved early. THINGS TO REMEMBER

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

  62. THANK YOU! Kat Kuhl | @webbykat Michelle Chin | @soysaucechin

    Rock Creek Strategic Marketing @rockcreeksm
  63. ? QUESTIONS