Such has been the case with managing our insurance for the past six months or so. I’ve become the de facto point of contact for all of our insurances – health insurance, property insurance, business insurance, life insurance, and disability insurance (and probably a few more that I’m forgetting). Back in college I interned at Northwestern Mutual for a summer and got my NYS life, accident, and health insurance license so I suppose I have a bit more knowledge about insurance than the average person, which is how I think I ended up being the Pure Adapt insurance guy.

It started over the holidays when we were notified that our health insurance plan was being terminated. So we did the research with our broker and transitioned over to a new plan. Then we decided to increase the buy/sell life insurance and key-man life insurance that we had on each partner. As anyone who has ever taken out a life insurance policy knows, it’s a lot of work, including a pretty thorough medical exam. And we also decided it was time to add group disability coverage. And our yearly renewal for the business insurance just came up.

We work with good brokers for each type of insurance, but that doesn’t mean it’s still not a lot of work to process the options, make sound decisions with my partners, and then convey them to the team. So, I spent a few hours today on a Saturday reading through the new group disability policy as well as the business insurance. It’s not my first choice of how to spend my Saturday (or any day for that matter) but someone has to do it and I try hard to do just as good of a job on this as I would something I was super excited about.

My partners each have their own similar responsibilities. Not something you necessarily think about when starting a company, but necessary to run a successful one.

If you haven’t figured it out by now, this was the main driving force behind this project. Mobile and tablet usage on our site has skyrocketed, with Safari on iOS becoming our #1 browser/OS combo. It’s a trend that’s only going to continue. We needed to up our game. This will be the topic of my next post where I’ll dive into some of the data. We cut the project down significantly so that we could release ASAP because every day we were without a responsive design we felt like we were losing out on a ton of potential sales.

So let’s dive into some numbers. We review our analytics regularly so the increase in mobile usage hasn’t really come as a surprise to us. It’s been happening for a few years. Anyone paying attention to smartphones knows that mobile commerce has grown through the roof.

What did surprise us a bit towards the end of 2012 was that 1) mobile traffic was on pace to overtake computer traffic in the not-too-distant future, and 2) our mobile conversion rates were significantly lower than our computer conversion rates.

Shouldn’t mobile conversion rates be lower you say? Industry data seems to suggest so, but we knew that our old half-baked mobile site was costing us sales. We’d only find out how many sales by releasing a site where the experience was comparable across devices.

We were due for a design and programming “refresh” on DI. What drove us to focus on the responsive design above all else was what we found when we dove into the numbers a bit more. Take a look at the browser usage and screen resolutions for the five month period of October 1, 2012 – March 1, 2013:

Browser Usage

Screen Resolutions

A few notes/conclusions:

• Green browsers are ones that we extensively tested and fully support. Yellow we tested and support, although things might not look the same or work quite as well (ahem IE7). Red were tested briefly (except Safari on Blackberry – sorry, don’t have one of those). Everything below we ignored.
• We added the “Trend” column based upon our data and general industry knowledge: IE9 will go down and IE10 will go up once Microsoft releases IE10 as a required update, Android Browser will go down as Chrome becomes the default, and Safari isn’t being updated on Windows anymore.
• It’s clear that between Safari on iOS, the Android browser, and Chrome on Android and Safari that mobile is impossible to ignore. Over 30% of our visitors are using those browsers. If anything we should be developing for mobile webkit first and everything else second.
• The resolutions confirm that the site needs to work equally as good on all screens. The top 5 range from only 8.13% to 9.8%, and include the iPad (768×1024), iPhone < 5 and popular Android phones (320x480), 1080p monitors (1920x1080), and popular laptop resolutions (1366x768 and 1280x800)
• When using mobile devices, people hold them in the upright portrait view much more than they do the landscape view.
• It’s important to note that our usage is not equal to the global trends for the same time period. iOS usage is only 3.34%, Chrome is far and away the most popular browser at 34%, and Android usage surpasses iOS by 9%. In short, it seems like our users are a little ahead of the curve and that they prefer iOS devices.
• As tech savvy as our customers are, Internet Explorer 7 and 8 still make up a substantial portion of visitors. 7.51% for IE8, along with it being the last IE release on XP, meant that we had to treat it as an important browser that’s not going anywhere. IE7 usage will slowly fall off, but at 1.62% it’s still too large to ignore.

At this point in early March, we dialed back the scope of the project, readjusted our priorities a bit, and really made the responsive design the #1 feature. The thought was that every day we were without a better mobile experience we were hemorrhaging easy sales. There was a sense of urgency to release ASAP, and we did.

So far, so good. There’s nothing statistically significant about three weeks worth of sales, but we’re certainly off to a good start. Sales are up. Conversion rates are up across the board, with conversion rates on mobile now up much closer to conversion rates on computers. If nothing else, there’s a sense of relief that we didn’t totally screw things up!

In my next post I’ll explain how we go about browser testing, device testing, and supporting older browsers…without driving ourselves mad.

—

Yesterday we were extremely excited to unveil our new DetailedImage.com website. Our goal is to provide you with the simplest, fastest, and most secure shopping experience in the industry. Let’s take a look at what’s new:

The Design

We’ve kept the important functionality where it’s familiar – navigation on the left, search box up top, My Account and Cart information in the header – while also introducing elements of modern web design. We hope that this balance allows you to find exactly the products and information you’re looking for quickly and easily.

The old design was, well, old. It was solid for 2009 but it needed a refresh. There’s some stuff we’ve improved already since launch, and there’s still other stuff we’d like to improve upon, but this is much much better than the previous site. It’s a starting point for all of our future plans.

One Site – All of Your Devices

We utilized a fairly new web design technique called responsive web design to ensure that the new Detailed Image works great on your large monitor, your laptop, your tablet, your phone, and any other device you use.

If you haven’t figured it out by now, this was the main driving force behind this project. Mobile and tablet usage on our site has skyrocketed, with Safari on iOS becoming our #1 browser/OS combo. It’s a trend that’s only going to continue. We needed to up our game. This will be the topic of my next post where I’ll dive into some of the data. We cut the project down significantly so that we could release ASAP because every day we were without a responsive design we felt like we were losing out on a ton of potential sales.

Better Search Engines

Now when you search the Detailing Guide or Ask a Pro Blog you’ll get the same fast search that you’ve come to love from our product search, including helpful autocomplete suggestions to help ensure you find what you’re looking for the very first search.

I took the improved product search engine and set out to apply that to the Detailing Guide and Ask-a-Pro Blog (WordPress search engines are just horrendous). The difference was that analyzing text is much more difficult than a product with a few keywords. I started with the code for LockerPulse’s very good search engine, and improved the keyword analysis a bit, to create a pretty good search engine. Much better than what we had before. I also created an autosuggest for each: section headings for the guide, and each post title, author, category, and tag for the AAP.

New Product Photos

We built a new photo booth at our warehouse and re-shot every one of our 800+ products to provide you with better looking product photos. When applicable, we took multiple photos so you can see everything you need to make an informed decision.

We hired Mike’s brother Sam, the artist behind the successful Nesl Kickstarter project, to create our photo process and snap the initial photographs (we’d love to have him take all of our photos in the future, but he’ll be busy with bigger and better things). Now when you look at a brand or category page with dozens of products, the photos all have uniformly white backgrounds. The mishmash of white, off-white, and gray backgrounds on the old site was a huge eyesore.

Product Labels and Downloads

Many products now have a “From The Label” section that includes information and instructions right from the label so you can feel as comfortable buying online as you would if you picked up the bottle in a store. We also added a “Product Downloads” section where you can download instruction manuals for tools like buffers, vacuums, and flashlights.

I anticipate that this will be huge for conversion rates on our product pages. We got a small portion of the labels from the manufacturers, but most of them our guys typed in one at a time. It was a LOT of not-so-fun work, but with a huge potential payoff.

Verified Product Reviews

With over 4,000 product reviews on our site and growing fast, it can be difficult sometimes to determine which reviews to trust. To help, we added a “DI Verified Purchase” badge to any review where we can verify that the reviewer purchased the product being reviewed directly from Detailed Image. Knowing that someone actually purchased the product adds an extra sense of credibility to their opinion.

Interestingly enough, about 75% of reviews are “verified”. Of those other 25%, we get a small amount of reviews that seem completely ridiculous. Either it sounds like they’ve never used the product before, they’re completely insane, or they have an agenda against the product or against us (i.e. they own a competing product that we don’t want to pick up). Thing is, we can’t definitively say this about some of the negative reviews so it’s hard to have the justification to ban them or delete the review. This will help our customers weed these people out.

More Free Stuff

If our Weekly Special has taught us anything it’s that you love free stuff! We’ve decided to expand upon the Weekly Special and create an entire Free Stuff page that’s filled with free offers that you can receive every single day. Free offers range from popular products like our All Purpose Towel (free with a coupon on any purchase over $9) to a complete clay bar and lube kit (free over $69).

If there’s been a “best new feature” winner in the first few days, this is it. People are eating up these offers. Certainly something we can do even more of as time goes on.

No More Weight Limit!

Instead of forcing you to place multiple orders when you have more than 60 lbs in products, our system now intelligently splits your order up into multiple boxes automatically so you can fit as many products as you like into one single order!

I have a love/hate relationship with this feature. It was a bitch to program. I wanted to hold off until after the site launch, but I was convinced otherwise by Greg and Reece. Our wholesale program has grown by leaps and bounds to the point where this was becoming a real problem for people. We were hearing it regularly from our wholesalers. We want to continue to aggressively grow wholesale, and we certainly don’t want to turn away gigantic purchases, so it was worth pushing up the priority list and slipping it into this launch.

And More…

• Speed improvements – we’ve optimized the new DI to be blazing fast no matter what device you’re using. I’m planning a before/after speed comparison post as well. We’re only about 80% of the way there though – it can still get faster.
• Newsletter available to everyone – even if you’re not a registered user, you can still sign up for our newsletter to be alerted of our sales by filling out the form at the bottom of any page. Another bitch to program, but a necessity for obvious reasons.
• A more streamlined checkout process – we’ve redesigned our checkout process to make it simpler and faster to checkout without missing any critical information about your order. A sleeper candidate for the “best new feature” award. Checkout is much cleaner, smoother, more logical, and has much better copy.
• All Deals – we’ve created an “All Deals” page found at DetailedImage.com/Deals that lists out all of the current site-wide promotions we’re running. A great resource to bookmark and visit regularly! This is just a combination of our Sale page, Free Stuff page, any sale we’re running, and our Ship & Save. From a marketing standpoint, we want to be able to say “go to DetailedImage.com/Deals for all of our latest deals.”

This morning we launched our new Detailed Image site. The largest improvement is the responsive design: take a look on your computer, tablet, and phone.

We’re still working out a few minor kinks. The homepage just has a placeholder Ship & Save graphic that will be replaced with a nice big sale in the coming days!

More to come soon…

It’s interesting how much browser testing has changed since I first started developing for the web. We ran a browser / OS report for the past six months and Safari on iOS is #1 in terms of visits. Responsive design isn’t just necessary so that it looks nice when people occasionally use the site on their phones or tablets, it’s becoming people’s primary way of shopping online, and thus the mobile views of the responsive design are just as important as the large screen views. I plan on doing a few posts about this after the launch diving into our stats a bit more.

We always try to plan these launches out, but inevitably it’s always a mad rush to the finish line. In some ways I enjoy the chaos – to some degree I thrive in it – but it’s unsustainable. I’ve been putting off anything and everything in life and work that I can until after the 20th. That gets tiring and stressful after a while. Plus when you’re 90% done with something there’s this nagging feeling that it should be released ASAP so your customers and your business can benefit from it. In the midst of the development, my wife and I also bought a house, which we’ll be closing on in early May. So the second the site is up and stable I’ll have to switch gears and dial back my workload a bit…which is probably a good thing for me.

I’ve got some posts I’m really excited to write after the launch. Until then, I’ll be spending my time driving myself mad trying to make a modern HTML5 responsive design work in IE8 and – gasp – IE7! IE7 is still about 1.7% of our visitors, which for a retail business is too large to ignore. Thankfully html5shiv got us a good part of the way there without any work.

The box pile that defeated Cyber Monday

As our FedEx pickup arrived we were literally sprinting around the warehouse trying to pack the last few orders. The interesting thing is that we didn’t have to do that. On our busiest day ever, we had already packed up every order that came in after 12:15 PM, which is our “guaranteed” same-day shipment cutoff time. We had run our afternoon batch around 1:30 PM, which got quite a few additional customers out a day early. Instead of being satisfied, we ran them again. Then when the truck pulled up, we ran them another time. And again just as the truck was getting ready to pull away. He probably left at 2:45 PM and we literally had every order placed up until 2:44 PM on that truck. Two and a half hours of customers will be receiving their orders a day early (possibly two if this impending snow storm lives up to the hype).

Getting a customer a package a day early is a huge win. Have you ever received a package on Tuesday that you expected on Wednesday? You’re surprised. I know I am when it happens. My expectations are exceeded. In detailing, receiving a package on Friday or Saturday instead of Monday or Tuesday means one more Spring weekend that you can detail your car. That alone can win over a customer. Just check out our testimonials page and you’ll see a lot of comments that echo that sentiment.

On a crazy busy day it’s easy to value each individual customer less than you would if business was slow. I love that our team goes out of our way to exceed expectations for every customer every single day. It might have only been 15 or 20 extra orders that we got out today, but that’s 15 or 20 extra customers that we may have just won over.

Mike and I have been pushing really hard to release the aforementioned new version of Detailed Image. As a company we’re probably devoting close to 40% of our time right now working on new site related tasks. Things are busy for me personally right now as well, so I’m pretty much ripping through my day-to-day work tasks as fast as possible and then spending every remaining second developing.

We don’t have a launch date yet, but we’re hoping for around a month from now. The sooner it’s up, the sooner we can reap the benefits. It’s challenging to develop a good quality site while feeling under the gun time wise, which is why we haven’t set a hard date yet. If something takes an extra day, but it comes out great, we’re fine with that. We’ve done a good job of leaving out unnecessary features for launch. The self-imposed time crunch doesn’t seem to be affecting quality up to this point – I think what we’ve done so far is our best work yet – but it’s a possibility that’s worth being aware of.

I think my days look boring to the outside world. What did I do last night? Eat dinner, program, sleep. What did I do this morning? Answer email, eat breakfast, work out, program. What am I doing this afternoon? Programming. Every day until we launch. It’s not very glorious, but putting your head down and grinding is how you give yourself a chance of making something great. It’s worth sacrificing for a few months to create something that could be a building block for years of success. Plus, I really do enjoy diving in to a project like this. It’s only sustainable for a few months, but it sure is fun.

I probably won’t post again until we’re approaching a launch. Once we do launch I have a whole lot of posts queued up in my brain that I’m looking forward to writing! Until then I’ll be on Twitter from time to time. Otherwise it’s a safe assumption that I’m standing at my desk writing kickass code that hopefully helps propel our business to the next level.

Caching

One big opportunity for improvement on any database driven website is caching. Let’s take the example of our sitemap. When someone used to land on that page, it would run a database query to extract the product name and URL of every product on our site. If it’s hypothetically accessed 100x/day, that would have been 100 queries. They’re not particularly taxing queries, but there are hundreds of similar scenarios happening simultaneously all day long, which in sum do make a difference.

The solution is to cache – save a file on the server with the sitemap in it, and only update that file at specific regular intervals. For the sitemap, we update it once per day. So now those 100 queries become 1. A simple example, but I think it illustrates the point.

I wanted to build a caching system that could be used for any aspect of our site, from those sitemaps to product pages to stuff we haven’t thought of yet.

To accomplish that, I decided to create a PHP class* that does a few simple things:

• Converts an array to JSON and then writes that array to a file in our cache directory on our server
• Retreives the file and then converts that JSON back into an array

It’s a pretty simple 35 lines of code that can then be used across the site to quickly store and retrieve information.

As we rework the entire site, this will be a staple in what we do: anything that can be cached will be cached, to speed up load times and minimize resources, the latter being particularly important during crazy shopping spikes like Cyber Monday. Caching product pages will likely have the greatest impact.

Right now though, this system is only in place for a few select sections of the site, like the sitemap and our Auto Detailing Guide…

Reworking Our Guide

In the past two years we’ve done two substantial rewrites to our Auto Detailing Guide. The first was solely about improving the content, the second additionally improved upon our linking, product recommendations, and introduced a downloadable PDF version.

Amazingly, none of this was in our database. It was all old school HTML files. The PDF was manually updated, uploaded, and linked to each time we made even the slightest grammatical change. It was a pain in the ass. This was just one of those things that we started doing one way in 2007 with the initial site launch, and never improved upon because we did only a few revisions per year.

Now we’re looking to revise much more often, as should be the case with any web based how-to guide. To accomplish that though, we first had to make it less tedious to update. I started by getting the existing guide into our database. All of the content, structure, and product recommendations are being pulled from the database. Of course, since these pages aren’t updated all that often, they take full advantage of the aforementioned caching system and are only regenerated from the database when there’s a change in the content.

The last – and most difficult part – was auto-generating the PDF. I used the robust HTML2PDF to accomplish this. There were a lot of little problems that took a while to work out. The most difficult** was properly handling when one section of the guide links to another section of the guide. Instead of the link within the PDF bringing the user to their browser, you want it to jump internally within the PDF to that other section. It took some time, but the result is a better PDF than we had been producing manually before.

As a last step, the PDF also is only re-generated when the cache is updated. Now someone can make the change once in our database, update the cache, and be done. Eventually we’ll build this into our Admin so our employees can make changes, but for now this is a monumental leap.

What’s Next?

Now comes the fun part. The foundation is in place for us to devote all of our attention to the HTML5 responsive design that I touched upon in that first post last month. More to come soon!

—

*A goal of mine is to open source this code and other code that may be helpful to other developers in the future…not the imminent future, but hopefully in the next year or two.

**It was also quite challenging that the library was written and documented in French, with some English translations available, but many of the examples and variables still in French. Those five years of French I took in middle school and high school finally paid off a bit! I’m far from fluent, but was able to understand enough to get done what I needed to get done.

Why? Because it’s a core value of our company. We believe that people shouldn’t have to worry about whether or not they’ll be able to afford health care. We believe that providing this benefit is a critical building block in the structure of a great organization. Core values shouldn’t be compromised to save a few bucks.

Last week I read this great quote from Starbucks CEO Howard Schultz. Even though they’re a gigantic publicly traded company and we’re a tiny private company, I couldn’t help but draw a few parallels:

In 2008, Howard Schultz returned as Starbucks’s CEO to turn around the company. Early on, he had to fend off investors’ requests to slash Starbucks’s benefits, which had made it the model of an enlightened, post-union era company.

“Our stock was in free fall. One day, I found myself on a phone call with one large institutional shareholder. He addressed the longstanding health coverage for our employees, which at the time cost $250 million. He said this would be the perfect time for Starbucks and me to cut health care. Many companies were doing this at the time, so I would be immune from any public outcry.

I tried to describe to him that the essence of the brand is humanity, and our culture is steeped in two primary benefits that have defined who we are: comprehensive health-insurance coverage for our people and equity in the form of stock options, which we give to anyone who works more than 20 hours a week. I told him, ‘This is a nonstarter at every level because you don’t understand the essence of our company.

After all these years, if you believe the financial crisis should change our principles and core purpose, perhaps you should sell your stock. I’m not building a stock. I’m trying to build a great, enduring company.’ We are a performance-driven organization, but we have to lead the company through the lens of humanity.”

jQuery

A precursor to moving forward was to (finally) switch our javascript library from using the outdated script.aculo.us to the more lightweight and more powerful jQuery. This required quite a bit of code to be rewritten, most of it critical to the shopping experience, but it has paid immediate dividends: the site is significantly faster, jQuery is much easier to develop with, and the plug-ins available make it extremely extensible.

The site speed is a big deal. Prior to starting this project I took a bunch of speed benchmarks (using YSlow and Firebug). The goal is to be as fast and lightweight as possible, like we achieved with the new LockerPulse. The more people shop on mobile, the more speed becomes a critical factor. We’re still a long long ways from the ultimate goal, but just from the jQuery switch and some minification we’re 50%+ faster on most pages.

Better Search

Most e-commerce site searches suck. If I don’t find what I’m looking for when I search, I tend to go back and drill through category pages, or site search using Google, just in case a site’s bad algorithm didn’t return everything it should have.

This is for good reason. Search is hard. It takes a lot of work to get right (or even close to right). Many businesses use off-the-shelf shopping carts, and you’re stuck with whatever their search engine offers.

When we launched this version of our shopping cart in 2009 we had a pretty good search engine (I explained the “how” here). It had an autosuggest/autocomplete feature, and the results were exceptionally accurate compared to our competitors.

Fast forward almost four years and the search engine still worked, but we’d discovered some holes in it that I set out to plug.

Autosuggest

jQueryUI has a great autocomplete widget that I used as a starting point to completely rewrite our autosuggest feature. Among the improvements:

• Speed: the old one used an AJAX call to our database on each keystroke. This is common (Amazon does it) but also can be slow and resource intensive. The new one uses a pre-loaded javascript array, which is cached nightly. Flickr’s post about optimizing their autosuggest was incredibly insightful and served as a guide in my decision making process.
• Pattern matching: the old one would only match the first character of a product name, whereas we now match any part of the product name. We also show you what you’re matching by bolding the matched text.
• Brands, Categories, Subcategories: brands and categories are now marked as such within the autosuggest, and subcategories are also included, broadening the potential matches significantly.
• Sorting: the old one would sort alphabetically, whereas now we display in order of our “quality score” (more on that below).

Here’s an example of where the old autosuggest failed. Type in shampoo – something we sell plenty of – and nothing shows up! Since shampoo isn’t a main category, and no products started with the word shampoo, it was blank:

On the new autosuggest, you get exactly what you’d be looking for – a link to our shampoo subcategory page, followed by a list of our most popular shampoos:

Search Results

Ideally everyone finds exactly what they’re looking for using the autosuggest. In reality, plenty of people still search – either because they ignore the autosuggest or because the autosuggest doesn’t provide what they’re looking for.

Our biggest weakness was not matching “synonym” keywords where the searcher is searching for something we have but just calling it something different. I’d imagine Google has teams devoted to this. Our data showed that the queries we did worst for were ones where customers searched for buffer pads with the word inch in the query. For instance, 4 inch pads.

As of last week that query returned zero results. Why? Because we call them 4″ pads. So I built a “synonym system” to help tackle some of these queries. In doing so, I discovered another problem: we’d display all sizes of a product if there was a match, not just the size that matched. So even now if you searched for a 4 inch pad, you’d get the 5.5 inch and 6 inch sizes of the same pad in the results too! I reworked that as well, and now a query for 4 inch pads actually returns 4 inch pads!

Quality Score

When you’re viewing a brand page or a category page on our site, we sort the products by what we call our “quality score.” The higher the score, the higher the item appears on the page. Previously this was something we assigned manually – we wanted to curate the site based upon what people were buying, what was new and hot, and what we thought were the best quality products. This was fine when we had 100 products. We now have over 750 products, we’ve been in our fastest rate of product additions these past 6 months or so, and we have no plans of stopping.

The reality was that no one was going through the products and updating the quality scores unless they saw something that was drastically off. Given how difficult and time consuming this would be anyway, we decided to automate the quality scores based upon the sales history of the product and the newness of the product, with new products getting a “boost” to both stand out to customers and to give us time to get adequate sales data.

The result is much better than what we had manually. Because this worked so well, I then decided to sort the results in the autosuggest based upon the quality score. If you start typing in a brand name, you’ll see the newest products first, followed by the most popular products. As opposed to just an alphabetical list. Here’s an example:

Moving Forward

Throughout this whole process I made a list of probably a dozen more improvements. I was tempted to keep going, but I was unsure of the payoff. What I did do was start collecting even more data on each and every query so that we can better analyze what queries are working and what ones aren’t. In a few months I’ll have Bobby do some analysis for me and we’ll make our improvements based upon what we find.

We’re still at the point where I feel like we’re tackling the low-hanging fruit. It didn’t take some robust analysis to tell us that these things needed fixing – they were obvious and we just used the data as confirmation. To me, it’s pretty obvious that these changes will increase conversions, average order value, and decrease customer frustration. We’ll certainly confirm that with data, but when my/our search experience improves so drastically it won’t be surprising that our customers does as well.

I hope that by the end of the year we’re at the point where there aren’t so many of the obvious improvements left. That’s when having all of this data, and an employee who spends much of his time doing data analysis, will really pay off. We’ll be able to make those little changes that might not seem obvious to us, but will have a positive impact on our customers and bottom line. We’ll be able to quickly iterate and optimize based upon what we’re learning from our customers. That’s something we’ve been envisioning for years, and I’m very pumped that it’s now within our grasp.