Web designing is one of the topics I love the most. I have been creating web experiences since I was just 16 years old. But back then, I was doing just okay websites. Some will say I was at a immature designer mindset.

As I grew older, I opened a business based on web designing and development. I was crafting beautiful websites, but had one big problem. I was only concentrating on my ‘Client’s needs’ and not on their clients needs. A few years after, I was going through youtube searching for a good web designing tutorial for a project I had.

Through my search of words like How to run a web designing agency’, I ran into ThisWeekInWebdesign. A UX pro named Jose Caballer who used to be host for the show, he spoke about something that changed my thoughts. He spoke about a brand driven design

I know you are wondering what that is. So let me explain it to you briefly. A brand driven web design, takes into consideration three things:

1. Website Users

2. The brand of your business

3. Your business goals

How does this differentiate from what I was doing? Easy, answer this simple question ‘Do you buy your own services or products?‘ . Well, not everyone buys their own product, hence building a website to meet our needs….. makes no sense. Instead, we need to create a website that meets our users needs. They are our key reason for having a business at the end of the day.

Today, I will walk you through a simple process to create the right website. Let’s concentrate on the design and your goals and not on the coding part of it.

What will you learn:

  • What is a brand driven design
  • Identify your Brand
  • How to do User Profiles and Stories
  • Create Goals
  • Tools
  • Design Your site

Let’s start with the brand driven design. For any blog or website, there are three main things you need to keep in mind. One is your users, you have to understand them, their lives and what they like. Second, is your brand, I am not talking about your logo or business cards. I am talking about the voice you use, your message and your style. Third, is your business goals, to get more clients and  anything you want to achieve.

If we put this into a diagram like the one below, you will be able to identify a user driven design. How? easy! you will find it where all these three points meet.

Why was learning this so ground breaking? I noticed that most web designers or developers are not doing this. They ask the client what they need and a few days they have a website. What is wrong with this is that the website will not perform as it should. Why? because it was not built for the users, instead it was for the clients to use.

I began to put in place this process to LIONDEVELOPMENT. The results we saw were incredible. First, the design of the websites we created improved. Second, the websites we are creating started to have a ROI! isn’t this what you want your website to do?

Identify your Brand:

You can define your own brand by doing a simple exercise. Some of us like to call this brand attributes. I have added a video below from the Skool network, where they share a workshop for defining a business brand.

How to do User Profiles and Stories

Now this is one of the parts that will need you to take your time. If you have not identified your markets, you can use a tool named ‘The business Canvas‘. It helps you align your main target markets. Once you have done that, you can work on individual clients.

How do I come up with my customers?

For those who are already established as a business, you know who they are as you deal with them all the time. You are most likely to have data or done a market research on them before. If not, that is okay! You can define them by describing your key client. This is the person who you want to talk to.

What do I need to define about my customer?

Let’s start with a name, just pick any name. By giving a name to this person, it creates a sense of reality of whom they are.  Second, let’s talk about demographics, age, gender, income. Try to describe as much as possible. Third, work towards creating a story of this person. Describe a current situation they are facing, and the problem that needs to be solve. Remember this problem’s solution is your value to them. Last, look at their needs towards your product. You can consider this the features of your website.

Create Business Goals

You can create these goals by dividing them into the most common three. I am sure one the first ones is going to be ‘Increase revenue’ or monthly income. The second goal you will need to have is to create awareness of your brand or blog. Last, you can set up goals to increase productivity, save time and manage cost.

How do you set the goals?

  • Start with the most important goal (revenue, brand awareness, Productivity)
  • Create a table with 4 columns
  • Add the following headings to the columns (concept, obtainability, desirability, total)

Each concept is going to be a goal you want to do. For example, for increasing awareness you can have something like ‘Increase facebook fans’. The obtainability of this task can be measured from 1 – 10 to keep the math simple. If you think it is easy for you to get it, then put a number from 5-10. If it is difficult then work with numbers from 1-5. The desirability of the goal is to know how much you desire that goal. Let’s work with the same numbers as we did for obtainability. Last, on the total column add the numbers from the obtainability and desirability columns.

As a result, you will  see some goals have higher totals than others. These are the main goals you can achieve. You have the ability to make it happen and you also want it for your business!

Tools that I use when designing a website

  1. Keynote: This application allows me to create documents like the ones shared above. I can also create workbooks that I can use with clients. To be honest, unlike Microsoft PowerPoint, I feel like it is not fighting against me.
  2. Google Drive: Google drive and documents give you great resources to edit on the go. I use it to create Sheets for tracking data, as well as for documents when I am doing a live session with a client. Remember, you can allow them to edit the document. For online clients, this is great as they can edit the document while we consult.
  3.  Website Framework: Most web designers love Photoshop. I do as well, but I get more freedom when I am working with Adobe Illustrator.
  4. Web Design: For this tasks, I choose Photoshop. There are also other tools like the Ol’ Grid, that you can use when designing a website.
  5. Testing / Design: There is a new tool by Adobe named Adobe Experienced CC. It does not allow you to do the stuff that Adobe Fireworks used to do, but so far it is pretty great. It also allows you to test the interaction of your website and app.

Improve your web designing

By now  you have your goals, your brand’s message, and the most important ones your users. I have added here a playlist from TheSkoolRocks with few videos of their design process.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/CJnfAXlBRTE?list=PLzKJi2GjpkEELRD-YatYYLyItQ9O_MPU8″ frameborder=”0″ allowfullscreen></iframe>

When designing, keep your users right next to you. This will help you to not loose track of whom you are designing for. Remember how I told you to give your users a name? Well they are your new best friends! Remember they are going to be interacting with your website.

 

Conclusion

With these 5 steps, I have worked in designing websites that are giving a ROI. Also, we have seen a huge growth when it comes to users staying on the website and the way the flow through the website.

These are just 5 steps, there are many more available. There are also good packages that come with all the workbooks you need for creating a better website.  Here is a link to buy them. They value they give you is worth the price.

For this blog so far I have used the following tools:

  • keynote: I used it to create users, brand attributes, goals.
  • Google Drive: Google Sheets: I used to create a few sheets. The first one was a sheet to stop feeling overwhelm with all the tasks. I will share this one with you in upcoming posts. The second one, was to create a list of affiliate partners I have added to this blog. The third one, has keywords and other data I need to collect.
  • Adobe Illustrator: I used to create a frame work of what I needed to have on the website. I am also using it for images that I will be using through out the blog.

If you have any other tips or process you use. Feel free to share with us by commenting on this blog!

Share This