I had such an AMAZING time designing my latest website for Peter Kearns!
Peter is an expert Amazon consultant who needed his website to reflect his professionalism and experience for his corporate brand clients.
His old Squarespace website was an eyesore for him, and he was ready to finally be proud of his online home!
If you want to dive in and read the whole success story, keep going.
Or else you can check out the portfolio pictures here and the live site here.
See the website design story for Peter Kearns by Ali Rand. #webdesign Click To Tweet
Project Overview
After years of Amazon seller experience and working for Feedvisor, Peter Kearns started doing Amazon consulting for clients. He had built up relationships with the brands he worked for and had gotten a lot of consultant work very fast.
So he originally needed a website to promote his services, and wound up with a Squarespace website. However, its design was plain and boring and didn’t include features Peter needed.
Problem 1
The first problem that stuck out to me was the unflattering color scheme. The oranges weren’t consistent throughout the website, and the medium gray color was not meshing well with the other colors in the palette.
Problem 2
Then, the pages didn’t enough have copy to truly let the site visitors know about Peter and his services. And it was in a boring paragraph format, with few subheadings. I knew we could do better and make his site easy to read.
Use plenty of headings in your website copy for easy reading. Click To Tweet
Problem 3
The last problem I initially noticed was that his site had a lack of images! And it was especially odd for a site named after a person, you know? There were only a couple images throughout the site, so I knew that we could improve the look of his site with his own images or appropriate stock images when needed.
The Goals
- Peter was looking to upgrade his online image and needed his website to impress current and potential clients and make sure they knew he was more than competent for the job.
- He also is a fantastic Amazon speaker for events, so we wanted to highlight this expertise on a Speaker page.
- Peter also needed an active blog that he would use to inform readers about the latest Amazon news, strategies, and Peter’s upcoming events and promotions.
Stage 1: Prep
The first thing my SEO copywriter and I did was get our Website and Business Questionnaires filled out by Peter. This gives us more info on the scope of the project, objectives, and knowledge about Peter Kearns.
We also followed up with phone calls or emails throughout the project to make sure we were all on the same page design-wise.
I then got a list of initial pages written out in my Design Status Google Sheet to track my progress.
Note:
If you’re (re)designing your website, I HIGHLY recommend you create a spreadsheet system to keep track of all your pages and their statuses. That way you can clearly see what you’ve done and what you still need to do. I’d be lost without this system!
And I made a list of the pages in Google Docs where the copy would go for each one. And since Peter already had an existing website, I went through and scraped his original copy into the corresponding new pages.
Once all the copy was organized, our SEO copywriter then began the SEO keyword research and writing of the chosen 5 pages.
And Peter sent me all his current media – photos of him, videos of his speaking events, and other stock images he liked. I was so happy with the quality of what he sent me! He had amazing photos to use that demonstrated his experience and reputation, that I was surprised they weren’t on his current site.
The next step before designing the initial page mockups was to hone down a color scheme. His original website featured orange, a medium gray, and a very dark navy, which looked pretty bad combined.
Peter liked the orange (like in Amazon’s logo) and wanted a blue like Amazon Prime’s logo to further show he was an expert Amazon strategy consultant. And I figured out the neutrals to go with them (instead of clashing like before!).
Then I created the font scheme. Peter liked sans-serif fonts, and we wound up with Proxima Nova as it is a fantastic, clean body and title text.
With all the preliminary steps out of the way, it was time to get down to business and start designing how this website would look (my favorite part!).
Stage 2: Mockups
I used Adobe Illustrator to start creating visual mockups of how his web pages would look.
The menu and footer were created first.
Peter’s original logo was for PKC Seller Advocacy & Strategy.
However, he later decided to just use “Peter Kearns” for his website PeterKearns.com. That way this website highlighted him as the go-to guy for selling on Amazon and speaking events. So I created a clean and sophisticated modern logo for him to use instead of his old PKC one.
Then I chose main links for the other side of the menu:
- Home: A great idea as people will always know how to return to your main page
- About: Always a very important page that is often visited second, so it was second in the list
- Services: A list of Peter’s main services in easy reach
- Speaking: Because Peter is looking to be seen as a thought leader in his industry
- Blog: To make sure visitors can reach his blog easily
- Contact: Always an important link to have within easy reach
For the footer, a simple design was used since his site didn’t have too many pages. And his main social media accounts were added for visitors who want to follow him on Twitter and LinkedIn.
Initial Pages:
Then I got to work on designing the meat of Peter’s pages.
I was fortunate that Peter had so many amazing photos to use of him throughout his website, so I didn’t need to rely on that many other stock images.
So then once I had my images and the copy was completed for each page, I started designing pages on Adobe Illustrator. Click the play icon below to watch a timelapse of designing the Speaker page:
My style uses columns, colored blocks, overlays, and parallax techniques.
Here’s one of my favorite pages, his About page! I loved using icons and featured images and I think the variety of the page works really well.
But for this website, I wanted to go further with video!
Because Peter had such great video footage of him speaking at Amazon or seller events, I wanted to create an impressive looping video background for his home page.
So I used Adobe Premiere Pro to stitch together clips from all his speaking videos to be the background video.
And for Peter’s speaking page, I also created a Speaker Reel video for him to highlight his strategy expertise. This was a fun little project to create an animated intro, flash transitions, and music overlay.
Peter then gave feedback and approved the pages, which meant it was time to go to Stage 3…
Stage 3: The Build
I used GeneratePress and the Elementor page builder plugin to build Peter’s pages.
For this website, it was a little different as Peter had a Squarespace website. So I had to build his WordPress website on his new web host in the meantime.
Which meant that I had to change my HOSTS file on my computer to be able to view my work.
But I love starting from a clean slate, so building his pages was a lot of fun for me!
Most of the build was pretty straight forward. But I also added hover effects to some testimonial blocks and processes to add some animations.
And I made the margins negative on his eBook lead magnet to add interest.
I also built his contact forms and tested they were working properly on his site. And then once all the pages were done, I organized the menu and created the clean and simple footer.
And the last thing I built was the blog! Peter had a collection of his past posts or mentions in an organized Google Doc, so I was able to easily create posts to fill out his new blog. I also installed a plugin that will now publish any future blog posts to Twitter and LinkedIn automatically, which saves a lot of time!
So once ALL the pages were built, I then could finally point his domain to our new WordPress website. That went through very quickly and his new site was live to the world in just a few minutes!
I also installed SSL on his site, since his web host offers that for free. And once the site became HTTPS, I had to re-upload some images as there was mixed content to get that secure padlock icon (yes, I could have skipped this, but I’m a bit of a perfectionist for my clients!).
Once this happened, I was able to do my performance testing to optimize his images and increase his page speed.
I edited his .htaccess file for Gzip, better spam blocking, and browser caching. Then I ran GTMetrix for each of his pages to see how I could increase his page speed by editing his images.
I got his GTMetrix PageSpeed score to A (96%), with a fully loaded time of 2.8s the last time I analyzed his site.
If you want to learn how to increase your websites page speed for higher search rankings and conversions, enroll in my Fast as Lightning Workshop. You’ll have a faster site in just 30 minutes or less.
Client Feedback
Here’s what Peter Kearns had to say about the project and working with me:
What (if any) hesitations did you have before hiring me?
I had hired two other website designers and both failed to deliver on time material that met the basic requirements of the project. I was very hesitant to hire another designer that I couldn’t work with face-to-face because I was unsure their level of commitment wouldn’t be the same as working with someone we could review the project together.
What was life like before your website and what is it like now?
Life before my website was very frustrating because I was embarrassed by my website. It did not reflect the expertise, energy and passion that my company delivers to its clients. The previous site was flat, lacked personality and didn’t connect with people. Ali fixed all that and created something special.
What did you like most about working with me?
Your communication was excellent but your ability to see the project, grasp its concept and then deliver an amazing product with little direction was amazing.
Would you recommend me and my services? If so, to whom and why?
Yes, I have already hired you to build my company website. I’ll have lots of other referrals coming your way, especially if you begin building eCommerce websites.
Conclusion
I just wanted to personally thank you, Peter, for your help in this project. I had an amazing time working with you and your content, and I enjoyed every second of coming up with a design that you love! Plus, you’re an awesome person and it was a joy getting to know you better.
I’m sure this will be the start of a prosperous new chapter in your career and I can’t wait to see what happens for you!
P.S. And Peter, if you’re ever in the Orlando area, let’s grab some za!
Some of the links contained in this post are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.
8 thoughts on “Website Design Success Story: Peter Kearns”
This is great. I really enjoyed seeing how you created your clients website from start to finish. I think you did an amazing job with his site.
I had a look at your portfolio and you’ve created some really eye-catching, high quality websites!
I’ve used Elementor page builder before, and it’s definitely a great plugin to have for building pages on a website.
I feel like I’ve also learnt a few new things I can implement into my own website.
Thanks for sharing!
Hi Stephanie,
Thanks so much for your kind words about my portfolio! And I’m really happy you enjoyed seeing my process and found it valuable for your own website. And always cool to meet fellow Elementor lovers, as I think it’s really the best! Thanks for commenting!
This website is gorgeous! Love your work and your process!
Thank you Samantha! Glad you enjoyed seeing my work and process.
Unstoppable info here. Thanks for this great post. Cheers!
Thanks Rhonda!!
Wow, you certainly know your stuff Ali! The new website make-over looks amazing and so professional.
Aw thank you Caroline!! I’m so glad you like it. Thanks for stopping by.