By Cara Wares and Lizette Sutherland 

You’ve probably heard of the terms UX and UI before, but what do they mean and why are they important for successful digital product and website development? Our team at Flow Communications has some answers for you. 

The whole experience a user has with a company’s goods or services is referred to as the user experience (UX). How simple or difficult it is to interact with each piece of a product or service determines good or terrible UX design.

User interface (UI), on the other hand, refers to the style and layout of the product, including all the buttons, placeholders, text, images, checkboxes and other visual elements that users interact with.

Who are you designing for?

When you think about your UX design, ask yourself the following questions:

• Who are your users or clients, and where and how will they use your website, product or service?
• What are the products or services you’re selling or promoting and how can you motivate your customers to buy or use them?
• Why is your product better than that of the competition? What is your unique selling point?

It’s important to bear in mind that your user is at the centre of everything. 

Five UI questions to ask yourself about your product

1.Is it easy enough for the user to find what they’re looking for?

2. Is the app or website too complicated? 

3. Does the onboarding process make sense, or is it too long?

4. Do the buttons or other links do what your user expects? 

5. Is the text easily legible and concise enough?

Make it work for you

Now that you know all the theory, how do you practically implement it? Here are 10 steps from our team at Flow Communications on creating a winning website for your business.

1. The process flow

The building of a website should kick off with your whole team – including designers and developers – working out exactly what you’re trying to achieve with the project. 

2. Site map

The site map is the basic structure of everything that’s going to be on your website. It’s a working document between you and your client to work out exactly what content needs to go onto your site, how you’re going to structure it, and how you will lead your users through that content.

3. Take your users on a journey

After the site map is done, you need to create a user flow, or user journey. Here, you map out how users will move through your website until they, for instance, get to a point where they purchase a product or subscribe to get regular news updates, depending on your end goal.

You need to look at all the feedback loops – using the system’s outputs as inputs for product improvement – and possible places where the customer could end up abandoning the process and leave your website, and create solutions to stop that from happening.

4. Give your users a personality

User personas are fictional or imaginary characters that represent your customers and target audience. Despite them not being actual people, they are based on data and facts discovered through actual interviews, surveys and other user research methods.

5. The blueprint

The next vital stage of the project is building your wireframe, which is the blueprint for your website. It is basically a “stripped-down” version of your site, where you place all the information and content that will go onto the site and structure it accordingly.

6. Time for the good stuff 

Next on your to-do list is the UI of your website: the design look and feel. This is where you decide on your brand identity, which includes selecting your colours,  fonts, the images you’ll use and everything that will bring your site to life. This is the side of your website that people will see and interact with.

7. Prototyping

After the UI stage, the prototype is created. This is an interactive demo of your website. An interactive prototype serves as the “live” version of your wireframe and gives the product life by displaying the entire flow combined with the actual text and the finished copy.

This allows for everyone on the team to go through the website from their laptops or mobile phones and to click through the site pages as if it’s the final product.

8. Website handover

It is now time to hand over the project from the designers to the development team to implement the finished design.

Designers always include a style guide for the developers, which determines aspects such as font sizes and colours, button styling and icons. The designer will also create a folder with corporate “assets”, such as header and footer logos, favicon (a 16×16 pixel tiny icon used in web browsers to symbolise a website or web page), icons, optimised images, font files, colour codes and components.

9. Almost there …

Before the site goes live, it needs to go through the testing phase. UI testers make sure all the buttons, fields, labels and other items on the screen work as specified by checking screens, colours, fonts, sizes, buttons, icons and more, and how they respond to the user input.

10. … and we’re live!

Developers have a go-live checklist before they can officially launch the website. This is a crucial part of the final process to check that servers, the security of the site (whether it’s easy to hack and/or retrieve your client’s details from a database), URLs, links and forms are all correct and working.

–––––––––

Cara Wares and Lizette Sutherland are senior UX/UI designers at Flow Communications (www.flowsa.com), one of South Africa’s leading independent agencies. Founded in 2005, Flow now has a permanent team of over 60 professional staff, with more than 700 years of collective experience in marketing and communications

Ends

For more information or to arrange an interview, please contact Khaya Thwala on khayat@flowsa.com or 078 349 0668.