Project Overview

Woopra is a real-time customer analytics service used by sales and marketing teams. The client approached us to redesign their landing page and pricing page to increase the conversion rate of their new target customer.

The Challenge

Strategically redesign Woopra's marketing webpage and pricing page to increase conversion rates of 'Product People' (product leaders, product managers and product teams).

My Role

I lead a team of product designers through an end-to-end process which was split up into 3 design sprints: Research, Lo-fi, and Hi-fi. I executed the lo-fi protoypes and components of the hi-fi landing page prototype. I was also the primary contact with the client.

Timeframe

10 weeks

Platform

Responsive Web

Geri effectively lead her team throughout the design process from research to final design delivery. It was clear that she had a deep understanding of our users needs and translated insights into well thought out designs for our website. She facilitated the user experience testing with our website and was able to ask questions during the interview phases that brought to light some issues with our messaging that have shaped how we position both ourselves and our product features in the market. I really enjoyed working with Geri and would reccomend her to anyone looking for a designer who can lead a team as well as collaborate with.

– Elle Morgan (Head of Partnerships, Woopra)

Understanding the Product and Woopra’s Competitors

Our team and I began by learning about Woopra as a product and how it holds up against other data analytics tools. We split up into two groups to tackle these areas of research. When we reconvened, we presented our findings to the group to ensure that all designers had a foundational understanding of our problem space.

From the user interviews we developed a persona as a way to compile our findings and to guide our design decisions.

Testing the Existing Pages and Journey mapping

We conducted comprehension tests to gather overall impressions and to learn about how effective the current pages were in communicating information about Woopra to potential customers. This would give us a baseline of what areas to focus on and give us an idea of what is important (or not important) the the target audience. We synthesized our results into a journey map to better understand what goes through the mind of the user. While exploring this user journey, we were able to identify places of friction and areas of opportunity while generating ideas for our new design.

Lo-fi Testing and Prototypes

Validating or (in)validating Copy for the Landing Page

We worked closely with Woopra's marketing team who shared working documents of copy they wanted to include on the new landing page. In order to find the balance of how Woopra wants to be portrayed and what their target audience would respond to, we wanted to test their ideas as part of the lo-fi phase.

We split the lo-fi landing page redesign process into two rounds:

Round I: Test the copy and content that the marketing team has been working on.

Round II: Reiterate on the prototype to include our learnings from Round I and the Research Phase.

Round I: Testing and Iterating

We made changes to the existing page based on our research findings and incorporated the copy from the marketing team with placeholder images. We conducted 3 user interviews using a lo-fi prototype. With direct user feedback, we were able to determine what the most important information was and how effectively (or ineffectively) information about the product is being communicated.

Our team drew out key insights from the user interviews to guide our design studio sessions where shared sketches of our ideas for the layout and what key elements to include. As a team, we voted on the strongest ideas to include in our Round II prototype.

Goals for Round II Prototype:

1. Reduce the amount of copy and marketing language to convey information that matters to the target audience with clear and tangible descriptions.

2. Communicate how Woopra works in relation to the target audience's goals.

3. Address concerns target users have before they would sign-up for such a service.

Round II: Prototype and Lo-fi Results 

We created the Phase II iteration of our lo-fi prototype and put it in front of users. After talking to users, we organized our observations and findings by themes to draw out the most important areas to focus on.

lofi prototype user testing results

Pricing Page Ideation and Execution

We reviewed insights for the pricing page from our research phase and engaged in a session of Crazy 8’s to get the team’s ideas on paper. Our goal for this version was to make small changes to see if we could improve the overall comprehension of the pricing page. Below is the lofi prototype that we put in front of users to get feedback on.

From just talking to a few users, we quickly found out that users were still confused about aspects of the pricing page that we were trying to improve. We noted key insights as we moved into the hi-fi phase and circled back to do research on pricing pages of existing SaaS companies to generate more ideas for our hi-fi prototype design.

Looking at pricing pages for inspiration

After looking at pricing pages, we determined that our hi-fi design should include ways for users to:

1. Identify what type of plan they need by having tiers that are easier to associate with and being able to compare the plans easily.

2. Be able to identify the discount for subscribing annually vs. monthly.

3. Pick a plan and start a free trial.

Hi-fi Phase

UX Writing Workshop and Finalizing Ideas

As a team, we sat down together to tighten up the copy for the landing page by reviewing our feedback from the lo-fi prototype. We also used this session to whiteboard our final layout for all the elements that we wanted to include in the landing page, as well as translating our pricing page design ideas into one cohesive design.

Hi Fi Prototype

For our Hi-Fi Prototype, we made sure to stay true to Woopra's current branding guidelines. We turned to Chrome's Inspect Tool to assist us in determining the current styles. While doing this, we found inconsistencies across the existing pages, so we decided to base our styling off the current landing page and apply it to both our landing page and pricing page designs to promote brand consistency.

Hi Fi Validation

We conducted interviews with users to find out if our redesign was effective. We made a list of questions to ask users to find out if users were able to explain the product in their own words, their overall impression of the product, how likely they would be to sign up for a free trial and if they understood how to navigate the pages.

Overall, we found that people were more engaged with the landing page and less confused about the pricing page in comparison to the existing design. Below is a summary of the strengths and opportunities for improvement for each page.

Woopra challenged us to design a landing page and pricing page that would speak to their target audience in a relevant way. Since the data analytics space was new to me, it was an extra challenge to understand the tool and get familiar with the language of their users. I learned how to work with a marketing team and take into consideration their input but also stay true to the design process and our findings. I also learned that research is never over, and that it’s never too late to continue to look for inspiration at every stage of the process.

Our client (and the entire office!) was impressed with our ability to understand their complex product and generate a thoughtful design solution in a short amount of time. Woopra is currently working to integrate our designs as they overhaul their website.