Speak with Jon

jon@studioaceofspade.com
440.591.8799

Talk to Michael

michael@studioaceofspade.com
319.536.1954

Yell at Ted

ted@studioaceofspade.com
440.591.7384

Our Address

118 E. Washington St.
Floor 2
Goshen, Indiana 46528

Send us a message

Whatever your style, Wahl.

Wahl Pro

Design consulting, web development, AJAX, custom CMS

Timeframe

2 months

Sector

Retail

Region

USA
Illinois

The Challenge

This was perhaps the most advanced and difficult CMS we've needed to build. Our biggest consideration was easy of use and reducing management time required for the site. It also needed to be able to learned quickly by any staff that needed to use the site - meaning that it power users were rarely going to use it. And, not to mention, the site was extremely image heavy - optimized upload times were a must.

jump to completed project images ↓

The Plan of Attack

When we began this project, it was clear to us that an advanced planning phase was going to be necessary. With such an advanced way of displaying content via AJAX requests for the products, the CMS needed to be modular. This would allow us to pull products quickly and dynamically from the database, as well as open us up to easily make changes to the CMS later in the game.

Using Advanced Custom Fields, a powerful WordPress plugin, we would wireframe the backend and then insert test data across the site. When we had completed that, we began building the frontend. From the start of the project, we were pulling live data from the database.

By opting to tackle the most difficult portions first – pulling data from the CMS quickly and effectively – it would allow us to focus on simple and logical refinements as we progressed through the project.

First we built out the home page – a relatively simple page compared to most of the site. We then turned our sites on building the event calendar, user profiles, product listing tools, and finally ended with a custom implementation of a location generator.

By opting to tackle the most difficult portions first - pulling data from the CMS quickly and effectively - it would allow us to focus on simple and logical refinements as we progressed through the project.

Iterating through CMS Revisions

We wrapped up the HTML, CSS, jQuery, JavaScript, and AJAX portion of the site relatively quickly. However, as we had dictated during the planning phase, we were going to go through a whole host of revisions with the CMS to ensure that the administrative time spent on the site was extremely low.

Our goal was simple – lower the time it took to manage the site to save Wahl money on the long term, thus increasing their return on their investment.

We worked with several of Grip Design’s employees to streamline the process. Once we felt that we had achieved a demo-ready system, we collaborated with Wahl to go through the workflow of adding products, events, users, and more.

Through working with him, answering his questions, and streamlining the process even more, we developed a system where it took:

  • Two minutes to enter a product
  • Twenty minutes to enter an entire product line, complete with AJAX integration on the frontend
  • One minute to enter a user
  • Three minutes to create an event
  • Less than thirty seconds to add a location.

After we were satisfied that we had a well optimized system, we wrote documentation for the system and proceeded to train Wahl employees on how to use the site – a service that we offer with any site that we build.

Our goal was simple - lower the time it took to manage the site to save Wahl money on the long term, thus increasing their return on their investment.

The Final Product

We finished the project with a highly refined CMS revised over several iterations. The result was a simple management process for the website, which turned out just as beautifully as Grip had designed it. We happily put our stamp of approval on this project.

back to top ↑

A quick shot of the homepage.

Visit the site
final product image

The product page leveraged a carousel at the top that when a product would be clicked, it would use AJAX to load the product below without a page refresh.

Visit the site
final product image

The about page used jQuery to animate between the different eras.

Visit the site
final product image

The event page used jQuery to filter between events, classes, and shows. When a box was clicked, it generated a modal with the class information and a way to register.

Visit the site
final product image

The profiles on this page worked the same way as the event modals.

Visit the site
final product image

A simple subpage with a custom template in the CMS.

Visit the site
final product image

Want to find a place to buy Wahl products? Filter by state, quickly and easily.

Visit the site
final product image

Need a whole bunch of Wahl products? We made a separate page for getting in touch with distributors.

Visit the site
final product image

We love hearing from you.