ShopperTrak

Analyzing a company’s needs as carefully as it analyzes retail analytics

Since 1992, ShopperTrak has been helping malls, retailers and entertainment venues around the globe learn who is coming through their doors, where they are going & how to make the most of that information. Their technology & real-time insights help these businesses increase store traffic and the size of each transaction.

shoppertrak-old-site

The company’s outdated web presence didn’t reflect its true market position or explain enhanced capabilities that it recently added through acquisitions. It also didn’t reflect the company aesthetic, which is embodied in ShopperTrak’s new, highly modern LEED-certified headquarters that takes up the entire 41st floor of the Willis Tower.

After ShopperTrak reached out to the Usman Group, we embarked on a mission to show the company’s full value using an interactive, story-driven experience.

 

The Discovery Process

To begin to understand the company’s goals and direction, we met with the project’s main stakeholders. While we delved into desired functionality, content and design considerations, we knew we still needed to dig deeper. We set up a series of Skype interviews with nearly a dozen employees around the world. Because these people work in different lines of business and in various roles, their perspectives gave us a 360 degree view of the organization.

We took the information we gathered in these interviews and synthesized them into a series of user personas. These personas gave a face to the people who would be using the site and eventually helped drive the direction for the final information architecture and page copy.

Next, we moved on to wireframing, meeting with three separate groups of employees to incorporate different experience directions. This exercise resulted in three rough wireframes that we were able to refine into a three solid website approaches.

However, we did not just stop there. To ensure our designs would be as effective as we envisioned, we conducted detailed user testing with several hundred users to gain a better perspective on which elements of each design worked.

Refining Through User Testing

After sorting through hundreds of user tests, heat maps and written feedback, we learned that while some of our assumptions were spot on, a few needed some refinement.

A few of the key take aways included:

  • Users clicked “Get Started” buttons, but wanted more context on what they were getting started on.
  • Users liked being led to information with a sentence, rather than a single word.
  • When a “Learn More” button was called out, users would click.
  • Users intuitively scrolled down the page (a concern ShopperTrak had regarding the Parallax Scroll effect)
  • Users liked clear separation between sections.

Taking this feedback, we incorporated it and elements from each of the three wireframes to create a final, solid prototype.

A Focus on Branding

While part of the Usman Group team was working on user testing and UI/UX improvements, others worked on branding and messaging. We decided to keep the old ShopperTrak logo and colors to leverage the equity the company already had in the marketplace. We leveraged that to create a carefully thought-out web style sheet that not only would be referenced in the web design, but could also be used for all future digital marketing materials.

A Storytelling Approach

From the beginning, we were drawn to using a storytelling approach to showcase ShopperTrak’s solutions – and this idea was vetted as a result of our user testing. To bring the storytelling approach to life, we used a parallax scroll design. This let us create a narrative of the entire shopping experience that followed the footsteps of a potential customer from before they set foot into a store, through their movements throughout the store and on to the final purchase. The shopper’s path enabled us to hit on the key solutions that ShopperTrak offers, providing a natural way to showcase the company’s capabilities.

ShopperTrak Desktop Wireframe ShopperTrak Tablet Wireframe ShopperTrak Mobile Wireframe

Throughout the website, we included a number of custom illustrations, animations and graphics to demonstrate the finer points of ShopperTrak’s capabilities and how their solutions work (at a high-level).

Meanwhile, our copywriting team tackled the copy to mirror the design with words. Once again, we met with stakeholders in the various lines of business to delve into the details of each solution. Not only did we discuss the company’s solutions, we showcased how it works for the various target audiences. We circled back to the user personas and highlighted the company’s offerings in a way that appealed to each user role.

In the careers section, we wanted to help ShopperTrak’s HR department recruit for key roles. We included photos and quotes of representative employees in areas such as IT, marketing and accounting – to give a voice to real people currently working in those departments.

Search Engine Optimization

Next, to make sure the site got noticed online, we embarked on a detailed SEO plan. We brainstormed with the ShopperTrak sales, product and marketing teams to come up with potential keyword entities and industry-related phrases. We researched the old site and current copy to pull out the best, most effective keyword phrases and also carefully examined their competitors’ search engine optimization practices. After these exercises, we were able to identify and move ahead with a strong keyword universe that would allow us to best optimize the site for both natural search and paid search campaigns.

ShopperTrak unveiled its new site to the company amidst much fanfare at an Oscar-themed party. Today, the site stands out from the competition by telling its capabilities in a way unlike any of its competition.

awards-party

 

114%

Increase in conversions from paid search channels

850%

Increase in time-on-site (averaging from :20 to 3:00)

103%

Increase in page views from paid search channels

30%

Decrease in cost-per-click costs