All posts

Optimising the design process

Leighton logo
March 24, 2022
5 min read
Leighton designers Dan and Vik, sat around a laptop collaborating on a project.

When designing a new site or piece of software, it is important to ensure that every step taken starts with the end user in mind.

This will help to ensure that the final product competently meets the goals and objectives of the original brief, and ultimately can avoid costly redevelopment later down the line.

At Leighton we have an established process that has been created to ensure we work collaboratively with our customers to meet their project objectives and ensure the end output addresses their customers’ needs.

Introducing the UX workshop

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 gain a better understanding of our customer’s challenges and to discuss the customer vision for their project.

One of the main aims it to gather enough information about their customers and their goals in order to create a persona set that will later inform the sitemap and wireframes.During this workshop we will take customers through a set of bespoke tasks designed to really get to the heart of what the project is all about.

Stage one: What’s important?

The first part of the UX workshop focuses on gaining a firm understanding of how the new site or software application will be structured. One of the main tasks during this session allows workshop attendees to rank the current components of their existing site or software application.

If our clients don’t already have a website or software application, we adapt this session by getting participants to write down what is important to their business before prioritising what they’ve written.

This session predominantly focuses on the functional requirements. What does our client really need the site or application to do. For this part the workshop we recommend the customer brings together staff members from multiple business functions to get a broader spectrum of opinions. Someone in HR for example will have a very different perspective on what is important to say, someone in sales.

The idea is to give everyone the chance to input into the discussion and ultimately give us a greater understanding of the business, its goals and, how these should be reflected in the project outputs. By the end of the session our team aims to have a good grasp on the priorities in terms of both functional requirements and design elements.

Step two: Establishing site structure

Once we have this list, we go about collectively arranging these into a site map structure. This part of the session also involves many of our client’s staff members, so that we can get a feel for how each department would like customers to be able to navigate through the site.

During the site structure session, we will discuss navigational options across device types, especially if the navigation is likely to be large. This involves providing the client with multiple options they could use and showing them screenshots of a number of sites that use different structural approaches to navigation.

The site map produced in the session will then be taken away by the team at Leighton and optimised based on all the information we’ve gathered. This could include expanding the navigation if there is missed opportunities to achieve certain goals or reducing it if the user journey has become overcomplicated.

Step three: Site discussion & competitor feedback

The next stage for customers who already have an existing site or application is to review existing pages of the website or application and discuss what changes and improvements need to be made. Again, this session is best carried out with members from across our customer’s team.

For those who don’t have an existing platform we will move on to audience types. Participants will be asked to discuss the user groups relevant to their part of the business and what they need and want from the new website or application. This session usually provides us with enough information on different groups 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 part of the session. This is so that we can gain an understanding of what works well on other sites and what doesn’t as well as get a feel for what the customer likes and dislikes. During this session we will also focus more heavily on the design aspects of the project.

Finally, at the end of the workshop, we will work with our clients to sketch out a couple of pages of the website or application and come up with some layout ideas using the information we have gathered during the day. These sketches are not set in stone and are not finalised layouts, but it’s a great exercise to help our team see things from the client’s perspective.

After the workshop – the outputs

In addition to the finalised structure there are also a number of other outputs that will be delivered following the UX 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 groups for a website or app 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 – their backgrounds, their goals and values, their needs and their expectations as well as how they’re likely to use the site.

Sometimes personas are slight nuances of one another but it’s important to make the distinction as the journey person one takes to get to a goal may be different to how person two reaches the same outcome. For example, take the two personas below and how they would engage with a new website:

Persona one – 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 and prefers to place orders by phone.

Persona two – Georgina: Georgina is a 29-year-old advertising executive who has been using the internet for five 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 George, we would need to ensure that the website is simple, straight to the point and very easy to use. If the site is used to make purchases, we would need to ensure that the purchase flow is a straightforward process. We would also need to ensure that there’s easy access to a phone number on the website in case 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.

The distinction in how different archetypes will use a website or an app is an important process to go through as it allows us to focus on key groups of people during the design process so we can ensure we meet their needs.

Wireframes

Once we have a finalised persona set, we use these and the agreed structure to create informed wireframes. Wireframes are not finished concepts they are an indication of content or indicative of what the final layout may be.

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 and a full set of user personas and wireframes, we have all of the appropriate information to work from to begin designing a new website or app.

By going through this process with both our team, and our clients, we can ensure we adopt a collaborative approach to our projects that involve all stakeholders from beginning to end. It ensures our team have all the detail they need, and that our customers get the chance to give as much input as they want ultimately creating the best project outcomes informed by those who will use it.  

Share this post
Leighton logo
March 24, 2022
5 min read
All posts
Leighton designers Dan and Vik, sat around a laptop collaborating on a project.

Optimising the design process

When designing a new site or piece of software, it is important to ensure that every step taken starts with the end user in mind.

This will help to ensure that the final product competently meets the goals and objectives of the original brief, and ultimately can avoid costly redevelopment later down the line.

At Leighton we have an established process that has been created to ensure we work collaboratively with our customers to meet their project objectives and ensure the end output addresses their customers’ needs.

Introducing the UX workshop

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 gain a better understanding of our customer’s challenges and to discuss the customer vision for their project.

One of the main aims it to gather enough information about their customers and their goals in order to create a persona set that will later inform the sitemap and wireframes.During this workshop we will take customers through a set of bespoke tasks designed to really get to the heart of what the project is all about.

Stage one: What’s important?

The first part of the UX workshop focuses on gaining a firm understanding of how the new site or software application will be structured. One of the main tasks during this session allows workshop attendees to rank the current components of their existing site or software application.

If our clients don’t already have a website or software application, we adapt this session by getting participants to write down what is important to their business before prioritising what they’ve written.

This session predominantly focuses on the functional requirements. What does our client really need the site or application to do. For this part the workshop we recommend the customer brings together staff members from multiple business functions to get a broader spectrum of opinions. Someone in HR for example will have a very different perspective on what is important to say, someone in sales.

The idea is to give everyone the chance to input into the discussion and ultimately give us a greater understanding of the business, its goals and, how these should be reflected in the project outputs. By the end of the session our team aims to have a good grasp on the priorities in terms of both functional requirements and design elements.

Step two: Establishing site structure

Once we have this list, we go about collectively arranging these into a site map structure. This part of the session also involves many of our client’s staff members, so that we can get a feel for how each department would like customers to be able to navigate through the site.

During the site structure session, we will discuss navigational options across device types, especially if the navigation is likely to be large. This involves providing the client with multiple options they could use and showing them screenshots of a number of sites that use different structural approaches to navigation.

The site map produced in the session will then be taken away by the team at Leighton and optimised based on all the information we’ve gathered. This could include expanding the navigation if there is missed opportunities to achieve certain goals or reducing it if the user journey has become overcomplicated.

Step three: Site discussion & competitor feedback

The next stage for customers who already have an existing site or application is to review existing pages of the website or application and discuss what changes and improvements need to be made. Again, this session is best carried out with members from across our customer’s team.

For those who don’t have an existing platform we will move on to audience types. Participants will be asked to discuss the user groups relevant to their part of the business and what they need and want from the new website or application. This session usually provides us with enough information on different groups 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 part of the session. This is so that we can gain an understanding of what works well on other sites and what doesn’t as well as get a feel for what the customer likes and dislikes. During this session we will also focus more heavily on the design aspects of the project.

Finally, at the end of the workshop, we will work with our clients to sketch out a couple of pages of the website or application and come up with some layout ideas using the information we have gathered during the day. These sketches are not set in stone and are not finalised layouts, but it’s a great exercise to help our team see things from the client’s perspective.

After the workshop – the outputs

In addition to the finalised structure there are also a number of other outputs that will be delivered following the UX 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 groups for a website or app 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 – their backgrounds, their goals and values, their needs and their expectations as well as how they’re likely to use the site.

Sometimes personas are slight nuances of one another but it’s important to make the distinction as the journey person one takes to get to a goal may be different to how person two reaches the same outcome. For example, take the two personas below and how they would engage with a new website:

Persona one – 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 and prefers to place orders by phone.

Persona two – Georgina: Georgina is a 29-year-old advertising executive who has been using the internet for five 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 George, we would need to ensure that the website is simple, straight to the point and very easy to use. If the site is used to make purchases, we would need to ensure that the purchase flow is a straightforward process. We would also need to ensure that there’s easy access to a phone number on the website in case 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.

The distinction in how different archetypes will use a website or an app is an important process to go through as it allows us to focus on key groups of people during the design process so we can ensure we meet their needs.

Wireframes

Once we have a finalised persona set, we use these and the agreed structure to create informed wireframes. Wireframes are not finished concepts they are an indication of content or indicative of what the final layout may be.

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 and a full set of user personas and wireframes, we have all of the appropriate information to work from to begin designing a new website or app.

By going through this process with both our team, and our clients, we can ensure we adopt a collaborative approach to our projects that involve all stakeholders from beginning to end. It ensures our team have all the detail they need, and that our customers get the chance to give as much input as they want ultimately creating the best project outcomes informed by those who will use it.  

Download
To download the assets, please enter your details below:
By completing this form, you provide your consent to our processing of your information in accordance with Leighton's privacy policy.

Thank you!

Use the button below to download the file. By doing so, the file will open in a separate browser window.
Download now
Oops! Something went wrong while submitting the form.
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.