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

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

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

Video recording available here: http://bit.ly/collaborative-sketches

Presented at Drupalcon Austin 2014 with Kat Kuhl and Ika Lestari.

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

Michelle Chin

June 04, 2014
Tweet

More Decks by Michelle Chin

Other Decks in Design

Transcript

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

    View Slide

  2. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. DESIGN CHALLENGES
    Later involvement of project =
    playing catch up

    View Slide

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

    View Slide

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

    View Slide

  10. UX CHALLENGES
    Designing wireframes in a vacuum

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. 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

    View Slide

  20. HOW DO WE SKETCH
    collaboratively?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. 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

    View Slide

  25. ● 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

    View Slide

  26. SKETCHING SESSION

    View Slide

  27. SKETCHING SESSION

    View Slide

  28. SKETCHING SESSION

    View Slide

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

    View Slide

  30. DISCUSSION SESSION

    View Slide

  31. 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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. “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...

    View Slide

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

    View Slide

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

    View Slide

  38. View Slide

  39. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. ● 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

    View Slide

  44. View Slide

  45. Migrate content. Lots of content.
    CONTENT
    MIGRATION TASKS

    View Slide

  46. SUCCESS STORIES

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. BENEFITS OF
    COLLABORATIVE
    SKETCHING & DIGITAL
    PROTOTYPES

    View Slide

  57. Navigate challenges early.
    BENEFITS

    View Slide

  58. Iterate more quickly on a design concept.
    BENEFITS

    View Slide

  59. Reuse your work -
    no throw-away products!
    BENEFITS

    View Slide

  60. Prototypes easily demonstrate
    responsive behavior.
    BENEFITS

    View Slide

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

    View Slide

  62. THINGS TO REMEMBER

    View Slide

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

    View Slide

  64. Keep communication open.
    THINGS TO REMEMBER

    View Slide

  65. Get new staff involved early.
    THINGS TO REMEMBER

    View Slide

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

    View Slide

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

    View Slide

  68. ?
    QUESTIONS

    View Slide

  69. LET US KNOW
    WHAT YOU THINK!
    http://bit.ly/collaborative-sketches

    View Slide