How to Approach Your Web Design Process and Make Sure Users Will Love It Pt. 2

In our previous article, we talked about the first steps of a website design process - now it’s time to get down to such exciting things as content creation, prototyping, and further website launch. As always, we’ll discuss each step in detail so you can be sure nothing is missed and your website 100% reflects your vision and brand. Without further ado, let’s keep going! 

Stage 5: Content creation

Ah, the most fun part! After outlining what your website will look like and what elements will go where, it’s time to get down to crafting the content, including both imagery and text. There are several things that some business owners tend to overlook when it comes to content creation. But don’t worry - we’ll help you sort them out.

Work with the text

Many business owners tend to overlook the importance of well-crafted copy and that’s one of the biggest mistakes when working on a software product (or any other product or service). Professionally composed text can do wonders to your clients as it’s capable of persuading them to complete conversions, take the needed action, and basically fall in love with your brand. 

Text is the primary source of information for users. They won’t be able to comprehend what exact value your website brings them by simply looking at it - but they will immediately understand the value by reading about it. See the difference?

It’s important to note that text (same as imagery) does not work alone. Copy and imagery complement each other and create a holistic picture for users. Thus, when working on a web design, always assign a professional copywriter to do the job - otherwise, you’ll end up with a fabulous design and a sloppy copy.

Tip: do not leave the copy till the very end. Some clients tend to fill website wireframes with Lorem ipsum and then hurriedly create content just before the website launch. We recommend not doing that and crafting high-quality copy from the start (same as you do with images and media content). In this way, the designer will be able to see how the copy fits pages and whether any adjustments are needed.

Work with the visual style

Visual style represents the way interface elements look and by interface elements we mean buttons, fields, etc. As well, visual style embodies the elements of the brand’s identity aka colors, patterns, and logos. Sometimes, a client needs to create a brand’s identity from scratch (or redesign the existing one) - in this case, the designer takes care of it as well before getting down to creating the website’s visual style. Work on the brand identity can actually be started after stage 2 or 3 (strategy or concept creation) and go in parallel with UX tasks.

The person responsible for working with visual style is a graphic designer. However, when it comes to content creation, you may need other specialists to work on it. This leads us to the next point - media content.

Work with media content

Media content includes many forms of content, such as photos, videos, or illustrations. So in case you need media content for your website (and you will most probably need it), you’ll have to work with corresponding professionals. 

For example, you might need to hire a photographer to take photos of your employees for the “About Us” section or you might want to ask an illustrator to create stellar illustrations. Just remember that all content across the website should correspond to the defined brand’s identity and be consistent in terms of colors and style.

Stage 6: Prototype creation and testing

After filling the website with the needed content, it’s finally time to get down to testing the obtained prototype. An important note here: a prototype is not the same as a wireframe. While a wireframe is usually a low (or mid) fidelity blueprint of the project, a prototype is a high-fidelity working representation of the product. That means users can interact with the prototype and actually test how it works and whether it’s convenient for use. Here are the main things that happen during the prototype creation and testing phase.

A/B testing

The A/B testing process is one of the simplest yet most efficient ways to test user experience and user preferences. The idea behind this testing is super simple: you present users with two options, A and B, and they choose the one which attracts them more. 

When it comes to web design A/B testing, there are plenty of options to test: from button placement to colors and navigation. Hence, you’ll need to create a detailed testing plan to make sure nothing is missed and users will be satisfied with the final result.

Usability testing

One more critical step in prototype testing is usability testing. That means you need to test the working product with real users and see whether they have any issues using it. For instance, you can test how easy a user can navigate the website, find the needed information, or complete a conversion.

Usability testing provides valuable feedback on how user-friendly your product is and what you might have missed. As well, at this stage, you can adjust the product and its functionality based on user feedback which, in turn, will save you from the need to redo the website in the future.

Check for any missed areas

When testing the product with real users, one of the most valuable insights you can obtain is whether your website has any missed areas. Such missed areas may include:

• Features that users do not use;
• Areas that users ignore;
• Areas that users can hardly navigate.

Such “blind spots” can be easily found during the testing methods described above and at this stage, you can fix the issues so the final product fully corresponds to the desired user journey.

Stage 7: Creating a design system and guidelines

This is one of the most cumbersome and complex stages of the website design process. At this stage, a UX designer together with the team creates a design system that will later be used as a guide for any further design activities.

A design system is a single source of truth that contains a set of the following deliverables:

• Brand identity: colors, fonts, images;
• Principles: brand objectives, values, and purpose;
• Best practices: accessibility, training, the definition of the UX;
• Components and patterns;
• Functional documentation;
• Technical documentation.

The design system contains all guidelines needed in order to keep the brand’s representation consistent across various products. And while the composition of this document takes time, it will bring you immense value in the future and will help resolve any arising issues or disputes.

Stage 8: Development and launch

Finally, the last stage of the website design process is actual development (with coding, of course) and further website launch. At this stage, the designer passes the mockups to developers so they can do their magic and bring design ideas to life. 

It is important to closely monitor how content looks and “feels” on a real website and whether it slows the website performance down. In most cases, you’ll need to deploy a CDN (content delivery network) so your content is displayed efficiently without slowing the site down. As well, don’t forget about image compression and other best practices for website performance optimization.

Design guidance and testing

Throughout website development, the UX designer closely collaborates with the development team in order to make sure everything is realized as intended and works properly. As well, before launching the product, it is critical to continuously test the website to make sure there are no bugs or errors. 

Mind that performance, security and load testing are different from the A/B and usability testing that we discussed above. At the stage of development, testing is aimed not at usability but at identifying weak areas, bugs, and reasons for poor performance.

Once testing is completed and everything is put into place, your website is ready for launch. Hooray! However, we recommend approaching the website launch with a bit of incredulity: do not expect everything to work perfectly and be ready to fix minor unexpected issues. And obviously, do not forget about website maintenance and support after the launch!

Final word

One more important thing to keep in mind when working on a website design is that a designer should always work in close conjunction with other team members, including business analysts, developers, and QA engineers. In this way, your website will not only look great but also deliver a 100% performance which, in turn, has a huge impact on user experience alongside the UX/UI part.