How data-driven design helped us increase unique pageviews by over 130%

Content has always been a key component of our marketing strategy at Vend. Content marketing helps us engage our audience, positions Vend as a thought leader in our space, and drives leads and revenue for the company.

In fact, in 2016, the majority of our all important pre-trial leads came from content pieces such as guides, ebooks, tools, and other resources.

Because content marketing is so important for us, we wanted to invest more in it. But as we grew our content library, we found that the user experience around content discovery and consumption left a lot to be desired. While we did have a blog that worked well, we also had a content hub, which had a number of shortcomings that prevented people from getting the most out of our resources.

And so earlier this year, I took on the task of redesigning Vend’s resource hub from the ground up.

The whole process took about two months (including development) and I’m happy to say the redesign was a success. Unique pageviews for the page (now called the “Vend Resource Hub”) increased by 134%. We also saw content conversion rates improve by more than two-thirds and the number of users who took a Vend trial from the page increased by nearly 70%.

Here are some of the steps I took when redesigning Vend’s resource hub.

Strategy: Advocate for data-driven design

To push myself further as a web designer, I decided to incorporate data and metrics into my process. I wanted to see if I could make insightful design decisions based on numbers instead of my gut instinct. So, I took a step back and revisited the information architecture (IA) of all our content pieces and I used my findings to come up with design solutions. The goal of the task was to create a cohesive and engaging learning pathway for our retailers.

Here’s what I did.

Step 1: Gather data

I knew I needed data to make the right decisions, but before digging around for numbers, I first listed all the questions I had about Vend U (our original content hub). The goal was to understand how people interacted with the page, so I could determine their intent.

Here are the questions I asked:

• How did users get to the resource pages? (i.e. by organic search or by campaign ads?)
• How much time did they spend on Vend U?
• What is the bounce rate?
• Which are the most popular content downloads and why are they popular? (i.e., Is it due to the subject matter or easy accessibility?)
• How did our users interact with our free content and what other pages did they visit after downloading content?
• What do they want to know more of?

To answer these questions, I got help from the data and web analytics experts on our team. Using Google Analytics, they helped me surface the metrics that would shed light on the insights I needed.

The metrics revealed:

• The time spent on site and bounce rate.
• The top downloaded guide.
• Percentage of traffic from banner ads.
• Number of visitors to the page through organic search. This told us that users were searching for — and were interested in — retail-related content.
• How traffic to individual content pages that ultimately converted was driven.
• How many users left after downloading a content piece (taking our most popular guide as the benchmark).

(NOTE: A few areas we looked at in Google Analytics: Behaviour Flow, Behaviour Overview, and Page Acquisition).

Step 2: Validate the metrics and identify pain points

Although the numbers provided a lot of info about Vend U’s performance, I didn’t make immediate conclusions about user insights. I knew it was easy to make false interpretations based on numbers alone.

For instance, a high bounce rate may not necessary equate to bad results, as single page sessions can be expected from users who already know what they’re looking for. Typically, these users would “bounce” once they got the info they needed.

I resolved this by checking out the main sources of traffic and the conversion rates for new users who first entered the Vend U page through non-paid campaigns. This enabled me to have an unbiased view of user intent and expectations.

From my analysis, I inferred that the majority of bounces for new visitors on Vend U were due to unintentional visits from direct and social media sources. Likewise, I observed that conversion rates increased when users knew what they were looking for (i.e. when they came from search engines).

With that in mind, it became clear that the high bounce rate from organic search wasn’t really a bad sign, because the goal’s performance wasn’t affected.

Using these findings, I decided to focus my design on optimizing the user journey for organic search traffic.

Step 3: Look at other content hubs

I also compared Vend U with other content hubs to identify any missing elements that could improve the usability of our resource hub. I took those observations and synthesized them with the data I gathered above to gain even deeper user insights.

Examples of other content marketing hubs from remarkable tech companies. I looked at what others have done well to achieve for consistent and intuitive user journey.

Here are some of the key learnings I picked up after reviewing our data and looking at other content hubs:

• Our page was trying to do too many things. In addition to promoting our content, Vend U also promoted our learning portal, the Vend community, and our demo video.
• The user journey ended when a piece of content was downloaded.
• The differences between content pieces (i.e. guides, articles, videos, reports) were not distinctively recognizable and there wasn’t anything linking the different resources together.
• The page had sub-optimal navigation. There was a lack of consistency in the design + navigation across different channels. This could be the potential reason why many people exited the page — there was no easy way to explore or discover other resources.
• The page wasn’t mobile friendly.

Quick walkthrough of Vend U page was trying to promote multiple things at once.

To further understand these findings (and so I could figure out how to address them), I decided to investigate exactly how users navigated Vend U.

And that brought me to the next step…

Step 4: Document the user’s content journey and find ways to improve it

I examined all our resources and documented how people accessed and consumed different content pieces.

For example, a user had to fill in a form to download a guide, but they didn’t have to if they wanted to read an article. The challenge was aligning the discovery of various content types so the experience is still seamless. In other words, I wanted to make people’s content experience consistent, even if they were viewing various resource types.

The different types of resources that we compiled on the landing page.

Improving the content journey: Start with a sitemap

Identifying the above pain points helped figure out what the new user journey should be for the Vend Resource Hub.

To illustrate this journey, I created a sitemap that demonstrated the information architecture and content strategy leading up to the path to purchasing Vend. Having a sitemap also created a holistic picture of the new content journey, so we could ensure that we really addressed people’s issues with the previous content hub.

The sitemap was also useful for presenting my design ideas to the project’s stakeholders. In this sitemap, the end-to-end user journey is taken into consideration. The green section represents the path funneling down users in the buying process.

We then concluded that the new Vend Resource Hub needed to have the following design elements to really provide an engaging content experience for users:

1. There needs to be a clear and consistent navigation for resource discovery across the site.
2. Content browsing must be an easy and consistent experience, even if users are looking at different types of resources.
3. We must make it easy for users to quickly access and download content.
4. The resource hub should aid content discovery by featuring new or popular content pieces.
5. The user journey shouldn’t end when they download a piece of content. The resource hub should have the ability to recommend other content pieces.
6. The resource hub must be mobile-friendly.

Armed with these insights and realizations, I proceeded to ideation and execution.

Step 5: Develop ideas and execute them

Once I got the user journey and design solutions locked down, the process of design iteration became much easier. There were no guessing games when it came to what I needed to do, and the design decisions I made were driven by data-backed insights.

So, I began sketching out all the possible ideas before moving on to prototyping and creating high fidelity design. Here’s what that looked like:

The process of brainstorming and doodling, which ended up with low-fi wireframes.

I showed the sketches and prototypes to the project’s stakeholders and together, we decided on how to execute the new Vend Resource Hub.

Exploring the design solutions, including the UI of the filter nav, content hierarchy display, sizes of each display cards and header design.

Design execution

Based on all the data, insights, and discussions above, we developed the following design solutions:

Final Vend Resource Hub page that focuses only on promoting content pieces.

1. We implemented a clear and consistent navigation for resource discovery across the site

We added a “Resources” link to the top nav bar to resolve the navigation inconsistency across the site. This enables users to navigate back to the Vend Resource Hub regardless of where they are on the Vend website.

Users can navigate back to the Resource Hub page easily even when they’re on the Vend Blog.

2. We introduced category and resource type filters to make finding content much easier

We added filters to make it easy for users to browse a specific topic or content type. This is useful for those who already know what they are looking for and would like to skip through the scanning process. On top of that, it also clearly informs users about the content types and topics that Vend offers.

3. We made it easier for people to identify different content types

Different resources are labelled with specific colors so users could identify resources at a glance. Introducing a color palette also helped make the site visually appealing and engaging as a learning platform.

A color palette has been introduced to the hover state and labels for each resource type.

4. We made it easier for users to discover, access, and download content

Users can be indecisive when bombarded with several options. To resolve this, a card featuring a “must-read” resource along with a “top 5 resources” column on the side were introduced. This makes the decision-making process more delightful and it gave us the opportunity to feature different content pieces in a more engaging way.

5. We extended the user journey through content recommendations

We added a “recommended reading” section at the bottom of our resource pages to encourage users to check out other relevant content pieces. Adding this section also mean that the user’s journey doesn’t necessarily have to end when they download a resource. They’re given the opportunity to further explore Vend’s content library.

Pages that have a recommended guide section have been streamlined to reflect the design of Vend Resource Hub. This section recommends related content aimed to extend the journey for content discovery. Users can also return to the Vend Resource Hub through the “See More Resources” button.

6. We made the site mobile-friendly

With the previous mobile design, the form on our guide landing pages was displayed first, so users had to scroll through it before seeing the guide itself.

To address this, we introduced a new mobile design in which we placed the image of the guide at the top of the page; the form only appears when users tap on the “Download” button. This makes the experience less overwhelming and users are able to see exactly what they are downloading as soon as they land on the page.

Step 6: Gather data (again) and validate the design

We replaced Vend U and launched the new Vend Resource Hub in April 2017. To measure performance and results, I compared the page’s Google Analytics data from April to June (i.e., the first 3 months since launching the Resource Hub) with data from January to March (i.e., right before Vend U was replaced).

Here’s what I found:

• Unique pageviews increased by 134%
• Entrances to the Vend website through Vend’s Resource Hub increased by 78%.
• The average time spent on the Vend Resource Hub as a landing page remained similar to the previous design. But there was a slight increase in the average number of pages viewed during the session from.
• Bounce rate decreased.

I wanted to reinforce these findings, so I dug deeper into actual content downloads. Taking a popular guide as a benchmark, I observed that users who visited the Vend Resource Hub page were more likely to download our guide with a conversion rate of of nearly double the previous baseline.

Furthermore, the drop-off percentage for the Inventory Management Guide page decreased by 20%. This indicated an increase in user engagement.

Not only that, but the number of new users who took a Vend trial increased by nearly 70%. This is a positive implication, because despite the fact that the Vend Resource Hub is heavily focused on content conversions (not trials), the trial conversion rate — which is a core business goal for Vend — increased significantly.

(NOTE: For this analysis, I excluded traffic from paid campaigns for better accuracy).

Final words: Reflecting on the value of data-driven design

Designing with user data is an ongoing process and doesn’t end when the page or product is launched.

The learning process is continuous. This being my first time designing with user data, the process that I’ve laid out is not exhaustive. There are definitely more methods and tools available and I am yet to explore them all. However, this has been a perfect opportunity for me to try my hand at data-driven design.

Designing with data empowered my ideas and helped drive tangible results. Although it requires more people (and more thought!), doing so kept the team informed on every decision. That, in turn, made it easier to discuss and validate design solutions with the stakeholders.

Keeping an eye on key metrics doesn’t just help me figure out user behaviours, it also helps me understand the business better.

I am definitely expecting to use data in my process going forward, and I’m keen to venture deep into other data-driven design methods.

Now I’d like to hear from you: what are your data-driven design methods? Let me know in the comments.

Written with the help of Francesca Nicasio