As the face of your website, your homepage is the start of so many new journeys. It’s the same for small businesses and for global organizations alike — as is the need for keeping homepages fresh and relevant. But what’s the best approach, and how do the larger organizations do it?
Well, what better way to show you than to take you behind the scenes of our brand new homepage.
Let’s have a look at how our superhero team — made up of designers, UX pros, wordsmiths, developers, SEO pros, and project managers — gave our homepage a brand new facelift. And while we appreciate that you probably won’t have the same resources at your disposal, hopefully you can find some ideas, insights, and inspiration along the way.
Starting with a Clear Plan
Tempting as it is to dive straight into snappy taglines, designs, and illustrations, it’s important to think about how and why you’re updating your homepage. Needing to refresh old designs is totally fine, but a homepage update is also a great opportunity to make sure your website truly reflects who you are and what you offer. It’s also a good time to examine how to put the customer at the center of your thinking.
So, start by creating a hypothesis: what are you trying to achieve, and how will your new homepage achieve it?
In Namecheap’s case, members of our crack user experience (UX) team began by researching and analyzing different approaches behind the scenes. This was based on a number of data sources including customer surveys and previous A/B and variant tests carried out across our website.
The result was a hypothesis focused on proving the following: that providing more relevant information about Namecheap and our products upfront will increase the level of visitor confidence, engagement, and conversions.
So, essentially, our homepage needed to reflect who we are and what we offer (and what customers are looking for) more clearly.
Our homepage UX leads, Helena Andrade and Jessica Leão, explain:
“We wanted to welcome our users to our website by showing all the ways we can help them to build anything they need. Everything on the homepage was based on information and data we got from our users, as well as our own UX testing, which was designed to improve access to information and to update and improve our design.”
Putting the Plan into Motion
Creating and testing a successful homepage obviously means bringing together lots of different disciplines, such as UX, copywriting, design, SEO, and development. Not to mention awesome project management to keep it all on track.
Each discipline needed to work together for the common goal, but also had particular areas of focus and challenges along the way.
Taking It From the Top
If a homepage is the face of a website, then the top section (or header) is its eyes — it’s the bit we all look at when we first meet it. That meant we needed to make sure our header was working hard to do everything we wanted — and what you need it to do as well.
The UX approach was to simplify the look and feel as much as possible. This meant a larger domain search bar and a simple toggle to help segment those looking to either register or transfer a domain. The area was also decluttered of extra messages to offer visitors a clear and more instinctive experience.
The main headline needed to have more than one function too, and this presented a unique set of challenges.
As Director of Content Richard Adams explains:
“The main aim was to show Namecheap as more than simply a domain provider — we’ve grown and so has our audience. But we needed to avoid simply describing ourselves. It was about showing what the customers can achieve — inspiring rather than just explaining.
As we wanted to keep copy to a minimum, even the words within the search bar itself needed careful consideration. The line needed to help make it clear that finding a domain is only the first step to more, i.e. ‘Bring your ideas to life >>> Search domain names to start’.”
Bringing graphic design and illustration alive was down to Creative Lab Director, Andreea Constantinescu and her team — which also needed to solve a few creative puzzles of their own, as she explains:
“The most challenging part to get right was the header image. Our goal was to keep the message clean and simple, while also creating a beautiful contrast and wide space that relates to the infinite ideas and possibilities. At the same time, it had to integrate the most important element — the search bar.”
Moving Our Best Offers to the Front
The next section of the website is actually about more than simply showing ways to save money. While value is always important, this part was equally about showing our customers the breadth of products available in a more straightforward way — testing our UX hypothesis in its truest form. Life’s easier when everything is in the same place, after all. This way you get to find what you need, and at the best prices.
As Graham Wood, Director of Brand and Product Marketing, says:
“With the new design, we wanted to put all of our cards on the table, and by that I mean really showcase the full range of products and solutions that we provide to different types of customers — and all of this with a crisp, clean look and feel.”
Keeping the Story Going
With a hypothesis focused on offering more relevant information to our visitors, it was important to go deeper into our core products and services. But it was equally important that everything felt bite-sized and easy to digest. The initial UX designs and layouts helped clearly define this approach, but it was a sentiment echoed by every member of the team.
As Andreaa puts it:
“We aimed to combine design, content, and illustration to create a wonderful new user experience. Throughout the whole page, each section needed to strike a balance between content and visuals, and look great without being distracting.”
Vital to this approach was to a) make sure the content wasn’t too long, and b) make sure it continued the page narrative in the most logical way for visitors.
As Richard explains:
“We wanted to make sure the homepage wasn’t just a set of disjointed marketing messages. It all needed to flow as a mini-narrative, telling the right story to our customers. In this section alone, we wanted to follow the steps customers would naturally take when thinking about or purchasing products: Starting from a domain, to hosting, to professional email, to security, and beyond.”
So Why Namecheap?
Products and services might be primarily what you’re looking for, but we still like to tell you a bit about what we stand for — especially as we find ourselves in an increasingly unscrupulous online world. That’s why we included our ‘Why Namecheap’ section next. We don’t like to simply hide behind marketing messages and great designs.
As Graham puts it,
“Our purpose is opening the door for everyone to a free and open Internet.” That means being open about what your privacy, security, and business means to us.
This section was also a great opportunity for our design and illustration team to have some fun with our characters and animations.
As Andreea says:
“As a final touch to our overall visual approach, we decided to add subtle animations in a way that brings more value to our illustrations and improves the visual user experience. It was also a great way to show off our classic Namecheap characters, but integrate them more than ever with technology themes.”
Helping You Dive Deeper
Next up, we anticipated the most common things you might want to know, followed by links to our blog and a huge wealth of resources so you can continue learning.
The overall goal of the new homepage is to help you on your own journey by putting everything you need at your fingertips. This is all part of the original goal of providing more of the relevant information you need upfront.
Keeping Everything Google-friendly
A big part of updating major parts of our website was making sure we didn’t go racing down the Google rankings. Fortunately, we have a skilled squad of SEO experts able to help apply the brakes. Along with the Content Team, they faced some interesting challenges around some important keywords.
As our Senior SEO specialist, Sergey Romanov, says:
“We needed to showcase a broader product portfolio to our visitors, but not lose our high ranking around major keywords and phrases like ‘Domain name’ — our traditional primary product. This meant looking closely at how we could plan and create optimized content, without diluting the new purpose of the homepage.”
With some smart SEO trickery and more than little creative wordplay from the content team, the right balance was found throughout. Google would be as happy as we hoped you and the rest of our customers would be.
Bringing It All to Life in Development
Of course, creating the look, feel, and voice of a homepage is only half the battle. Advanced elements like animation can place a heavy burden on developers. Site speed is also a major factor. Slow loading times simply won’t do for a global tech company.
Always willing to rise to the challenge, our elite Dev Team called on all their technical wizardry and problem-solving skills to make it all work.
As Product Platform Team Lead, Artem Zakharchenko, explains:
“The biggest challenge here was making the page lighting fast, keeping in mind the amount of products and information it holds. Add things like animated layouts and it looked almost impossible to keep the speed up. But the team did the almost impossible, finding ways to prioritize the loading of more important content first. That way, the customer experience doesn’t suffer”
Testing, Testing!
Of course, all this was based on a hypothesis. We still needed to see if our new homepage would really chime well with you, our customers. That’s why we spent a large chunk of time A/B testing it. Analyzing and optimizing to make sure it was all coming together how we planned — and that visitors like you were getting a better experience.
And… drum roll… it worked!
Take a look at a few of our heatmaps showing visitors engaging with more parts of the page — getting a greater sense of what’s available for them. You were clearly looking for more!
Final Thoughts
Hopefully, all this has given you some food for thought when it comes to your own website. You may not have all the in-house expertise we do, but with good planning, testing, and a customer-first approach, you should see your homepage and website take a giant leap forward.
We’ll leave the last word about our new homepage to Graham:
“This is an update that’s been a long time coming and we’re delighted with the end result — and hope our customers are too!”
P.S. The results of our testing and analysis suggests that our customers are really happy, but we’d also love to hear your thoughts on our new homepage. Please leave your comments below. Feel free to take another look too.
The post How to Create a New Homepage Just Like We Did appeared first on Namecheap Blog.