WATCHGUARD WEBSITE

Web Development, Graphic Design
(Case Study)

Client

WatchGuard, a Seattle-based leader in enterprise-grade network security solutions

Role

Web Developer, Graphic Designer
*Work done as a contractor for Yesler, B2B marketing agency, owner of the client relationship

Project Brief

WatchGuard needed to rearchitect and redesign its corporate and international websites to revamp user experience and optimize lead capture

Key Insight

The former website grew so large and complicated that it lacked user friendliness which negatively impacted navigation; the new website should be user-centric and present a clean, simple interface and information architecture to ease the experience and improve engagement

Solution

Reorganize the website’s architecture, polish the design and use a scalable content management system (CMS) to develop a modern website that creates an engaging user experience and easily captures leads’ information for marketing follow-up

Specialties Used

UX/UI design: Wireframes and pixel-perfect prototype comps, mobile responsive layouts, website architecture and site mapping, user-centered planning, persuasive design
Graphic design: Banners and ads, landing page and email templates, design composition
Web development: HTML5 front and back end web development, CSS3 modules, JavaScript snippets, Marketo Design Studio for emails and landing pages

Technologies Used

OmniGraffle
Adobe Photoshop (Adobe Creative Cloud)
Adobe Illustrator (Adobe Creative Cloud)
HTML5
CSS3
JavaScript snippets
Bootstrap
Drupal
Marketo
Tower Git
Acquia


Results

WatchGuard

Alejandro = clean, fresh, smart, responsive, perfectly crafted web design. He's a complete pleasure to work with and an efficient, resourceful asset to any web development and design effort.
–Kerry Desberg, Global Director of Marcom, WatchGuard

Process

For this large web dev project, I began with developing a good understanding of all the information available to website users and focusing on knowing the company, products, customers, and selling processes.

The existing site was very robust, surpassing 500 pages of new and legacy product technical information, service / support content, white papers / case studies / videos, partner portal, international / localized websites, marketing

Content & Architecture

Partnering with WatchGuard’s Global Director of Marcom and the project lead at Yesler (the B2B marketing agency managing the project) extensive user-centered planning was done to review content and optimize the new architecture.

Using UX/UI design principles and best practices, I laid out detailed site maps illustrating the entire experience. The site maps played an even more important role because Agile methodology was used to develop the website and the maps were continuously updated to keep track of the completion status of each page. At the same time, they provided a broad visual of the website and its deep linking relations. User error conditions and tracking issues were solved at this point.

Critical project milestones were set based on a phased approach to roll out the project in three stages over one year.

WatchGuard

Homepage Design

One of the first strategic decisions for this website was to choose a content management system (CMS) that was robust and scalable enough for a website that would eventually have hundreds of pages. Drupal was chosen because it is one of the most malleable systems and can be fully customized.

For the design itself, we agreed on a very minimalistic look; simple with just the right information and easy to read with an open design concept that aligns well with the branding vision. Increasing engagement with as little demand on the user as possible was a driver of a key decisions made.

The design rationale, in summary, proposed:

  • A fully mobile responsive website to provide a device-appropriate experience.
  • Attention to typography, color, and graphic design fundaments to minimize effort on the user’s end and make navigation easy.
  • A thin, sticky header with a menu system that looks simple but that offers users paths into many types of information when triggered, very important due to the huge amount of pages and the need to surface them all to a level of navigation that was easily accessible to users.
  • A slider as a main / hero banner that offers the marketing team a vehicle for showcasing the latest products and news.
  • A section to feature the main hardware product lines plus a “Help Me Choose” call to action for users to compare hardware and rapidly make buying decisions.
  • A section to publish the latest product launches and operating system updates.
  • A comprehensive footer providing users quick paths into the most important pages on the website. Also included is a quick “About” snapshot for reference as well as contact information and social media channels to provide the user with more ways to engage.

The homepage was wireframed and, after iterations, agreed upon with marketing, product, and sales stakeholders. Next, the design was laid out in Adobe Photoshop and again vetted with project stakeholders. When the final design was approved, I developed it on the CMS.

WatchGuard

Inner Pages

The site mapping exercise proved very useful for information architecture purposes. The pyramid structure we had meant that information was organized top down, allowing the user to dig in progressively. Every page offered next steps for the user to take for continuous, uninterrupted engagement.

Outlined title sizes were carefully chosen for easy, clear reading and an intuitive understanding of content hierarchy and relations. Iconography was added using a combination of the Font Awesome icon set and custom-made icons. Very subtle light grey lines were used to divide content and discreetly create structure. Uncluttered and minimalistic interfaces were used to protect balance because the brand’s bold red color had to be used carefully; too much red color in interfaces on a white space could result in visual heaviness that weighs down the user’s experience.

WatchGuard

Layouts & Templates

After studying the content to create scalable layouts that could be rolled out across the site, eleven page templates were built each with a distinctive set of options for content arrangement. Visual design was very important and every content block was strategically planned to guide the user through the content and help them identify and differentiate types of information and understand where to go next at any moment.

WatchGuard

Development

Due to the tight timeline of the project, it was decided early on that we would take advantage of working with a Drupal theme to save time, but that the theme would be heavily customized as needed to achieve the desired results. The theme selected was heavily built on Bootstrap 3+ for Drupal 7.0+. Due to the heavy customization required I:

  • Modified existing front end CCS3 to change the look and feel of the website
  • Added new CSS3 files to add elements that were not incorporated by default
  • Implemented an entirely new menu system using MD Megamenu, as the native menu did not do what was needed, and customized it 100% on the front end
  • Included and designed new Bootstrap components to create non-native options for dropdown menus, buttons, modal boxes

Initially, the environment used for the development process was a LAMP (Linux, Apache, MySQL, and PHP) stack I set up locally. Then, in later stages, development, staging and production servers were set up and that workflow was used to work on and then deploy the website.

Grid & UI Responsiveness

The previous version of the website was not responsive; this had to be changed to deliver a mobile first best practice experience. For the new website, I arranged the content using the Bootstrap framework to develop responsive, mobile first pages; it was a valuable tool to develop pages efficiently and scalably. The Bootstrap 3 retina-ready, 12-column grid system allows for easy scaling of the proportions of the key contemporary devices: desktop, tablet, smartphone.

WatchGuard

Colors & Typography

The brand’s core palette consists of four colors: red, black, gray and crimson. Colors were used according to branding guidelines and the use of the bold reds was carefully balanced against the white space.

WatchGuard

For fonts, the Raleway and Open Sans font face families from Google Fonts were selected because they are modern, thin, look good together and would support the cleanliness of the design. Only two fonts were selected, as a best practice, to keep visual noise and hierarchy under control.

Raleway is an elegant sans-serif typeface family. It was used in all titles.

WatchGuard

Open sans, another sans serif typeface, was used on all contents and menu items. Its neutral, friendly appearance is easy to read and because it has been optimized for print, web, and mobile interfaces it has excellent legibility.

WatchGuard

Landing Pages & Email Templates

New responsive landing pages and email templates were designed and developed for implementation in Marketo. Both assets were built out using B2B marketing best practices and a strong push to guide the users to the desired calls to action. These assets were used in combination with the website to capture lead information and follow up with leads.

In addition to standalone landing pages, a number of forms were incorporated into select pages using Marketo Forms 2.0 scripts to capture user information for follow-up.

WatchGuard

International Websites

In the back end, content types were architected in Drupal by Fuse IQ, who partnered with Yesler and me for the project. With the structure set up, I developed the nine localized global websites for the project, working on banner designs and migrating copy provided in Spanish (Latin America plus Spain), Portuguese, German, French, Italian, UK English, Dutch, and Korean. I collaborated with field marketing managers to test the site and make changes in preparation for deployment.

WatchGuard

Today, the corporate website designed and developed for WatchGuard is live and with the enhancements delivered user sessions, user visits, page views, average pages per session, bounce rates and first-time visitors metrics have all improved. Engagement increased and more leads are generated now than in the past. The project was delivered on time and within budget.

WatchGuard
Back To Top