top of page

Elisabeth Fonden

Global-background.png

Insights

Strategy • Research  •  Design  • User Testing  •  Stakeholder Presentation

⇨ Within two months of going live, 75% of current Pushpay Staq accounts had onboarded, with a 30% weekly use rate
⇨ Led to an increase in sales leads and closed deals 
⇨ Designed a new Pushpay product from scratch which went live Feb 2024
⇨ Mixed method research: usability tests, Co-Design, surveys & more
⇨ Spans 6 iterations, 2 product visions, 1,000+ hours, and 250+ cups of coffee
IMPACT
HIGHLIGHTS

Teaser of Final Designs 💫

Background

Pushpay is an all-in-one church management system with an overall goal to increase giving and drive engagement. The goal of the project was to design an analytics web application that would centralize product suite data, to easily see overall health and trends, and ultimately aid in making data-driven decisions for our customers.

The Problem

Through previous customer interviews conducted by our UXR team, we found that understanding organizational health was too complex and out of reach for many churches. Because of this, important insights that could pave the way for increased engagement and goal completion, were missing.

 Inconsistent metrics and reporting across products

 No insight into how products interrelate

 No insight into the health of an organization

 Lack of understanding around people engagement

 No easy way to pull actionable insights from data

Situation

Task

Our Objective

The goal of the project was to design an analytics web application from scratch that would centralize product suite data, to easily see overall health and trends, and ultimately aid in making data-driven decisions for our customers.

My Process & Contributions

I collaborated with a design lead and worked closely with product and engineering to ensure alignment. I helped shape the product strategy and collaborate with the lead designer on the first couple iterations. I directly led the design research, user flows, storyboard, usability testing, affinity mapping, insight presentations, and version 3 of the designs.

The process was not linear. Halfway through, the product team changed the product's vision, which inserted a few bumps in the road. However, I'm very proud of this product and the effort that went into it. 

⏰ Project Timeline: 1+ years

⚒️ Project Tools: Figma, Mural, Pendo, Dovetail, Maze

Insights launch party in Colorado Springs (pictured second from left)

Action

A Tale of Two Visions

When UX was brought into this initiative, there was no clear alignment or vision from product or leadership. Taking hold of ambiguous reigns, the lead designer and I put a proposal together. This proposal consisted of a competitor analysis, industry landscape research, a user survey, storyboards, user flows, and conceptual designs.

Chapter 2: The Adaptation

After receiving positive feedback from stakeholders, we were given the green light to conduct usability tests to validate our designs. We received valuable feedback from the tests and were in the process of iterations, when we hit a bump in the road. Upper leadership ultimately decided to redefine the product vision.

 

Let's jump into it.

Chapter 1: The Proposal

Chapter 1: The Proposal

Aside from established business goals and an overarching project objective, we were staring at a blank slate. No one in product, UX, or engineering had experience building an analytics tool. Though the product manager normally takes on this role and writes requirements, they (all three of them) were stuck as to where to start. 

Time was ticking, and the lead designer and I stepped up to put together a design proposal to start conversation and get the ball rolling. Details below.

Personas: Who are we designing for?

We identified our primary persona as The Technologist, a church staff or admin who handles reporting for their organization. They use desktop applications, their goal is to make sense of data and present it to stakeholders, and their pain points consist of "too many products and inefficient tools".

The other two secondary personas are people the technologist interacts with. The Church Visionary (Pastors, Senior Leaders) and The Doer (Volunteers) would most likely be using mobile devices to access reports and data.

Competitor Analysis

I solely conducted a competitor analysis on both direct and indirect competitors (7 total). Common themes:

 Customization: add or delete widgets, drag and drop
✅ Configuration / Filtering
✅ High-Level Metrics
✅ Ability to drill down deeper into data

✅ Pre-Configured widgets 
✅ 
View trends over time in charts
✅ Widget Types: Attendance, Giving, New Donors, etc.

Storyboard

I put together a storyboard walking through the goal of our primary persona and incorporated their feelings throughout.

Before: The Hunt 🐻
Betty wants to understand the health of her church, but doesn't know how and this leaves her frustrated. Betty has to hunt down data in multiple Pushpay products and uses manual methods of consolidating it in Excel. She's not sure how to pull insights and take action on the data, and this process takes up too much of her time.

After: The Collection 💰
With Insights, Pushpay's new product, she can now see all important metrics and data in a central location and can take immediate action. Betty is over the moon, and can focus her time on other important tasks.

Feature Brainstorming & Ideation 

Drawing from research and team workshops, the lead designer and I put together a list of assumptions around features and tasks.

 Our users want to see high level metrics for each product

 Our users want to ability to drill down deeper into numbers

 Our users want to customize / edit widgets

 Our users want to see trends over time with the ability to drill into numbers for a specific time frame

 Our users want to easily compare metrics across products 

 Our users want to locate and clean up missing data

Metric Validation Survey

UX and PM team worked together to create a survey housing product metrics, and 139 customers rated the usefulness of each on a scale of 1 to 5. We then prioritized the metrics based off of their average rating. Top metrics include, but not limited to:

 First Time Guests: Attenders, Givers, Serving
✅ Total count over time: Attenders, Givers, Serving
✅ At Risk Guests: 
Attenders, Givers, Serving
✅ Missing data: Attendance

User Flows

I crafted a couple user flows of the ideal journey the user would have in our product, and landed on one including the ability to customize a dashboard by allowing the user to pick and choose which widgets they want.They also can take action on the widgets: 1) share, edit, duplicate, delete, 2) dig deeper into data, and 3) view insights from the data.ℹ️ It's important to note that at this stage we still were not sure what 'insights' meant, and floated around a few ideas in the designs.

Concepts & Annotations

DIARY STUDY

We invited 18 participants to walk around their neighborhood and share five pictures of interesting things they encountered and explain why each picture caught their eye.

Findings
  • Selfies among younger users were incorporated into their exploration photos.
  • Scenic views and hidden gems were what a majority of participants took pictures of.
SURVEY
All diary study participants completed a brief survey, gaging their interest in the task, their thoughts on outdoor support for physical and mental health, and how connected they feel to their community.
Findings
  • 94% of participants reported importance in being connected to their community
  • 78% of participants felt getting outside was important to their mental and physical health during Covid-19.
  • 78% of participants explored their neighborhood at least weekly, either by walking or biking
COMPETITOR ANALYSIS
We gained insight into the exploration industry. We compared seven different competitors, and did deep dives on World Brush, Like a Local, and Google Maps.
Findings
  • Community connection is lacking.
  • Main features include search, direction, and option to rate.
  • Limited feature sets are seen in apps such as World Brush, that have mystery elements.
  • User content creation is common in explore apps (e.g. adding professional businesses).
HIGH-FIDELITY PROTOTYPE & ITERATIONS
Here are a few examples of our iterative changes throughout the testing process. We tested our prototype on 5 people via Zoom, using a Figma prototype.
01. ON-SCREEN, LIVE MAP
V1 Feedback:
Users loved the combination of an Augmented Reality (AR), real-time view. However, users thought the location marker looked like a video ‘play’ button, and once you click into a pin they were unsure what to do next. Also, they were unsure why the pin was called space needle when it wasn’t directly on it, and what they would actually see once they reach the pin.
V2 Changes:
  • Adjusted location marker.

  • Made CTA language more clear.

  • Added elements to display the pin is user-generated (name of spot, name of post author, etc.)

  • Added more visuals to give sneek-peak of location

02. PIN PROFILE PAGE
V1 Feedback:
Once you get close to the pin, users were confused and one commented that the UI for our arrival screen looked like an ad. Is it the pin spot or something else?
V2 Changes:
  • Adjusted location marker to reflect the pin itself (to maintain consistency)

  •  Adjusted layout of expanded pin to compliment the ‘Start Walking’ screen.

03. USER ON-BOARDING
V1 Feedback:
Users felt like they were unclear about the app's capabilities when they arrived to the home screen. So we needed to make our onboarding very clear so the user knows functions like navigating to "Pins" and how they can share their own content.
V2 Changes:
  • Included more action oriented language to describe the app’s core functions.

  • Switched from tapping ‘Next’ to navigate to the proceeding screen via a drag motion.

Product Testing

We underwent two rounds of early concept testing (9 tests total) for the low and mid fidelity designs, and took turns moderating. I then affinity mapped the feedback via Mural to locate themes and patterns among the data, and put together a presentation for our stakeholders.   

✅ Loved locating missing attendance 

✅ Want to add goals & share the tool w/others 

⛔ Did not understand value of 'actions' panel

Not enough configuration / filtering

Design too elongated

Chapter 2: The Adaption

Since our proposal and user testing results initially received positive feedback from stakeholders, it came as a shock that they decided to change the vision of the product. We did not get a clear explanation as to why, but were told product and executives finally came to a decision on how to market Insights. Our slogan would be "know and grow your church with actionable insights."

 

The biggest change was reframing what we were considering an insight. Instead of an insight panel calling out trends, actions, and top attender or donors, the data itself and all the metrics shown would be considered insights.

ℹ️ This forced many features requested by users to be paused and placed into backlog (ie. customization, missing data, goals, etc).

Updated Requirements

Blending the previous designs with the new requirements and constraints, product and executives landed on the following requirements:

 Dashboard — View snapshots of product health, high-level metrics, and compare numbers and trends across similar activities

 Product Overview —  Individual detail pages for each product area, showcasing trends over time, high level metrics, and people engagement stages

 People List —  Drill down and filter your people to make data driven decisions

Updated User Flow

I updated the user flow to reflect the vision change. This included a dashboard with pre-defined widgets, the ability to dive into product specific overviews, and seeing a people list behind the numbers (with the ability to take action on them).

Co-Design Feedback

We continued to communicate and validate designs with a Co-Design group via Slack, 1:1 conversations, and email. We incorporated preference testing, overall feedback on direction of product, and any ideas or suggestions that they may have.

✅ They found value in the new people-focused vision

✅ They validated that we were showing the right data in the widgets

✅ They validated that we were showing the right actions (export, send to ChMS for mass actions)

⛔ They didn't trust the data due to inconsistent data entering on their end, and needed an easy to to locate and fix this missing data

⛔ They wanted to slice and dice the data even more

⛔ They reiterated that they want the ability to share and crack down on permissions

The Compromise

The lead designer and I pushed for additional features like sharing, permissions, fixing missing attendance, heat maps, and more, but in the end were denied by upper leadership because of a combination of tight deadlines and engineering efforts. 

We knew that pushing a MVP version out with bare features wasn't going to be enough to keep the product sticky, so product compromised by including those highly requested features into the post-MVP roadmap. It was important that UX referred back to our user testing and Co-Design feedback in these conversations to make sure we were building a valuable roadmap.

Why we landed on Iteration 3

We had three major iterations over a span of months, which we connected with our Co-Design customers throughout. Version 1 was a rough conceptual design that focused more on what to display and less of how it looked. Once we cracked down on requirements, we moved to Iteration 2. It was also canned for a couple reasons: 1) the design seemed flat and lacked reason behind visual hierarchy, and 2) It included nice-to-have features that we had to can for feasibly and tight deadline reasons.

Leading Iteration 3

This iteration focused on a bare bones MVP approach, involving a complete redesign of the Dashboard and creating a plan for visual hierarchy on all pages. It also:

 

Moved all data above the fold on the home page

⇨ Grouped related content together (Gestalt's Law of Proximity)

⇨ Upgraded UI consisting of soft shadows, colors, new components, use of white space

⇨ Removed certain features and placed into backlog (ie. heatmap)

Finalized the people list page

Style Guide

For branding, we used unique colors for each product to make them stand out. For the main product theme, we chose shades of blue to invoke calmness, relaxation, and trust. 

Though we utilized a good portion of our current Pushpay design system, there were many components that the lead designer and I had to build from scratch including gauge charts, configureable widgets, trend indicators, and comparison highlights.

The Final Design

01. Dashboard

✅  Quick, digestible snapshots of product health (Attenders, Donors, Volunteers) 

 

✅ High-level metrics, with the ability to dive deeper into the numbers and the people behind them

✅ Compare numbers and trends easily among similar activity (Gestalt's Law of Proximity)

02. Overview Pages

✅ View trends over time in a configurable table, with the option to further filter down

 

✅ High level metrics that you can dig deeper into (view people behind the number)

✅ View stages of engagement to learn where people fall through the cracks 

03. People List

This is the 💙 heart 💙 of Insights — knowing your people and their engagement journey, and being able to act on that knowledge. 

✅ Make data driven decisions: export a list, import list into other products to take mass actions (email, invite to event, add to group, etc)

✅ View all people or filter down to certain engagement stages, among other metrics. Every high level metric has its own list.

Results

⇨ The first phase of Insights went live February 2024.
⇨ Within two months, 75% of accounts had utilized the product, with a 30% weekly use rate.
 Customers reiterated in feedback that how Insights works now, it is not sticky enough but they are excited to see how the product will grow over time.
 To keep our customers excited about Insights, product put together a future release doc, so they are aware about new features coming out.
 
View demo on Pushpay.com →

Learnings

  • Balancing business and user goals can be tough when not everyone is aligned on the value behind a feature. I learned that communicating reasoning with data points and user quotes helps advocate for our users, and in our case got features back into the roadmap. My only regret wasn't pushing for these things earlier on in the project.

  • We had 6+ versions of design, including our original proposal. I learned this is normal and to be expected for a new product. It is not going to be perfect the first time around. It is a continuous improvement, and one where you communicate with internal and external stakeholders often.

  • In this project, the lead designer and I put on product manager hats because of a lack of vision originally. Though this was frustrating at first, I am grateful for the experience to work on requirements and advocate for features. It has only made me grow stronger as a UX designer.

bottom of page