Design

Our UX Process: Getting Results Through Collaboration

A focus on User Experience, in terms of our day-to-day work as a web development and design company and specialists in clever technology, essentially means that we are deeply committed to ensuring our clients’ clients are as happy and satisfied as possible.

It’s just an extension of our own company values - we want our clients to have the best imaginable experience of working with us, therefore where we have an influence at all we also want their clients to feel seen, heard and understood, to find the information they need and thoroughly enjoy the process...and to go on to become evangelists for our clients, just as we strive to ensure our clients are for us.

It’s a big responsibility and one we take very seriously. We like to work collaboratively with all our clients, in an atmosphere of transparency, openness and partnership. Experience has taught us that this method delivers the best results. Below we will explore in greater detail why we work the way we do.

Quick recap - What is User Experience (UX)?

User Experience (UX) Design is designing and creating the best product for the user. It means truly understanding the user’s needs and habits to be able to create something that works intuitively for them. The aim is to remove as much friction along their path as possible.

UX Design differs from Graphic Design or User Interface Design (UI) as the latter two both refer to one single deliverable towards the end of the overall UX process. We sometimes refer to the UI as the “colouring-in”, not to diminish its importance, but to ensure that it is the final touch in the UX design process and does not encroach on other important stages.

Introducing our UX Process Document

Before we embark on a new project, we find it helpful to re-visit our UX Process Document. We do this to hold ourselves accountable to our own process-driven approach, but we also find it helpful to introduce our process to key stakeholders within the client’s project team. In this article we share the stages in our process, we discuss the usefulness of documenting our process in this way, and we explain why we find it helpful to share our process with our clients.

Our UX Process is divided into 6 stages:

  1. Discover
  2. Define
  3. Design
    1. Design (UX)
    2. Design (UI)
  4. Develop
  5. Deliver

Our UX Process Document is a document in which we list all of the tools & activities that might take place at each stage, along with all the possible deliverables.

 

 

We choose to keep our UX Process in a Google Sheet. This allows it to be a living, breathing document that can be updated whenever we introduce a new tool, activity or deliverable to our process and it allows us to link to various tools and templates, making it an excellent resource to keep going back to.

We have found that documenting our process in such a way has the following results:

1. Following our UX Process Document prevents us from jumping straight to the solutions

Our UX process allows us to be methodical and thorough in the early stages of a project. It helps us resist the temptation of jumping straight to potential solutions and outcomes without first truly understanding the project and the user.

By the time we get to the visual design we are confident in our justification and reasoning for the placement of every call to action or navigational prompt, having ironed out any questions like that during the wireframing and prototyping phases. Every design decision is deliberate and every element serves a function that is aligned with the user needs, user purpose and user journey.

 

2. Our UX Process Doc helps us demonstrate the often undervalued foundation work involved in web design

We appreciate that the end product, that is to say solutions and visuals, is a more tangible outcome for the resources that you have allocated to a project. It can be a difficult internal sell, particularly with your finance team, to allocate budget to these important early stages in the UX Process. We find that sharing our UX Process in this format, i.e. the tools, activities and deliverables involved at each stage, helps our clients to gain buy-in to the UX process from all stakeholders.

It’s our process that gets us results and stands us apart from quicker, cheaper or off-the-shelf web solutions. Being able to share our process document with our clients helps us to demonstrate the value that we bring to a project. We spend time in the early stages to ensure that we have thought of everything and uncovered all stakeholder needs (particularly any that may conflict with user needs). The result is a future-proof website, and any compromises will have been flagged and as a result are deliberate, having been discussed and decided upon in early stages of the project.

Working closely with our clients throughout the entire process, not just sign-off stages, allows us to understand their needs (what we call stakeholder objectives). It also helps to align our client’s key stakeholders behind the user’s needs and goals. It means that once we get to later stages in the process, particularly top-level sign-off, everyone is united behind the same goals that have been agreed upon in earlier stages.

 

3. Step by Step

A big project can feel daunting and the hardest part is starting. You may have talked about needing a new website for months, but don’t know where to start. Our UX Process Document breaks a project into manageable tasks. It allows us to take a step forward even though the final outcome might be unimaginable with many conflicting objectives.

Having activities and deliverables broken out in the way that we do also allows us to identify activities that can be worked on whilst another is being blocked.

It’s not always easy to see the finish line, but if you can see the next step in front of you, you can take that.

 

We tailor our process to your project

UX Design is multifaceted and activities vary from project to project. We work with our clients at the start of the project to identify which activities and deliverables will be required. Factors affecting this include; project scope, existing material (e.g. research, assets and designs), available budget and timeline. We tailor our UX Process Document to the project and use it as a focus point to help agree upon deliverables and milestones. So without further ado, let’s look at each stage in our process in more detail.

Discovery

The first stage in any project is gathering together all the information available to us and identifying further research requirements. It is during this stage that we assemble the project team, taking care to understand the role and objectives of each stakeholder and try to align everyone’s objectives to the project (i.e. the user objectives).

The activities:

  • Desk Research
  • Competitor Research
  • User Research
  • Stakeholder Engagement
  • Technology Review

The Deliverables:

  • Kick off meeting
  • Stakeholder objectives
  • Competitor analysis
  • Technology assessment
  • Project objectives

Define

In this phase, we review all of the information gathered in the preceding stage to determine the things that define the project scope and objectives. This includes problem statements, user profiles and user needs. We then co-create a brief with our client. We find that holding an Immersion Day with the full project team is an extremely helpful tool at this stage. By the end of this stage, we will have planned the design and delivery stages of the project.

The tools & activities:

  • Immersion meeting
  • User profiling
  • Affinity mapping
  • Problem statements

The Deliverables:

  • Personas
  • Success criteria & KPIs
  • A co-created brief
  • Project milestones
  • Project scope
  • Functionality specifications (func. spec.)
  • Budget & Resourcing
  • Sprint plan
  • Minimal Viable Project (MVP) description

Design (UX)

At this stage in the process we are looking to refine the functionality requirements and structure of the website. We then commence designing, testing, reiterating and refining, but only using wireframes (skeletal drawings or grey box mock-ups) and prototypes. At this stage there is still no consideration for aesthetics or visuals, which could distract from optimising the layout and function for the user experience.

The tools & activities:

  • Brainstorming
  • Card sorting
  • User flows
  • User stories
  • Sketching
  • Web Content
  • Accessibility Guidelines
  • Testing & iterating

Deliverables:

  • Information architecture
  • Site map
  • Taxonomy
  • Wireframes
  • Prototypes

Design (UI)

By this stage, the wireframes and the prototypes have been signed-off. We know how our user is going to navigate the site and it’s time to define the look and feel. We like to joke that this is the “colouring in” stage, but the UI design can have a real impact on the usability of the site. Choosing the right fonts and colours can help guide the user. Micro-interactions not only indicate a user’s action, but can also help to create a delightful user experience.

The tools & activities:

  • Moodboards
  • Colour Theory
  • Typography
  • Image Formatting
  • Brand Questionnaire

Deliverables:

  • Concept
  • Style guides
  • Design files
  • Interaction guides
  • Responsive guides
  • Design systems
  • Brand guidelines

Develop

Broadly speaking, in this stage we develop the design and functionality into code that works across all devices and browsers. There is the front end development (how the site looks) and the back end development (how the site works).

The tools & activities:

  • Coding
  • QA checklist
  • Cross-browser testing tools
  • UAT

Deliverables:

  • Front-end
  • Back-end, including CMS

Deliver

Simply speaking, this is the hand-off. When designs and development sites have been signed-off, we move from a staging environment to go-live. Not all of our projects are linear, sometimes we work in a more agile way which means several sprint plans which each include design, develop and deliver stages that may overlap with other sprints. Equally, once the website is live it does not mean the end of the process.

With the site live, we have access to more data that will show us how the website is performing and may flag potential improvements to the usability that weren’t spotted in the earlier prototyping stages. We have a well-documented go-live process that will allow for a smooth transition, along with 24-hour, VIP hosting support.

The tools & activities:

  • Go-live Process
  • User behaviour analytics and insights
  • Hosting and security monitoring

Deliverables:

  • Live site
  • Continuous review
  • Continuous learning
  • Continuous iteration
  • Data studio

 

In Summary...

This living, breathing document acts as a master process document that we refer to to make sure that we don’t miss out important stages. It also serves as a useful document to share with clients to ensure that enough time and resource are given to the valuable work in the early stages. If you have any questions about our UX Process, the tools, activities and deliverables that we use, don’t hesitate to get in touch.

And remember, the hardest part of a project is starting, so why not book an Immersion Day today?

Like this? You may also like

  1. Is UX important?

    / Design

    Is UX important?

    UX - short for User Experience - is something you may have heard mentioned a lot if you’re looking to create a new app, website or other digital product, or improve the one you have.

  2. Why UX should be leading your website design...

    / Design

    Why UX should be leading your website design...

    User Experience is the biggest trend in website design this year, and with 88% of online consumers being less likely to return to a website after having a bad experience, it's more important than ever to make sure that your users are having a great experience time and time again.