A Website Process In 10 Steps

A Website Process In 10 Steps

What is the best process for designing websites and how do we craft a good user experience? I believe, it is through the synergy of functionality, communication, and design, we find the best solutions.

In this article, I will tell you how I, as a UX designer, together with my colleagues at Good Morning Naug work to find the best solutions and design our user experiences.

Structure and creativity

What primarily characterizes our successful website projects is that we have a solid process and an approach to design that allows for creativity. A website is usually a vital component in any digital strategy, both for B2B and B2C; therefore, designing websites also demands diverse competence.

A jungle of models

If you ask Google you may find yourself with the impression that there are as many models and processes as there are websites. Finding one that works best for you and your team requires experience but most important is finding a process that fits your approach to design rather than blindly following a predetermined process from someone else.


From brief to design

Based on our approach to design, technology, and long experience, our process can be explained in the following 10 steps:

1. Brief and research

Everything starts with a brief following with client meetings to determine the project’s scope and why a new website is needed. A detailed brief and project plan together with workshops allow us to understand the client’s needs and the industry they are operating.

2. Personas

Design is about solving real problems for real people. By creating user personas of the most important segments of the target audience we can identify their needs, problems, and what drives them to take an action.

3. Needs and HMWs

At this stage, we take a deep dive into the user’s needs and what they want to achieve when visiting the website. Based on the needs we create something called an HMW (How Might We) which is a short question based on a specific need, that initiates the thought process and can generate a lot of creative ideas.

4. Brainstorm session

Based on the HMWs we do a brainstorming session to generate as many ideas as possible. At this stage, we do not throw water on any ideas. The more the merrier.

5. Priority matrix

Once the brainstorming session is over and we have all our ideas on the table we create a priority matrix. This lets us filter out what should be prioritized and what should not. We look at the user impact of each idea and how much effort it takes to implement.

No alt text provided for this image
Priority matrix
No alt text provided for this image
Sitemap and content hierarchy

6. Sitemap

A sitemap is simply a map of all pages of the website. In this phase, we also structure the internal linking to create a logical user flow.

7. Content hierarchy

Now we have all the necessary pages established and it is time to look at the content for each page. Giving the users the information they need is a fundamental requirement for creating a good user experience. This stage of the process is solely about what should be communicated and in what order on a given page.

8. Wireframe

A wireframe is a simple sketch of a website. We create wireframes for each page where we focus on functionality and add a fast first draft for the headings and dummy text for the body copy. When the wireframes are approved we start the design process.

No alt text provided for this image
Wireframes

9. Mood board

A mood board, to put it simply, is a visual presentation that communicates the concept of our design. I prefer using Pinterest for images and for saving inspiration from other sites I use bookmarks in my browser when creating mood boards.

10. UI/Design

The last phase of our process is the design and we usually start with the front page. I believe that it is important to create an aesthetically pleasing experience but also a design that is built to support the insights from our strategic work.

Are we using the current visual identity or creating a new one? Do we need images, videos, or illustrations? What content needs to be created? We have thought about these questions throughout the process, but new ones always appear.

No alt text provided for this image
Mood board

Not a linear process

In a perfect world, we would uninterrupted go from phase 1 to 10. But, designing websites is rarely a linear process. A process guides us in the right direction and is fundamental for a successful project. But at the same time, we must be flexible and agile enough to work in parallel with the different phases.

In my opinion, the most important ingredient in the recipe for designing websites is to always push your creative boundaries and go the extra mile.

Interesting and well-written, good work! 

Like
Reply

To view or add a comment, sign in

Others also viewed

Explore content categories