WordPress Website for BridgetWillard.com
Read also Bridget’s case study on the need and process for the redesign
Before Bridget contacted me, her site looked like what you’ll see in the video below. In it Jocelyn Mozak (Mozak Design) gives some helpful feedback for design, function, and voice/perspective. Of course, all of this is assuming Bridget’s just going to keep her theme and/or do it all herself. (Take note, though. This is a fantastic sales technique!)
Watch the video of the review.
Website Pop Up Review by Jocelyn Mozak for Bridget Willard, Social Media Marketing Pro
Bridget made a lot of the changes Jocelyn suggested, and her site really did look so much better! Of course, her talents are in social media, marketing, and relationship building. DIY-ing website design for her first four years in business had only gotten her so far.
Here’s a screenshot of what it looked like once she cleaned up what she could based on the review feedback.
Site as of April
The Project
She contacted me initially to design a new hero image*/banner for her updated design. That’s the area where you see her tag line, “Your voice. Your power. Your brand.” She wanted a graphic to replace the image of the mountains.
* A hero image is the large image that sits at the top of a website for drama and to grab your attention. I usually contains your tagline or a marketing headline.
I understand her brand really well by now; I’ve known her virtually for almost 3 years and have had to pleasure of seeing her in person at Seattle WordCamps, including watching her give the keynote address. Therefore, I also know her passion and can see her potential. Site visitors need to be able to see not just her but also themselves in this and feel the excitement of working with someone so genuine and passionate.
The process started with a mockup in Illustrator. I always try to show work in context so clients can have a firmer grasp on the final product/design and how it fits into the bigger picture…a newer picture. Therefore, I had to show her what the rest of the page could look like to get her buy-in, which quickly and easily sold her on expanding the request to the rest of the homepage and ultimately the entire site, which will happen at a later date.
The updated hero image
She eagerly added the hero image. Finally! What a huge improvement that simple change made! That’s the power of quality photography. She just replaced the image. She wasn’t able to execute the typographic changes as seen in the above image, so the only change was replacing the background image.
A redesign isn’t about where the brand is today. It needs to be aspirational—communicating future goals for the brand, where it’s going—its vision.
This is a screenshot of the updated homepage. You may also want to visit BridgetWillard.com to see if any additional updates have been made by the time you read this.
The power of quality photography
Quality photography can dramatically enhance good design—a simple change from a snapshot photo to a professionally crafted one in the same design can transform it from drab to fab.
Given her penchant for businesses to showcase the “personality” and the real-person/people in photos on the site, I strategically intermingled the real world snapshots with high quality stock images for both the “Wow!” factor and a personal touch.
I chose stock photos of happy people with fun, exaggerated expressions. Because humans often mimic what they see, the smile of happiness is intended to elicit the same emotion and expression in the site’s visitor—a contagion of happiness. I deliberately cropped each stock photo to eliminate the eyes. The visitor could then only focus on the mouth, which helped to reinforce the desire for a smile. Because the eyes are the “windows to the soul”, we kept those out to help the visitors picture themselves working with Bridget…and being happy! The visitors can more easily insert themselves into the experience with Bridget thinking, “I want to be that happy too!” and imagining what it’s like to work with Bridget.
Contrast
The coy and cherry blossom sketches on the backgrounds for the real word photos were used to carry the Japanese theme from the logo throughout the page. Additionally, these were used to create more interest around the otherwise ordinary snapshots (real person photos), as well as create more drama from the contrasting sections of bright dramatic background colors and slick stock photos.
For now, Bridget’s portrait is a selfie that I edited to remove the background and placed inside an oval. I positioned it just right to have her lovely head peaking above the oval for a more life-like, 3 dimensional effect.
Colors
The colors together, red, orange, and yellow, are the colors of fire. They are colors that have already been part of the brand’s palette. Those three colors touching one another creates a lot of energy! It can even be overwhelming. In fact, yellow is the hardest color for the brain to process. Add that to the cultural connotations for red, danger and passion, and the color orange, enthusiasm and creativity, and you’ve got the Red Bull of color combinations!
The more raw sections with sketched backgrounds (coy and cherry blossoms) and real world snapshots provide a break and contrast in energy and visually. The white sections, teal links, and teal buttons soften the experience by allowing the eyes and brain to rest just a bit between the bright colored sections.
Content Updates
If you don’t know already, you should never proof your own work. From graphics to copy, the more you look at it the more likely your brain fills in the “corrections” for you. Then, you don’t even see them. The same is true about our own services. It typically takes an outside who understands your business to help makes sense of your content for your audience, or ideal client.
What do I pay her for?
If you look at the previous versions of her homepage and look towards the bottom, it’s unclear what she wants the visitors to do and equally unclear what she can do for them. Plus, she’s got lots of great educational content for free.
I took a careful look at those pieces of content and at her services section, which is in the navigation. That’s when I realized we could chunk the content to three sections:
- Done for You, her paid services
- Do It Yourself, a dedicated series of posts on specific topics
- Free Advice (Blog), random posts where visitors get a taste of other topics discussed in her blog
Now, visitors know what they can hire her for or feel empowered to do it themselves by reading the DIY posts.
Moving from mockup to site build
Once she approved my initial mockup (a JPG image), I was able to quickly and easily recreate it using her Beaver Builder page layout builder and a new, free Astra WordPress theme. (Eventually, I’d like her to upgrade to the paid version of Astra so she can have access to the robust premium features.) Because of a few hosting roadblocks, her previous theme, Reykjavík, remained active on the live site. To my surprise, I was able to overcome that particular theme’s limitations with Beaver Builder. It was my first time using the particular page builder. (I’m a huge fan now!) But, to allow for more control on the subpages, I activated Astra and made the appropriate tweaks globally and to the homepage.
Now, the homepage reflects the same level of energy Bridget (You, Too, Can Be A Guru) brings to her projects and clients.
Interesting site stats
The bounce rate decreased by 11% overnight and the time visitors spent on the site increased to more than 3 minutes.
This screenshot of her site’s Google Analytics during a week shows her bounce rate after the redesign was almost 11%.
In her own words
Bridget wrote a case study about the redesign that explains what the experience was like for her, what it means for her business, and what these stats mean.
WP Watercooler / WP Blab
In this episode, Jason Tucker and Bridget Willard discuss the redesign of the site, what her intentions were, what her mindset was, and how it’s changed.
“We know you know your business. You work magic for your clients, maximize their SEO, send amazing drip campaigns, write their content, and even build their site. But what about your own website? The saying about the cobbler’s kids having no shoes is completely avoidable. In this episode, Jason and Bridget will talk about having that objective eye and how her own site has evolved since 2015.”
This is an incremental design project, so it’s just the homepage for now. Eventually, the entire site will be overhauled, and that’s exciting.
Next goals
- Address typography and hierarchy
- Restructure site content
- Mockup internal pages and posts
- Hire Jocelyn to clean up the CSS and evaluate technical issues for improving performance and speed
Is your own Website making you cringe?
Does it communicate your aspirations or desperation?
Is it loading like a drag racer or a tank?
Is the content converting into leads and sales or confusing the visitors?