Elisabeth Fonden
Strategy • Research • Design • User Testing • Stakeholder Presentation
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
The Situation
The 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.
The Process & My 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
The Action
Taking Hold of Ambiguous Reigns: A Proposal
When I joined this project as UX designer, there was no clear alignment or vision from the product team & stakeholders. What it would look like, what features it would have, and what the scope could be was not yet decided. To combat this, the lead designer and I put a 💍 proposal 💍 together to get the ball rolling. This proposal consisted of design research, storyboarding, and user flows, which I led independently. The lead designer and I both collaborated on feature ideation, and low-fidelity mocks.
Design Question
How might we deliver a clear and deep understanding of an organization's health, while simultaneously strengthening their connections and growth with the community, and utilizing Pushpay software to make data-driven decisions?
Personas
Early on, we identified our primary persona to be an administrator who handles reporting for their organization. As the project fleshed out more, we identified three major players.
.png)
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 (Church Admin) 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.
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.
.png)
Data Validation
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
Data-Driven Designs
Drawing from the competitor analysis, best practice investigation around analytics and dashboards, team workshops, and our data validation methods, we 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
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
ℹ️ Testing didn't stop there. We continued a Co-Design process, and kept in contact with customers via slack channels, google surveys, as well as 1:1 calls.
A change in vision ⁉️
Though we received positive feedback from our user testing and customer conversations, upper management ultimately threw a curve ball and re-defined the vision for the product. Though it was nice to finally get clear direction from product, I have to admit it was tough to hear that our proposal wasn't going to be the thing we build.
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 the insights. Other changes included:
-
Pre-configured widgets, no customization or editing the dashboard
-
More high level metrics
-
Ability to drill down to the people behind the numbers
-
No fancy features starting out, even if our customers are asking for them
ℹ️ This forced many features requested by users to be paused and placed into backlog (customization, missing data, goals, etc).
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).
Updated Requirements
Blending the previous designs with the new requirements and constraints, we landed on the following:
⇨ Dashboard — View snapshots of product health, high-level metrics that you can dig deeper into, and the ability to compare numbers and trends across similar activities
⇨ Product Overview — Individual detail pages for each product area, showcasing trends over time in a configurable table, high level metrics that you can dig deeper into (view people behind the number), and view people engagement stages
⇨ People List — Drill down and filter your people to make data driven decisions: export list or import list into other products to take mass actions (email, invite to event, add to group, etc).
Co-Design Feedback
We continued to communicate and validate designs with our 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
.png)
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.
The Results
⇨ The first phase of Insights went live February 2024.
⇨ Within two months, 750 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.
⇨ To keep our customers excited about Insights, product put together a future release doc, so they are aware about new features coming out.
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.