Skip to main content

Rebuilding the Interwebs

I recently had the opportunity to redesign our homepage (something that was desperately needed), so I thought it would be neat to talk about how the process unfolded. Here we go:

Where Things Began



The Problems

  1. A static sidebar for categories, essentially wasting 200 horizontal and 1,000+ vertical pixels.
  2. A static sidebar for categories that’s only accessible from the homepage.
  3. Text-heavy design, such as lengthy product descriptions that are more appropriate when viewing listing details.
  4. Sparse and small product images.
  5. Very outdated visual styling, reminiscent of eBay in the early 2000s - i.e. heavy inset box shadows, extreme button gradients, etc. (yes, we’re very behind the times - but we’ve finally got the right team in place who’s working hard to change that :-D )
  6. The fact that although there are hundreds of Featured listings on the site at any given time, only 12 are displayed in the homepage’s Featured listings section.
  7. etc...

Where Things Ended



Challenges

  1. Maximizing the use of valuable screen real estate.
  2. Increasing user engagement.
  3. Creating something that new/prospective users will be visually attracted to, while at the same time...
  4. Not pissing off our very change-resistant current user base with such a drastic change.
  5. And as always, because we’re a business, increasing revenue.

Process

The groundwork for the homepage redesign began a couple of months ago with something completely unrelated. I was tasked with building out functionality to track user behaviors on the site. Initially, there wasn’t much direction as to what we would be using this data for, other than the possibility of some targeted marketing emails. But we knew we needed to build it, because keeping track of individual users browsing behaviors would open us up for tailoring content (in whatever format) to specific users.

After I built the behaviorial tracking functionality, our Director of Product Development pitched the first idea for how to use this new found data. He requested a page in the users profile section that would make recommendations to the user based on how they browse. So the next step was building a recommendation engine. At it’s most basic level, what I built is simply a collection of actions (view, search, watch, offer/bid, purchase) and each of these actions carry a particular weight in how they influence what items are recommended to you. For instance, if you make an offer on a turntable, it is safe to assume that you have more interest in turntables than say speakers, if you’ve only viewed speakers. And conversely, after you purchase a turntable, the likelihood that you’re in the market to purchase another turntable is very low - therefore, recommendations should no longer lean heavily towards turntables. Again, this is at a very macro level but you get the idea.

After I built this and showed it to the other devs, one of them said that recommendations should really be on the homepage. Basically, we needed to be giving users exactly what they want from the second they log in (you know, kind of like we’re a real website in 2015). And so it was. However, I was convinced (and determined to convince everyone else) that adding something new and visually-appealing to the homepage would only make sense if the rest of the page followed suit - thus creating the need for a complete homepage redesign.

The first step was to learn how users are actually using the homepage currently. Granted, there was almost nothing on the homepage to be used but most users (especially our user base) are very set in their ways, so you always have to tread carefully. To quantify this, I threw some Google Analytics event tracking into the mix. What I learned was that the sidebar for categories only had a 6% use rate - so I felt confident that we could make some changes to it without significant kickback. The section for Featured listings had about an 18% click rate. Not terrible, but definitely ripe for improvement.

With these stats in mind, the next step was to create the space needed for additional content. This meant that the categories sidebar would have to move, so that real content could roam freely over all available horizontal pixels. I moved the categories into a dropdown in the navbar, which actually accomplished two things: 1.) freed up the space we needed to bring in better content and 2.) made the categories accessible from anywhere within our app. Win-win.

To help increase user-engagement, I worked to build a better viewing experience. The tile view for the Featured listings was designed to, first and foremost, showcase the pictures of the items being sold. As much as possible, we want our site to get out of the way and let the content speak for itself. In addition, it’s designed to put the most important information about a listing right up front - item name, item price, time left, and product category. Initially, I designed the tiles to be a dynamic height (according to the height of the item image), similar to how Etsy displays their listings. However, I decided to go with a more linear approach, with all tiles being a fixed size to create consistent rows. I found that the consistent rows were kinder to the eyes when moving down through a lot of items, as opposed to a collage of different-sized images. Additionally, a view selector was included so that users could switch to a list-style view (if desired), similar to what it looked like on the old site, to make the more change-resistant users feel in control and limit their hesitations about the new design.

The next problem to solve was that only 12 Featured listings at any given time would be seen on the homepage. When there are hundreds of users paying to upgrade their listings to Featured status, this is a significant failing. It was obvious that infinite scrolling/lazy loading for Featured listings was a necessity. I initially tried using a few different plugins to accomplish this, simply to not reinvent the wheel for something that already existed. But after finding them all lacking in how I wanted it to look and function, I ended up creating my own infinite scrolling - the most enjoyable part of the process for me.

Then one of the most important pieces was integrated. We simply call them the content marketing panes (the 5 images at the top of the page). Users love curated content, special categories beyond simply viewing by brand or even by product - such as price drops, dealer specials, etc. Although they’re not truly curated, the categories I came up with (and the subsequent pages I created for the content in these categories) are designed to feel specially selected. This is one of the biggest areas we intend to put more effort into and expand on in the future so that users always feel engaged and depend more on the homepage as a source of content discovery.

Last but not least, a section to make personalized recommendations to users (the piece of functionality that kicked off this whole process) was added. Unfortunately, I don't have it shown in the provided screenshot because I was logged out when I took it (naturally, you have to be logged in to see content tailored to you). And after some final nips and tucks, the homepage was ready for its debut.

Outcomes

  1. So far the user feedback has been overwhelmingly positive. Positive feedback is something that happens disappointingly rarely with our users, so that’s been awesome.
  2. User engagement has dramatically increased. Some of these increases upwards of 300%.
  3. We’ve taken a solid first step towards being more intentional in how we present content to our users.
  4. It’s still too early to see how much the needle is moving on revenue as a result of these changes, so I remain anxious/excited to see how those numbers turn out.

Takeaways

  1. Nothing happens in a vacuum. Throughout the process of recreating the homepage, I received plenty of honest and invaluable input from the two other developers on our team. And it’s significantly better than it would have otherwise been without this input.
  2. Always seek to, first, understand your user base before delving into any major (or perhaps even minor) changes.
  3. Nothing is ever finished. I certainly don’t consider this to be the destination, but merely one stop on the journey of continually creating better experiences for our users.
  4. Start somewhere. There are a hundred different things that I would have loved to do with the homepage to make it even better but instead of trying to create perfection (something that’s impossible anyways), I had to be realistic and just do something - because anything would have been an improvement over what we had. If you wait for perfection, you’ll never get there. That being said, I’m actually incredibly pleased with how it turned out.

Comments

Popular posts from this blog

Review of the New Macbook

I finally got a chance to give the new MacBook a whirl and decided to share my thoughts about it. I very rarely feel compelled to review products or services. Like the average consumer, I typically only review things when they’re so fantastic that I think they’re a real game-changer or, conversely, when they’re so terrible that I think it’s very likely they’ll be a game-ender. Unfortunately, this review will be the latter - let’s begin:

The Big Question Admittedly, I was skeptical about the new MacBook from the get-go. Despite my skepticism, I really do like to give everything a fair chance, so I tried to keep as open of a mind as possible. Rather than focusing on any specific feature of the MacBook and making an uninformed decision about whether or not I would like it, I instead simply pondered the question “who is this designed for?” Unfortunately, after spending some time with it in person, I’m no closer to answering that question.

And that really is the big question - the only on…

MailSnail Series

Starting in August of 2015, I began building a company called MailSnail with my friend and co-founder, Matt Bertino. To follow along with my personal thoughts on the ins and outs of the company, experiences, lessons learned, technical details, etc., please check out the posts below. I’ll continue to add new posts here as I publish them.

Post 1: Starting a Company
Post 2: Building a Product
Post 3: Launching a Product

Building a Product

This is the second post in a series I’m writing about a company I’m starting up (or have started, depending on when you’re reading this). You can read other posts in the series here.
As I’ve talked about here, I’m starting a company called MailSnail. In this post, I want to share the ins and outs of how we’ve built the product (i.e. the actual web application).

The Buzzwords I’ve tried my hardest to make this post as approachable as I possibly can for anybody and everybody. I don’t want this to be something that is only interesting to folks who know what HTTP stands for or can rattle off it’s associated status codes. So for my non-tech readers, please bare with me for this one section and keep on reading.

For my fellow tech-nerds, I figured you might not care so much about the minute implementation details but rather are just more interested in a list of all of the pieces of our tech-stack (because you already know the implications of each in their use). So here’s the quick and dirty …