The BoxCoop

Spring - Summer 2018

website redesignanalytics/goalsspecial troubleshooting
wordpressgoogle trackingemail routing
bootstrapmobile usabilityserver performance
products first focus
color unification
special text fields
Boxcoop logo reworked

summary

The BoxCoop needed a refresh for their Homepage and a theme for their supporting pages to tie into, but they wanted to keep the overall structure of their original website, and not have a complete overhaul. Many people had worked on it over time, so care was taken to preserve features that were intertwined with their current layout.

Boxcoopshow1
Beforeboxcoopstrip
Afterboxcoopstrip

to begin

Priority one was to focus the message and remove distractions. In their previous design the very first thing you were faced with was a lot of text, and we wanted to show off high quality images of their products instead. Their core business is in custom product packaging, but they were spending too much time explaining rather than showing.

We also removed the rotating carousel from the homepage banner, replacing it with a single static one. This is important real estate since it's the first thing new users see when coming to the site, and the trend used to be to try to appeal to different user needs with different rotating slides. The research has shown that this strategy is actually innefective, and creates unnecessary distraction. We opted to keep things straightforward with a single clear message.

The design was kept uncluttered by keeping only six products on the screen at one time, allowing the user the option to rotate slides to view more, and sliding the navigation away until needed. All original verbiage was moved below the first page fold and placed in dedicated 1/3 view height panels.

We designed the flow of the page to create a natural focal point at the headline "Explore Our Box Styles". Your attention is drawn down the page, and you immediately start looking at the products.

Boxcoopsketch3(med)

For tablet screens, this meant tweaking the wording just a tad and forcing a linebreak in the subheading.

Tabletboxcoop

Next, as often as possible, we showed their products in the first section of pages always using their best images.

Boxfirstthing1b
Boxfirstthing3

Written content on these pages was moved below also, beyond the first page break.

color

Colors remained highly saturated but were used more sparingly. Their product images had a lot of vibrance already so we needed to avoid competing for viewers attention with more color. We matched blue already in the logo and made that the primary theme color. We reserved yellow for buttons and accents.

Squares1
Squares2
Squares3
Squares4

This allowed us to keep all text in the navigation bar black instead of alternating blue and white with yellow for effect.

Beforetopc
Aftertopc

Because the site was remaining essentially informational, the unified color theme improved the readability and caused less distraction.

Even with a simple layout on the contact page, the focus was improved with more unified colors.

Beforeboxcoopcontact
Afterboxcoopcontact

special projects

The original site had been experiencing some performance issues before we got ahold of it, so there was some sleuthing to be done to get it back up to speed and more reliable. Then they could focus on looking towards the future, and how to take advantage of some new tools.

Occasional emails from the site's contact forms were not being delivered, and the admins weren't finding out until receiving complaints from customers not getting replies.

Solution

Our initial suspicion that the contact forms on certain pages were to blame turned out to be false, so after more troubleshooting we bagen to narrow down the problem. Checking the hosting server logs, we found that the emails in question were registering and getting sent through, so we opened a ticket with the webmail host who discovered that, while they were logging the delivery attempts, the emails were getting rejected. A closer look the send-from address of these failed attempts revealed that the majority of them were from aol and yahoo addresses. With a little research, we found documentation on new aol and yahoo security updates that prevented them from authenticating their send-from parameters unless the email originated from their servers. With this information we easily wrote a small script to change the send-from address, by-passing the need for the authentication, and still keep the reply-to field so a response could be sent.

Lag time on the site had been something we noticed from the start. Speed tests quickly let us identify the hosting server as the biggest factor holding things up.

Solution

Though the site was hosted on a virtual private server, we found out that the hosting company had dragged it's feet in updating their software and were running on a now unsupported version of PHP. Identifying this reliability problem, it was our recommendation that the Boxcoop switch to a hosting provider rated for higher speed. As an extra measure, we also purged extra files from previous versions of the site that were no longer needed.

New content was added to appeal to clients in specific business sectors but there wasn't any data on the effectiveness.

Solution

Basic tracking had been set up on the site, but we wanted to measure specifically when users were viewing specific pages and sections and for how long. Google Analytics allowed us to set goals and get feedback at much more granular level. We wrote scripts to record time elapsed between clicking between the targeted sections in the site, and monitored results. With advertising set up to attract clients to the new content we could determine if this was bringing users who were then engaging further with the website.

Other Work

Zyte logo bw
Tokkapromo
Teampower logo bw
Human logo bw