Event Calendar
Redesigning a Pushpay legacy event calendar experience
Let’s talk about Impact 🚀
300%
increase ⬆️ in page traffic over a three month period
1 ➮ 3
improved customization by providing 3 unique calendar viewing layouts
Situation
Background
Pushpay is an all-in-one church management system with an overall goal to increase giving and drive engagement. One of Pushpay's products is ChMS, a customer management software. This project will specifically refer to a ChMS feature called the 'public calendar'. This public facing calendar allows congregants at a church to view event details and signup for an event.
The Problem
Using analytics tools like Pendo and Redash, we found that the existing public Calendar page had low usage, especially compared to other public pages (Find a Group, Forms, Give). This also was a legacy page built over 20 years prior, and a redesign was needed to ensure consistent design standards throughout the product.
Before: ChMS Public Calendar
Task
Our Objective
We had two goals. The first was to investigate low page usage. We believed most users were using another tool to meet their public calendar needs, and needed to dig into which tools, and why they were using them over ours. The second goal was to encourage customers to utilize the calendar through a redesign.
The Process & My Contributions
I was the sole designer on this project, and worked closely with product and engineering to ensure alignment. To lay a foundation for data driven designs, I completed a heuristic evaluation of the current experience, conducted a competitor analysis, and sent out a customer survey that received 416 responses. Then, I put together user flows, wireframes, and dev-ready designs. Due to time constraints, we were not able to usability test. However, we felt strongly in our design decisions and received positive feedback from customers once it was pushed live.
⏰ Project Timeline: 2 months
⚒️ Project Tools: Sketch, Mural, Pendo, Maze
Screenshot of Research Presentation
Action
Heuristic Evaluation
I chose to complete a heuristic evaluation to identify usability issues among the current experience. Violated heuristics included consistency standards (inconsistent use of components), recognition rather than recall (no search bars or filters to help find events), flexibility and efficiency of use (not mobile friendly, calendar breaks on devices smaller than desktop), user control and freedom (the modals are missing a close button), and more.
Screenshot of Heuristic Evaluation Presentation
User Survey
I chose to send out a user survey to church admins with a mix of quantitative and qualitative questions, with a goal to learn whether or not they use our feature, what calendar tools they do use, and what their experience has been like. We received 416 responses.
For the qualitative questions, I scoped down to 50 randomized responses, and then utilized affinity mapping to find common themes and patterns. Some themes from the survey include:
⇨ Lack of aesthetics was the main reason customers were not using our feature
⇨ There was a need for different viewing options
⇨ There was a need for customization (utilizing church branding)
⇨ There was a need to scope down results, especially for larger churches
⇨ Lack of integration between Pushpay products and how events are displayed
Competitor Analysis
I chose to complete a competitor analysis on the Top 5 calendar tools identified in our user survey. This helped me learn about calendar functionality in general, and identify strengths and weaknesses among them. I found that all calendars seem to have strong mobile first design, contain different views (list, calendar, grid), include ability to search and filter, provide actions like subscribe, share, RSVP, and more.
Screenshot of Google Calendar's List View
Data-Driven Recommendations
I presented the design research to internal stakeholders including product, research, and engineering. We agreed on splitting out next steps into short-term or long-term stages based on feasibility and level of engineering effort.
We focused on the short term suggestions for the first release, which consisted of freshening up the design, introducing different views, and adding a search and filter functionality.
User Flows
I worked on a simple user flow to communicate actions and steps customers could take on this page. The main difference is now they have the ability to choose different layouts and search and filter the results.
Wireframes & 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.
The Final Design
Using a mobile first approach, I finalized designs for the three views (grid, calendar, and list) and the event modal. Mobile first was chosen because the target personas for this page would be congregants at a church who use their phones far more often than computers.
01. Grid View
✅ An aesthetic layout for showcasing up and coming events for a church or organization, with a focus on images
✅ Teases important event information, like title, description, date, and time
✅ Interact-able cards, where on click opens up an event modal where you can RSVP
02. Calendar View
✅ A more typical calendar layout, easy to navigate through weeks and months
✅ Especially on desktop, more white space = more breathing room, whereas before it was cluttered all over
✅ Interact-able cards, where on click opens up an event modal where you can RSVP
03. List View
✅ A clean, compact view of events, displaying multiple at a time above the fold
✅ Useful for quickly scanning upcoming events
✅ Interact-able cards, where on click opens up an event modal where you can RSVP
04. Event Modal
✅ Click an event card to view details and RSVP
✅ Invite your friends to specific events by sharing
Results
✅ Calendar redesign saw a 300% jump in page visits over a three month period.
✅ We received positive feedback once the designs went live, though certain feature requests like customization and integration were reiterated as important. The plan is to investigate those requests with engineering and get them on the roadmap.
Learnings
-
Balancing business and user goals: I learned that sometimes the first iteration isn't going to hit the nail perfectly because some things take longer to investigate and build. However, it's my job to advocate for our users and use datapoints from user surveys and quotes to make sure we are solving the needs of our users. In the end, it's up to the product manager on when they want to push future roadmap items, but I'll always advocate!
-
Not everything needs to be user tested. Though it would have been nice, we had a tight deadline to wrap this up to focus on other important projects. I believe the time we spent on quantitative and qualitative questions early on, combined with a competitor analysis, led to a strong end product.
-
In this project, I put on a product manager hat to make suggestions for requirements and features. It's important that UX has a seat at the table, and points back to data that suggests certain directions for a project.