The Design Process

Article Primary image
Author Image - Kate Hatchett

By Kate Hatchett

Kate is a talented designer working across our client portfolio on web and mobile projects

UX Workshops

Meeting our clients for a UX workshop is the first step we take in the design process in order to deliver a project. The aim of the UX workshop is to discuss our client’s vision for their new website, and gather enough information from the workshop to create a persona set, sitemap and wireframes.

Establishing Site Structure

To gain a firm understanding of how the new site will be structured, we undertake the first session of the workshop, which we call: ‘What’s Important?’ This is where a range of staff members from our client’s business come together to score components that make up their current website between 1 and 10 using post-it notes (1 being least important and 10 being most important). It’s good if our clients can arrange to gather a few members of the team into this session, as staff from different parts of the company may think some features and functions of the website are more important than others. This session gets everyone involved in the discussion to figure out what actually is the most important feature of the overall business. Going through this stage helps us at Leighton understand the priority of functional requirements and design elements, providing us with a clear vision of the overall business and how it must be reflected in the new website.

If our clients don’t already have a website, we are still able to undertake this session by finding out and writing down what is important to their business, and prioritise the most important to least, which will provide us with a basis to begin establishing site structure.

After prioritising components of the website, we begin to arrange the post-it notes to form a new site map. This part of the session also involves all of our client’s staff members, so that us at Leighton can get a feel for how each department would like to navigate through the site, which also provides us with a greater understanding of what content is important to different departments of the business. We will take the updated sitemap that was created in this session and edit it when we return to the office. Editing the sitemap could involve expanding the navigation if we feel there needs to be extra navigation items to link to content or it could involve minimising the navigation if we feel as though there are too many steps involved before users are able to get to the content they need.

During the site structure session, we will discuss navigational options across device types, especially if there will be a lot of nav items to be included in the new site. This involves providing the client with multiple options they could use, showing them screenshots of a number of sites that use different approaches.

Site Discussion & Competitor Feedback

Once we have established a new site structure for the website, we then go onto review the existing pages of the website, discussing what changes and improvements need to be made. This session also includes all members of staff as we find that different departments want to make improvements to different sections of the website, depending on what causes them issues on a daily basis or what they need access to more often.

We will also hold a discussion on audience types during this session, where all members of staff can relate to a certain type of user that accesses their website. This session usually provides us with enough information on different users so that we are able to develop a full persona set after the workshop.

Competitor research and viewing other sites that our clients like is another important session to cover during the workshop, so that we can gain an understanding of what works well and what doesn’t work so well on similar websites. This session also allows us to find out what our clients would like to see design-wise on their website.

Finally, at the end of the workshop, we will work with our clients to sketch out a couple of pages of the website, to come up with some layout ideas using the information we have gathered from the day. These sketches are not set in stone and are not finalised layouts, they’re good to do during the workshop to get the clients involved in the beginning of the design process, which helps us to gain a vision of how they would like to see certain pages laid out.


After the Workshop

Creating Personas

Using all of the information we gathered at the workshop, we begin to create user personas to establish a persona set. The purpose of writing user personas is to create reliable and realistic representations of the major user group of a website that can be referred back to during design, development and testing. Creating a decent set of personas helps us to prioritise features of the new site by considering real people with backgrounds, goals and values, focusing on their needs and expectations and how they're likely to use the site.

Sometimes personas are misunderstood by our clients, as they sometimes aren’t different users, an example of two different personas are:

Persona 1 – George: George is a 45 year old violin teacher who has used the Internet for less than a year. He accesses the Internet from home over a broadband connection. He has never purchased online before, preferring to place orders by phone.

Persona 2 – Georgina: Georgina is a 29 year old ad exec who has been using the Internet for 5 years and uses her Macbook, iPad or Android phone to access the web - whatever is to hand.

This would mean that George has different needs to Georgina. To accommodate for George, we would need to ensure that the website is simple, straight to the point and easy to use. If the site is used to make purchases, we would need to ensure that the purchase flow is a straightforward process, and also ensure that there’s easy access to a phone number on the website if George would prefer to order by phone.

To accommodate for Georgina, we’d need to ensure that the website is responsive and works well across different devices and screen sizes that she may be using to view the website. We would also make sure that all information that you would get by viewing the site on a desktop is still available to her when viewing the website on a mobile device.

It is important for us at Leighton to carry out this process, as it allow us to focus on a memorable set of characters during the design process, so that we can design for a specific set of people rather than creating generic designs for everyone.


Once we have a finalised persona set and have made amendments to the site structure that was created during the workshop, we go on to create informed wireframes using this information. Often, clients will confuse wireframing for actual design, wireframes are not finished concepts, an indication of content or indicative of final layout.

Focusing purely on the site’s structure through the creation of wireframes allows us to plan the layout and interaction without our clients being distracted by colours, typeface or copy, we do this because if a user can’t figure out where to go on a basic black and white wireframe, it doesn’t matter what colours or typeface you eventually use.

Once we have a revised sitemap, a full set of user personas and wireframes, we have all of the appropriate information to work from to begin designing a new website.

We feel that it is important for the designers who will be working on the project to get involved with this process. UX Workshops are a great way to break the ice and allows our designers to collect relevant information from the client's business in order to begin the project.

Establishing user personas for a website at the beginning of the project is a relevant part of the design process as it helps our designers understand the website better as they identify the current users and what they want to get out of the site. User personas are not only useful for designers, but also our developers and testers too, as they use them to develop and test against to ensure it works as it should.

Illustration of Website Flowcharts and Site Maps