Holding Off on High Fidelity

How sketching can improve your design process

Growing up, my father was an illustrator. Sketching and drawing was part of our household. The recognizable squeak of a Xylene Design marker on a Graphics 360 pad is a fond childhood memory of mine. As I grew up, the times in which I broke out an actual pen and paper became less frequent. Now with UI kits, symbol libraries, and a plethora of other electronic tools it’s easy to jump right to high-fidelity mockups.

Over the last few years, I’ve frequently used variations on the Design Sprint to get projects rolling. It’s been a fantastic reminder of the value of working in low fidelity — ideating quickly, provoking the right questions, and collaborating early and often with stakeholders.

The bigger the mess, the greater the progress!

Putting Pen to Paper

It’s great to start a project off with sketches because it’s easy to include anyone from the team. Everyone knows how to put pen to paper, and while the initial sketches can be done independently, there can be a ton of value in teaming up a designer with a product owner or a developer in this process. I’ve recently used this technique when designing a user flow for an upcoming product release.

Sketching a User Flow

Start with a narrative or a user journey to map out the user’s key objectives. As you sketch the screens a user would interact with, post them on a board or a wall and create a storyboard. Too often the focus is on the details and it can be easy to forget the bigger picture. The board gives you a substantial visual artifact that your team can rally around and react to.

Gather the team to talk through the flow. It’s especially important to have representatives from product and engineering included in the sketching stages for a few reasons. It gets people thinking in flows rather than screens and it gives team members an early point to provide feedback.

Post your sketches in a public place so it’s easy for stakeholders and team members to annotate.

Focusing on the Right Questions

A low fidelity sketch invokes a particular level of feedback that focuses on fundamental UX choices that set the direction for the rest of the project. In a recent review, our conversation addressed our target user’s needs, the complexity of the flow, and the overall interaction model, which is critical to get right before investing in higher fidelity.

A pixel-perfect mockup has an implied finality that doesn’t exist with a marker sketch.
Sketches don’t have to be pretty to communicate.

There’s very little cost to trying out a new idea on the fly in response to feedback. Anyone can quickly add a new sketch, patch over an existing one, flip the order around or entirely remove a step. The feedback cycle can be shortened to a matter of minutes as opposed to hours or days.

Call out your persona or target user and annotate each sketch for context.

Moving to Higher Fidelity

While it would be easy to declare a recommended length to stay in sketches, it’s different for every project.

The evolution of a storyboard from analog to digital.

The conversion to high fidelity often happens a few screens at a time rather than all at once. To help with the transition, scan the sketches and create a Google Slides document replicating the flow. Be sure to give access to editing and commenting as it continues the collaborative and live nature of the physical storyboard. As screens are completed, swap in the mockups for the sketches. Print the mockups and update the physical storyboard until all collaboration has transferred to Google Slides.

Whether it’s a physical storyboard or a Google Slides doc, retaining a revision history by stacking screens on top of each other is helpful.

Make It Your Own

While designing, it’s important to remember that not everything needs to be perfect. The next time you eagerly launch Sketch or Illustrator ready to work up a new flow, consider stepping back and picking up a marker instead.


Follow us at @SalesforceUX.
Want to work with us? Contact
uxcareers@salesforce.com
Check out the
Salesforce Lightning Design System

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.