WePay website refresh

I redesigned the WePay Clear product page to match their updated brand and value propositions, improving visuals and layout for a more appealing user experience.

Role
Lead Designer

Responsibilities
UX, Branding, Illustration, Research

Tools
Figma, HotJar

Overview

WePay is the integrated payments business of JPMorgan Chase. They provide payments infrastructure for independent software vendors (ISVs) and software platforms to ensure small businesses get paid quickly and easily.

A brand update and a shift in business direction led to a discussion about updating the marketing site. The state of the website presented an opportunity to bring new life to the site. WePay aimed to align its key pages with the updated brand and value propositions. I took the lead in redesigning the pages, with a specific emphasis on the Clear product page.

previous version

Teams
Marketing, Product, Sales, Engineering

Timeline
8 Weeks

The Problem

WePay's website is an important channel for lead acquisition, but it hadn't been updated in a while, leading to fewer page visits and form submissions.

Solution

  1. Site audit and research

    I shared HotJar heatmaps and metrics with all stakeholders, providing them with valuable insights into user interactions. Collaborating with the Marketing team, I conducted a comprehensive audit of the Clear page, to identify areas that could be improved.

  2. Update WePay brand throughout the site

    I crafted fresh visuals and illustrations to present product features in a more engaging manner. Additionally, we made sure that the new logo was integrated into all website pages and company communications.

  3. Overhauled the business value prop messaging

    I collaborated with the Marketing team and the Head of Product to refresh the content on the Clear page, ensuring a more precise and engaging description of the product's features and advantages.

Challenges

  1. Stakeholder alignment

    Juggling multiple stakeholders made it a bit tricky to stay on the same page and get timely approvals. Additionally, since I was leading the design direction for three pages, I had to communicate often with the other designer to make sure everything flowed together.

  2. Timeline

    We were on a tight schedule because the leadership wanted to present the new site at a big conference. A significant chunk of our time was dedicated to getting content approvals, which left us with limited time for the design phase. Additionally, we had to factor in the time required for development before the launch.

  3. Limited resources

    Our research efforts were constrained by both time and resources. While we had access to certain metrics like HotJar heatmaps, we lacked the time to thoroughly delve into and refine our user personas.

Customer Focus

Existing Customers

People with existing accounts usually come to the website to sign in using the button in the top navigation. The majority of our traffic falls into this category, and they typically don't explore the rest of the site.

Potential Customers

We were targeting those who were just getting to know WePay, whether they found us through a search or one of our marketing efforts. Our aim was to get them more engaged and lead them to the form page. These people are often in roles like Developer Leads, Head of Payments, or even CEOs.

Site Audit

We reviewed the Clear page section by section to identify areas to improve

Layout Explorations

Collaborating with the Marketing team, I explored different layouts for the new content, and created wireframes. I expedited the design process by leveraging components from the design system I had set up. We had weekly work sessions with stakeholders where I shared my design concepts to gather feedback.

Wireframes

Visual Design

Once I had presented the wireframes I went with the option that addressed the feedback I'd gathered. I started adding some visuals that showed the product features to bring more appeal to the page. I presented these visual updates to the stakeholders and gathered their thoughts.

High fidelity designs

Design Iterations

I played around with various visual mockups to give the stakeholders a clear picture of how they'd complement the content. I selected the option that worked best with the content and had the best usability. It helped that we had pre-existing components in our design system, which would also simplify the development process.

Final touches

The final design featured branded mockups and illustrations, designed to enhance user understanding of the product's features and add a touch of delight to the page.

I designed branded mockups and illustrations in Figma

Final Design

Results & Learnings

We measured the HotJar data 3 months prior and compared it to the data 3 months after the update

Before

After

Preliminary Insights

  1. Number of visitors

    The number of visitors to the website pages did not change significantly compared to before the update

  2. Time spent on the page

    We found that users were spending more time on the page because of the updated content and visuals.

  3. Click comparison

    Most clicks happened on the “Our Solutions” drop-down on the top navigation. We also found that more users clicked on “See Dev Docs” than on the “Get Started” CTA. This could indicate the users may be exploring and comparing products.

Increased overall webpage engagement by 20%

(Hotjar data mockup)

How did we do?

  1. Successfully launched the new website pages

    We successfully overhauled the Clear page, as well as two other key pages (Homepage & About Us), all within a tight schedule. These updated pages were then unveiled by our leadership at an important conference, showcasing the fresh look in line with our new brand identity.

  2. Learned about user behavior

    Some visitor behavior on the pages remained fairly consistent post-update, but we improved overall webpage engagement, and we learned valuable insights into how our audience interacts with the content.

  3. Proved more testing is needed

    With our time and resources in short supply for a deep dive into site metrics, we learned about the immense value of backing a big project like the website update. This experience underscored the importance of ongoing testing to gain insights into user behavior.

Next Steps

Develop Personas

Shortly after the launch of the website update, I worked with other teams to begin the project to develop personas in order to further understand users and their journeys on the website.

Continue Testing

Continuously tracking website metrics over an extended period of time is crucial for gaining a deeper understanding of user behavior. I proposed designing tests to continue to optimize the page.

Increase Support

While we definitely needed a website update, it would also help to partner with lead-generation campaigns to bring in more traffic. This update showed us that the website would benefit from some extra support.

Next

Dev Docs Redesign