Sketchboards are popularised by Adaptive Path. Wireframes as a first step are too slow and detailed. The collaborative use of the sketchboard opens up the design process to everyone involved (all stakeholders including clients, visibility for management). Designers need a quick way to explore many different possibilities of the bigger picture, solo or in collaboration.
User flow –
Sketchboard – your starting point? “inspirational material such as personas or requirements are used as a starting point to drive the conceptualization process”
Experience map – typically showing the full concept, official deliverable and usually not sketched
Wireflow – mix between wireframes and user flow
Speech bubbles – used as a starting point per user, or showing the thought processes step-by-step for one particular user, these are annotation elements
Customer journey mapping
The process, coarsely speaking
- Get out a big sheet of paper (2-3 meters) and stick it to the wall
- Use sticky notes to divide the sketchboard into broad topics like Design/User Personas or steps that your users will take (signup, log in, edit details, close account, etc).
- Use paper or the UX Sketchbook to start roughing out ideas or thoughts
- Stick them to the board (DS: preferably everything is sticky and can be moved around)
- Move things around
From: Sketchboard before you wireframe – Treehouse Blog
The process, detailed steps
1. Gather the inputs:
On the left side of the sheet (label it “Input” and optionally draw a dashed vertical line to separate it from the wireflows that sit on the right-side)
– scope items
– add criteria (requirements/user stories) (
– users (personas, facts)
– success metrics
2. Sketch, sketch, sketch
Start sketching on separate papers
- Start with 6-up (A4 landscape) multi-page templates (a.k.a. thumbnail sketches) to explore one problem from different angles, or explore a possible flow (example) (template)
- – Focus first on quantity. Go right-brained. Your goal here is to come up with many different ideas or usability solutions without being too critical or pixel-perfect at this stage.
- – stick them up on the board
- – “take a step back and think about which one works best. Maybe [it’s a hybrid]. Do another thumbnail sketch if this is the case, then” go for the 1-up template.
- – don’t use pencils, just scribble it out to not get perfectionist over the details
Then sketch full pages using this single-page template (1-up) to “zoom in” on a particular thumbnail idea with slightly more detail
- – add headers, visual weight, functional elements
- – remain sketchy, don’t overdo it on the fine detail
3. Start your sketchboard
- Divide it into steps that your user will take or stages of user process (these should be labeled big)
– “Once you’re happy with the position and grouping of your sketches, replace the Post-It headings with inked ones – a big chisel tip Sharpie works well (just make sure the ink doesn’t bleed through the brown paper and onto the wall!) ”
- Roughly organise your problems and constraints
- Optionally add research findings, competitor examples and other inspiration libraries
- Select, evaluate, discuss, critique, decide – collaborate!
4. Share and iterate
– take it to your team in a tube
– take (seperate) notes for feedback (not on the board)
– go back and add summarized changes as annotations to your board
“During the evaluation sessions, annotate your sketches, use Post-It notes, and amend or create new sketches as required to capture feedback, suggestions and corrections”
5. Start wireframing
– THEN make the wireframes and/or prototype on the computer
Learn more about the process
UX flow examples
– Drafting dots (sticky)
– Mobile whiteboards (lightweight, useful if you lack wall space) or large piece of cardboard
Types of deliverables WP post
http://konigi.com/book/sketch-book/work-fast TIP videos
More videos @ http://lanyrd.com/search/?q=sketchboard
Ideas, tools, alternatives
A.K.A. : Mindmap, wireflows, wiremaps, user flows, customer flow, user journey, concept maps, ux flow, ux flowchart, and sitemaps.
Prezi (ZUI) is a less linear, more free-form and animated way of telling a story. Alternatively, zoom in manually in powerpoint, or another way to easily navigate in a large canvas.
Story maps (hybrid between storyboard and UX map) @ https://nl.pinterest.com/pin/108438303505882523/
UXpressia allows you to create digrams they call “Impact Maps”, starting with Personas. The fixed template allows you to add cards and connectors for the following stages: business goals > personas > impacts > deliverables > user stories
Collaborative design workshops
“For complex products, it’s helpful to understand the system at a high level, before anything gets fully designed, prototyped, or built. I like to call this method of flowcharting “wireflowing”. It’s a hybrid of traditional sitemaps, flowcharts, and wireframes. The benefit is that you can start to make UI-level decisions & establish consistent patterns quickly, while maintaining a relational understanding of how everything fits together.
Customer flows: design principles
More tips in dashboard design and information design (info visualisation), design for simplicity, etc.
The main focus should be a self-explanatory journey that can be easily shared.
- Show where it starts (usually upper-left corner)
- Provide focus, focal point (play with prominence)
- Split it off into separate posters (don’t cram it all on one page).
- Try a chronological left-to-right approach, showing the journey from start to end
- Landscape usually works better than portrait (for both screen and wall viewing)
- Avoid long arrows, too many arrows. Re-order the screens to fix this.
- Use too many colours. Be consistent with colours.
- Use too much text
See my GetPocket (wireflows) + FB saves
UX journey mapping course @ Safari Books Online