The Anatomy of a Home Page

Don’t let anyone tell you differently. But a good home page is the equivalent of having a great storefront. It’s usually the only time you have the ability to make your case for your product, brand, music, and so on.

A successful home page should pass the 5-second test and tell visitors right off the bat what you do, what your product offering is and if applicable, does it apply to them or help them in any way? Seems like a big feat right? Well here’s how I’ve approached it in the past. At my last company, I was responsible for the home page and entire site (design, code, test, etc) a total of ten times. Yes, ten I counted all the screenshots I could find. That’s a lot, right? — thank you to Owler and The Internet WayBack Machine for existing and helping me out with screenshots.

I thought I’d do an analysis of the first big web design overhaul I did on my own, from sketch to code to deployment. Ready?

Here we go…

Backstory

When I came onboard the ScriptRock (now known as UpGuard) website was somewhat of a “Frankenstein” site. They had used an agency to do the homepage and pricing page and then did the other pages themselves using HubSpot COS. The overall look was inconsistent and needed a massive update. I was tasked with the opportunity to rebrand and style the entire website. This was my first big project as their newly hired graphic designer.

I approached this project by sketching out the home page and its needs.

While wire-framing the home page I went over what each div section needed to make the page successful while educating the visitor on what ScriptRock does and what the product can offer them.

Gotta love a good pen :)

Breaking it down

The hero section needed a powerful in-house product shot of someone using the product to show the ease-of-use. It needed a good h1 heading not only for SEO purposes but also for the 5-second test. I wanted visitors to know what ScriptRock does as soon as the hero section loads.

The second div needed to draw the eye down with a strong h2 accompanied by well-designed icons that explained the product’s benefits using one word only. I did not want to clutter the area with too much text.

The following two sections were to sell the visitor with an explanation of what ScriptRock is and what it does. I included a paragraph from our sales collateral and product documentation with some “spiced up” marketing language. I was sure to include call-to-action buttons for further education (case studies, integrations, solutions). In the live version I added two more CTAs in different styles for “get started” or “get a demo” just in case the visitor was sold at this point.

The Supported Platforms section was key in educating and convincing the visitor. Since so many companies are tied to legacy software it was important to show what ScriptRock integrates with and works well with. If a systems administrator is scrolling down the home page and sees a logo of something they already use it might catch their eye and encourage them to learn more.

More pen work :)

Social proof was key to driving home the importance of the ScriptRock product so I was sure to include current customer logos and update them as new customers came onboard. This involved bugging the sales team on Slack every second of every day.

Another way to build and ensure trust was with more social proof, this time in the form of a direct customer quote about our product offering. Ideally, we would have liked to include a photo of the individual and the company logo but the logo was all we could muster at the time. The quote is attributed with the individual’s title/role and department within the company.

I wanted the next section to be the final push of TRY OUR PRODUCT NOW! In fact, I heavily A/B tested the next section that included various language from “Try ScriptRock Free” to “Get a free account” to “Login to your free account”. I also A/B tested the “get started” CTA to correspond with the h2.

Lastly, the footer was the bun at the end of a good, meaty (or veggie-filled) sandwich. It needed to include the nav bar structure as well as other popular pages (ie: DevOps eBooks). It was important to include the word “DevOps” instead of just “eBooks” since DevOps was a big traffic driver for ScriptRock.com. The footer also needed to include company links and two logos demonstrating our credibility within the space.

Street cred

The footer wouldn’t be complete without the social account links and blog feed. After all, the blog feed was the biggest traffic driver for ScriptRock.com.

Time for the final product

The final page was built in HubSpot COS. I coded the website, designed the icons, photoshopped the imagery, and used text and copy from various company collateral and documentation. I copywrited (copywrote?) the text when necessary. I also implemented all tracking and analytics to ensure we were measuring each click, scroll, and interaction. As mentioned, I A/B tested when necessary and applied the home page results to the remaining site pages.

We used this home page design for three and a half months and then it was time for a change. We were trying to shift more into the FinTech industry and away from the fun DevOps approach. Each design required the same amount of effort and thought. I continued to wireframe each page as we moved in different directions.

Don’t forget the others

Here are some of the other ScriptRock/UpGuard home pages I did in my time as the website marketing designer and developer.

Just some of the web designs I did for ScriptRock (aka UpGuard) in my time as the website marketing designer and web developer.

Listen to the voices that matter

Designing a good home page that converts isn’t for the faint of heart. It requires proper planning, brainstorming, and listening.

Listening?

Yes, that’s right. It requires listening. You need to listen to different teams and different team members. In the beginning, our team was so small I only had myself, one of the sales guys, and one of the CEOs for website brainstorming and opinions but as the team grew we needed more opinions and eyes on the website. It was vital to our survival.

It’s totally okay to ask for help.

When you’re designing your website, especially the home page, you need to talk to your team members. Talk to your engineers, talk to your sales team, talk to your marketers. They all see the product in different ways. They should be the test subjects for your messaging and iconography. If your engineer thinks your integrations page is shit and explains nothing. Then chances are the page is probably, just that– shit and it probably explains nothing.

The sales guys, specifically the SDRs (sales reps) are the ones you really need to listen to. They are on the front lines of it all. They’re the ones talking to the leads and scouring competitor sites. SDRs know what messaging will resonate and which messaging is pure marketing garbage and trickery. They can tell if your leads are responding to certain messaging, case studies, eBooks, etc. Listen to your SDRs and open up a line of communication. It will really help your web strategy.

Make friends with other team members.

And last but not least, share the work with your marketing team. They can ensure nothing was missed and that everything is being measured properly. They can tell you how the landing pages will resonate on social media and with potential leads. I always made sure to share my gated content landing pages with our demand generation team. They knew what worked on LinkedIn, Facebook, in email campaigns, in promotional efforts, etc. I trusted their opinion and the results spoke for themselves.

Do the work with gusto

In the end, the work will only be as good as the effort you put into it. I know that sounds like something your middle school basketball coach tells you but it is completely true.

If you half-ass your home page or website, it will definitely show. If you aren’t strategic about your layout, call-to-action buttons, imagery, and messaging then your page will not convert. Leads will leave the page long before the Intercom chat box even loads.

So in the end, just remember:

Plan, coordinate, listen, test, implement and then do it all over again.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — A

I’m Allyssa. I am a hybrid designer who likes to front-end code, who loves marketing ops and marketing automation, growth hacking and content marketing. You can find me on Twitter usually tweeting about sports, music and whatever podcast I’m listening to. If you want to chat over email you can jet over to my website to send me a message.

You can view my portfolio over here or over at Behance.

Like what you read? Give Allyssa a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.