When a visitor lands on your website, the visual design is likely to be the first thing they’ll notice. It’s also usually the thing they’ll remember most. 

75% of consumers reportedly judge a business’s credibility based on its website design. This first impression can make or break a prospective client’s interest in working with you. 

The ultimate goal of your website is to attract and retain as many prospects as possible, and then convert them into clients. But most websites are designed in a way that leaves those goals unfulfilled, failing to reach their full potential. 

With that in mind, your visual identity should be treated as a top priority within the overall design of your website. Believe it or not, this can have a significant influence on the growth and success of your business.

When working on a web design project, you should always go through a careful visual exploration phase to find the right visual identity for your website. 

Whether you’re going through a full company rebrand or just refreshing the style of your website, it’s important to ensure your design is tailored to your specific target audience. This is how you begin to drive business growth through your website. 

Without a visual exploration process, your website may not convey your company’s brand identity and values as clearly as you’d like it to. 

In this article, we’ll outline the steps taken so you’ll know what to expect when working on a website design project. 

What Does the Process Involve?

The purpose of this process is to define the best visual direction to take with your site. 

This is a crucial aspect of your overall design, with aesthetic elements being brought together to create a look and feel that engages your site’s visitors and retains their attention. To achieve that, your visual design needs to establish a connection between your audience and your brand immediately. It should also demonstrate why your visitors should work with you. 

Exploring your visual identity will cover a wide range of elements, including: 

• Your brand 
• Your company values
• Your colour scheme 
• Your typography
• Imagery and other visual content
• Structuring of pages
• And other visual components that are used to tell your brand’s story across your website’s design. 

What are Mood Boards and How Can You Use them? 

The main tool used to help determine the right visual identity is a set of mood boards. 

These are a visual compilation of all the various elements that make up your website’s visual design. Each mood board is essentially just a single-page collage of design styles based on previous discussions and the findings from the research and planning phase of the process.

The aim of these is to capture your brand’s visual style and tone. This will give the stakeholders, and your designers, a shared understanding of the design you’re working towards. 

Mood-boarding helps you visualise the work on your website’s design before it begins and agree on a design aesthetic that accurately reflects your brand identity and values. 

Think of this like a problem-solving exercise. Your design agency will take a research and data-driven approach to conveying your brand identity, while also catering to your target audience and accommodating the latest industry trends.

Collaboration and Iteration

Like most processes within web design and development, this visual exploration process should be collaborative and iterative. 

You’ll typically be presented with a mood board and a set of ideas by your agency partner, then given the chance to provide feedback across several rounds of revisions. 

Rounds and revisions are always important in any creative process. It’s usually necessary for your agency to develop and present a minimum of three mood boards before the optimum aesthetic is agreed upon. This is a crucial step towards the ultimate goal of creating a new website that accurately reflects your brand and has a positive impact on your target audience. 

Connecting with Your Clients Through Design

Your website’s visual identity is what makes your brand resonate with your target audience. Your design needs to clearly convey the values of your business, the quality of your products and services, and the reason why your visitors would benefit from working with you. 

Working through this visual exploration phase is an important step towards designing a website that will attract more visitors and increase your conversions. 

Once this visual exploration is complete, the next phase of your web design process will be to craft your website’s user experience (UX).

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

Summary

In this article, we’ll outline the end-to-end steps of what takes place in a thorough user experience (UX) and user interface (UI) web design process and discuss what modern web design requires to be successful.

—

You may have read our in-depth guide to creating a brief for a web design and development project. A brief can be used to capture all your ideas and requirements before discussing your project with any web design and development agencies. 

Once you’ve completed your brief, and evaluated your options for agency partners, you’ll be ready to launch into your website project. 

An end-to-end website project is typically organised into phases, which will usually be structured as follows: 

1. Design
2. Development
3. Quality Assurance Testing
4. Migration and Launch.

We’ve provided a detailed breakdown of these phases in a recent series of articles. This series is intended to give you a clear understanding of the full end-to-end process involved when working with an agency to design and develop a website. This will help you remove any apprehension heading into this kind of project and set you up for success.

The Current State of Web Design

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs, Co-Founder and former CEO of Apple.

While web design does focus on the visual aspects of the site, there’s a lot more to it than just the aesthetic elements like colour schemes and typography. 

Web design is a complex blend of branding, user experience (UX) design, user interface (UI) design, graphic design, content creation, layout and structure, accessibility, and much more.

The design of your website needs to be visually attractive but, more importantly, it also needs to be simple and easy-to-use. Your website needs to find the perfect balance between supporting your strategic objectives and serving your clients with a seamless experience. Of course, that’s much easier said than done, which is why it’s so important to find an experienced partner you can trust to guide you through the process. 

Outlining the Web Design Process 

Phase 1 – Research and Planning

The phase that underpins  EVERYTHING!

A good agency will have absorbed everything in your project brief. They should also have worked hard to understand your perspective and your requirements from your website, before you’ve even agreed to work together. 

Once you’re preparing to launch the project, the research and planning phase will then go beyond that initial information gathering exercise. 

The objective of this phase is to define the full scope of the website, including its design, its features and functionality, its content, and everything else involved. 

Your site will be discussed in extensive detail, and then research will be conducted into some key areas that will inform your design and development, such as:

• Strategy
• Website Data 
• Target Audience
• Industry Landscape
• Competitors.

Whether you’re making small updates to an existing design or completely rebranding your business, it’s equally important to use this research to inform every decision you make. That’s because every element of your site’s design must be made to support your business goals and serve your target audience with a great user experience (UX). 

This research and planning phase is essential in enabling you and your agency partner to do that. 

Phase 2 – Visual Exploration

This exploratory phase involves defining the most appropriate and effective visual direction to take with your site. 

The main tool used to help determine the right visual identity for your website is a set of mood boards. These are a visual compilation of different options for colour, typography, structure, images, and other visual components that are used to tell your brand’s story through your website’s design. 

A good agency partner will usually present around three mood boards to help shape the direction, then collaborate with you to narrow it down to one final version. 

Visual exploration, like most processes within web design and development, will be collaborative and iterative. You’ll be presented with ideas by your agency partner, then given the chance to provide feedback across several rounds of revisions. 

Phase 3 – User Experience (UX) Design

The UX design process is the phase in which you work with your agency’s UX specialist to create a blueprint of the website functionality. 

This involves creating wireframes (either low-fidelity or high fidelity) that help you visualise the design and outline your website visitors’ flow through the pages into your main calls-to-action. This is the way the website’s design works strategically to drive outcomes that align with your business goals.

This phase takes place before working on the site’s visual design to ensure the two separate aspects complement each other. 

Phase 4 – User Interface (UI) Design

From there, your user interface (UI) will be designed. The styles, fonts, and look and feel of the site from the mood boards will be applied to the wireframes. 

Your agency will likely present you with a design for your homepage before moving on to the rest of the site. This will typically be done on a desktop screen size, but it can be done on mobile if you want to take a mobile-first approach. Once this is complete, it will then be designed across the relevant breakpoints.

After completing this process, your agency partner will be ready to enter into developing your website.

Making Complex Processes Simple

As technology continues to become more advanced, more and more of our daily lives now take place in a digital-first context. This means:

• Your target audience now has a shorter attention span, and less patience when browsing websites and services online
• Your target audience also has more choice of options than ever before when choosing who to buy from. 

In order to succeed, your website’s design requires careful planning, research, and a strategic approach if it hopes to meet the demands of the modern client.

Working with a specialist design and development agency is a proven approach to ensuring you gain a website that meets your requirements and delivers on the expectations of your target audience. 

Completing a process like the one outlined in this article will enable you to design a website that can become your clients’ go-to online source when they have a need. 

As mentioned earlier, we’ve provided a step-by-step guide to each of these phases to make the process even easier for you. 

To learn how to easily navigate the research and planning phase of a web design and development project, read our next article here.

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

SoBold Limited (SoBold), a leading digital and web marketing consultancy, is delighted to announce that SoBold has been selected to work with Transport for London (TfL) to build, manage and support a bespoke Cookie Consent Management Tool for use across TfL’s portfolio of websites.

SoBold’s rapid growth over the previous 12 months has seen them become a leading player in the digital and web marketing space. SoBold’s core offerings are now used by over 200 customers worldwide and we anticipate this customer base to continue to grow considerably over the next 12 months and beyond.

SoBold has been an authorised Reseller of Cookiebot since the new General Data Protection Regulation (GDPR) came into place on 24 May 2018. Cookiebot’s tool consists of three main features: cookie consent, cookie monitoring and cookie control and SoBold work with their clients helping them manage, build and integrate these solutions onto their websites. SoBold now manage Cookie Consent Management for clients across numerous different industries.

Transport for London has completed a formal tendering process to procure a new Cookie Consent Management Tool for their tfl.gov.uk website domains. By procuring the tool, Transport for London is best able to align their approach to cookie management with the requirements of data protection legislation. SoBold will work with Transport for London, for a minimum of 12 months with the option of extending the contract for a further 24 months.

SoBold Founder and Managing Director Will Newland, commented:

“We are absolutely delighted to work with Transport for London. This gives SoBold the opportunity to work with a large, well known, corporation and we have no doubt we can play a big part in ensuring Transport for London’s customers can feel safe and confident when sharing information about themselves on the TfL website. This further strengthens SoBold’s position as a leading player in the Cookie Consent Management space.”

SoBold Lead Developer Sam Phillips, commented:

“This is a fantastic opportunity for SoBold to showcase our experience in the delivery of bespoke Cookie Consent Management solutions across a portfolio of websites with millions of visitors per month. The contract with TfL cements our position as a leading CookieBot reseller in the United Kingdom.”

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

Summary 

If you’re looking to build a website for your business, a proven approach is to work with an agency and have them deliver the project for you. This could be a bespoke website design and development agency or solely a website or platform development agency.

Before you approach an agency, however, you’ll first need to reach a clear, detailed understanding of your requirements.

This article will provide an in-depth guide to help you through the briefing process and ensure your chosen agency delivers your project successfully, including a free template you can use to create your own brief.  This template can also be used for other types of development projects as well, including anything from an online portal to an internal training platform.

Where to Start 

Whether you need to design and develop a new website, or rebuild or migrate an existing site, a natural first step is to take your idea to an agency with a view to launching a web development project. 

However, it’s a common mistake to go to an agency too early with just a raw, under-developed concept. Rather than meeting with an agency prematurely, we strongly suggest going through the process of defining your specific requirements and creating a project brief first.

The first thing to do is hold a discussion with the relevant people internally. Talk through the idea, and try to define what it is you need and what you want to achieve with it. Get a clear picture of what that idea or a concept will turn into, but also think carefully about what it should do from the perspective of your end-users. 

Once you have a more tangible understanding of what you’re looking to build, you should begin creating a brief. 

This is a document outlining the key details and requirements for the project. It’s something you’ll need to take with you to your introductory meetings with the agencies you’re considering, as it will be a very useful tool in helping you explain your idea clearly. 

A brief doesn’t have to be complicated. It’s just a simple written document that lists everything you want at this early stage. However, while a brief can be simple, it’s important that it’s as specific as possible too. The more detail you provide for your agency, the more chance you’ll have the project delivered on time, within your budget, and meeting your expectations. 

Why Having a Brief is Crucial

There are some potential pitfalls to be aware of that could create challenges for you if you don’t create a thorough brief. 

Unfortunately, some agencies will be willing to work with you without a detailed brief, glossing over important details and keeping the expectations and requirements vague. This is a red flag to look out for, as it will likely result in one of several outcomes:

• You risk going through a long, expensive discovery and definition exercise that you could’ve done yourself internally for no cost. 

• You risk being given a quote that’s too expensive, or a project timeline that’s longer than necessary.

• You risk receiving a service from the agency that doesn’t align with your request or meet your expectations. In turn, you’ll then have to spend even more time and money on a new project to get your original idea developed. 

A brief is what gives you and the agency a mutual understanding of the work that needs to be done to successfully deliver the project. Without that specificity, you might end up disappointed. That’s why it’s always wise to put some time and effort in up front before taking your idea to an agency.  

Once you submit your brief, you may be invited to participate in a follow-up session to further explore the requirements you’ve listed. This is perfectly normal, and actually a good sign. Experienced agencies will want to talk through each of the elements of your brief with you to help determine the best possible way to deliver those in the project.

How to Create Your Brief 

When you begin to discuss and plan the requirements of your project between your team, we recommend thinking carefully about the following points. 
Please note: There are a lot of things that could go into a project brief, depending on how complex your requirements are, so we won’t include everything here in this article.

The Project’s Purpose and Goals 

Start by thinking about what the purpose of the project is. There’s no use speaking to an agency until you have a clear, specific understanding of exactly what you’re trying to achieve with this project. This should relate to your strategic business objectives, but it should also be designed to meet the needs of your end-users. 

Ask yourself how this will allow you to improve your end-users’ experience or solve a problem for them. Answering this might involve working on user personas or developing user stories, or potentially even working directly with some members of your target audience to gather their input. 

Project Timelines and Deadlines 

Timing is another important point to think about, particularly how much time you have to deliver the project. Deadlines can sometimes relate to certain dates that are out of your control, so it’s better to start as early as possible in those cases. If there’s any flexibility with the timeline for delivery, make a note of that as well. 

Project Stakeholders

Make a list of all the stakeholders involved. This is a good thing for the agency to be aware of early on, because the project becomes more complex with a higher number of stakeholders.

Depending on the size of your business, and the nature of your site, your project team will usually be some combination of: A marketing director or marketing manager, someone from your operations department, and someone from IT. 

However, if you also have people like someone from your IT team responsible for security, a content writer to provide all the written text, or any external consultants, that should be made clear in advance. If your site will need to integrate with other platforms, such as your CRM system, you may have an integration manager specifically in charge of overseeing that as well.

It’s useful to designate roles to certain stakeholders, such as project sponsors, product owners, administrators, and so on. This will help you understand who’s responsible for different aspects of the project internally. 

If you plan to work with external agencies for things like SEO or branding, it’s important to note that in your brief. This is necessary for the development agency to be aware of as early as possible, because collaborating with other third-parties at different stages of the project requires a lot of coordination. 

Certain processes may also have to run differently if other third-party agencies want to be more hands-on or handle some parts of the site themselves. The earlier this is made clear, the more smoothly the project will run. 

Technology Preferences 

If you have any preference of technology platform or any requirements related to your existing tech stack, that will be something you’ll need to decide early on. For example, would you prefer to use WordPress due to its scalability, or do you have any existing investment in any other platforms? 

Think about any preference you have for the various technology choices available, why they’re important to you, and whether your agency will have to tailor their approach to accommodate that.

If you need help understanding and evaluating your options for technology platforms, check out our helpful guide here.  

Budget 

Try to determine a minimum and maximum budget for your project, even if it’s just a loose range for now. It will help you evaluate agencies, and will also help you prioritise the various aspects of the project as “must have” or “nice to have” in many cases. 

Design Look and Feel

This is where your company’s brand comes into play. You’ll want your site to reflect your brand and that will come through in the design. Bring any brand guidelines to the table, and think about what sort of tone or experience you want to convey to your end-users. 

If you don’t have any recent brand guidelines and want help updating them, or need to go through a rebranding process, mention that in your brief as well. Design and development agencies will often be able to help you in these areas too, or at least refer you to a trusted partner who can. 

User Interface (UI) 

How your end-users will interact with your site, and what kind of experience they’ll have, is largely determined by the user interface. When it comes to design and UI, simplicity is usually the best approach. However, depending on the function you’re providing, you might have some specific or bespoke UI requirements. 

Consider your target audience carefully here as well. For example, if most of your users will be accessing your site from a mobile device, it’s probably wise to opt for a mobile-first design.

Some other important things to think about here include how you’d like your sitemap to be structured, especially if you have an existing site that you’re already happy with. 

If your project will involve rebuilding or migrating an existing site or platform, it will be helpful to gather any existing data sources, such as Google Analytics, that will provide insight into your current site.

Non-Functional Requirements

Non-functional requirements are all the aspects of your site that happen behind the scenes. These are things that allow your site to do its job properly for your end-users, but won’t be evident to those people while they’re using it.

There’s a lot of things to consider with non-functional requirements, so we won’t cover everything here.

Hosting

If you have any specific hosting requirements, such as a preference for a certain cloud-based platform, or a particularly secure data centre, those will be important to identify as early as possible. 

Say, for instance, that sustainability is a core value for your business, this could also have an influence on how and where your hosting is managed.

If you have an internal IT team that will be contributing towards the hosting decision, make sure you involve them in the discussion.

Security and Compliance

Security is a growing concern for all businesses today. It’s crucial to think about security as a core component of any web development project, to minimise any potential risks for your business.

If you have someone in your team responsible for security, they should begin to think about issues such as: 

• How will you be backing up the site’s data? 
• What level of data encryption do you need? 
• How will users’ personal details be stored and protected? 
• Will you have two-factor authentication?
• What password recovery process will there be for users? 

Robust security also involves keeping compliant with any specific security or industry regulations that may affect your business. Of course, compliance with things like GDPR should be planned for at this stage too.

Some other common non-functional requirements include things like session management capabilities to track and things like log-in time, session length, pages visited, and so on. Search engine optimisation (SEO) tools, analytics, or other capabilities might need to be built into your site as well. 

Accessibility, Usability, and Responsive Design

When it comes to aspects that will make your users’ experience as seamless as possible, such as accessibility, a good agency will ensure all these things are taken care of for you. This is also the case for ensuring all major web browsers, operating systems, and devices are fully supported and compatible. Development should always be compliant with industry standards, taking into account optimum accessibility and usability.

However, if you have any additional or bespoke requirements for any of these things, those will be useful to note early on.

Functional Requirements 

The term ‘functional requirements’ refers to everything that your site will be able to do for its users, in terms of its features, functionality, and capabilities. 

As mentioned earlier, one of the first things you discussed was what the site will help your end-users achieve. From the perspective of building something your target audience can use, you should start to get a feel for what functionality is required to ensure they can achieve that.

Features 

Your features are the things your site will allow your users to do. These can be very simple, or very sophisticated, depending on what you’re aiming to provide for them. 

When putting your brief together, think of any and all features and functionality that might benefit your users. Your agency will then work with you to explore these and find the best way to turn that into intuitive, user-friendly features for you. 

What to Do Next 

Once your team has been through the process of talking through all the points listed above, you should have a very thorough, useful brief to work with. The next step is to take that brief to any introductory meetings you have with agencies and ask them what they think of the project initially. 

It’s normal for an agency to ask lots of questions at that stage and really dive into the ‘WHY’ behind all the things you’ve put into your brief. A good agency will even challenge you on certain decisions, to help you determine the best possible way to build what you need. 

Once you’ve discussed your brief with an agency, determine which one feels like the best fit. Choosing the right agency is crucial, as it will have a huge influence on whether or not your project is successful. 

As mentioned earlier, some agencies will agree to launch into a project without a brief, and that can be extremely problematic. While the main purpose of a brief is to help you and your agency understand exactly what you need, it should also be used as a way to spot partners who may not be sufficiently thorough or conscientious.

Whichever agency you choose, a detailed brief will help you ensure you’re given a fair quote, realistic timelines for completion, and a finished product that meets your requirements and expectations.

More Helpful Resources 

If you’re considering a bespoke development project, our related article provides useful guidance to help you choose the right technology platform for your specific needs: 

Understanding and Evaluating Enterprise Options for Bespoke Web Development

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

SoBold, the High-Performance WordPress design and development agency, has delivered an industry-first portal for Rede Partners, a private equity fundraising advisory firm that provides fundraising services to PE funds across Europe, North America and the APAC region. 

This bespoke portal, built on the WordPress platform, allows institutional investors to navigate upcoming funds advised by the placement agent.

Rede approached SoBold wanting to create a better user experience and improve fundraising outcomes for its customers. Rede wanted to achieve this by replacing its ‘Current Fund Offering’ mailout and PDF with an interactive, personalised, and secure online portal. Rede and SoBold worked in close collaboration to devise a simple, bespoke solution capable of delivering on a complex set of requirements, and that online portal soon became RedeWire.

RedeWire was fully integrated with Rede’s CRM system, Dealcloud, passing back data on user interactions and page views, allowing the team to follow up with interested clients.

RedeWire has been built fully personalisable for users, meaning that limited Partners are able to set all their preferences on first login, and through their account, allowing them to tailor the funds they see on their fund offering dashboard. 

As part of the RedeWire platform, SoBold also designed and developed a bespoke front-end editing and approval interface to digitalise their offline fund approval process. This process has enabled Rede Partners and their clients to send out live previews of how a fund will appear on RedeWire, gather real-time comments, or make fully audited edits to a page’s content before submitting it for approval and publication on the RedeWire portal.

RedeWire has now launched to Rede’s full customer base and initial feedback has been overwhelmingly positive. The platform has already seen a high number of account activations and interactions within its first full week of use.

SoBold and Rede will continue to work together to develop RedeWire’s capabilities further and improve the portal’s user experience. SoBold will provide ongoing support to manage the platform and deliver enhancements on a monthly basis.

You can read more on our working relationship with Rede Partners here.

Gabrielle Joseph, Head of Due Diligence and Client Development for Rede Partners said,

“The SoBold team has been a real pleasure to work with and has successfully made our vision a reality. Originally conceived as a game-changer within our industry, we are thrilled with the outcome of RedeWire and have had several clients highlight how intuitive and easy-to-use the platform is.” 

“Throughout the project, SoBold clearly understood our vision and provided thoughtful solutions to our needs. Choosing to partner with this team was one of the best decisions we’ve made, and we couldn’t be happier. We look forward to continuing to work with the team as the site evolves.”

Will Newland, Managing Director, SoBold said,

“We’re delighted to see such high early adoption of the new platform. The user feedback has been excellent so far, and this is the first of its kind in the private equity space, creating a personalised experience. We’re continuing to roll out enhancements on a monthly basis and can’t wait to grow the platform further.”

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy