Design best practices

Learning objective

By the end of this session, you will be able to:

• Think through the main objective of your site
• Design with your visitor in mind: understand the persona that will guide your design
• Outline a plan to organize your site in a logical and user friendly way

Video tutorial

Video transcript

I’m Laura Castaño, UX/UI designer here at Zoomforth, and I’m going to give you some tips on how to better plan and execute your sites so they reach your goals more effectively. Web design is not rocket science, but in order to have an amazing site, we need to follow some simple steps. The first step is to plan your site and list your goals and objectives. Building a site to plan an event versus a proposal or a recruiting site is not the same.

First thing’s first: List our goals

• Do we want to offer a repository of information for our team to improve interaction with existing and potential customers?
• To attract the next great hire or to better communicate with our employees?
• You can see how every goal is different; therefore, not all sites can be built the same.

Example sites

I have two sites that can better illustrate what I mean by this. Let’s first see the partnership proposal site. This is one we have at Zoomforth that was built to showcase the relationship between two companies and how it’s been improved by the team and its people. The objective of this site would be to showcase that relationship, how it has been built, how it’s been improved, and how it can continue over time.

Next, we’re going to see a one-pager. The one-day strategic planning workshop, this one is an event planning site. And you see it’s just one page. We have the agenda, the date, and an overview of what’s going to happen. So you see how it’s simple, and we can see that both sites have different objectives.

Next step: Create or think of an ideal visitor

• Give them a name, age, and gender.
• Be as specific as possible as to who this person will be, why they will come to your site, and what they would want to achieve while in it.

For instance, in the event planning site I’m going to make up a person. She’s going to be called Christy, she’s 40, and she’s a salesperson. She’s very goal-oriented and likes to be prepared. So she’ll come to the site to look for everything she needs, all the details of the workshop that she signed up for.

Third step: Think of the structure or definition of the structure of the site

• Plan a structure so that it is easy to navigate and we can improve our user experience.

In this case, we want Christy to be able to attend the workshop and be prepared so that she can fully absorb everything that will be taught. So we ask ourselves, what would she need from us and what information would she need to prepare beforehand. Obviously she’ll need the date and the time, the place, how to get there, maybe the schedule, an overview of what will be discussed, who will be guiding the workshop, the resources needed for the workshop, the deliverables, and so on. The ultimate goal here is to help users find the information they came looking for as easily as possible. By creating a website structure, you will save yourself a headache.

Final step: Information architecture

After we have the structure and the main topics we want to talk about, what we’ll do next is think of information architecture. Information architecture is what page goes where and what information goes in which section so that it will be displayed in a logical and user-friendly way.

You can create a diagram with the main pages on top and then go from top to bottom. A mind map is also very useful when you have a lot of information. So before you even start moving tiles on your site, the best thing to do is use your pen and paper to do so.

Recommendations

Here are a few recommendations to make sure it’s logical.

• If you know that the most important thing to remember in the event site is the date and the time, you’ll make sure to have that piece of information very visible and easy to find.
• Don’t create too many categories, between two and seven is enough. And make sure to use page titles that are relevant to the words that are specified on the page.
• Always keep in mind how people search for things on pages. The goal here is to make it as easy to read and understandable as possible. The most important thing is to remember to visit your pages continuously and monitor the results through the analytics we offer here at Zoomforth.
• Create links between the pages, so if you have more than three or four pages, make sure that one links to the other so that users can go and come back easily.

To recap, first think of your main objective, think of a person that will help you guide your design and think of what that person might need, then the information they would want to see on the site, and then think of the most logical way to organize it. A few other tips and tricks are to try to implement calls to action. So buttons that will guide your users through the site. So go here or click here, to book a session. Also, don’t be afraid of white space.

Use the right imagery and let your visitor scroll on the homepage. It’s better to have them scrolling than clicking. Always remember that it’s better to scroll rather than click and make sure the content you create is for the person you thought of. Always try to see the insights from the analytics that we offer here at Zoomforth.