Behind the Scenes of a Data-Driven Website Redesign

John Gentle, the Founder and CXO of roboboogie collaborated on this post with Amanda Swan, the Community Manager at Optimizely. Roboboogie is a customer experience optimization agency and Optimizely partner.

Optimizely created the Optiverse to be the most-visited digital destination for optimization industry thought leadership, peer-to-peer discussions, tutorials, how-to education and resources. Optimizely came to my team at Roboboogie (we’re an optimization agency) with a request: redesign and optimize Optiverse. Optimize a site for Optimizely? Challenge accepted. Their goal: push the boundaries of community user experience.

In this post, we’ll dig into the questions and tough decisions we faced at each step of the way, how we blended user experience design with conversion rate optimization, and lessons for how to redesign your own site using data and feedback to iterate through concepts, prototypes, and design decisions quickly.

Optiverse: Before and After

• 133% increase in member entrances (logged in users)
• 464% increase in new member registrations
• 120% increase in page views
• 103% increase in sessions
• 9% increase in pages per session
• 31% increase in the total number of searches, but no noticeable difference in the number of search exits, which suggests an improvement in finding valuable content.

Here are the before and after screenshots:

Before:

The original homepage design of Optiverse, Optimizely’s user community.

After

The redesigned homepage of Optiverse.

Starting with feedback and a goal

There are many reasons for overhauling a website. In the case of Optiverse, we had a few: the Optimizely team wanted to integrate new technologies to make the content more discoverable and valuable to users. The overall objective was to increase user activity in the community, make Knowledge Base content more relevant to customers looking to self-serve, and add interactivity to the Academy lessons and activities. Furthermore, the Optimizely team had been collecting data to support the redesign for over a year. And that data pointed to a need for better information architecture, more robust search, and exposure to new and relevant content, among other improvements

Here’s some of the feedback they heard over the year (it’s not great, we know!):

• “Feels clunky and the design is boring”
• “I never knew there was more than just the Knowledge Base in the Optiverse”
• “I wish there was an easier way to get new product release information”
• “The site hierarchy is non-existent”
• “I have to go to so many different places to stay up to date on current industry best practices. I wish there was one place where I could get all of this”
• “If I landed on this page from Google, I would never know it was owned by Optimizely”

Like any rapidly growing community, Optiverse had outgrown its initial space – a redesign made perfect sense.

Building a User Experience Brief

Optimizely came to us with heaps of data from their previous A/B tests, customer interviews, analytics and heatmaps. To make sense of all of this information, we created a User Experience Brief. This document detailed challenges of the existing site, highlighted aspirations of the new site, and clarified key focus areas. It served as our guiding light for UX and established the ground rules for clear design decisions.

For example, based on data, it was clear that visitors were confused by the hierarchy of the site and how to navigate around. As a result, we prioritized the creation of an Optiverse homepage (which previously did not exist) and the creation of landing pages with contextual navigational paths for users.

Our user experience brief went into extreme detail. We put ourselves in the shoes of key Optiverse audiences and mapped out user behaviors and desires for each of these groups. We validated these concepts with user interviews and data. We asked questions like, what questions do you want answered, why did you come to the Optiverse in the first place, how did your desires change over time. We used usertesting.com to watch visitors complete certain tasks, and recorded unintuitive flows. We discussed an infinite number of “what if” scenarios. The research was well worth it. We got a deep understanding of our members and we are now able to use this data to inform our future personalization strategy.

The brief was crucial in the process because it allowed us to quickly iterate and change designs without losing site of the big picture goals and priorities. (If you’re interested in reading more about user experience design, I suggest these articles from Experiencing Information and Inspire UX.)

With our usability goals and priorities in place with the brief, we turned our attention to the new emotional and visual identity for the site (a.k.a ’The fun stuff’). Based on common feedback trends from customers, the Optiverse team distilled the emotional and visual identity with six principles: Helpful, Educational, Trustworthy, Industry Leading, Thought Provoking and Interactive. Of course, the tone and mood of the design should also follow these attributes.

How we executed and measured that plan

Style tiles

The Optimizely team wanted the Optiverse to feel on brand with Optimizely, but wanted it to have its own, unique flair since it’s open to everyone in the optimization industry. With the desire to be trustworthy and thought-provoking, we designed several style tiles to share with customers and team members. After hearing the feedback, a clear winner surfaced: Optimizely blue, with some prominent splashes of bright color and a “data-spacey image.” The style tiles were well received and allowed us to quickly set a solid foundation for visual design moving forward.

With a general look-and-feel in place, we then iterated through a number of detailed design prototype concepts with wireframes. Wireframes are essential for rapid prototyping because they allow you to move so fast and are extremely cost-effective. For this project, we used Omnigraffle for wireframes. We also used InVision for design collaboration and design QA.

This view is an early iteration of the top portion of the homepage wireframe. Here roboboogie was addressing the following goals: Increase the user’s ability to join as a member of Optiverse, help explain to the user what the different sections of the Optiverse site are used for, and keep the user aware of new content or important announcements from Optiverse.

Along the way, we were constantly throwing new and crazy ideas on the wall to see what stuck. We always referred back to the user experience brief and used customer feedback to validate hypotheses. However, some ideas that came up that we simply could not agree on. Lacking an obvious fix or customer feedback to sway us one way or the other, we ran A/B tests to decide. Where we had the technical ability (It was really tough to add in brand new pages, or drastically change a layout given the limitations of the platform) we launched experiments on the live site to validate ideas. We did not want to, nor could we test everything though, (we wanted to launch it in a reasonable timeframe of course) so we added the un-tested ideas to a backlog document and planned for robust testing after launch.

This view is showing an early iteration of the community landing page. roboboogie wanted to explore separating the community forum into two, more specifically focused forums, one for optimizely support, and one for general optimization. Helping users find a place to get support, and a place to promote and share thought leadership within the community.

Once we settled on wireframes, we created the design comps (the Photoshop files of the actual page design) which blended the look-and-feel from the style tiles with the wireframe layouts. It is always exciting to see the site come to life in this phase. In some areas, it also illuminated opportunities and better design solutions that we could not see in the wireframes. This is typical in an iterative design process like this. In these cases, we simply went back to the wireframes, worked out the details of the changes and then moved back into design.

So, enough with the suspense already… please meet the new and improved Optiverse! If you’re curious, read the post to learn what’s new. It has a new, more dynamic look and feel. It’s a look that is familiar to Optimizely customers and very approachable to anyone interested in learning more about optimization and personalization.  We hope you like it, but we’d love to hear your feedback and thoughts in the comments or in Optiverse!

Tips for structuring your data-driven redesign

Are you planning or hoping to take on a site redesign soon? If so, we have some tips to make it as smooth and successful as possible.

1. Just because you’ve redesigned your site, does not mean there’s no more room for optimizing and A/B testing. A redesigned site is simply a new (and hopefully improved benchmark) from which to take the experience to even greater heights and to drive even more conversions.  You will never be able to achieve a fully optimized site with a redesign as it is an extremely fluid environment and your user’s needs are always changing and evolving…so don’t even try.  : )

2. Spending time upfront to create a detailed user experience strategy document is a critical foundational document to set success metrics and for managing design intent consistently throughout the project.

3. Reviewing completed A/B tests and results is a critical step to defining upfront design requirements.

4. A/B testing is a great tool to help remove subjectivity within the design process – which can accelerate timelines.

5. Involving user feedback in early prototype phases helps remove design assumptions – creating a stronger design.

6. Creating a list of A/B test ideas that come out of the design process – which sets a foundation for optimization right out of the gate.

Thank you for reading and hope to hear your thoughts about Optiverse in the comments below!