Analyzing client & customer needs

A well orchestrated shopping experience starts with understanding what the site’s primary function is and how to take advantage of the online medium. We evaluated the purchasing process through the old site and looked for ways in which it could be enhanced. We pinpointed several weaknesses including order tracking, personalization, inventory control, and shipping optimization. Remedying these pain points became the cornerstone for proceeding with the redesign.

Planning out the design

Being the original designer of the first site, the client immediately understood the vision and helped us stay true to the mood of the work. I knew that it was important for us to establish a hierarchy for the main page based on product popularity. In addition, spotlighting new artwork would allow us to keep the site fresh while giving people a reason to explore other categories. By setting up a structure that showcased the client’s most popular work and allowing some of the newer work to percolate to the top, we were able to capture current interests. Along with that, a listing of upcoming shows was displayed which enabled us to create a dashboard summary of the gallery right on the main page. Navigation was kept simple and straightforward, providing concise options that the audience would easily understand/comprehend.

I created wireframes based on several of the discussions we had on structure. I then moved to mocking up the design, using a rich, black background pattern as a way to make the artwork pop off the screen. Collaborating at this point provided an opportunity for the client to be fully invested in the project while maintaining final veto power should the site deviate from her goals. Once the main page mockup was finalized, we moved to refining the shopping experience based on our subpage wireframes. Because there is such a wide range of products, sizes, and frame options for each piece (well over 200), it was crucial for us to consider the easiest and best way for customers to make selections. Shopping cart abandonment had been something we were looking to prevent this time around. We determined that drop-downs with sizes at the point in which the client was putting the item in their cart made the most sense. Testing revealed this to be true and we finalized how the secondary templates would look before we moved on to production.

Custom backend

Not only did we need a sophisticated product grid
 to help identify variations in orders, we also wanted to provide a way for customers to save and reclaim orders at a later date using their shopping cart. We created a login mechanism for customers that identified them based on their username. When they arrived to the site, they would be greeted and given the opportunity to review their cart. This allowed us to develop a personal rapport with the customers.

Further extending the experience, we allowed them to sign up for the company newsletter. This provided direct marketing opportunities – something that hadn’t previously existed beyond print postcards and fliers.

Our custom shipping and handling administration tools gave the power of optimizing costs when smaller items were shipped with larger ones. The overall experience with the admin panel provided a level of detail over interactions that empowered the client to truly focus on individual customer’s needs.

Success on both fronts

The admin panel became a central hub for the client’s online product management. They could now provide flexibility in terms of tracking orders and having a live status of what was available. This alone saved several hours of inventorying by hand. Shipping, which had historically been a huge burden, was now streamlined into an online process which automatically calculates weight and runs a formula to generate the best price, enhancing fulfillment and saving money.

The website now accounts for a larger number of ongoing sales and is growing. The success of the site has been followed up with supplemental projects for the client including discount code integration. This allows the gallery to offer seasonal sales to its regular customers and promotions when new stock arrives. While the client has taken over maintenance of the site, the initial work changed the game for the gallery and laid the foundation for years to come.

As a small start-up, WiseHires needed a look for their application that embodied who they were as a company. Additionally, they needed a visual representation of their hiring application that would help persuade investors that their application was credible, reliable, and compelling.

Identity development and process

The project began by coming up with a mark that best represented the company. Working directly with the two founders (often via conference call to California), we fleshed out the details of what would later become their mark. I created 12 logo variations for which we soon narrowed down to the green light bulb with the WiseHires text to the right.

The success of the branding led to the UI design for their online application. Using the style we set forth in the identity, I quickly generated a series of mockups that reflected the new brand’s sensibilities. Working closely with the client, I began to flesh out the HTML and building the structure that would support the pages.

Workflow

The process reflected a traditional Agile or waterfall model, specifically having us work on iteration after iteration until both were happy with the results. The WiseHires founders leveraged their experience in building solid, functional applications while letting me work on the visual aesthetics, usability, and front end development. This freedom provided gave me an opportunity to really do something unique and fun while providing a proven framework to build upon.

Many of our ideas occurred on napkins at local eateries, through conference calls, and online, but for the most part it was a quick, paced, get it done type of thing.

Results

Deadlines we’re critical for these two entrepreneurs, and I was able to provide an efficient and responsive turnaround
 that met their needs. In fact, the visual look was completed well in advance of the client entering their app into a national competition.
 After receiving quite a bit of notoriety from peers, each used the project as a springboard to better their careers working for successful web companies.

Humble Beginnings

The Cranium website started as 5 static HTML pages to support the fledgling comic publishing company. It was determined early on that to successfully showcase the content and the recently created identity, it would be necessary to redesign the site.

Laying the Foundation

We identified key features that lead us down the path of choosing a blog platform for the redesign. We decided WordPress would be the best choice since many contributors were already familiar with it and the time/maintenance in getting it up and running would be negligible. The scope of the project included:

• Adding search functionality
• Creating an repository of hand-crafted articles
• Building a basic storefront in which merchandise could be purchased online
• Developing an RSS news feed to help keep people informed with the site
• Creating opportunities for Cross-promotion

Using a blog platform not only made maintenance easier, it provided a built-in search engine optimization options and helped the content be seen by more people.

The Design

Focused around its new identity, we created a site that used the halftone screen pattern that appears in the logo and comics to add texture. Colors were pulled directly from the logo, keeping the saturated red and orange prevalent throughout the site. We started with a basic template and customized it to suit the client’s needs.

Keeping the Ball Rolling

From a maintenance perspective, it was important to create an environment that could be updated from anywhere as the contributors live in different cities across the country. Multimedia was also an important consideration as Cranium wanted to broaden its reach beyond the standard search engines. What better way to do that than to create content for text, video, audio, and still image.

A company newsletter (Grey Matter) was created to reach out the hundred or so people who shared their email address with the company. Vertical Response was chosen for its ease of use, pay-as-you go options, and robust reporting capabilities. Articles are written and distributed via email to subscribers.

Success

Coupled with newsletter announcements, appearances at local conventions, and other marketing efforts, there’s been a steady increase in people visiting the site. While Cranium still boasts a modest subscriber base, the membership has steadily increased since the launch of the site and since then new titles have been appearing. Stats for the month of the launch revealed a 300% increase in traffic. Traffic spikes to over three times that amount upon release of each newsletter. Additional improvements scheduled for later this year include adding a way for visitors to subscribe to the site from the main page, links to social media, and more.