Broadnet Corporate Website
Launching A New Brand
Broadnet had big plans to break into the digital communications arena in 2016 but first needed to overhaul their long outdated website, creating a new digital brand in the process.
Building a Digital Brand
The original branding was created in 2010 using single color schemes, cartoon imagery and fonts developed primarily for print. I saw the digital brand as a blank slate ready to be modernized.
Typography
The original branding was created pre Google Fonts and well before web-safe fonts were a thing. I chose to use the bold, condensed, sleek looking Oswald for headings and the sans-serif, “modern, yet approachable” Roboto for content.
Color Schemes
Up until my branding update, Broadnet used one color across all of its products and features – blue. Understanding a need to add variety, I gave each of the three main products a unique color while still maintaining the legacy blue for Broadnet’s global branding.
Imagery
Transitioning from primarily phone events to events held across phones, tablets, and computers gave me the opportunity to replace current cartoon imagery with actual people using different devices. Much like I created unique color schemes for the three main products, I also paired each product with a unique image, creating immediate product recognition.
Additional imagery used beyond the three main products would adhere to two main principals: no cartoons and no cheesy stock photos. I wanted the imagery to look realistic and relate to the products while visually showcasing how far reaching the technology could be.
Layout and Navigation
Once the digital branding guidelines were set, it was time to tackle the site layout and navigation. A primary complaint from the past site was that they tried to explain every product, feature and benefit in great detail, rather than focusing on the overall goal of being able to reach your entire audience. By focusing the content and creating clear calls-to-action, Broadnet saw a significant increase in the time users spent on the site and also in the number of demo and sales requests submitted.
Navigation
Reviewing Google Analytics data from the past three years allowed me to determine the most visited and un-visited pages, ultimately compacting the navigation into five main buckets, with only PRODUCTS having sub-categories.
Pertinent company information and login to our client portal was housed in a navigation toggle, making it easy to find common information quickly.
User Interface Design
My goal with the visual design was simple – create a visually engaging experience across all devices and screen sizes, using a variety of interactive design and beautiful imagery, while minimizing text and focusing the content.
Responsive Layout
Building a responsive site in 2016 isn’t just a good idea, it’s necessary. Although the Google Analytics data showed that 85% of traffic was coming from laptops and desktops, I knew from the beginning the site had to be mobile-friendly. Each page was crafted with this in mind, displaying content and images in a manner conducive to the device it was being viewed on.
Visual Interaction
Using hero style, full width videos, CSS hover effects and transitions, I created visual interaction throughout the site keeping the user engaged, even when the content could be a bit dull.
Product Pages
Giving each product a unique look and feel was key to combat monotony and loss of focus. Although the page layout was templated across the three main products, each product page utilized different colors, imagery and content patterns allowing the user to stay engaged.
Development
Broadnet executives wanted the site built fast – like two weeks fast. Given the limited build time, I chose to use WordPress for rapid development and layered a child theme on top, so that I could write custom CSS and JS without the fear of it being overridden during future updates. Pages were built using raw HTML blocks and styled with custom CSS, allowing me to be very specific with my styling while still maintaining design patterns.
On Going Additions
After the initial launch, user data began rolling in and it greatly improved from the previous site. Bounce rates were down over 30%, time spent on the site was up significantly and client demo and sales inquiries were pouring in. Users were more engaged than ever before.
Understanding the success of a well built corporate website, Broadnet asked that I design and build vertical specific and promotional landing pages as well as new product pages, ultimately boosting their online presence and product sales.
Vertical specific landing page created for Education Organizations.