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