Website Design Process: 7 Steps To Creating Highly Engaging UX And UI
Planning user experience (UX) projects is a balancing act of getting the right amount of user input within the constraints of your project. The trick is to work out the best use of your time. How can you get the most UX goodness for your client’s budget? This article explains how to choose the right mix of tools for the task at hand.
Getting Started With UX Planning
The planning phase is all about understanding what you have been asked to do and working out the best combination of activities that will give you the outcome you need, within the time, budgetary and resource constraints of the project. It is your job as a UX professional to deliver the best user experience within the time and budget available.
The planning of projects may take place when you are writing a proposal to do work that is yet to start as well as at the beginning of a “live” project. When planning work for proposal purposes, you can be faced with issues such as lack of information around budgets as well as limited access to clients to ask questions.
In many ways the planning of UX projects can become a design challenge in its own right. You have an outcome that you need to get to and it’s up to you which approach you take to get you there. You need to be confident that the tools and techniques you choose will be the right ones to get you the insight you need within the constraints of the project.
The budget for the piece of work is always the key piece of information that can be really useful to help with planning, but often this is not always available. This information is useful if you charge by a daily rate, because it then determines the time you will have on a project, which in itself will determine the approach you take.
The beauty of UX projects is that there is always something you can do to add value regardless of the budget. A low budget may result in a lighter touch, “guerrilla” approach, whereas a larger budget may allow you to do more extensive user research. If you can, always try to get an idea of budget as it will save both you and your client time by avoiding re-cutting proposals. Your client may not want to share their budget (as they may think you will spend it all for them), so have a few different options to present if they cannot share this information to suit different potential budgets.
The key principle for all UX projects is that you must ensure that you involve users in the design process in some way. Challenge yourself to see how you can work within the constraints of the project to involve users as much as possible. User involvement will not only improve the output of the project but will also help to inform decision making which can often delay projects. UX projects typically consist of three main phases: a research phase, a design phase and a further research phase, designed to test and validate the designs.
- The research phase is where you immerse yourself in the project to get the background you’ll need to make design decisions later in the project. During this phase you will try to learn as much about your client’s business, objectives, users and competitors as possible.
- The design phase is where you work out how what you are designing will work and how it will fit together. This phase will define its scope, its features and functionality and how it behaves.
- The validation phase is where you identify whether what you came up with in the design phase actually works with its intended audience. This phase is typically followed by further rounds of design and testing to solve the problems you inevitably find when you test with users.
The website design process is a documented outline of all the stages needed for the completion of a typical website project.
Digital agencies take this seven-step approach to designing and developing a website:
Step #1: Digital Strategy
A digital or web strategist typically creates a digital strategy.
The strategy involves an in-depth overview of the client’s business, brand and digital marketing goals, resulting in a data-driven conversion funnel and user journey mapping.
A digital strategist typically begins the web design process with these steps:
- Client kick-off call: During the kick-off call, digital strategists present all participating team members to the client. The purpose of this is usually for both entities to get to know each other and for the client to be aware of the team’s expertise. Team members share their ideas with the client and ask the client questions based on their role in the project. During the call, digital agencies discuss the project’s process and timeline, workflow, regular meetings and reporting.
- Client questionnaire: This document outlines business objectives, acquisition of materials and other elements vital for the creation of the website. The client questionnaire is something agencies go through with the client at the kickoff call as they often send it to them before the meeting. The information these agencies gather helps with the website design process. Depending on the contract and the project, the questionnaire typically contains questions like:
- What does your company do and what is your value differentiation from your competitors?
- Who is your target audience?
- What are your objectives and expectations from this project?
- Please list up to five websites you like and explain why?
- Do you have any required features?
- What is your budget?
- Do you have any brand books?
- Did you develop a communication strategy?
- Market research and analysis: In order to understand the competitive context, digital agencies define the client’s competitors, their industry and vertical, target audience, brand personas and what they can improve compared to their competitors. When the agency team researches the client’s market, they also come up with unique value propositions, conduct SEO analysis and keyword research overview, define and suggest marketing activities and onsite marketing features and establish goals and key performance indicators.
Step #2: Site Planning
This is where digital strategy insights start to evolve into a web design plan.
Planning involves creating a sitemap that provides the structure and the skeleton for the website, as well as mapping the content within each page.
The sitemap allows digital strategists to define user journeys to the conversion points, making the site easy to navigate.
The next step in this process is to plan the website’s conversion funnel, that is to identify the pages and the content for each of these phases:
- brand or product awareness
Step #3: UX & UI Design
88% of online shoppers say they wouldn’t return to a website after having a bad user experience.
User experience is an essential component of a website and a gateway to user satisfaction – not just for eCommerce websites.
The website design process consists of two stages:
- User Experience (UX) Design: At this stage, UX experts interpret the website plan into black-and-white page sketches, i.e. wireframes. The wireframes are meant to show the content layout and visualize the conversion funnel without distracting elements such as color and photography. Depending on the digital strategy insights, agencies either develop responsive websites or desktop-first with designs scaled to mobile, or they design mobile-first which is the exact opposite.
- User Interface (UI) Design: With wireframes approved, the web design team moves to the finer details that bring the website to life. At this stage, UI designers add color and imagery, define fonts and shapes, and other effects to wireframes.
The approved UI design is then converted into a style guide and passed on to the development team.
Step #4: Style Guide
The design team creates a style guide for the client’s website to ensure consistency across the site, as well as maintain this consistency as the website grows.
Style guides most commonly define the use of these elements across the website:
- Logos: Full menu vs. contracted menu – this is just one of the contexts that designers address when creating instructions for the logo usage, including size, color and version.
- Colors: From buttons to header and other text, designers determine which colors are to be applied to which elements.
- Image and photography: This is where designers create guidelines for the types of illustrations and imagery to use, as well as their color treatment.
- Typography: Designers set guidelines around font usage in headers, paragraphs, links and more. These guidelines include font types, weights, colors, kerning, line spacing and more.
Step #5: Frontend/Backend Development
The website’s frontend and backend play a crucial role in website development.
Frontend is about the visual aspects of the website a user can see and experience. Backend is responsible for everything that happens in the background which enables the frontend experience.
Frontend web developers and designers build websites keeping the visual aspects in mind, while backend developers make sure the data and system requested by the frontend application or software are delivered efficiently.
If you are wondering what to ask developers before building your new website, here is our article about the most important questions when hiring a web design and development agency.
Step #6: QA
Before launching the website, it is necessary to test it internally by recruiting real users to do so.
During this quality assessment phase, web design and digital agencies test all the links and content, as well as technical functionalities such as forms, sign-ups and other features.
The user feedback is crucial at this point as it can convey the information about what the website should provide to them.
The digital strategist’s responsibility is to ascertain whether the website CMS:
- Has a good user experience
- Works properly
- Is easy to use
QA best practices dictate that the website is reviewed on multiple browsers and tested on multiple devices.
Step #7: Launch And Post Launch
When preparing to take the website live, the digital agency team is responsible for the following:
- Ask the client whether they prefer their own hosting plan or if they have chosen the agency’s own hosting package
- Send an email to the client informing them that the team plans to take their website live and that they need access to the client’s domain so the agency can transfer it to Cloudflare for security and management
- Follow a multi-step checklist to ensure a smooth launch
Post-launch maintenance is a vital part of making sure a running website performs consistently, issue-free and is able to deliver the set goals. A web design agency that performs post-launch maintenance checks will:
- Create full website backups in regular intervals
- Audit safety measures that prevent malware, adware and any other type of virus threats
- Perform optimization of website speed
- Update the website with new content
Why Following A Web Design Process Matters
A detailed web design process categorizes the work, breaks high-level sections into tasks and resources and prepares a freelance business for growth.
It is very important to establish and follow the website design process because it can:
- Organize the developer’s thoughts and workflow
- Provide a framework for the entire project
- Speed up a project’s timeline
- Help the clients understand what they are paying for and put their mind at ease
- Establish what the developer will deliver at certain points in the project timeline
- Outline the type of work a developer will engage in
- Remove any communication roadblocks and confusion
It is important to remember that clients often do not understand the terminology nor do they understand the steps needed to create a finished website.
Outlining the process and its steps for the client can help them understand the basics in order to appreciate what happens at each stage and to be able to provide what’s needed from them.
A client who understands the process and its importance will be able to communicate with the agency more knowledgeably.
Website UX Planning: How To Plan Your Website Structure/Wireframe
Planning a website wireframe, which is a visual representation of content layout in a design, is important because it helps the agency team organize and simplify the content within a space.
It also brings these benefits:
- A wireframe gives clients, developers and designers an opportunity to take a look at the structure of a website and make revisions early in the process.
- It can inspire the designer and make for a more fluid creative process.
- Developers get a clear picture of the elements they need to code
The process of planning the website user experience is related most closely to creating a sitemap.