Designing for Your Audience – Identifying the Target Audience

One of the balancing acts of designing a website is finding that happy medium between what the client wants and what their readers need. The design shouldn’t just be a client’s wish list. It should also consider the end user’s wish list. After all, the website should actually designed to meet the needs of the end user. In order to know who the end user is, you must first identify the target audience.

Since a website is often constrained by budget and time, not every item on the wish list will make it into the website before time for launch. It’s a good idea to list the client’s top 3-5 items that are the most important, as well as listing the top 3-5 items that are the most important for the end user. This determines the content and features of the site.

Identifying the Target Audience

In order to know the top 3-5 things the readers need, and to help inform your website design, you’ll need to identify the target audience. Knowing the target audience will also help determine the types of graphics, animations, navigation structure, images, and other features that the website will need.

The best way to identify the audience is to create a checklist of questions to ask your client. Your client’s will need to provide a detailed description of their industry, trends, customers, and competition.

Have a meeting with your client with a prepared list of questions. Questions will be different for each project, but it helps to have a template to work from. Questions can include:

  • What types of customers are you targeting?
  • How would you describe each type of customer?
  • What is unique about each type?
  • What are their specific needs?

Customer Profile

Create a profile of each type of customer. Many designers like to create a mockup customer complete with name and biography. This is often called a persona. This will make the customer seem like a real person with real needs. The website can then be designed to solve those needs. This should be modified as needed in order to help improve the website’s design.

Scenarios

Once you have the personas you can build scenarios that will help you determine how they will use the website and the type of content they will need. The result will be a website that’s designed to meet the needs of the end user.

Let’s Discuss

  • How to you identify your target audience? 
  • What types of questions do you ask?
  • Do you develop customer profiles? 
  • Do you develop scenarios?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by Chad Kirchoff on Unsplash

The Steps of Developing a WordPress Website – Step 5 – Maintain

Once the website is deployed, as in seconds after, it’s time to maintain the website. This includes the backend, the frontend, and content. This is also when you should start implementing additions that were not ready or available during the first four steps. A maintenance schedule with items in a checklist can help keep the schedule on track.

Under the Hood

It’s important to keep your WordPress installation up to date. This includes the WordPress core, themes, and plugins. The majority of updates are security patches that fix holes. A website that hasn’t been kept up to date will be a security risk for the server and anyone that visits the website. If the server gets malware the website can be blacklisted.

First, always keep an updated backup. Never perform a software update on your live website without a recent backup. I prefer to perform the updates on test sites first. Once you’re sure the updates are safe it’s time to update the live site.

I recommend running periodic tests for speed and usability to ensure your website is loading correctly.

Frontend

The frontend also needs to be maintained. This includes colors, styles, design elements, images, animations, etc. You don’t want your visitors thinking they just stumbled into the way-back machine (unless it’s a retro design on purpose).

Not only do design elements need to be maintained, but also calls to action, button arrangement, colors, etc., need to be changed as needed in order to get the best results. I don’t recommend changing at random though. One of the best ways to know what to change and how to change it is to use a/b testing. This will show you which colors, styles, buttons, etc., are the most productive for your website.

Content

News, products, offers, prices, images, articles, ads, etc. should be kept up to date. Your site would not look very professional if product prices were several years or weeks old. How many times have you driven by an old gas station with prices from years ago on the sign? What are your thoughts when you see that? You automatically assume they’re out of business. A website with old content looks like it’s out of business.

The same goes for articles. How many websites have you seen where the last post was “I’m Back!” and that was three years ago? You don’t have to post every day, but the more often you can post the better. Set a schedule and stick to it. At least 4 posts a week is ideal for the best traffic results.

Lets Discuss

  • Do you use a maintenance schedule?
  • Do you implement updates on a test server first?
  • Do you use a/b testing to see what is effective?
  • How often do you post?

Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Featured image by Igor Ovsyannykov 

The Steps of Developing a WordPress Website – Step 4 – Deploy

Step 4 in the 5 steps of developing a website is deploy. Once the website’s checklist is complete with all of the elements in place and the site has been thoroughly tested it is time to publish the site. Even though the site is tested ahead of time, we can’t just publish and walk away. There may be issues we haven’t found yet. Users might not enjoy using something that we thought would be a great choice. Something might be too confusing, or the functionality or needs might change.

Deploy according to your launch plan and check everything multiple times as you deploy. This will include setting up the domain on the new server or removing the coming soon message, disabling IP blockers, sending out emails, promoting in social media, setting up any necessary redirects, etc.

Quality Assurance

This person continues to watch the site for problems. This includes using different browsers, checking links, using different platforms and devices, etc. They will also check for load times and take feedback from users. These tasks are especially important if the site was moved from a test server to a live server.

A/B Testing

In order to help improve the site’s design and functionality, the blog manager or QA person should use a/b testing. This will help determine where changes need to be made. It would test the layout design, color choices, button styles, call-to-actions, and more. The results of the tests should be logged and used for inform website changes.

Analytics

The blog manager should analyze the site’s traffic to see which marketing efforts are effective, learn more about the audience (which can tell you more about their needs and what the site needs to provide), which browsers and devices are the most popular, what other websites are sending traffic, etc. This will help you focus your best efforts where they are the most effective.

Security

Security should remain a concern. Keep a check on the security logs. This will tell you of potential threats and identify IP’s that should be blocked and any holes in the website’s security. It’s important to respond to problems quickly.

Let’s Discuss

  • Do you follow a launch plan when deploying a website?
  • Is your launch plan different from what I’ve discussed here?
  • Do you have anything to add?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by SpaceX 

The Steps of Developing a WordPress Website – Step 3 – Develop

Development brings all of the design elements together to build a workable website. Since it’s a content management system complete with database, content creation tools, and media storage, WordPress greatly eases the pain of development. The backend already exists and the frontend uses themes that are pre-made, customized, or built from scratch built on top of the WordPress system. Many themes and plugins include drag and drop tools that make it easy to place the elements where you want them. Let’s take a look at the steps involved in development.

Comps and Wireframes

Comps are the mockups that many designers create in Photoshop that show the design of the layout. Lots of designers skip Photoshop and build the mockup using tools such as Divi to build the wireframe. The comps or wireframes are used to build the site.

The developer, which can be the same person as the designer and sometimes does both jobs simultaneously, places all of the elements in their proper locations, adds the CSS (by hand or by using plugins), adds any PHP needed (or plugins) to create any special features for the theme, adds backgrounds, graphics, fonts, menus, buttons, social plugin, newsletter plugin, security, backups, eCommerce, analytics, etc., for both frontend and backend.

This work is sometimes done on the actual server while others prefer to develop the site on a private server and move it to the live server when the site is ready. Either way the domain name and hosting are prepared, sometimes with WordPress installed and security plugins in place, and a coming soon page displays to visitors and provides an email opt-in and social follow and sharing buttons.

Content

The content team will create the first round of written content for the website based on the direction decided in the design phase. This includes any copy for the pages and the first set of articles. This content is based on a spreadsheet called a content matrix.

Many use tools such as Microsoft Excel or Google Sheets to keep the list for the content matrix. Content creators use these tools as a checklist to produce the content. The blog manager will create the user accounts and have each user upload their content.

Media

Media includes podcasts, video production, slideshows, etc. The media development team create podcasts and videos (which are sometimes the same content). This also includes any videos to be produced such as company introductions, tutorials, product information, etc. This may require high-end recording equipment and software. The material is often written by the content team.

This will also include storing and presenting the media. For example, the design phases answers the questions of will the media be stored on the website itself or another site such as YouTube and then embedded within the content. In this phase those tools and accounts are gathered and prepared to store the media.

Blog Management

The blog manager will publish the pages and posts as they are approved. At this point the website will still display a coming soon message to visitors, so they won’t see the content until the site is ready to go live.

Let’s Discuss

  • Do you build comps with Photoshop or a similar tool?
  • Do you prefer to build a wireframe with tools such as Divi?
  • What is your favorite content matrix tool? 

Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Featured image by Tirza van Dijk 

The Steps of Developing a WordPress Website – Step 2 – Design

The second step in developing a WordPress website is Design. Fortunately WordPress, being an amazing content management system, takes care of handling content database and other parts of the website under the hood, so you’re not designing from the ground up. Instead, you’re designing on top of an already powerful platform. Fortunately, this platform doesn’t place heavy restrictions on the design.

There are several steps to designing the website. Be sure to include the client in every step – getting their feedback and explaining design choices. This will help keep the project on time and within budget, and will reduce surprises while ensuring you’re creating the website the client needs.

Sitemap

A sitemap is a diagram of the website. It will show what the pages are and how they’re connected. It will show the navigation structure and the categories for the content.

One of my favorite tools for building sitemaps is a mindmap tool called Coggle.

Wireframe

A wireframe is a series of diagrams that show the details of each page. It shows the page’s navigation, the content such as text and images and how they relate to each other, and the interactive portions such as calls to action and links. (The image above shows Divi Wireframe Kit Vol. 3)

Many designers use tools such as Photoshop, Gimp, etc. I prefer to create wireframes directly within the page itself using Divi. Other building themes and page-building plugins are great too.

Content Plan

The wireframe shows where the content will go within the page’s design. The content plan will show what the content is, where it comes from, will it include snippets that link to blog posts, will those snippets include images and if so what size, what is the character limit of the snippet and posts’ title, will it include meta information, how will the user interact with the snippet, what categories will be included, etc.

The types of content, writing style, length, types of images, video, etc., should also be included within the content plan.

The Look of the Site

The look of the site is what we usually think of when we talk about design. Once the client has approved the sitemap and wireframe design, the visual designers can add visual elements on top of the wireframes. This includes choosing colors, fonts, and adding graphics.

Be sure to test the site on multiple screen sizes and devices, and in multiple web browsers.

UX/UI Testing

Once the design is in place it’s a good idea to test the site with a small group, taking their feedback and making improvements. Some prefer to test multiple designs from the same wireframes in order to get the best design possible. This will help ensure that you provide the best design to the client and you’ll also be able to provide feedback from the test group if needed.

Let’s Discuss

  • What are your favorite sitemap tools?
  • What are your favorite wireframe tools?
  • Do you use a process different from this?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by Galymzhan Abdugalimov

The Steps of Developing a WordPress Website Step 1 – Define

Like any successful project, developing a website should follow a proper sequence of steps. The steps, often called phases, help keep the project on track and within budget. They also help ensure that the website that’s built is the website the client needs – without bugs and scalable. This requires breaking the project down into a series of steps. In this series we’ll look at the steps of developing a WordPress website.

Five Step Process

Many developers use a five-step process:

  1. Define
  2. Design
  3. Develop
  4. Deploy
  5. Maintain

There are lots of variations on these steps, but this is a simple plan that moves the project from concept to finished product. The steps follow a common-sense methodology. Let’s take a look at each of the steps.

Step 1 – Define

Before starting on the website’s design you must first define the website. This includes the site’s business goals and customer requirements. Before designing the site’s structure you need a clear definition of what the site is for.

Site Goals

Clearly define the top 3-5 goals that the website needs to meet. These goals will help determine the layout, visuals, navigation, and content requirements per page.

For example, a site for a local handyman business might only need to have a one-page layout to specify the services provided and give contact information, or it might need multiple pages with detailed information about each service and include purchasing through the site with recurring payments. Those are two vastly different levels of design for the same type of business.

Business Requirements

Meet with the internal stakeholders and have them help you create a list of the site’s business goals. Make statements for them to finish, such as “the site must be able to…”. This isn’t the look of the site. Rather, it’s the functionality of the site. It will answer the question “what are the site’s primary abilities?”

Create a list of all of these abilities the site must have and then have them prioritize the list. The first few should be the most important that the site must have at start-up and the rest can be added later.

In this meeting try not to discuss how something will be accomplished. The focus should be on what needs to be done rather than how it will be done.

Request For Proposal (RFP)

The client will need to create an RFP. It will include the project overview, the site’s business goals, and the site’s requirements.

Project Plan

This will be the roadmap for the project. It will list all of the steps required and specify the time, people, and budget required for each step. Break the steps down into milestones with a time and budget for each. Most recommend adding a little extra time and budget for unforeseen issues.

The project should be tracked using a Gantt Charts or similar tracking tool. Microsoft Project is a popular tool for project management. You can also get templates for Microsoft Excel or other spreadsheet apps.

Let’s Discuss

  • Do you use the common 5-step project plan or do you use another plan?
  • What are your favorite questions for defining the website’s requirements?
  • What is your favorite tool for tracking the project?

Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Featured image by rawpixel.com

Stay tuned for Step 2 – Design