In June Chris Bain, founder of Chatbot Labs, approached us to revamp his business website. The current one was unfinished and generic in appearance. He wanted something branded that would show customers how chatbots can help an online business.
Kelza had dabbled in web design over the years and was eager to give it a proper go. Read on to find out about the new Chatbot Labs website, her first web design project!
Planning the New Website
The main issue at the start was that we knew that Chris was waiting on a rebrand to be finished for his company. We didn’t know anything about what colours would be used, which fonts, and what the new logo would look like.
First, we worked on getting the structure and content together. We used the current branding and images as placeholders that we could replace when the new branding package came through. In the meantime, Kelza got to grips with the software we planned to use before the new Chatbot Labs website went live.
She did her first round of mockups in Photoshop, featuring a hero image on the homepage with a menu at the top.
The three Chatbots advertised on the old website dealt with bookings, FAQs and e-commerce. With this in mind, Kelza chose images surrounding hotels, restaurants/cafes, craftspeople who might rely on online sales, etc. These images were quite busy, so she tweaked the design to boost readability. As you can see in some examples, she did this with subtle gradients and the bold Bebas Neue font for headers.
Kelza styled call to action buttons in a way intended to reflect the current Chatbot Labs logo, with its bold outline and rounded edges.
Checking in With Chris
We built a demo website around the mockups shown above and presented it to Chris. He admitted to us that his product as shown on the old Chatbot Labs website wasn’t quite the reality. Rather than having separate Chatbots, he had one Chatbot that businesses could customise in many ways.
Following this meeting, Kelza created a new sitemap to reflect the versatility of the product, whilst still trying to demystify what they are and what they can do for the businesses who use them.
She tried experimenting with doing a mock rebrand based on the current Chatbot logo, introducing new colours.
These assets did not feature in the final website. Creating them was more of an exercise for her in branding while we waited on the final assets and guidelines to come through.
The Rebrand Comes In!
The Modern World’s rebrand landed, giving us a solid idea of how the final website would look and feel. Using the assets provided to us, Kelza began to push the project towards completion,
The branding package was fairly simple, including a new logo, colours, gradients and a font. It also featured recommendations on styling graphics to reflect the new logo.
Though the package included a logo, Kelza had to fill the gap with her own graphics. Taking the branding guidelines as a brief, she created a series of icons for the new Chatbot Labs website.
Following the rebrand and a further conversation with Chris, Kelza decided to simplify the sitemap. Given the nature of the Chatbot as a singular product with great versatility, she decided a features-focused approach was best for the site structure. She spoke to Chris about which features had been the most popular and emphasised these.
Keep on scrolling for a look at the finished thing!