Step-by-step guide to UX design

Creating an interactive, converting UX design is a continuous process, thus, a guide to its design is important. It happens before, during and after the website is being built. As previously discussed, there is a lot that goes into a UX design, and it ties in very closely with strategy and research.

There are also other factors that contribute to creating a good UX design such as web development, design, SEO, content strategy and creation, and conversion optimization. In this article, we will provide a step-by-step guide to UX design. Let’s get started.

Research and Discovery

As we mentioned earlier, research plays a huge role in creating a sound strategy. The information you will gather based on your detailed research will be the foundation of your UX design. 

For this first step, you need to conduct detailed research on the business model, the users and audience, and lastly, the technology involved. This first step will help you and your team discover and know exactly what you need to do to address the needs of the business and your audience.

Creating the Website’s Basic Structure

Now that you have done the research, filtered the necessary information and planned what to do, the next logical step is creating the web site’s basic structure. For this, you will need to manage information through Information Architecture or IA. 

Through IA, you apply the tools and techniques to a lot of raw data to make it manageable and usable. This will serve as your guide to the design structure, and will ultimately guide the user to the site’s goals. 

Analyzing Content in UX Design

For those who are working with a website that is not new, it is probably populated with a wide variety of content already. Now, for cases like this, it is best to do a content audit and evaluate the existing material. Which ones should go, and which ones will remain relevant to your website?

On the other hand, new websites need a sound and well-put content strategy. Each content should be planned and unique. When it comes to creating new content, consider these factors:

• What will the site achieve with this content?
• Is this something that the users want and needs to see?
• Will it add value to the user?
• Was it special content?
• Is this content engaging?
• Is the tone and language consistent with the brand?

Principles of Creating Content

Now, when it comes to creating great content, there are three key points to consider. Check them out below:

1. Structure – first, you need to consider the content’s structure. It needs to be written so that the users can quickly find the information. Get right to the point and make it readable. This is achievable by doing the following steps:
   1. Using bulleted lists
   2. Highlighting key points and phrases
   3. Breaking information through paragraphs
   4. Using descriptive and distinct headings
2. Hierarchy – Remember to keep the most important information at the top of the page, then use subheadings to emphasize other important details.
3. Relevance – most importantly, your content should be relevant to the user and the purpose of the page itself. 

Creating a Sitemap

A sitemap is a visual structural plan for how the website’s pages will be laid out and organized. Follow the process below: 

1. Define your homepage – this is the first step, and the most important. 
2. Put main navigation items in your homepage
3. Arrange your pages of content below the main navigation item
4. Continue adding pages below this until you have placed all your content. Be sure that every page is accessible. 
5. Define any other static navigation elements (footer, sidebar, header navigation, search tools). Place these in your diagram in a logical place (possibly branching off directly from the home page, or as separate blocks).

Building the Navigation

It is important for the users to easily go through all the pages of your website. Successful navigation should be able to answer all of the following questions below:

• Where am I? – the webpage should have a clear page title, URL and should be able to help the user understand what page they are on. 
• How did I get here? – the users should be able to understand how they got to the webpage. This is often indicated by breadcrumb navigation which is the general path a user may have taken.
• Where can I go next? – is there a next step to this webpage? Are there any call to action buttons that let the users know what could happen next?
• How do I get home? – for the most part, users can go back to the website’s homepage just by clicking the logo. 

Creating The Layout

Next, you need to focus on creating the layouts. Think of a webpage as a box that can be broken down into four zones namely:

• The header – the header is found at the top of the page, hence the name, and is used to identify the site. It contains the logo, the brand’s tagline (optional but highly recommended), main navigation, login feature, and the search bar.
• Central content area – this is where you will present the main content to your audience. It could be a list of products and services you offer, images, testimonials, videos and etc. This area should also have various call-to-actions such as “Buy Now”, “Read More”, “Sign Up Now”, and etc.
• Sidebar – the sidebar is often found on the left or right side of the webpage. It presents the secondary content and tools such as secondary navigation bars, signup forms, additional content and more. 
• Footer – the footer is found at the bottom of the page where you can put non-prominent content and resources such as privacy policies, disclaimers, legal information, contact information, social media links, and etc. 

A website’s layout usually starts with a wireframe. These are the skeletal outlines of the layout of a webpage. The wireframe is used to map out the placement of various elements on the webpage. It acts as a guide for the web designer to create the visual design, and the web developer to create the code and interactivity required. 

Next, we have the prototypes born out of these wireframes. These are essentially sets of wireframes that have been linked together just like a website. It is used to test the flow and function of the website you have in mind before you and your team fully dive into a costly and lengthy development phase. 

Assembling The Elements

Now that you have the wireframe and prototypes ready, you need to figure out which extra elements you will need for your website. Remember to think like your customer: you only need to see what you need in able to complete your task. So, other elements can include:

• Calls to Action – these can either be in-text links or large buttons. If the webpage is a blog, “Read Now” buttons are essential, if you are running an eCommerce website, “Add to Cart”, “Buy Now” buttons are the most commonly-used CTAs. 

Successful CTAs are usually positioned above the fold – this will help capture the customer’s attention better. The design should also look touchable so the customer’s instinct to click on it immediately kicks in. Make it look like a real button and let it stand out from its environment. 

• Forms – most websites require forms. This is where the users can enter their information such as contact details, email address, and etc. Forms are used in sales funnels, email newsletters, and etc. 

The simpler the form, the better. It should only have a few fields to help make it more manageable for the audience. Simplicity is key here, so it should be as short and concise as possible. All of the fields required should be relevant so your audience won’t get confused. 

• Search bar – a search bar is a great tool to help users navigate the website better. It helps the audience find specific things. Be sure that your search bar only produces the most relevant and accurate results. When it comes to displaying the search results, ask yourself these key questions:
  • How many results should be displayed per page?
  • What order should the results be in?
  • Can the results be filtered?
  • What happens if there are no results?

The Visual UX Design

The visual design of your website needs to make a great first impression on the audience. It needs to look trustworthy, credible and worthy of your audience’s time. Your website’s look will be heavily based on your brand – the colors, the graphics, and the overall design elements should be in line with your brand. 

Choosing the right color palette for your website should be done carefully. It needs to look legible and accessible for the customers. The right color palette can have a massive effect on how your customers behave and interact on the page. 

UX Design – User Testing

When your website is nearly done or has surpassed the visual design stage, it is a good idea to do user testing before anything else. The idea is to give one or more users to access the website’s prototype and observing how they behave when they use it. 

In doing so, you will discover certain problems and gain a lot of insight that can be used to improve your website more. It helps you determine potential problems your users may face, and work towards creating the best possible user experience. Now, user testing is not as simple as giving someone access to your site asking them what they think.

There is actually a set process which happens as follows:

1. Formulating a question to test – list down why you want to perform a test and what you aim to learn from it. 
2. Choosing and preparing the test – now that you have listed down the purpose of your test, decide on what methodology you would use. In able to choose the right one, consider asking yourself the following questions: 
   • How much time and money do you have to invest in this test?
   • How many participants should be included in the test?
   • What facilities are available?
   • At what stage is the project?
3. Finding the right subjects – this is possibly the biggest challenge when it comes to the testing process. The best way to do this is by drawing up a list of certain criteria that you want your subjects to fill. Are you testing for both men and women? What age range should they be in? Should they be in a certain work industry and demographic? Limit yourself to three to five most important criteria then spread the word about the test through the most appropriate channels. You can do this through social media, print, the internet, chatting with your friends and neighbors. Once you get enough responses, you can now screen applicants and filter the people who are most suitable for the test.

Other useful Insights in UX Design:

1. Testing phase – now you are ready to begin testing. Ask the user to do what you want them to and let the test run. Remember not to interfere and just let it run its course. 
2. Analyzation – now that you have existing data from your test, you can now transform it into accurate, objective and useful insights.
3. Reporting – once you are done with the analyzation, you can now share your UX test results with the people who need them such as your design team, marketing team, and etc. 
4. Implementation – in this step you get to put your user testing results into practice. This could mean very different things at different stages of the project. For instance, those who are still in the beginning planning phase, the test results may lead you to take a new direction on the project while those who are testing a high-fidelity prototype may need to change some details to the overall design. 
5. Start again – at the beginning of this article, you were informed that creating a great UX design is not a once-off action. It is a continuous loop process that will lead you to constant changes and improvements. Even after the project has gone live, there is always a good reason to keep testing, keep improving and keep optimizing. 

Read also: Limitations of Mobile for UX Design

© Image credits to Anni Roenkae