Using Character Development for Better Website Design

Posted in Tips, Web Design • 292 days ago • Written by Jamal • 4 Comments

The ability to add true personality to the design of a website is the attribute that separates professionals from hobbyists. Since the aim of the majority of websites is to persuade a visitor into an action, and the best persuasion comes when there is a personal attachment, this is a vital ability for a lasting career.

The use of this practice will transform a website into something more of a presentation, an informative journey of discovery. So why give visitors only one chapter of the journey to view? Is that fair to them, or better yet, their understanding of what you’re trying to get them to grow an attachment for?

For this very reason, we are going to explore the use of incorporating character development into your web design process.

What is Character Development

*Image Credit: Howard TJ

Character development is a technique used frequently by creatives of written arts (authors, poets, screenwriters, playwrights, etc.) to try to create a level of personal attachment to the character from the reader. This is done by writing a storyline that allows the character to grow and progress throughout the written work. An example of great character development would be something on the lines of a cult following formed around a supporting character.

Examples:  Wolverine (X-Men), Snoopy (Charlie Brown), Captain Jack Sparrow (Pirates of the Caribbean), Homer Simpson (The Simpson), and Stewie Griffin (Family Guy)

Some might be wondering right now why are breakout supporting characters being depicted as great examples, as opposed to main characters. Well unlike the main characters, a true breakout supporting is a rarity. It takes a character with enough appeal to draw viewers/readers in, and then a plot line that allows for a personal attachment.

Getting Started

Now that we have briefly taken a look at what character development is, and what can result when it is properly applied conventionally, it’s time to get going with the reason why you’ve started this article in the first place. Let’s get into how to apply character development to your web design projects.

Setting the Personality

*Image Credit: Joel Mark Witt

Before going into any further, a personality type must be set for the website being designed. As mentioned in the introduction applying personality to a design is a fundamental skill of a professional designer. Okay, the purpose and benefits of setting up a personality for a design have been stated, so let’s get into how to create one. For those unfamiliar with doing this, don’t worry, it’s an easy to follow 4-step process.

Step 1: Look at the audience aiming to be persuaded. As any starting point for a design process, looking at the intended audience is where it all starts.

Step 2: Think of a personality the intended audience can relate to, and feels most comfortable with. People are simple creatures. Seeing someone similar to them creates a comfort level that allows them to be more open to what you’re trying to sell them.

Step 3: Determine a life story. The way a person talks, walks, decision-making, presents themselves, and views life is determined by how they grew up.

Step 4: Figure out the sales pitch. Once you’ve got the general idea of the person your visitors would relate to the most, think about how that person would make the best sale. After the best sales pitch is determined, go with that one.

After following this quick process, and of course adding some things in here and there, the person your design is being based on is set up. What’s left to do? Well, now leaves the focus turning into how to properly develop this person to the visitor throughout viewing the website.

The Life Stages We’ll Be Showing

Just like in the works this method is being derived from, there will be no telling of the entire life story. There is only a need to pull the more important sections. This will hopefully convey the full life story, in a shorter time frame. Here are the sections we’ll be looking at: Infancy, Adolescence, Adulthood, Seniority.

Infancy

*Image Credit: Duncan H

Looking at a baby is fun because of all the possibilities that lay ahead for that little person. The possible good, the possible bad, the life struggles, and expectations. These things all lay in the future of any newborn, and its brings excitement to the onlookers of what could be. Isn’t that the type of feeling you want visitors to your website getting?

From the very first second someone lands on your website for the first time, that feeling of excitement must be established. To get this done, we are focusing on the homepage here. Why the homepage? Well, this is because this is the most influential page of your website at initial viewing. It is viewed in a similar way as a person would look at an infant. Now, let’s look at setting up a good one.

How to Set Up for the Infancy Stage

Your homepage has one aim, providing a summary of your website as a whole. There must be enough information to gain enough interest to begin the emotional attachment of a user. In addition, there can’t be so much at first so that they won’t want to explore to find out more. Here are a few tips to achieve this:

• Have sections going into brief detail of the most important pages in your site’s CTA, sales pitch.
• Try to lightly hint on a form of ideal navigation for them through the website. Ex: go to homepage, then about, then contact, etc.
• Ensure the bond is being established. This is the most vital to the success of a visitors further exploring. Look back at the personality decided upon earlier, and make sure that type of vibe is felt.

Adolescence

*Image Credit: Van Gal Linh

Does the phrase “The decisions made as a teenager will decide how the decades of life after play out,” ring any bells? Well yes, what is done as a teenager affects the outcome of the rest of someone’s life. That may not be the full story in life, but in web design this is a make or break stage. The adolescence stage is represented by the pages of the site where visitors learn more in detail. An example in a portfolio site will be the about, portfolio, service offering, and blog pages of your site.

How to Set Up Pages for the Adolescence Stage

At the infancy stage the visitor has gained some level of personal attachment, hopefully, because of the personality and potential growth of the imaginary person they feel beaming from the page. Once further exploration into the site is started, that is when the infancy stage progresses into the adolescence stage. This is where the visitor ultimately makes up their mind on whether or not they are going to fall for the pitch being aimed at them.

Build on the already set personality

It is quite noticeable when a certain tone is not present throughout a site, and it happens quite often. So instead of leaving it because you’ve decided that it was only going to be a light hook, and the information will be the sell, expand on it.

Connect pages in a planned order

There is a 99.9% chance that a visitor will pick which pages they want to look at. This ironically makes some of the time spent planning feel wasted. However, it isn’t. In every page there should be some hidden guides to your ideal page viewing path. It doesn’t need to be something along the lines of telling them the ideal next page of their viewing, but something subtle and meaningful in the copy area will do the trick.

Ex: A band’s website album listing page linking back to their bio page by suggesting it will help understand the album process. This gives visitors an opportunity to learn more about them, and likely get them to buy more material because by reading more about them they grow more of an attachment to them.

Adulthood

*Image Credit: Victor1558

Adulthood is considered to be the time where people are able the to take the life lessons learned in their youth, and turn them into a promising future. It is in this stage where people are assumed to get their act together and start pinpointing their life goals.

So the adulthood stage of your website is where things get serious. Here, the final CTA of your sales pitch needs to be fully in play and the website conversion is made. Now, let’s look into getting that clear CTA across to visitors.

How to Set Up for the Adulthood Stage

Get to the Point

Everyone can remember plenty of times of going to a website, feeling like its done a great job of convincing you to buy what they’re selling, and something goes wrong at the end. Essentially whatever went wrong cleared any positive affirmation, and replaced it with strong hesitation. This often happens because the focus isn’t there, which is ironic considering viewing other areas of the site was only a buildup to this page(s).

Things like this happen when the message at the end isn’t clear and to the point. Often people think they need to explain everything in detail, this very seldom will help. Too much text and you’ll lose those visitors.

Keep the Conversion Process Simple

As anyone with some UX expertise will tell you, simplicity is bliss. Any process that lasts longer than it should, is one that is missing out on opportunities. People don’t like to do things they think have too many aspects they view as a waste of time. It’s just how people are, and it makes perfect sense. Don’t make them go through pages of filling out fields, when in reality, only one page will do. This goes triple when concerning mobile.

Conclusion

In this article we’ve talked about adding personality to your designs, and taking that further by using the character development technique used in other forms of creative work. The use of both of these techniques is to establish an emotional connection between the website and the visitor, both leaning on each other to grow a stronger attachment. This of course, all leading to a  better likelihood of a higher conversion.

How will you be using character development on your next web design project?