How to Approach Your Web Design Process and Make Sure Users Will Love It Pt. 1
Any business these days has a website - that’s something customers expect by default. But when creating a website, it’s not enough to just say: I need one because my competitors have one. A website always fulfills a specific goal and the most straightforward way to communicate this goal is through design.
Web design is immensely important as it performs a number of different functions and gradually leads users towards the needed action. Hence, every business owner needs to have a very good understanding of how to approach the website design process and what to expect at every stage. This article comes in two parts and breaks down the general process of creating a website design from scratch and explains the most important things to consider.
Stage 1: Immersion
Immersion is basically getting to know each other: the UX/UI designer and the client (and the rest of the team, of course) hold a meeting during which both parties discuss everything that is important to know about the product and about the client’s company. The designer, in turn, may share their vision or preferred method of work and see how it aligns with the client’s needs.
Think of immersion as an open session where all members brainstorm and share their ideas without any constraints. It is important to note that during this stage, the client should share his fears the same as his hopes and goals. By communicating possible fears and hesitations, the team can come up with an actionable plan on avoiding them.
It is also worth noting that during the research stage (which is our immersion, basically), a UX designer often works together with the business analyst. As well, research can be conducted by the designer or by the BA only.
There are several big aspects that are usually discussed during the immersion - let’s look at each below.
Getting to know the client
The first thing that a UX designer does is meet the client in person and get to know them. It is important to understand the client’s vision of the business, and future goals, and learn about any ideas they may have about the product.
Since any software project should be based on mutual trust and respect, a UX designer and a client need to form a solid partnership where everything can be discussed and negotiated. This is why the first meeting is important as it sets the foundation for further business relationships.
Getting to know the product
When creating a design for a product, it is crucial to understand its ins and outs in order to visualize all important aspects and communicate the product’s message to end-users through its design.
Some questions that you may ask at this stage include:
- What is the biggest unique selling point of the product? What is its core value?
- How does it stand out from the competition?
- What is the overall vibe of the product? What emotions does it evoke?
- What do users expect from this product? Does the offer match expectations?
- What is the main message that the product communicates?
Defining the project goals
Another critical thing to discuss with the client is the main goal (or goals) of the project (aka the website). A website may be focused on:
- Attracting more users to an online store;
- Increasing brand awareness and loyalty;
- Increasing user engagement;
- Increasing revenue.
There are actually more goals that a website can focus on and a website may follow more than one goal. Hence, a UX designer has to have a clear understanding of what the website is aimed to achieve in order to design it in the needed way. The understanding of a website goal will serve as a base for creating user flows and use cases which, in turn, will impact the interaction between users and the website.
Analyzing target audience
Gone are the days when business owners relied on intuition and guesswork in terms of defining the audience's needs. These days, in order for any product to succeed, a business owner has to perform a thorough analysis of the target audience - and web design is no exception.
A UX designer needs to understand for whom he will be creating the product. By taking into consideration the needs and preferences of the target audience (aka end-users), a designer can efficiently engage them with the website, thus, fulfilling the defined business goal.
Tip: you can create a user persona that is a high-level portrait of an average user that might be interested in the product. The user persona profile is usually highly detailed and includes such aspects as demographics, hobbies, online behavior, likes and dislikes, etc.
Analyzing the competition
Lastly, during the immersion stage, the designer will be analyzing the competition in order to see what things work best on the target audience and what things cause issues. As well, the analysis of the competition is important to understand how a product may stand out and what will most probably attract users (and on the contrary, what will not).
Stage 2: Strategy
After collecting all the needed information, the UX designer, together with the team and the client, can get down to outlining the strategy.
The website design strategy is a guide that answers the most critical questions:
- What do we want to achieve and how do we want to do that?
- Who is the target audience?
- Where does the product stand in the competitive landscape?
- What value does it bring?
As you can see, the strategy summarizes all topics discussed during the immersion stage and creates a plan that the team can always refer to during the design process.
Stage 3: Concept creation
The next stage is one of the most fun and partially chaotic - it’s the stage of concept creation. Concept creation means putting all ideas together into one (or several) big ideas that will be used as a base for further web design. During the concepting, the designer tries to create a general “draft” of the product (in our case, the website) to understand how it will generally look and how users will interact with it. Here are some things that are included in the concepting stage.
Sketching main user stories
A user story is a description of a feature (action on a website) as if a user defined it. An example would be searching by keyword, one-click payment, or creating an event in a calendar.
User stories are written in a simple language and they provide just enough information for developers and designers to understand what needs to be implemented. So at the stage of concept creation, a UX designer sketches the main user stories to outline a basic user journey and see how the core website functionality would function.
Creating mood boards
Remember we talked about how a product has a certain vibe to it that has to be communicated through design? That’s where a mood board steps in.
A mood board can be defined as a collection of materials that help communicate the brand’s voice, style, and language. The most important thing to note here is that a mood board is exactly what the name implies: it communicates mood or, in other words, a certain emotion that users feel when they interact with the product.
The creation of a moodboard consists of branding and assembly of the product’s visual style. A designer has to use the previously defined user persona to understand what colors, language, and imagery will evoke the needed emotion in the target audience. It is also important that the designer works in close collaboration with the copywriter since the copy is an integral part of a website design.
Stage 4: Sitemap and wireframe design
Now it’s time to add some hard numbers to the previously created drafts - we are talking about planning out the sitemap and creating website wireframes.
A sitemap is a visual representation of your website hierarchy in a form of a diagram. In other words, a sitemap displays all pages of your website and how they are linked together. By creating a sitemap, you visualize the website structure and you can see how users can navigate the website (we’ll talk more about website navigation below).
As for the wireframes, it is a visual representation of the structure and components of one website page. Let’s talk about wireframes in a bit more detail.
Start with low-fidelity wireframes
The best thing about wireframes is that you can create them however you want: by sketching on paper with a pencil or by using a specialized program. However, my advice is: always start with low-fidelity wireframes in order to save time and remain flexible until you 100% know what element will go where.
We probably need a bit of clarification here. A low-fidelity wireframe is a very simplistic visualization of a page. Such wireframes are most often created with a pen and paper, are black and white, and contain only core elements of a page. High-fidelity wireframes, on the contrary, are very detailed, colorful, and even interactive.
While you’ll need both during the website design process, it’s always a good idea to not go into too much detail from the start. At this stage, you need to visualize how each page will look without filling it with actual imagery and content.
Pay extra attention to navigation
Website navigation is one of the most tricky aspects to work on since it impacts the users’ behavior on the website, their interaction with the product, and their buying decisions. Great navigation will effortlessly lead users towards the needed conversion - but poor navigation may ruin the whole user experience and never bring visitors back.
Some of the best practices for website navigation are:
- Add a search bar and make it visible. Also, the Google UX playbook recommends using not the search icon but a search bar - in this way, it promotes more engagement and encourages visitors to use it.
- Remember about a “three-click rule”: users should be able to find the needed content in three (or less) clicks/taps. While the rule is not obligatory, it is highly recommended.
- Place familiar page elements on expected positions. That means, with an e-commerce website, users will always expect to see a cart in the upper right corner. Do not try reinventing the wheel when it comes to familiar elements.
- Try minimizing menu options - nobody wants to go through a vast list of categories. If you have too many options and need to keep them all, remember that the recommended maximum is seven.
- Keep the navigation as simple as possible!
That was it for Part 1 - don’t forget to sign up for our newsletter in order not to miss Part 2 when it’s out. In Part 2, we’ll continue talking about the main stages of the website design process and we will start with content creation, followed by prototyping, testing, and product launch.
This was awesome! Thanks for putting this together for us to learn from!!