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

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 …

The Future of Education

It's always very interesting to me to see the directions that people go after college. I know several people who have degrees in Graphic Design and are now database administrators and administrative assistants. Others I know have degrees in Finance and are now Worship Pastors. An Art History major who's a full-time nanny, an Interior Design major who's a Campus Manager for a church, the list goes on an on.

This pattern could be indicative of many things. Perhaps the job market at the time didn't present any opportunities for the chosen field when graduation came. Maybe after 4 years of studying towards a degree in a particular topic, there was a realization that it really wasn't that enjoyable. However, I'm convinced that it correlates to the state of the education system. Not that it's necessarily broken, and certainly not that it's useless, but that it's due for some thoughtful reconsideration.

According to a study done by Jaison Abel and Richard Di…

Launching a Product

This is the third 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.

My last post - Building a Product - covered the technical details that have formed MailSnail. In this post, I want to talk about how we’ve actually gone about bringing the product to market.

Ship Early. Ship Often. This has become a very popular mantra in the world of software development (also known as “Release Early. Release Often.”). If you Google that phrase, you’ll be presented with enough reading material to keep you busy for the foreseeable future. For somebody like myself - a perfectionist at heart - this is something incredibly difficult to adhere to but it has worked very well for us so far and I’m convinced that it’ll be a cornerstone of the success (hopefully) of MailSnail.

There’s a quote I shared in my last post but I’m going to share it again because it’s even more relevant here:
If you are n…