How sketching made me improve my products design
Tags: ui, ux, sketching, design
Published: 2023-11-03 10:27:05

I recently developed an interest in group collaboration methods related to product design to improve my work methods and achieve better results.

I've always worked better with a Figma design in hand and when there was a well-established brainstorming process.

Here's a quick story about my experience after discovering the power of sketching.

## What motivates this article :

In a professional context, I do not typically get involved in the product design phase, but when working on a personal project, i used to sketch some interfaces on paper for personal use, just to get a rough idea of the application I wanted to create, but I never put much effort into it.

One of my friends insisted oneday that we spend 15 minutes separately sketching the interfaces for a project that seemed clear to me. After completing the exercise, I was astonished when I saw my partner's sketches, it helped us detect exactly where our ideas differed.

It made me realize some misunderstandings between us that I didn't initially catch during our discussions, and which could have surfaced later during the development phase of the product.
It finally help us narrow our discussion to what matter the most.

After that, I incorporated this process into all of my personal and team development projects, even for a unique feature.

## What is sketching :

It's based on drawing, and i'ts a process of illustrating user interface ideas before diving into more advanced design details.

It helps brainstorming solutions to design problems and communicate about them in a simple way.

## How to do it :

 * First generate as much idea as possible, without considering their feasibility at this stage.
 * Then revisit each of the ideas, refine them and examine in details how they will look and work, and decide whether to keep or remove them.

## How it helped me :

* **Clarify ideas in my mind:** It pushes me to express the ideas I have in mind and describe details earlier, resulting in more clarity in my head and a better understanding of what the user wants right now.

* **Anticipate what lies ahead:** When describing details, I start asking questions that help me visualize the user flow better

   - What the user sees
   - What they can do
   - What happens when the user does that
   - What happens if the user closes the app at this point
   - Where the screens lead
   - What the states of this screen are

* **Enhance team experience:** This exercise is incredible in teams because it's highly visual and brings team members closer to a shared vision at a time when the idea was originally supposed to be vague.

## What helped me do things better :

* I always start with a business need that I write down, and I try to address it using interfaces. In the end, I rephrase the need in a much straightforward way.

* I do this exercise using a whiteboard or paper with pens of different colors.

* I add a minimum of information to my sketches, such as screen titles, annotations to describe areas and their purposes, and arrows to highlight order or transitions.

* In addition to verbal explanations, I've made an extra effort with my sketches when presenting to an audience to make it very easy for them to understand.


## Feedback from my experience :

When it comes to creativity, a friend taught me that you have to start without knowing when you'll finish your work. It's an activity that requires time and experimentation until you find the right fit.

From my experience, it's an excellent advice, but when sketching, it's better to timebox the session and accept the results in the end; otherwise, it can take too much time before starting anything.

Drawing separately before group brainstorming also makes the exercise more fruitful.

## Ressources :

I improved my sketching process following the sketching section of the [Complete Web & Mobile Designer in 2023](https://zerotomastery.io/courses/learn-web-design/) course Taught by: Andrei Neagoie & Daniel Schifano.

Cover Photo by [Amélie Mourichon](https://unsplash.com/@amayli?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/sv8oOQaUb-o?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)