Launching Apollo: behind the scenes of our data-driven redesign

Escrito por Nicole Kohler on junho 25, 2015 Blog, News.

Every now and then, website owners get an “itch” — an unignorable urge to redesign their site. Maybe they think they’re falling behind on current trends, or maybe they just don’t like their layout or theme as much as they once did. So they start over, change things until they’re satisfied… and then wonder why their customers don’t seem excited by the updates.

It’s one thing to want to redesign your website, but it’s another thing entirely to need a redesign. That itch strikes us all, but it’s crucial to only scratch it when you have data to support your desires. That data can come in the form of anything from visitor comments to website analytics, but it’s what you need to make smart decisions that will increase your conversion rates while decreasing bounce and exit rates.

Today, we launched a redesign codenamed “Project Apollo,” a data-driven rethinking of our WooCommerce landing page and the launch of our new audience-specific pages, WooCommerce Meetups, Download, and Extensions overview pages. It’s also another step in the direction of creating a beautifully-designed site that is primed for our upcoming responsive redesign.

We’d like to take you behind the scenes to show you how we used customer data to guide our redesign process, and offer some important takeaways for your own future redesigns or website updates. Keep reading for more!

What we wanted to accomplish

By late 2014, we had the notion that our WooCommerce landing page needed an update. We were concerned that it wasn’t presenting enough of the right information to help store owners or developers make their decision about whether or not WooCommerce was the right eCommerce platform for them. We also felt that we could be doing more to address the questions offered by each of these audiences, which are at times very different.

Flashback to the original WooCommerce page.
Flashback to the original WooCommerce page.

If we moved forward with a redesign, we wanted to accomplish these specific goals:

  • Reduce pre-sales tickets
  • Reduce bounce and exit rates on the WooCommerce landing page
  • Increase page views per session from users who came to the site via the WooCommerce landing page
  • Increase downloads of WooCommerce
  • Increase revenue from users who came to the site via the WooCommerce landing page

Lofty goals indeed, but we’ve never been ones to dream small. We knew what we wanted, and had a feeling we could be better delivering information to our customers, so with these thoughts in mind we began collecting data for a potential landing page redesign.

It all started with a survey

Rather than make speculations and start designing right away, we started this process by asking our customers for information. We sent a Polldaddy survey to several thousand WooCommerce customers that asked basic questions like:

  • How they used WooCommerce (i.e. number of sites they built, kind of sites they built)
  • What user group they fell under (were they a store owner, a developer…)
  • Areas of confidence when using WooCommerce
  • Areas of uncertainty when using WooCommerce
  • The resources they used to get information and learn

The responses to this survey gave us a lot of insight into our customers. It not only gave us a better idea of who was actually using WooCommerce, but gave us an idea of their path to purchase. It helped us take a better look at the information we were presenting, the channels we were using to present it, and the information that was being sought out at various stages of the decision-making process.

This part of the process led to the split in information for our two main audiences.
This part of the process led to the split in information for our two main audiences.

With the survey under our collective belts, we moved on to the next stage: data collection.

Analytical data review

Next, we started to dig into statistics and metrics from analytical services, including Google Analytics, KISSmetrics, and VWO. This allowed us to drill down into and compare specific pieces of data on the current WooCommerce page. Some of the stats we were interested in included:

  • traffic sources
  • age groups
  • pages visited
  • technology used
  • average purchase value
  • conversion rates
  • time spent on various pages
  • number of downloads
  • interaction with various page elements.

This isn’t a complete list, but you get the idea. From this, we could easily see what parts of the page worked, and what wasn’t working quite as well.

We used Google Analytics and other tools to review bounce rate, exit rate, and other important stats.
We used Google Analytics and other tools to review bounce rate, exit rate, and other important stats.

We were also able to combine this data with the customer poll results to consider how we could restructure our presentation of WooCommerce to create a better flow of information.

But we weren’t done yet.

Creating customer personas

At this point, with the information we had gained from these two initial stages, we created customer personas with names, background information, and behaviors. This allowed us to put a name and a “face” on top of these otherwise cold statistics.

With our customer personas, we were able to get a better idea of who our customers were, what made them “tick,” what influenced their buying decisions, what they trusted, and so on. The personas also helped us package together a lot of data that had been spread out into one small, easy-to-understand package. It’s much easier to understand “design a website for this person” than it is to say “design a website that will keep visitors on the page for this long and motivate x number of purchases.”

The last step in data collection: interviews

The final step in our data collection process was to hold interviews, via Google Hangout sessions, with WooThemes team members, existing customers, and potential customers. These interviews allowed us to get a first-hand understanding of how we saw WooCommerce presented vs. how customers (and potential customers) saw it presented.

These interviews served both as the final piece of the puzzle and a sort of accuracy check against our previously collected data. We were able to ensure that what we were being told, face-to-face, matched up with everything else we were seeing and hearing at the previous stages. We were also able to confirm that our personas were accurate for future use.

With our data collection complete, it was time to dig in and get to work.

The birth of Project Apollo

Everything we had done in these previous stages allowed us to take a good, hard look at the existing WooCommerce page. We drew up a list of features that our customers would be looking for when choosing an eCommerce solution and compared this to the current page. We had to decide if this page was sufficient and relevant, or if we could better explain our platform.

Upon review, we felt we had work to do. And so Project Apollo — our project to redesign the WooCommerce page — was born.

One of the new WooCommerce pages. We've come a long way!
One of the new WooCommerce pages. We’ve come a long way!

We started the project by using our collected information to create basic wireframes of the new pages, their structure, and userflow. We shared the wireframes using InVision (a great tool for distributed teams like ours!), allowing everyone involved to comment and provide feedback.

Once the wireframes were approved, we moved into the design stages, again using a similar review and approval process through InVision. Finally, once the design was completed and the pages were built, we deployed the new design to a staging server.

The final step was an open call for the entire Woo team to review the design and log any issues or suggestions via GitHub. The team working on Apollo reviewed every issue logged, made changes as necessary, and continued to deploy new versions to the staging server for all to see.

Every issue was logged and all changes were tracked.
Every issue was logged and all changes were tracked.

Finally, this morning, we held our breaths as the new WooCommerce pages were launched for all the world to see. And so here we are!

There are still a few things we’d like to do with these new pages, including making them fully responsive (as mentioned, our next big project for all of woocommerce.com). But we’re confident that this new approach to WooCommerce does a better job presenting information, and we’re excited to see if it meets our goals!

What you can learn from our process

There’s quite a bit you can learn from any website redesign. Behind-the-scenes glimpses like these are often interesting, but not always because of the “before and after” shots — many times it’s because everyone uses a different process, different rationale, different methods for making their decisions.

If you’re considering a redesign of your own, whether sometime soon or in the distant future, this is the advice we’ve got for you:

  • Start with specific goals in mind. We knew from the very beginning what we wanted to accomplish. Without setting goals, you run the risk of losing sight of the purpose of your redesign, which can increase scope and ruin your budget.
  • Collect as much data as possible. Google Analytics is a fine source of data, but it shouldn’t be your only one. Talk to your employees, customers, sales team, non-customers, or family. Send email polls. Try to collect as much data as you can before making important decisions.
  • Talk to your customers. Nothing beats actually asking someone, face-to-face, “what do you think? What could we do better?” If in-person interviews won’t work, try a Google Hangout or Skype session.
  • Collaborate with your team. Our redesign team grew and shrunk in size as resources were needed at each stage, from wireframing to proofreading. Don’t be afraid to lean on others for help!
  • Check, double-check, and triple-check. Have unfamiliar eyes review your work. Find a way to log issues (GitHub worked for us) and resolve them before launch.

There you have it — how we used customer data to drive our redesign. When you have a spare moment or two, drop by the new landing pages and explore a bit. Your feedback will be welcomed, and helpful as we continue to tweak the pages going forward.

Header image credit: Jens Dahlin

cta-banner-10-product-page-v2_2x

10 Responses

  1. Dalton
    junho 25, 2015 at 8:40 pm #

    I love the new visual design and wholeheartedly agree with using data to inform your design decisions. One thing has been bothering me for a long time, though… why not implement a responsive design? Even if your whole site isn’t responsive yet, it seems like it would make sense to build the new landing page for your flagship product to be mobile-friendly. I’m sure Analytics would agree?

    • Nicole Kohler
      junho 25, 2015 at 9:17 pm #

      We’ve got responsiveness in the works for the full site, Dalton, as mentioned in the post 🙂 Our main site pages actually have quite low mobile traffic. However, we’re still planning to roll that out next!

  2. Devin Price
    junho 25, 2015 at 10:04 pm #

    Great write-up! Thanks for sharing the process.

    I’m curious if you considered doing multivariate tests before rolling out the changes? Or, now that the new design is out, do you plan to tweak and improve based on testing data?

    • Gary
      junho 26, 2015 at 3:14 pm #

      Hey Devin

      Our approach is really one of continuous improvement – so we will continue to run various tests now on the new designs (as we did on the old designs) and see how we can improve the user experience based on various data that we will analyse.

  3. Youngsies
    junho 26, 2015 at 1:17 pm #

    Hi, sorry for commenting on the wrong post but I think comments are closed on the consumer stories one.

    We are just redoing our site with woocommerce and really impressed with it so far. How do we get involved with being a case study on your site?

    -Gareth

    • Nicole Kohler
      junho 26, 2015 at 3:03 pm #

      Hello Gareth, glad to hear you’ve joined us!

      We’re soon going to be rolling out something that will showcase some sites built on WooCommerce, and as such have our other case studies on ice at the moment. But do stay tuned to find out how you can submit to be part of that new approach 🙂

  4. auludag
    junho 26, 2015 at 2:49 pm #

    thank you for sharing your journey. it will help us and the others out there.

Trackbacks/Pingbacks

  1. The WhiP: WordCamp US Cities Revealed, WordPress 4.3 Beta Out - WPMU DEV
  2. The WhiP: WordCamp US Cities Revealed, WordPress 4.3 Beta Out | Blue Digital Web Services
  3. Weekly WordPress News: Automattic Buys Thesis.com for $100k