When I joined Taplytics (an A/B testing, experimentation, and marketing automation platform), one of my first priorities after overhauling the product itself, was to update the company’s website. Their old site was very plain, visually inconsistent with the product, bloated with endless and redundant content, and didn’t do a great job explaining what our product actually did. Working with the marketing team and senior leadership, I began with a detailed strategy and prototyping phase, then developed a new style direction and brand guidelines, and created responsive mockups that were handed off for development using Wordpress as our CMS. Over the years, the site has evolved and grown beyond the initial release, but it’s still going strong and bringing in leads.
Project Date
February 2019
My Role
Led design & strategy and assisted in project management.
Working alongside the marketing team’s copywriters, I developed a comprehensive site structure for the new website and detailed wireframes that focused on presenting clear and concise content in engaging ways. Organization was key as the previous website wasn’t particularly easy to navigate and left users unsure at a glance what products and services Taplytics offered. We also wanted to place a greater focus on using visuals to explain the product and social proof to show the product’s impact for our customers.
Here are few selections from the wireframes I put together (Home, Platform Overview, a couple Product pages, Pricing, & About/Careers):
Style
Style Tile, Brand Guidelines, & Icon Collection
Stylistically my approach was twofold – I wanted to visually connect the website to the product and also give the brand a distinct and unique look that would help to differentiate us from our competitors and other tech startups. The old website used essentially none of the visual elements (colour, typography, icon style, etc) used in our product, making the disconnect between our marketing site and our dashboard very apparent.
Though ultimately the decision was made to not update our logo, everything else was fair game for a refresh. My focus was on making the site feel very energetic and bold while feeling established and confident. For typography I paired a bold headline font (Poppins) with a highly readable sans-serif (Open Sans) for body copy. I wanted headlines to be attention grabbing and modern and body copy to be easy to read and also consistent with what we used in the product. I took the basic purple colour palette from the product and fleshed it out a bit further to make it feel more dynamic and added a variety of accent colours (yellow, light blue, orange, and pink) and secondary colour schemes that would be used to help separate different sections of the website.
Once the style tile was approved, I built detailed brand guidelines and a comprehensive collection of icons.
Here are a few sections of the style tile and brand guidelines:
Design
Responsive Mockups
After the overall style direction was set, I developed full page designs for large and small screen widths. I wanted the site to feel exciting and engaging and to make use of visuals as much as possible to help explain our product. In pairing bold sections of colour with large, open sections of white, the site is both impactful and dynamic like our product but also clean so that copy is easy to read. Colour was also used to differentiate sections of the website and separate the different parts of the product.
Content-wise, my main goal was to keep the site intuitive and organized, while keeping copy concise so that users would be able to find exactly what they were looking for as easily as possible and reach out to us quickly if interested in trying our product. The site was also designed with experimentation in mind. We wanted to be able to test out different imagery and content without breaking the structure of the site so it was built with flexibility in mind. Since launch, the site has run a variety of experiments to help determine what works best and leads to more engagement and customer buy-in.
Here are a few of the screens that I designed (Home, a couple Product pages, Platform Overview, Pricing, and Careers). I also included one of the many landing pages that I designed and built in Webflow at the end:
Results
Increased Traffic & Qualified Leads
After launching the new site, we saw significant increases in traffic and engagement from visitors to the site which resulted in a rise in qualified leads and product demo requests. We also received a lot of positive feedback from existing customers about how they found the new site much more helpful. Since the initial launch the site has grown and changed in a variety of ways with the addition of a new resources section, new solutions pages, and a variety of experiments that display different content for different users.
Design, Strategy, & Project Management: Trevor Davson Copywriting: Taplytics Marketing Team Development: Peter Toi
All work completed for and owned by Taplytics Inc.
