Aprimo website

The Overview

This marketing software website was developed to showcase two different suites of products, B2C & B2B. I worked on the architecture and wireframes, then did the production and annotations for the visual design. This project was waterfall, yet only took one month from conception to launch with a four person team.

The Details

Client : Aprimo.com
Tools : OmniGraffle, Photoshop
Role : Senior User Experience Designer & Production Designer

Inception

The client was looking for a website redesign that better expressed their brand and featured their breadth of products. Honestly, when I heard that the client wanted the site done in about a month, I laughed. There wasn’t time to be scared, so I cleared my plate and rolled up my sleeves.

Approach

Because this was a redesign of a marketing website, the audience was already known and their motivations for coming to the site weren’t complicated. We also knew what the business needs of the client were. There was little time for discovery beyond learning their current site, products and marketing materials.

Sitemap

I had their current site as a starting point for the site structure. Not much was changed in the sitemap, though their products were broken out more clearly as B2B and B2C. The sitemap was revisited after wireframing though. The website was being built as page templates, so the templates were indicated on the sitemap to provide a visual representation of template distribution.

Each section of the website had a different color on the sitemap. It was helpful in staying organized, made conversations easier, and allowed the client to quickly understand the structure. Each page had a unique number for easy reference with the content deck. The page template being used for each page was also indicated with two letters.

Aprimo offers integrated marketing software products for both B2B and B2C use. In addition to their primary product line, there are secondary, supporting products packages. Part of our role was to work with their product managers and align to their product strategy, while differentiating their products.

Wireframing

The wireframes were created in several passes. Because the pages were being made from templates, I noted out repeated elements for myself as I designed. As I progressed, I would see instances where a slight modification could be made that would reduce the number of templates. As a result, I made multiple passes as I worked. It was cumbersome, but worked in the timeline due to the team size & proximity, and the intermediate size of the website.

The client wanted to clearly differentiate their products for B2B and B2C. The product hub page was blocked out symmetrically to give equal real estate to the two halves. We also prominently placed a module linking to their solution-focused product marketing.

This is one of the more common templates that was used in the site. When it made sense, I used actual site content to understand how repeating elements would behave. This layout is simple to feature the copy while giving room for cross-selling promotions. The product demonstration and contact button are very prominent because the client expected ample new user traffic from an upcoming conference.

Visual Design

The creative director and I shared a quiet office during this project and that made discussions between us very easy and happily cut down on outside distractions. As I would finish a template, I would hand it off and answer questions immediately. We were better able to pace ourselves so that neither one was waiting. We also kept each other sane and supported during the long, long hours. He did an outstanding job on the design and an accompanying campaign.

Product Overview

The final eye-catching design for the product hub page still splits the page in half, but gives ample real estate to branding imagery and messaging. The design married perfectly into the campaign concept that launched at the client’s big conference.

Specifications

For this project, the timing was very tight and the team was small. Thankfully, since it was a rapid waterfall process, I was able to help our team out in a second role by creating tightly-defined production specs for the designs and templates.

Navigation

As part of the production specs I outlined the UI states for the main navigation. I also produced the digital assets, so the filenames were included.

Header & Footer

Some global site components are defined here. We had worked with the developer on many project previously, so I was able to provide only the information he needed. That helped speed up the annotating.

Promo Modules

There were many sidebar promotions in the site. So elements were standardized for faster coding and implementation. Even the filenames followed a system to help group files logically in the directories.

Video Assets

Video assets were heavily used in the template landing pages, so sizing, placement and usage were noted out for their video producers.

Development

Specs and assets were handed off in batches to our developer. Global elements first, then repeated components, then unique pages. The team managed to keep up our breakneck pace throughout development. Our coder worked long hours and delivered work in batches, which worked well for QA. The only downside was that the backend system used to create the templates and fill them with content was slow and temperamental.

Delivery

This project was a grueling experience of 120 hour weeks in the office. Everyone got sick afterwards. The stress and fatigue made us cranky, less effective, and burnt out. I don’t recommend it to anyone.

BUT. We managed to produce an effective website and creative campaign for the client, on time and on budget. They loved it and were appreciative. So it was a tremendous win for our team and agency.