Five steps to bring more focus into your UX page design process

sketching

Sketching is an important tool in the UX design process. It takes you away from the screen and gives you the opportunity to design quickly and effectively.

Before you start

Before you start sketching it’s best to have developed a set of user stories based on your audience needs.

There are some different ways to do this but I like to create a user story map.

One you have a set of user stories you can decide on the pages you will need to achieve them.  Now is the perfect time to create a sitemap.

Now you can start thinking about page layout and design. Sketching gives you the opportunity to design fast. To make the process smoother there are a few steps you can follow.

1. Understand the Goal of the Page

Understanding the goal the user has in mind when visiting a page will help focus your thinking.  I tend to write down the high-level goal so I can keep referring back to it.  I then note down some more detailed user goals for the page.

For this article, I’m going to ask you to imagine an e-commerce site.  One of the pages in your site map would more than likely be a product page.

On a product page, the high-level user goal might be ‘To find out more information about a product’

Some more detailed goals might be to:

  • Find out how much the product cost
  • See more pictures of the product
  • Add the product to a basket
  • See other similar products

2. Establish content requirements

Even though it is tempting to get straight into sketching this step is important. You are developing a framework to think about and talk through page requirements.

List all the content that will need to be on the page to fulfil the user stories.  For the first pass don’t worry about the order,  note everything down.

Let’s think again about our product page. Referencing user stories, a list of content in no particular order might look like:

  • Product Name
  • Product description
  • Quantity selection
  • Related Products
  • Add to basket
  • Image(s) of product
  • Price
  • Reviews

3. Prioritise your content

Make sure you’re happy that you list of content covers the relevant user stories. Now you can think about the order the content will display on the page.

Reordered, your product content requirements might look like this:

  • Product Name
  • Product description
  • Image(s) of product
  • Quantity selection
  • Price
  • Add to basket
  • Related Products
  • Reviews

When ordering your content it’s useful to think about:

  • The narrative of the page – what story do you want your page to convey?
  • What content is most important to the user to achieve their goals?
  • The KPI’s for the site

4. Sketch mobile first

Mobile first sketch
Sketching mobile first helps you to focus on the vital elements of the page

I always sketch mobile first.  It’s challenging but sketching mobile first helps you to focus on the vital elements of the page.  You may even end up removing unnecessary content.

5. Sketch consistently

An important factor in sketching is to keep elements consistent.

Use consistent sketching styles for images, buttons, text, and input boxes. This will make your UX sketches neater as well as making them easier to understand.

One final tip

Remember sketching is a quick way to flesh out your ideas throughout the UX and Design process. Treat it as step to the solution not a finished product. Don’t be afraid to throw a sketch in the bin.