Protect My Ministry Sign-up Flow

INTRODUCTION

PROBLEM

The current experience of creating an account with Protect My Ministry, a church background check provider, requires a phone call with support or filling out a sign-up form with very little information about the product offering. As the product integrates with more partners, how can we enable new adopters to feel informed and excited as they sign up for Protect My Ministry?

GOAL

Create a sign up flow for Protect My Ministry that informs and excites the user about Protect My Ministry.

METHODS USED

  • Competitive Analysis, User Interviews, User Research Analysis, User Personas, User Journeys, Task Analysis, User Flows, Lo-Fi Prototyping, High-Fidelity Wireframes & Interactive Prototyping, Usability Testing.

COLLABORATORS

  • Product Manager, Product Owner, Developers

WHAT’S OUT THERE?

I started out my project by conducting a thorough competitive analysis of existing competitors to gain inspiration for how other platforms conduct their onboarding.

WHAT DID I LEARN?

Many organizations use a lead gen approach on the first screen, asking the user for just enough information for marketing needs. The experience after is chunked into several steps in order to reduce mental load. Pricing information is also generally provided earlier rather than later as this is critical towards a user’s purchasing decision.

INFORMATION ARCHITECTURE

Based on my user journeys, I determined the various different essential tasks that would need to be performed on BillBuddy, and did task analysis as well as created user flows for each task. For example, for “Adding New Expenses”, here is my task analysis and user flow:

USER FLOW

TASK ANALYSIS

  • Open the app

  • Log into the app

  • Select transactions

  • Select "Add transaction"

  • Input "Store"

  • Input "Date of Purchase"

  • Input "Amount Spent"

  • Add details in "Description"

  • Select "Add Receipt"

  • Take picture of receipt

  • Select "Add picture"

  • Select "Submit transaction"

  • Check the transaction is added to transactions log

I then took a mobile first design approach and started listing content relevant to my personas, using a progressive enhancement methodology.

CREATING SITEMAPS

Based on what I knew about other apps, as well as my research so far, I created an initial sitemap. Click below to view it full-size.

Sitemap v.1 - Created based purely off of user journeys and personas

CARD SORTING

To get user input on my sitemap, I conducted a digital open card sort on OptimalSort with 5 participants acquired via Slack, with the cards on the left below. These results allowed me to create a similarity matrix that I could use to identify association patterns. Click to view in more detail.

These results allowed me to revise my sitemap. Click below to view it full-size.

Sitemap v.2 - Created based off of findings from my card-sorting exercise

WIREFRAMING

With my research-informed sitemap, I could start sketching wireframes. I sketched mobile and desktop wireframes to factor in differences in navigation and design patterns between the two breakpoints. I also sketched mobile and desktop wireframes for the top three most important tasks of the app:

  1. Viewing your payment/expense status

  2. Viewing past or scheduled transactions

  3. Adding a new expense

LOW-FIDELITY WIREFRAMES - PEN AND PAPER

Click to view wireframes in more detail.

LOW-FIDELITY WIREFRAMES - BALSAMIQ

Click to view wireframes in more detail.

LOW-FIDELITY PROTOTYPES FOR ONBOARDING - ADOBE XD

For onboarding, I decided to use coach marks on the homepage to point out only the top 4 features a new user would need to know. In terms of my prototype, I kept to a very minimalistic design which includes conventional iconography. Many features only appear after tapping, such as the popout menu for the settings panel, or dropdown menus for expense categorization. The transaction history has a filter by date feature so the user is not inundated with information on the screen.

Click to view wireframes in more detail.

MID-FIDELITY PROTOTYPES - ADOBE XD

I then started building out mid-fidelity prototypes in Adobe XD. My goal for these is that they would be functionally accurate enough for user testing. Click to view wireframes in more detail.

USABILITY TESTING

TEST PLAN

Goal

The goal of this study is to assess the learnability for new users interacting with the expense-sharing application for the first time on mobile. We would like to observe and measure if users understand the app, its value, and how to complete basic initial functions such as logging in, viewing and approving requested expenses, and adding new expenses. We want to improve major errors in the design process as we observe users engaging with the app.

Test Objectives

  • Determine if participants understand what the app is about quickly and easily (i.e., an application for sharing expenses with your household) and the value it provides.

  • Observe how users navigate and find information about expenses from the homepage—can they successfully find expenses in their queue and add a new expense?

Methodology

The study will be conducted as moderated, in-person tests with those who live within 10 miles from me, and as moderated remote tests with those who live further. The test will include a short briefing, task performance with BillBuddy conducted on a mobile app, and a debriefing.

Script

I asked some basic demographic questions including questions about their living situation, three background questions, and asked them to conduct two tasks with corresponding scenarios.

Participants

The study tested 6 participants who were recruited through my personal network to participate in the study. They were screened for basic demographic information to ensure they fit with the user persona of BillBuddy.

ANALYZING THE RESULTS

Affinity Mapping took place to group participants’ feedback into themes inside of main categories:

  • Observation

  • Positive quotes

  • Negative quotes

  • Errors

Rainbow Spreadsheet - used to consolidate these groupings and was used to visually display how many participants had similar experiences.

Neilson’s Error Rating Scale - Above you will see the top five test errors identified by severity with Neilson’s Error Rating Scale and the frequency users had similar experiences.

ISSUES ADDRESSED

Original (left); Revised (right)

Issue 1: When approving expenses, some users were not able to skip making a comment.

Suggested Change: Allow commenting only when people choose to request an update or decline the expense.

Evidence: 3 of the 6 participants wanted to skip the comment section but couldn’t. 4 participants wanted to know if they could comment if they were to decline.

Issue 2: Users were hesitant to outright decline if they just wanted a small update.

Suggested Change: Add a “Request update” button for those who don’t want to outright decline.

Evidence: P2 and P6 gave the feedback that they would want the option to just request an update rather than outright decline.

 
 
 

Original (left); Revised (right)

 

Issue 3: It is unclear whether this interface is what every household member sees or just the finance admin if there is one.

Suggested Change: Add the words “Admin” to the screen. Explain in the interview script that they are participating as someone with an admin view, but that someone without admin view wouldn’t necessarily have to approve all expenses.

Evidence: 3 of the 6 participants asked what others’ interface would look like, if it would be the same or different to what they interacted with.

Issue 4: “Expense approvals” and “Reminders to pay” look too similar/merged on the homescreen.

Suggested Change: Either make the two sections slightly different colors, and maybe add a line in between. OR toggle to view each section.

Evidence: 2 of the 6 participants commented how they would appreciate if these two sections were more distinguished from each other. It really affected P3’s experience as she is very visual.

Issue 5: Unusual experience as users expected menu options to be top left.

Suggested Change: Swap placement of alerts and menu options.

Evidence: P2 and P5 expected menu options to be top left, referencing other app experiences.

PREFERENCE TESTING

I needed to conduct a preference test between two background images for the first screen, the login/signup screen. I tested this because it will be the first interaction the user will have with the app and I want to make sure that their first impression was inviting.

Methodology The study was conducted remotely using UsabilityHub. Participants were presented with two versions of the same screen - the login screen. They could do this on any device, and had the option of leaving a comment explaining why they preferred one version of the other.

Participants & Schedule A total of 11 participants were tested remotely between December 26 and December 30. They took an average of 1 minute and 26 seconds to complete the test.

Results 11 participants participated in the test in total, and the results were 45% for Version A and 55% for Version B, with Version B winning by one vote. However, one of the votes for Version B had a comment that said both images would work.

The results are so close that I can reasonably say neither design is significantly more inviting than the other. Based on the comments, both images were inviting depending on what inviting looked like for the tester. For Version B, people mentioned they thought the cool tones and professionalism of the image were inviting, whereas for Version A, people mentioned that the lighting and warm tones was inviting.

The Updates If there is a way in the future to segment the images based on the user profile, I would consider it since both images were well-liked.

But for the purposes of choosing one image, I will update the app with Version B since one person mentioned "gender diversity" was a pro, and this is something that Version A lacked. One of the improvements that people wanted for Version B can easily be made - such as increasing the darkness of the black layer behind the logo to better the visibility of the logo.

VISUAL DESIGN

At this stage of the design process, I was ready to start working on hi-fidelity prototypes by applying visual design principles, Material Design guidelines, grid and spacing fundamentals, accessibility guidelines, and design elements that would create a delightful experience for the user. I created a Style Guide and UI Design Language System to retain visual integrity for developers. View them through the buttons below.

Click each slide to view my visual design decisions in more detail.

DESIGN ITERATIONS

The app’s design and usability have been refined over rounds of user testing and prototyping. View my reflection on the design changes for three of the screens below.

THE CURRENT PROTOTYPE

Although there are still more screens to build, design, and test, I’m happy with where the current screens have progressed through user testing and iterative design. I believe testing should be an ongoing part of the product design cycle, and plan to continue testing and iterating.

For now, I invite you to test out the current prototype on Adobe XD and leave your feedback.