- Subaru of America
- June, 2013
If you are unfamiliar with loyalty marketing, here is a baseline description of how Subaru motivates car dealers to sell more Subaru vehicles: Subaru of America offers a program that car dealers may enroll in that rewards them with cash bonuses for every vehicle they sell. The rewards for good salesmanship are pretty compelling, at times even eclipsing their salaries (for dealers who sell high volumes). It seems to be a win-win relationship, as dealers continue to bring in revenue for Subaru and likewise, Subaru is sharing more of the profits with dealers.
Subaru Foundations is a website that Subaru of America uses to help maintain their nation-wide loyalty marketing program. The website essentially provides two services to it’s audience of car dealers. First, it allows dealers submit, track, and claim their rewards. In this respect the website works much like a bank, and is the primary reason why I’ve selected only a select few pages to show. The second service is providing a media-rich library of information about the vehicles, in an effort to make the selling process easier for dealers.
This is what the site looked like when we started the project.
Besides being in obvious need of a facelift, Subaru Foundations produced several problems that needed to be addressed while still adhering to certain constraints laid upon us by the existing specially-built CMS. The problems with the site involved a significant amount of content having been created in Flash, which ran counter to a plan to have dealers reference the site on iPads while out in the dealership, allowing them to answer questions poised by potential buyers more quickly. There were a significant number of usability issues as well, included having very small bits of information buried in tens, if not hundreds of unique pages with no way of knowing where you were in the greater body of information. Ultimately these kinds of problems led to users being reluctant to use the entirety of the site’s resources.
At the outset of this project, my role was Interactive Designer and my responsibility was to take the UX Designer’s wireframes, explore other possible solutions and ultimately design the visual style of the site before it was handed to developers. As a team of UX, Interactive, and Developer, we stripped the site of redundant information, inconsistent visual styles, and the click-heavy experience of the original site. The new visual language of the site was more open, with a more intuitive UX without venturing too far from the established site’s conventions.
Here are the same two pages, redesigned.
So here is where it gets… interesting.
While working through the page designs I noticed an oversight. At some earlier point in the project a breakdown in communication took place and one particular page of the site was treated with a new wireframe like any page should. But this page was unique. It was one of the pages which housed flash content, and when you began to click through the flash element, you quickly discovered it was the lion-share of vehicle information dealers relied on so heavily while making a sale. After a lengthy exploration I discovered several hundred subpages worth of information that were never apparent (nor accounted for) from the parent landing flash screen.
At this point our UX team was tied up in other projects, and so my role in the project quickly pivoted from strictly interactive designer to user experience designer and information architect as well. First, I audited this section of the site to get a full grasp of the destiny of information. By doing this it was revealed that lots of content was unnecessarily sectioned off. At times a link would take you to a page with only a single sentence of content. To fully understand a new vehicle feature or technology, it required a number of clicks rivaling Click-and-Find adventure games. The worst part was that after drilling to the bottom of three or more levels of information, hitting the back button only reset the flash component, requiring you to retrace you steps just to read the next bit of information.
The above image is that of the solution to this problem, adapted from wireframes I created. Rather than have every bit of information separated out, we kept everything on as few pages as possible, allowing for a second navigation on the right side of the page to act as a Table of Contents for the section you were on. The navigation would remain fixed on screen as you scroll, and users could either click on a subject to go directly to it, or by simply scrolling the black marker would indicate when you moved from one subject to the next.
This approach allowed us to reduce the number of total pages by roughly 90%. As you can see below, we created a template for these libraries of dense vehicle-specific information. These pages would be pretty lengthy so I am only showing a section of the wireframe. Users can now see where they are in the body of information, and should be able to retrace their steps if needing to reference something later on.