Drawing up a storm
UX Sketching with Senior Product Designer, Jian Wei Liau
Hello, I’m Alexa. I’ve been working as a Product Designer at Zendesk for over two years now and have been able to see our team almost double in size. And although there are certainly challenges that come with scaling teams there are also great up sides — one of the greatest benefits being able to learn unique skills from my colleagues.
There are so many leaders to look up to in the design community these days, but my teammates are still some of the most influential people in my life that I aim to learn from.
Jian Wei Lau is a great example. He is a Senior Product Designer at Zendesk working on our Sunshine Platform product and works within the same department as me at Zendesk in San Francisco. This means we share critique time together, as well as various other weekly meetings.
Jian Wei has some of the most clearly designed and well-crafted sketches I have ever seen. They are easy to follow, loose but detailed, and I aspire to create sketches like he does some day.
I wanted to learn his thinking and processes for sketching but I also wanted to share it with the greater design community. So below is an interview I conducted to share this story.
—
Why is sketching important in the UX Design process?
Whether you are a Product Designer, Animator, Architect, Web Designer, Mobile Designer, or Game Designer, sketching can guide our creative thinking towards problem solving or storytelling. I think sketching is one of the most powerful design skills to have. It can help us frame our thoughts, tell a better story, and stay organized with thought processes.
Over the years, I have formed a habit of sketching which I really enjoy. Sometimes I use pen and paper while other times I get fancy and sketch using my iPad. In both cases it’s helped me to:
- Communicate ideas
- Discover potential issues and solutions quickly
—
How does sketching help you communicate your ideas?
When working with other cross functional teams, not everyone is a designer. Just by sharing ideas and solutions verbally isn’t always enough to align everyone on a vision—I overcome this is by creating sketches. Sometimes, I sketch using the whiteboard and explain my ideas at the same time. More often, I share my paper sketches to product teams and customers to get a first pass on the user journey so that I can gather feedback. It helps me find out which design idea works best—and then I can iterate on it.
I also conduct design sprints where I facilitate group sketching sessions with cross functional teams—including Product Managers, Engineers, Sales and Marketing teams—to generate ideas. Showing sketches and explaining ideas helps us understand and communicate better. It doesn’t need to be super detailed; it’s important to just focus on the interactions.
How do you use sketching to identify potential design issues?
Sometimes, I’m tempted to just dive into Sketch and mock something up quickly. But I always find that when I do, I quickly fall into the trap of missing interactions. Being able to quickly show user flows and what happens when a user clicks X and then Y is much easier on paper than in a mockup. I also discover a lot of things through a sketch that I may not have seen—it allows me to identify the happy path, error states, empty states, and edge cases. It’s also a lot easier to team up with other designers and explore other possible design outcomes. Since it’s low fidelity, it’s easier to use as a reference or discussions point in design critiques and stand-ups.
What materials do you use to create your sketches?
- Tonibow markers, 2 sided: brush and normal nib. I use black for wireframes or text, and grey for shadows or secondary text
- Additional colored markers: red, blue, green, or yellow to call out different parts of the UI
- Highlighters to highlight important parts of the interface
- Arrow post-it sticks to point out certain interactions
What are some tips for executing UX design sketches effectively?
It’s all about telling a story with sketches. Some of my strategies include, translating the interface into block frames and using thick/thin lines to mimic the line weight or font weight of the interface. I like to leave out all the small details of the interface to help to give viewers a clear structure of the design idea and help them to focus on a particular part of the interface.
I also use different colors to call out areas within the interface and label them. I think it’s useful to use consistent color to represent similar areas and you can use different colors to represent different types of data or space.
I also like using grey markers to create shadows — showing a popover menus or drop-downs.
Where do you go to find inspiration for you sketching work?
I get most of my inspiration from watching behind the scene of animated films. One of my favourites is the making of toy stories. Using shading, thickness of the lines to emphasise the character movement or expression.
Another source of inspiration is Sketchnote amy blog. They have amazing examples and tips on sketching notes.
Jian Wei Liau is a Senior Product Designer on the Sunshine team at Zendesk.
