The Wizmo Website

Project Type: , ,
Project Tag: ,
THE GOAL

Update Wizmo, Inc.’s corporate website to a modern design with a strong brand identity.

MY ROLES
  • Website Design & Build
  • Branding (visual, written)
  • Content Organization & Structure
  • Copywriting & Editing

Please Note: All screenshots reflect how these web pages looked the last time I touched them, and do not necessarily indicate how the live website renders now or in the future.

BackgroundGraphicsColorOrganizationLayoutMobile

Background & Inspiration

Wizmo’s corporate website was due for a contemporary update — both visually and in terms of function. The current site did not resize to be mobile-friendly, and the design was a bit long in the tooth.

Because the website was a little dated, I wasn’t sure what to expect when visiting the Wizmo offices. I thought maybe the space and the people in it would be stodgy and old-fashioned. Like the PC guy from the Apple commercials of yore.

Ye olde Wizmo look

I did not expect it to be modern, spacious and filled with natural light. Nor did I expect the pinball and fuzball machines that greeted me upon entry, nor the lifesize cardboard Dilbert in the conference room. A room, might I add, with a decidedly glass + chrome, techdustrial aesthetic that was surely an intentional design choice.

Furthermore, their Chief Revenue Officer described a corporate environment that is quite progressive in its humanity. I got the impression that the Wizmo folks genuinely care about their customers’ success, led by a C-Suite that values the cultivation of a fun and supportive workplace. 

No, this is not a musty old company at all. This business, in fact, has soul. And their branding should reflect as much.

Modern, open and light with touches of whimsy — my immediate impression of the Wizmo offices — inspired me to bring that feel into the website. The client supported this route, with a caveat: whimsy, good; cartoony, bad. Agreed!

A Quest of Graphic Proportions

Sourcing graphics proved to be the most difficult part of the design process. I did not expect such a laborious undertaking, but we were not about to lower our standards. To set Wizmo apart with a distinct brand identity, this aspect needed to be right.

The Photography Dead End

The main reason graphics were so hard is that the industry — Software-as-a-Service — isn’t particularly photogenic. Furthermore, with such a varied client base, there was no way to choose a photographic angle that would resonate with the target market as a whole.

Initially, I thought maybe photos or video loops of server rooms would be cool. But I soon discovered they all look foreboding and cold, definitely not the connotations to give potential customers. It’s uninviting. And inaccurate, besides.

The clients weren’t into the idea of bringing a photographer to their office space, camera-ready as it may be, and I couldn’t find a suitable number of stock work-y/office photos that weren’t obviously staged. Phony implies inauthentic. Also not a Wizmo brand value.

 

The Illustration Journey

So the search continued until I was able to find enough flat, linear drawings and icons to complement the written content. They were carefully sourced from two different stock sites with a high priority placed on maintaining cohesion. In the end, while the illustrations are not all exactly full siblings in terms of style – they’re solidly in first-cousin range.

what a happy page header

 

a SaaS-specific icon, oh my

 

pigmentation, please

 

Then it was just about recoloring the vector files in Adobe Illustrator with the Wizmo palette. All illustrations were exported as SVG files, which are light-weight, fast-loading and brilliantly crisp.

The Home Page Hero Saga

The website was nearly finished before we found an appropriate “hero image” for the top of the home page. It’s, you know, only the most valuable real estate on a website. After scouring hundreds of illustrations and photographs, and with the customization process underway, I finally encountered the perfect image. A photograph, as it happens – the only one on the site.

The image works because it combines photography with illustration in a style very similar to the rest of the site. Even better, the color palette matches beautifully, no Photoshop manipulation required. The staging is not cheesy or generic, and multiple skin tones are represented. The client loved it. I loved it. We had a winner.

I knew the muses would lead me to the ideal image eventually. I do wish it would have been sooner in the process. But those babes do NOT take kindly to demands.

Color Addiction is Real

A Palette that Pops

It’s no secret that I’m a color junkie, but it’s not a predilection I expect of clients. Plus, I appreciate more styles than not, and enjoy the opportunity to create with ingredients I wouldn’t necessarily choose myself.

All that said, when the client – pleased with this bright palette early on – declined my offer to present a muted, traditionally corporate version, I happily pocketed the decision and ran with it. Even after months of daily exposure, I still experience a boost of cheer seeing these colors play together. (I’ll take all the cheer I can get, thank you very much.)

red

gold

green

aqua

indigo

Altogether, the palette contains seven colors, which is…more than enough. The five main colors pretty much need to be used together in order to communicate a consistent visual identity.

The two additional varieties of blue can be supplemented when the occasion calls. For instance, it was nice to have more than 5 colors to work with when coloring the artwork.

sky

blue

 
Getting the right shade of green — not too yellow, not too blue, not too lime — took some trial and error. I used the Adobe Color tool to help narrow down shades. Green, I decided, would be the primary action color used for links and buttons with aqua as the accent action color for hover effects and the like.

no

no

no

yes

 

The Text Color Sidekick

In choosing a color for the icons, I found that indigo pops best next to black, yet is still dark enough to be readable. This is true both on the screen and in print.

 

 

Visual Climate Control

Balancing the color temperature across the website creates a consistent aesthetic. For example, going heavy on the blue would make the whole place feel too cold. As such, those pops of red and gold are important and their placement strategic.

 

Everything in its Right Place

The content on the old website was quite informative and well-organized. Some areas were outdated, and there was a bit of redundancy, but altogether, I had a great starting point. Being a brochure-style site also limits the volume and complexity of information, which keeps the information architecture process simple.

Structuring Content: Deciding What Goes Where

After combing through the old content, followed by a bit of consolidation and reorganization, I decided on the following informational hierarchy:

  • WHO WE ARE  (professional qualities, corporate values, leadership)
  • WHAT WE DO  (specifics of working approach, product details)
  • PARTNER WITH US (services provided, levels of engagement, working together)
  • LEARN (SaaS 101, separate pages with specific topics)

This screenshot mockup of the main menu shows how the pages are organized within the site.

 

Guiding Users through the Site

Each page ends with what I call a Wrap It Up Section that includes one or two calls to action. Much consideration is given to how users should flow through the site; none of these buttons are placed willy nilly.

Pages that describe specific services are more assertive in encouraging contact. Most other pages offer two options, either continuing right along in the path toward communication, or slowing down to collect more information first.

To further increase exploration of the website, the top-level main menu items are repeated in the footer.

The Laying Out of Pages

It’s always my goal for people to actually 1. read the copy on the sites I design/build, 2. be informed by what it says, 3. act on what it says, and 4. *gasp* maybe even enjoy themselves a bit.

An Atmosphere of Ease

Folks are more likely to read if the text does not appear intimidating. This means limiting tall or wide walls of words by separating the content into chunks, then adding subheads, separators and visuals that maintain interest without creating overwhelm.

 

Ch-Ch-Ch-Ch-Chunk it Out

The goal is to organize content into logical, well-organized chunks with descriptive and/or engaging subtitles to help readers scan and get the information they need with minimal effort. At the same time, it’s important not to spread content out to the point that the information feels fragmented or the page scroll turns exhausting.

 

The Grace of Space

White space is an important palette cleanser in any visual design. When used well, it instills a luxurious feeling of spaciousness and calm, making it easier for the brain to do important things like read, absorb, reflect, create and decide.

Since we’re using such a stimulating color palette, white space also helps maintain a sense of professional decorum. Also, on a purely “vibes” level, to me the Wizmo offices felt light, open and full of possibility. White space is the perfect way to bring that climate into a two-dimensional design.

Most pages are laid out with text down the center, alternating white space and illustrations on either side. Horizontal lines separate the content into segments that are roughly the height of a standard monitor.

 

 

 

Tabs are the Answer

Tabs are great for displaying a bunch of related info in a relatively small space. They’re like dresser drawers for web content.

These security practices were initially presented in a clunky old table. The tabs provide an interactive experience that is both pleasant and tidy.

 

Fully Responsive? Fully Required!

In 2018, a website that does not resize to fit many screens will simply not do.

Thus, every page on the Wizmo website looks and functions beautifully from the largest, high-resolution monitor down to the tiny ‘ol iphone 5.

 

The following screenshots show how the layout adapts to just three of several screen sizes. Click for larger view.

 

Your thoughts?