Voice Actress Jennie Dyer - Landing Page Analysis and Optimization

Read in German

I had a conversation with voice actress Jennie Dyer in the Gravy For The Brain forum, and I checked her website. It turned out it needs work.

I’m going to show you how her website looks like now.

Then I’ll explain what I consider good, not so good, and things that she definitely needs to improve on her site.

Finally, in step three, I’ll show you my amendments with a few explanatory words.

Jennie’s website is jenniedyervoiceactor.co.uk

I took four screenshots of her original site:

Jennie’s homepage
Jennie’s homepage
Jennie’s voiceover sub-page
Jennie’s voiceover sub-page
Jennie’s acting sub-page
Jennie’s acting sub-page
Jennie’s contact sub-page
Jennie’s contact sub-page

👍 Good: Clear name/profession, color scheme, and navigation

Jennie kicks off with her name, states her profession, i.e., Voice Artist and Actress, mentions her main areas of expertise in the navigation menu, i.e., Voiceover and Acting, and she welcomes you.

Zoomed in: Focus on the hero unit
Zoomed in: Focus on the hero unit

So far, so friendly.

The color scheme suits her age:

The colors also match her photo that show a warm skin tone, a friendly smile, green/brownish eyes, and a black dress on top of a gray-colored gradient in the background.

😐 Not so good: Weak headline, misplaced introduction text, and low perceptibility of the selected navigation item

The problem starts with the h1-heading just below her name/profession and the navigation menu.

Zoomed in: Focus on the h1 headline and introduction text
Zoomed in: Focus on the h1 headline and introduction text

The problem continues with her copy-text below and a missing call-to-action, but let’s take it step by step.

💡 Tip: Start with the core benefit

The h1 headline says:

Welcome to my world!

The words or word choice itself is not the problem.

But it’s a wasted opportunity to hit home and deliver her key message at the second most important place on her website; the most important place being the top-left corner.

A better h1 headline could be:

Warm, authentic, bright, and characterful with an age range from 25-45.

I didn’t invent “Warm, authentic, bright, and characterful” etc. This golden information was buried on one of her sub-pages where nobody would find it.

It’s a better headline because it goes straight to the core (benefit) of her voice-over service. There’s no “dancing around.” It’s her service in a nutshell.

The paragraph that follows is problematic as well.

💡 Tip: Your homepage is not an about page

Below the h1 headline, Jennie introduces herself by saying:

I am a voiceover artist and actress based in the New Forest. I work all over the country as an actress, predominantly specialising in roleplay, forum theatre and immersive theatre work. As a voice artist I have a home studio where I am able to record & edit to deliver a high quality audio in a time frame that suits the client.

Please see my voiceover and acting pages for links to my voice and showreels.

The copy itself is not bad, but parts of it is just in the wrong place. Save most of that text for the about page.

The lack of links to her voiceover and acting sub-pages is a problem that should be fixed as well.

Also, the lack of a clear call-to-action is the biggest problem on her website. The homepage simply ends with two icons telling the reader to either contact her by email or call her.

I recommend having a clear call-to-action, something like “Get a Quote“ or “Hire me“ or “Work with Me“.

💡 Tip: Does your website work in black and white?

Contrast is the difference between white and black. Black text on a white background delivers excellent legibility.

But dark text on a dark background is not a good idea.

Let’s check with Jennie’s homepage:

“Black and white” — Jennie’s site in gray tones
“Black and white” — Jennie’s site in gray tones

Do you see how you barely see the active navigation item “Home” in black? The low perceptibility is a problem.

Even colorized, does “Home” almost disappear.

Do you see how “Home” seems to visually disappear?
Do you see how “Home” seems to visually disappear?

I would recommend a contrasting color that works well with her existing colors, and I’d pick white.

Color scheme of Jennie’s site — including the rosé color from her voiceover sub-page
Color scheme of Jennie’s site — including the rosé color from her voiceover sub-page

A color scheme is a useful tool because a) it gives you an overview of which colors you actually used, and b) it helps you see which colors match and which colors clash.

🔨 My improvements for Jennie’s site

In an early attempt I merged all four pages into one homepage.

Jennie’s four sub-pages merged to one compressed homepage
Jennie’s four sub-pages merged to one compressed homepage

Using this one-page approach, the navigation items serve as on-page links.

I shortened the copy, and I abbreviated her list of credits. The link “View all credits” could lead to a sub-page, or clicking on the link could open a previously hidden text using an accordion effect.

Step 2: Spicing up Jennie’s homepage colors, layout, and design

I later made an attempt to design Jennie’s homepage with more spice and contrast.

Touching her color palette was my first step:

Updated color palette for Jennie’s homepage
Updated color palette for Jennie’s homepage

Then I applied these colors to her existing homepage design:

More contrast and cleanliness thanks to different colors and a decluttered appearance

I also removed the rather old-fashioned vertical lines and made the active navigation much more readable.

On top of that, I added a sun ☀️ emoji in the top-right corner, which is a button that shall work as a way to switch to the dark mode.

Switching between light mode and dark mode is useful: at daytime you can display your normal website. At night, you can allow your reader to show a version of your website that makes it easier on the eyes to view it.

So, I created a dark-colored version of her website as well, using the following color scheme:

A dark-mode compatible color palette
A dark-mode compatible color palette

Applying the new colors, Jennie’s homepage appearance changed accordingly:

Elegant dark mode with an alternative color scheme for Jennie’s website
Elegant dark mode with an alternative color scheme for Jennie’s website

In both the light and the dark color mode, I took the liberty to remove all the clutter and only leave what’s essential. Plus, I applied the color scheme consistently, which was not the case in Jennie’s original design.

On top of that, I stuck to one font only: Proxima Nova.

Step 3: Finishing touches on layout, design, and copywriting

I was not satisfied with the dark-gray box around Jennie’s photo and her copy-text. A “merger” was needed. Now the main content is all in one neat rounded box.

I then horizontally expanded the size of her displayed name, so it’s all shown on one line. I also added my updated copy-text, her three voice over demo reels, and I updated the sun ☀️ emoji, so the reader can switch back to “daytime colors” mode.

Doesn’t that look official, classy, and representative? Jennie’s compact homepage with new copy, dark mode colors, and a new copyright line à la “© 2021”
Doesn’t that look official, classy, and representative? Jennie’s compact homepage with new copy, dark mode colors, and a new copyright line à la “© 2021”

In this new version of her site she would have 4 sub-pages for the reader to navigate through.

Each sub-page would be brief and focussed on one particular theme. For example, the homepage now has a focus on presenting her demo reels and copy-text that’s supporting her demo-reel presentation.

The homepage’s new structure could also work well for her other sub-pages:

In this version of her homepage, the call-to-action for the reader is to play her demo reels. That’s it. Therefore, it could be smart to add a link called “Hire me” below the demo reels, pointing to her contact page.

💡 Note: In addition to the main font (Proxima Nova) I also used PT Sans to display the timestamps of Jennie’s reels. PT Sans almost has the “computery” look of a monospaced font, in which every character has the same width. Monospaced fonts are also called fixed-pitch, fixed-width, or non-proportional fonts.

Final step: An updated daytime color scheme

The new dark-mode colors got me thinking, so I decided to opt for a new color scheme for the daytime readers:

Yet another updated color palette for Jennie’s homepage
Yet another updated color palette for Jennie’s homepage

Maybe it’s just me, but applying colors consistently (as defined per your color scheme) makes her site just so much cleaner and easier to look at.

Jennie’s website has become eye-candy, a visual pleasure to look at.

Blue is gone, green is now the main background color for Jennie’s daylight homepage design (inspired by the green in her eyes)
Blue is gone, green is now the main background color for Jennie’s daylight homepage design (inspired by the green in her eyes)

Pay attention to how I used the yellow tint, as opposed to white, for the right side of the box’s background because a) this type of yellow is a warm tone that reflects her warm skin tone, and b) the copy starts with “warm,” and now copy and colors go hand in hand.

Big takeaways from Jennie Dyer’s landing page

  1. Start with the core benefit. The top headline states a benefit, a curiosity, or something else that grabs the reader’s attention like a dichotomy in which two things seem to oppose each other, for example, “More Money Robs You From Opportunities To Personally Grow.”
  2. Your homepage is not an about page. A reader usually lands on your homepage first. There, talk about yourself only to a degree that helps your bottom line and your call-to-action.
  3. Does your website work in black and white? Make your website accessible to visually impaired readers. Take a screenshot of your website, turn it into a grayscale image using grayscale.imageonline.co, and examine the difference between black and white, i.e., the contrast. The higher the difference between white and black, the higher the contrast, and the more readable your website is.
  4. Match the colors in your photos with the colors on your site. Choose a headshot of yours that you like best, upload that photo to imagecolorpicker.com, then pick a spot in an area of your photo where a certain color tends to dominate. Or, pick a color that clear stands out, e.g., skin color or the color of your eyes. A mixture of these selected colors can help you define the color palette of your website. 💡 Extra points when a color matches the words you wrote.
  5. Have a clear call-to-action. Something like “Get a Quote,” “Hire me,” or “Work with Me” will do.

Something unclear?

Get your question answered by joining the conversation on Twitter—just click one of the two images below:

Bad example of a first impression as a voice actor
Bad example of a first impression as a voice actor
Good example of a first impression as a voice actor
Good example of a first impression as a voice actor

What to do now

Hire me to make the copywriting on your landing page shine bright.

Or…

Subscribe to my private email list so you can watch me build my dream storytelling company:

    With the money I’m making with copywriting, I’m building my dream company, so…

    You get to see the latest high-quality story productions, the progress I made with susé patrola (my storytelling company), and my blunt journey as a creator and small business owner.


    you just met naii.io - I invent, act, build susé, travel, and write.

    naii.io is your calm spot at the intersection of productive art and human creativity.

    Adventures for Bold Storytellers.

    It’s only you and me, you’re 👩‍🍼safe.