How to design and create an awesome website

Most people begin by thinking that they need to create a ‘wow’ factor. However, wow factors are subjective; they are based on personal preference and taste, so what might attract one visitor might also turn away the next. Instead you need to focus on your target audience(s) because only by doing that will you achieve your business goal of attracting, retaining and converting visitors into returning users and customers.

In this article, we consider the two key disciplines and design approaches to help you achieve your desired business outcome. The first is design and the second is user experience; often referred to in the industry as UI (User Interface) design and UX (User eXperience) design. At the end of the article, we also consider how to implement this on a limited budget.

The difference between UI design (user interface) and UX design (user experience)

Broadly speaking, UI design relates to the visual components of your website whilst UX design relates to the usability of your website and broader user experience. The two disciplines go hand-in-hand and are equally important if you want to create an awesome website.

UI design

UI design focuses on the visual elements i.e. the look and feel of the website. This should be driven by your brand identity which encapsulates and represents your brand values and purpose, whilst also appealing to and resonating with your target audience.

The importance of brand guidelines

In order to maintain consistency and create a strong brand across all media, you need to capture and communicate your brand identity. The easiest way to ensure that this is done is by having a set of brand guidelines, also commonly referred to as brand standards, a style guide or a brand book.

Brand guidelines should cover all of your visual assets (e.g. logo, colour palettes, fonts, typography, images etc.) and, importantly, describe how and when to use them across different media e.g. when to use different colour variations or images and how much white or clear space to use. It is a good idea to include visual examples.

In addition, we recommend that your brand guidelines include reference to grammar, punctuation, tone of voice, word usage (e.g. product terminology and straplines) and key messages or points of view (e.g. elevator pitches and your brand’s value proposition). Simple things like sticking to American English or British English should also be included.

Website or UI style guide

A UI style guide will draw on elements of your brand guidelines for key components of your website such as buttons, typography, theme colours, headers, footers, navigation menus, tool tips and message boxes.

Good UI design also enhances a user’s experience not only in terms of attractive visual imagery but also by giving visual clues to help guide users on their journey through your website.

UX design

UX design focuses on the usability of your website and should be driven by the outcomes that your visitors want to achieve when they visit your website. If your website caters for different audiences, then you need to create different customer journeys / paths for each audience. For example, someone who is looking to partner with you will be looking for different information to someone who potentially wants to buy a product from your online store. Usability is key to creating a good user experience.

Creating customer personas to represent your target audience(s)

In the context of website design, your customer is anyone who might use your product or service or visit your website for a particular purpose.

In order to create fluid customer journeys, good UX design will take into consideration the different needs, goals and observed behaviour patterns of your users. The easiest way to do this, is by creating personas – fictional characters who represent a particular group or type of user with similar characteristics.

To develop personas you need to understand your audience(s) and create personas based on research and insights rather than gut instinct.

Creating customer journeys

Once you have identified your customer personas and identified their goals, you can list out all the touchpoints that they have whenever they interact with your brand in order to achieve their goal. This includes all interactions and not just those with your website.

When you map out the steps in their journey, think about their emotions and motivation prior to each action they are taking; for each touchpoint with your brand, what are they trying to achieve and how are you addressing it. The mapping process will help highlight their pain points – the barriers that prevent them from taking their next action e.g. do they get stuck at a particular touchpoint because there is no call to action to guide them smoothly to the next stage; or perhaps there is no reassurance that the product they are about to buy has been recommended by others.

The purpose of many journeys will be to purchase a product or service, but don’t forget that your user’s journey may actually extend beyond the purchase. There are often touchpoints post-purchase which also contribute to their overall user experience and are important if your goal is to promote brand loyalty. Use the classic buyer’s journey – awareness, consideration and decision stages – to lay out your customer journey map.

Hints and tips for UI and UX website design

The following hints and tips have been split into UI and UX design, but remember that one without the other will not help you achieve your goals. The winning formula is to take a holistic approach because each discipline in good design will feed into and complement the others.

UI design factors

• Brand identity and consistency is key – make sure you have brand guidelines and that they are adhered to.
• Use visual design techniques to add interest, engage visitors ‘senses’ and steer user journeys e.g.
  • use colours (and colour psychology), shapes, textures, patterns, images and video to add depth and personality to a website;
  • consider how these components work together, reflect your brand and evoke emotions that are associated with experiences that influence user behaviour in the direction you want to take them;
  • don’t overload people’s senses – instead use appropriate layouts to highlight key messages and strategically place clear call to actions.
• Test what works – use A/B testing.

UX design factors

• Start with marketing and understanding your target audience. Creating a seamless and frictionless journey is key to usability, so if you don’t understand how to engage users and what drives their behaviour, you will not be able to design a website that meets their needs and expectations.
• Engage users by creating a good first impression – both visually and from a content perspective. Your content strategy needs to be aligned with and resonate with your end users, and directly map to and follow your customer persona journeys.
• Create content that will evoke emotions. People relate to people, particularly their personal stories and experiences. You can bring a website to life through language and your tone of voice, and with photos, videos and sound bites of real people – the people behind your product or service and the people who use your product or service. In the words of Maya Angelou, “People will forget what you said, but people will never forget how you made them feel.”
• Test that each journey is smooth and seamless – can users find what they are looking for at each stage of their journey; are website pages loading fast enough or are they causing visitors to leave and look elsewhere. Look for metrics at each stage of the journey so that you can determine how well you are addressing each touchpoint.

5 step plan for implementing an awesome website

1. Create and communicate your brand guidelines.
2. Do your research:
   • be clear about who your website customer is and create customer personas, so that you can identify and map out their customer journeys;
   • for each customer persona, be clear about what their goal is at each stage of their journey in order to create a seamless and frictionless user experience.
3. Agree UX design by creating wireframes for all (or at least key) pages of your website.
4. Agree UI design by creating visual mock ups of all (or at least key) pages of your website.
5. Test your design for different scenarios / user journeys before it goes live and afterwards by measuring and reviewing your desired outcomes – use tools such as A/B testing and Google Analytics to identify what is and what is not working well, and don’t forget to ask for user feedback (bearing in mind that all feedback on an individual level will be subjective).

How to achieve good UI and UX design on a limited budget

If your budget doesn’t stretch to doing in-depth research and outsourcing UI and UX design, then do what you can yourself.

Follow the five step plan above and start by creating your brand guidelines – refer to the importance of brand guidelines to make sure you have covered the key elements.

For step two, create your customer personas based on what you already know about your target audience. Make a note of any assumptions that you make, so that you can test and amend them as and when you have more evidence-based information and insights.

For steps three and four, document what you are trying to achieve and for each customer persona map out their customer journey. Use pen and paper rather than spend time mastering fancy design tools. Similarly, use pen and paper to sketch your wireframes and visual mock-ups. This approach is best, even if you are planning on doing the web design yourself, because it quickly highlights usability and content issues. You should expect this to be an iterative process as the UI and UX are interdependent.

If you are designing your own website, then consider using a website builder, such as Squarespace, and chose a template which closely matches your brand style. This will save you a lot of time, particularly if UI design is not one of your strengths.

Once your website is ready, test it. If you’ve designed it yourself then ask someone else to test it for you and don’t forget to test it across different browsers and screen sizes.

Lastly, if your budget doesn’t stretch to A/B testing then, as a minimum, look at your website statistics. If you have used a website builder, such as Squarespace, then use their analytics tool as it is likely to be simpler to use than getting to grips with Google Analytics. However, if you have the time, then we strongly recommend using Google Analytics because when you start reviewing your data you are likely to want to delve deeper in order to find answers to further questions. The review process is key to finding your next opportunity.

Websites are only awesome if they achieve your business goals

The often quoted phrase, “beauty lies in the eye of the beholder” is as true of websites as it is of any other object. It is subjective. Creating an awesome website should not be subjective; it should be about achieving a measurable end goal.

To create an awesome online presence which attracts, retains and converts visitors into returning users and customers, you need to understand your target audience and implement good UI and UX design practices from a marketing perspective. In addition, you need technical expertise and data and analytical skills to measure and identify what’s working, what’s not working and where your next opportunity lies.

Website design, like all business processes, is an iterative process, so regularly set aside resources to review your website strategy in the context of your overall marketing strategy and your business goals.