Latest COS Design Blogs

Designers Blog

How We Did It: Creating a Revamped Website using the COS

Written By Boris Savic on Nov 5, 2014 10:22:00 AM

blog-editorial

 

At Skyhook, we build products that serve a range of audiences - everyone from mobile apps to OEMs to advertising tech companies. We needed a website that allowed site visitors to select into a specific audience and dive into an expansive and immersive story about what Skyhook does for their industry.  

Our main challenge in this redesign was developing a website that allowed us to take control of our content management, optimize for conversions, and improve SEO. Before building our website with HubSpot COS, we were unable to make real-time changes without coordinating with our development team. We needed a system that would allow us to update our website content, manage SEO instantly, and provided responsive framework for a rich mobile and tablet experience.

As long-time users of HubSpot for our online marketing platform, it was a perfect opportunity for us to revamp our website using the HubSpot COS.

responsive-1

HubSpot’s COS Solution

If we could sum up what we love about developing our website with HubSpot in one statement, it would be that our marketing team is able to create a sophisticated site without getting bogged down in code-level technical details.  

One of our unique requirements for the new website was to create a simultaneously scalable and modular set of page templates.  With HubSpot, it didn’t force us to modify our normal creative process. The modular approach, from wire-framing, paper-prototyping, to design and execution is very much in our core; HubSpot’s apps are set up to share the same philosophy. The variety of available module types, from Rich Text and forms down to custom HTML made our redesign significantly easier. 

We love our newfound ability to make real-time updates and easily create additional custom modules. Now we can focus on optimizing our messaging and our landing pages using HubSpot’s A/B Testing. 

Unique Design Features We Created 

Sub-Navigation

We used the HubSpot COS to create a way for our audiences to navigate our unique pages through a step-by-step story. Each page is designed to depict specific use cases and explain products that will fit best the vistor's needs. Persistent sub-navigation will appear as soon as the user starts scrolling, with various modules on each page, the visitor can quickly jump ahead to any part of the story that appeals to them.

Product sub-navigation also incorporates Skyhook iconography to give visitors a mental map of where they are on the site and allows them to easily find key pieces of information that they are looking for. Without sub-navigation, as shown on the left, it was more difficult for our customers to find key product information. Now as shown on the right, we created sub-navigation panels so that our customers can find important pages faster. 

use_of_sub-navigation

Icons 

Our use of icons throughout the website is consistent for each of our products and delivery methods and we use them to establish a language to easily communicate about our technology in an engaging manner. With the COS, we were quickly and easily able to add new icons seamlessly throughout the site. 

use_of_icons-1

Parallax Scrolling 

To continue our goal of delivering a compelling story for our audiences to navigate through, we used parallax scrolling to create an immersive experience where the product and themes follow the user as they scroll down the page.

Advertising_Audience_Page

2-Step Forms

Based on past data from our old website, we know that our site visitors are more likely to convert on forms that ask fewer questions. So we employed a 2-step sign-up design form process. Our website landing page forms asks only for an email address. The second step directs visitors to a second form where they can tell us more – if they choose. This process lowers the barrier to entry for visitors to learn more about our company and get placed in our marketing database, but it also qualifies visitors who are truly interested in buying our products.  

2Step_Forms

What design elements has your company website used to tell its story?

Subscribe to Hubspot's Designer Blog

 

Topics: Customer Story

Boris Savic

Boris Savic is a Creative Director at Skyhook Wireless. During his 20-year career as a creative, educator, and UX designer, Boris has seen many design and technology trends come and go, always seeking new ways to surprise and delight the user, one interaction at a time.

Search HubSpot Designers Site