The clue is in the title – this is a post about sketching the user experience only. I would love to do another blog post later about creating prototypes and creating a design system, but for now let’s just talk about sketching.
Sketching is my favourite part of the process. I feel like I can ‘think on paper’ better than anything else. It helps to articulate my thoughts and organise my brain in a way, and I feel like it’s a great way to take all of the dependencies, requirements and business goals out of the cognitive load.
In my experience, 10 minutes of sketching can save me an hour of creating prototypes on the screen that might be wrong. In 10 minutes I can have the first review cycle done, and be starting on my second iteration.
Below I’ve outlined, step by step, my sketching process for solving design problems. Everyone has their own way of working, and every project is different. But almost every project I work on starts with putting pen to paper. So let’s begin.
Sketching UX with Pen and Paper
No screens, people! Only pen and paper at this stage. Why pen and not pencil? Because I don’t want to spend too long erasing and redrawing lines because they’re not straight. At this part of the process, we welcome the squiggly lines and messy handwriting. It’s not about being neat, it’s about putting thoughts down.
I start out with A3 pages (that I… well, reappropriate from the office printer.. )
I also bought the Måla drawing paper roll from the Ikea children’s section for my desk at work. That, and a packet of Sharpies.
Start With Your Base Screen
If your design task is to add the ability to add reviews to a product, start with the product details screen. If your design task is to add a search and filtering functionality to a list of products – start with the product listing.
Obviously, if it’s for iPhone, draw inside rectangles roughly the same ratio as an iPhone etc… If it’s for responsive web, start mobile first.
Let your mind wander. Ask “What If?” and play with different possibilities. Look at competitors if you get stuck. Check out some of these sources of design inspiration. Don’t spend too long on screens, get back to your paper and play with the possibilities and layouts.
Usually – for me – one solution will stand out. It will be something that makes use of conventional design patterns and would be familiar to users.
Beware of Bias
You don’t want to stick with the first thing that comes into your head. Very often I’ll have a design idea that I really like, but I force myself to keep drawing and keep brainstorming just to try other approaches.
The initial sketching session should take about 10 – 15 minutes, more if it’s a very complex problem. That’s the beauty of pen and paper. If this was Sketchapp, it could be an hour.
Get the stakeholder/stakeholders and put the ideas in front of them. In my experience, stakeholders might latch on to a single idea they think will work. If you agree – great! If you don’t agree, sometimes the best thing would be to test both ideas to see which one is more clearer and more easily understood by users.
You also might also need to talk to the back-end team to ensure everything is technically feasible, and the front-end developer to see if the components exist in the design system.
When you’re happy you have a sketch that will be able to move to the next stage of the process – turning your sketches into a wireframe with software like Sketchapp, and start creating your prototype.
I highly recommend you create a prototype and do some kind of testing before you give it to developers. It doesn’t matter how soon the deadline is. Trust me – I’ve even done user testing with people from the legal team at work during their lunchtime. Get it in front of someone – anyone – to test it.
So that’s my sketching design process. I know everyone has their own unique process, but I hope you found this interesting. I would love to know what yours is.
Why not tweet me or leave a comment below.