Designing the Payment Arrangement feature for the My Sprint App

A Payment Arrangement allows eligible customers extra time to pay their past due balance, while still enjoying uninterrupted service.

Current Scenario

• Inconsistent design experience
  The feature is not native to the app and takes them to the app web view. This hampers performance and leads to inconsistency in design. Read more about native and hybrid apps here


Design Inconsistencies as we move from Native app to the App web view

• Obscure Placement
  The placement of the feature is not immediately apparent. (Refer to the image above)
• Wordy explanations
  The messaging in the flow is too wordy. Users skipped them and called customer care to ask the same questions.


Too much explanation offered

Problem statement

How can we make the overall experience of using the Payment arrangement feature more clear and intuitive for users?

User and business goals

• Reduce the call/chat volume related to Payment Arrangements.
• Increase customer understanding of Payment Arrangements & the option when available.
• Increase on-time payments
• Decrease service suspensions
• Increase NPS score (overall customer satisfaction)

Team

• Primary Designer & Researcher: Jatin Gupta
• Design direction: Keith Farb
• Product Owner: James Qureshi
• Copywriter: Gretchen Gniffke
• Business Analyst: Swechya Sharma, Nagaraj Palaniswamy

Challenges

• Seamless Integration
  The feature needed to be introduced into the app seamlessly without breaking existing experiences.
• Sensitive Flow
  Payment Arrangement is a stressful last-minute decision. Any interruptions lead users to call customer care. Thus the messaging related to ineligibility or extra charges becomes sensitive.
• Numerous use cases
  My Sprint App has over 10 million users. Incorporating all associated use cases into the design is a mountainous task.

Understanding of users

Our understanding of the target users came primarily from finance and customer service teams, based on their observations over the years.

• They are waiting on their next paycheck.
• An unexpected big charge has thrown their budget off track.
• They have ideal dates in mind to pay their bill which does not align with their current billing cycle.

Brainstorming

• Initial Flow to facilitate conversations
  I created an initial flow with the basic requirements using existing screens. This facilitated conversations with the stakeholders and helped in surfacing any loose ends.

Initial Payment Arrangement flow

Competitive Analysis

To identify how other companies handle our 2 biggest pain points: the placement of the Payment Arrangement feature and messaging related to it, a competitive analysis was done.

This included looking at our direct competitors like T-Mobile, AT&T, and other utility companies like Dominion Energy or Cox communications.

• Secondary feature
  T-Mobile places it as a secondary feature in their main payment flow. Here, there is a high probability for users to overlook the feature.


Placement of Payment Arrangement feature on T-mobile

• Pay Now-Pay Later approach
  This approach makes it very clear to the users that if they can't pay their bill now, they have the option to pay later.
  It doesn't require users to have a prior understanding of what a Payment Arrangement is.


Dominion Energy has the option to Pay Now or Later

• Break in the experience
  Both T-mobile and AT&T redirect their users to the FAQs page to learn more about Payment Arrangement.


T-Mobile redirects customers to Payment Arrangement FAQs

• Succinct messaging in our current approach
  Thus we stuck with our current approach of showing messaging at the beginning of the flow but decided to make it more succinct.

First Iteration

Incorporating these approaches, I came up with a somewhat simple flow to make a payment arrangement.

First Iteration for the Payment Arrangement Flow

• Pay Later
  This option encourages people to avoid paying their bills now.
• Payment Arrangement Messaging (Screen 3 above in the top row)
  The messaging needs to be more succinct so users don't end up skipping it.
• Calendar UI
  Calendar is an important step in this process. It should clearly indicate which dates are after the due date and would lead to a Payment Arrangement.

Changes implemented based on feedback

Evaluating the designs through Research

At this point, we wanted to check how well our design direction is addressing the initially identified problems. Thus we decided to conduct a user research study with the following objectives in mind:

• Do we need to call out the Payment Arrangement feature on the main dashboard for past due users?


CTA for Payment Arrangement on Dashboard

• Is the messaging for Payment Arrangement (PA) being expressed clearly enough? Are users still skipping the important parts?
• Are users able to make a Payment Arrangement by themselves?

The study was conducted in an unmoderated manner using UserZoom.

• Click Test
  50% of the users were shown the dashboard without CTA for Payment Arrangement and the rest with CTA. This was done to identify how many users end up in the Payment Arrangement flow.
• Think out loud study to identify any breaks in the flow.
  Task: Try to schedule a Payment Arrangement for your past-due bill.

• With an explicit CTA for Payment Arrangement shown on the billing page, users entered the Payment Arrangement flow much more (79% compared to 57%).
• The overall flow was simple enough and all the participants were able to complete it.
• Messaging: Most participants read only the headlines and top 2 bullets. They were still skipping important information provided in the latter half related to Autopay and Late Fees.


Users were still skipping important parts related to Autopay and Late Fees

Design impact and Final Mockups

Main Dashboard - For users, familiar with the Payment arrangement feature, we added an explicit call out to set up a payment arrangement. For all other users, they can click on Make a Payment.

Pay Now: Need More Time - When the users are past due on their bill, Need More Time starts a Payment Arrangement flow. In all other cases, it allows users to schedule a future dated payment.

Left: Main Dashboard, Right: Pay Later-Need More Time

Payment Arrangement Messaging - We presented the messaging in a list format. The heading of the list item explains the gist of the information and the description was limited to 2 lines. We also added icons for quick recognizability.

Payment Details - A summary of the payments including amount and dates.

Left: Payment Arrangement Messaging, Right: Payment Details

Calendar - Since this entire flow deals with giving extra time to the users, the calendar is the central piece of it all. It clearly depicts the due date, the dates available to make a Payment Arrangement, and the selected date.

Left: Calendar, Right: Payment Details

Left: Payment Arrangement Review, Right: Confirmation

Validation

• Call Volume Reduction
  We were able to bring the call volumes down, exceeding our initial target of 5% call reduction by almost 40%.
• #1 channel for Payment Arrangement
  Among all channels that Sprint offers to create a Payment Arrangement, My Sprint app reached the top.
• Positive Play Store reviews
  The play store reviews related to Payment Arrangements were highly positive.


Play Store reviews about Payment Arrangement

Retrospective

• Edge cases affecting the main use case
  We spent a lot of time thinking about the edge cases which in turn adversely affected our main use case.
• Get Data early on
  The stakeholders brought up some points at crucial times which we had no data to counter with. Thus getting quick and dirty data early on in the process is very helpful.
• Understand your PMs
  Talk to the PMs and understand how willing they are to take risks with new approaches and pushing the entire team.

K12 Insight: Redesining the way a user shares a survey.

Usability evaluation and redesign

• Date: Oct- Dec 2018
• Client: K12 Insight
• Category: UX design

Context

The publish module within Engage - the survey creation tool of K12 Insight, was a cause for concern due to too many methods of sharing. Additionally, the feature was also cumbersome, demanding a minimum of 4 steps from our users including several questions within to pubish a survey. A hefty demand leading to a hefty dropout rate.

It was clear that a redesign of the sharing workflow was needed so that users could launch their surveys as seamlessly as possible.

Note:
Since this was an extremely long project, I would only share the workflow of sharing by email. If you’d like to see other workflows, please reach out via email and I’d be happy to share.

Initial Goal

Make sharing of a survey easier and faster.

Team

I was the sole designer working on this project along with the project manager and the CEO. Overall the project took around 3 months to complete.

Project constraints

1. K12 Insight was not in favor of doing user research due to a previous bad experience as well as financial reasons.
2. Remote collaboration in different time zones (USA and India) meant that we would only get 1-2 hours of overlapping time everyday to brainstorm, get design feedback and determine next steps.

Research

1. I began the research by going through the platform myself and doing the heuristic evaluation.
2. I looked at the direct competitors like SurveyMonkey, Qualtrics, SurveyGizmo, and indirect competitors like Mailchimp to see how their survey sharing feature functioned.
3. I conducted interviews with support staff to uncover the painpoints that our users face.
4. I then interviewed the research team who use Engage to conduct managed projects for clients. They themselves are first hand users of the product.
5. To check the usage frequency of our various sharing methods, I dove in to the analytics provided from Google.

Key Research Insights: Sharing methods

1. In total there were 21 sharing methods. Three of these were for sharing a link, 12 were for social media.


The 21 sharing methods

2. In comparison, competitors like SurveyMonkey, Qualtrics, etc. averaged only 5 publishing methods.


Publish methods in SurveyMonkey and Qualtrics

3. Some methods such as multi-use link has an option to restrict the number of uses of a link to 1 which then functions in the same way as a Single-use link.
4. In spite of having 12 methods for publishing on social media, the frequency of use for even the most common ones was really low. From the interviews, we found out that it was due to the lack of customizability given to the user.


Google analytics data showing usage of Facebook as a publishing method over the last 6 months

Key Research Insights: Sharing via email

1. Current workflow for sharing a survey via email is really cumbersone and involves going through 4 steps even without any setting change.


Email sharing workflow

2. Users don’t want to schedule reminders or set expiration options before launching their survey.
3. In order to edit the email content, users had to edit the email template. This confused many new users. Additionally, due to this, important features related to personalization of email got hidden.


Workflow to edit the email content

Design goals

1. We wanted to make sharing surveys via email to be as familiar to the user as possible. Other more advanced features would be hidden within menus.
2. Reducing the number of sharing options to as close to 5 as we could get.
3. The biggest challenge in this project was simplifying the steps without losing any core functionalities that was already been in place.

Design - Publishing methods overview

Initial sketch of publish overview

Iteration 1

This was the first iteration I came up with but it was rejected because we are using a similar structure in our dashboard screen where the interactions are completely different. Thus in order to maintain consistent interactions we ended up not using this.

Iteration 2

This iteration was rejected purely due to aesthetic reasons. We wanted to move towards a more modern approach of going for a borderless layout and using whitespace to separate out elements.

Redesigned publish methods overview page

1. Through this design, I was able to reduce the number of steps from 21 to 4 while maintaining all the core functionalities.
2. The use of whitespace between elements as well as hover shadow interaction comes directly from material design principles of introducing depth to elements.

Design - Sharing via email

Sharing via email main screen

Both the iterations here were rejected as these gave the impression as if you are filling up a contact form rather than scheduling an email. Additionally, we wanted this part of the workflow to be as familiar to the users as possible.

Main screen to share via email showing the sending options

The formatting bar appears on editing the content.

More visibility on important personalization features like mail merge

1. In conjunction with our design goals mentioned above, we decided it was also best to not span too far away from the sharing methods that had already been in place from competitors like Gmail and Survey Monkey.
2. This design gets rid of the sequential approach. Thus it acts as a quick send for amateur user and full of features for advanced users.
3. One important consideration here was to make sure that email content and email template design are separated from each other and given appropriate priorities in the workflow.

Design: Selecting and editing an email template

Selecting change template from compose email screen.

Bunch of templates to choose from or create a new one

1. It does not force every user to worry about the design of email template.
2. It makes changing the content of an email much easier by separating out the template design and content part.
3. Options like mail merge which are very important for personalizing emails, get much more visibility.

Conclusion

1. Reduction in the number of sharing methods from 21 to 4, without losing any functionality.
2. Bring more visibility on some of the hidden features like mail merge.
3. Reduction of steps to launch a survey
4. Removal of redundant features to improve the performance of the entire module.

Next Steps

Being a really long project, it is being shipped in phases and will be shipped entirely in a year or may take even more time.

Reflection

1. Overall, working on this project, made me realize how keeping on adding features to a product is not a good idea. After a while, it gets too cumbersome to understand it for a new user. When thinking of adding a new feature, a lot of research needs to be done before it is shipped into the product.
2. With such a big project, comes tight deadlines and pressure from the management. Thus keeping the management in loop at every step of the way and getting regular feedback so that you don’t derail is crucial to deliver on time.

T1DAR: AR game to teach kids about Type 1 diabetes

AR game design

• Date: June - August 2017
• Client: Lenovo
• Category: AR/VR Desginer

Context

• This project came about as Phab 2 Pro, Lenovo’s new flagship phone has just come out and they were looking for content for it in order to market it better.
• T1DAR is an augmented reality game with a purpose to teach kids suffering from Type1 diabetes about how to take care of themselves, by making them take care of a type 1 diabetic pet.
• It is intended for kids in the age group 8-12 and suffering from Type 1 diabetes, whose parents want them to take up a sense of responsibility for their own health.

Why is it a problem?

1. Kids suffering from Type 1 diabetes go through a lot of struggle in managing it.
2. They have to make sure to estimate the amount of carbs in the food they are going to eat correctly and then give themselves the correct amount of insulin. Moreover, they have to do it for all the meals that they are going to eat which is too much burden for a kid less than 8 years old.
3. The amount of insulin to be taken for a specific amount of carbs in a meal, can be very difficult to compute as well. Moreover, they have to make sure to take into account the carb ratio and correction factor as well.
4. The educational material provided by clinicians is too long and hard to remember for kids.
5. During the initial years of their life, their parents take care of it. But with time, the parents want the children to take responsibility of their own health.

Initial goal

To come with a prototype for a game that is fun, engaging, conveys all the learning points and can be tested with the kids at C.S.Mott children’s hospital.

My role

1. Worked as a game designer to come up with different levels of the game. Brainstormed, sketched, storyboarded and critiqued the different ideas to come up with the design of the level.
2. Prototyped the game in Unity going through various design sprints.
3. Conducted usability tests and A/B tests for validation.

Objectives/success criteria

1. To make the game fun and engaging.
2. Explain the concept of carb ratio, correction factor, insulin, glucagon etc. to an 8-12 year old diabetic kid.

Research phase

1. In order to understand more about Type 1 diabetes, we invited Dr. Joyce Lee, prof. of pediatrics in the Umich Medical school who explained us about diabetes and the common struggles associated with it.


Dr. Lee explaining to us about Type 1 diabetes

2. Apart from that we carefully observed our in-house patient, a 12 year old girl suffering from Type 1 diabetes and asked her questions at regular intervals to make sure we understood the problem clearly. We were very keen to notice how she calculated the amount of carbs in a given food and what kind of food she preferred.


Observing our in-house patient on a day to day basis

3. We performed competitive analysis, to see which all games are out there who are trying to do the same.

Current situation

This is the actual kit used by Type 1 diabetic kids. Just by looking at the kit it can become extremely overwhelming for a 8 year old kid.

Kit used by Type 1 diabetes patients

An insulin pump: currently used by Alexis to calculate the amount of insulin ot give herself.

Insulin pump to calculate the amount of insulin in the body

Glucagon: Whenever the patient’s diabetes becomes too high and gets out of control, glucogon is injected into them to get it back to normal. But it has to be done by someone else.

Glucagon: Used to control diabetes in case of an emergency

Educational material provided is too much for a kid to grasp and remember.

Educational material provided to a patient

Execution

We worked in 2-3 week design sprints following a strict agile methodology. At the end of each sprint, we tested the prototype with a participant.

During the sprint, we started off with a brainstorming session, sketching the level design and then prototyping the same in Unity.

Our team during a sprint review meeting

Brainstorming ideas for level design

Objective #1: How to make the game fun?

Rather than having conventional pets, we decided to have a dragon as a pet.

Game screenshot showing dragon as a pet

Having a mini game where the kids would toss the food to boards with a random set of numbers with one of the number being the correct carb amount of the food.

Tossing mini game within the bigger game

Helping the kids, plan a meal of 100 carbs by making it as a mission of the level

Make up 100 carbs by choosing from different food items

Objective #2: How to make the game engaging?

Introduced a timer to have a sense of urgency and a Health Bar to get an accurate feedback of their actions.

Screenshot of game showing a timer and a healthbar

Have a set of fireworks to have a sense of accomplishment when a kid completes the level.

Fireworks at the end of a level

Objective #3: How to make the game educational and cover all the learning points?

The first level acted as a tutorial for the kids in order to adjust them to the game settings.

Instructions on the screen

Explaining the basic concepts such as target blood sugar level, to the kids.

Slide shown in between the game to explain a concept

Making the kids remember the carb amount in a food using practical scenarios.

Explaining concepts through easy to remember scenarios

Conclusion

For conducting usability testing of the game, we tested it by making the kids play the game before we received it with the one that we received afterwards and having them take a survey. We conducted this test with 6 target (or close) users.

Our in-house patient playing the game for the first time

A list of questions we asked the kids while conducting usability test to measure our initial goals.

Survey presented to the participants

After compiling the results of the survey, we were able to increase the engagement by 2.5% and the educational value by 5%.

Next steps

We had started with the design of next level but due to time restrictions there were many things we would have liked to do but were unable to complete.

1. Giving the users ability to do more fun things with their pet like make them more sociable or engage them in another playing activity.


Dragon playing with a football



2. Making the menu items in a semi-circular layout to denote relatedness and improve the overall UI.


Semi-circular menu layout.

3. Add an accurate visual representation of the quantity of food items throughout the game. For e.g. 1cup of Milk, 1 cup of juice, 1 bowl of watermelon, 1 tsp. of sugar etc.

Looking back or learnings from the process

1. A game involves many complex interactions and thus it has to be prototyped (developed) in order for the person testing it to get the context right.
2. The ability to exxplain the design changes to a designer which involves changes in their previously employed code is a very important and useful skill.
3. Augmented reality is a very new concept and many people still don’t get the context. Thus making sure that the instructions which corresponds to the augmented reality part of the game are understood by an novice AR user, can go a long way.
4. Hardness of a level in a game needs to be properly balanced. If too hard, the participant gives up but if too easy, it becomes uninteresting. Thus, having a level a little on the harder side makes the user remember the things taught.
5. When aiming for a MVP, try to use and re-use as much of the interactions from the previous level as possible. This ensures consistency and make the player feel comfortable with the game. In terms of prototyping, it makes the task easier.

The Team

Our entire team

UM LSA Honors website

Usability evaluation

• Date: January - April 2017
• Client: UM LSA Honors
• Category: Usability evaluation

Client

The Honors program is a department within the College of Literature, Science and the Arts at the University of Michigan. This department maintains the LSA Honors website, which contains information for prospective and current students, faculty and staff, and alumni.

Context

The Honors program recently shifted its website to a new Content management system. Thus the staff is forced to transfer all the information from the old website to the new website template which has caused problems in the way information is organized and presented.

This problem exacerbated when the number of emails from students unable to find information on the website; to the Honors staff increased. Thus, the staff realized the potential usability issues with the website including confusing navigation and text heaviness on some of the pages.

My role

1. Conducted interviews (as an interviewee and a note-taker)
2. Performed comparative analysis, heuristic evaluation and usability (both acting as a moderator and a note-taker)
3. Collaborated in the creation of a survey

Initial goals

As we started, we had the goal of making the LSA Honors website more usable and useful for current students.

Success criteria

Reduced number of emails from current students, asking about the information already listed on the website.

Scoping

Upon recommendation from the client and the current students being the major users of the website, we decided to narrow down our scope and focus only on the current students’ section.

Landing page for LSA Honors website: Current Students

Research Methodology

Method #1 : Interaction Mapping

A static representation of the LSA Honors website highlighted all the possible action states and thus any navigation issues (if 2 actions lead to the same place) with the website.

Mapping the entire LSA Honors website

Method #2 : Interviews

We conducted interviews with 5 current LSA Honors students to find out about the kind of information they look for and the methods employed by them in order to find it.

Persona based on interviews' findings

Method #3 : Comparative analysis

Through this, we wanted to see how other similar websites handle the issues related to information hierarchy, navigation structure etc.

Presentation of information by LSA Sweetland writing center website.

Method #4 : Surveys

To find quantitative data about the information seeking behavior and the overall attitude of current students towards the website. Received a total of 28 responses.

In person help was the most frequently utilized method for finding information on the LSA Honors website.

Method #5 : Heuristic evaluation

Our goal here was to identify usability issues and areas where the site could be improved. We used heuristics like Visibility of System Status, Consistency and Standards, accessibility etc. to conduct our evaluation.

Using WAVE on LSA Honors website

Using WAVE Accessibility system detects issues such as missing alt text, empty heading and links, problematic alt texts, etc.

Method #6 : Usability testing

We conducted usability tests with 5 current students to identify how several features of the website like top-level and side navigation menus, quick links, search bar, accordions, headings etc. are helping the users to find the information they are looking for.

Due to large amounts of text on pages, users used Ctrl+F (browser find functionality) to look for information.

Main findings and recommendations

Finding #1

Navigation terminology could be improved: Information about some topics could be found at more than 2 places which makes it hard for the user to remember where to find it. Also, when asked to find out about the Sophomore Honors award, all our usability test participants looked under Honors Awards and Grants page, which is understandable. However, the information is located under the Sophomore students page or the Honors requirements page.

Recommendations for finding #1

1. More descriptive titles can be used for the pages that help the users in understanding what the page might contain. For eg.

Graduation for Honors Majors page

The Graduation for Honors Majors page talks in great detail about the process of completing an Honors Thesis, which is something that users may not be able to guess from the page title.

Finding #2

Unclear information hierarchy on a page, which makes the pages hard to skim and thus relevant information being buried in a heap of text.

1. Many pages contain just a wall of text.
2. Pages lack headings and subheadings.

Graduation for Honors Majors page

Recommendations for finding #2

1. Add proper subheadings.
2. Make use of lists, indentation and bolded text to emphasize important information.

LSA Sweetland writing center website

LSA Sweetland writing center’s website uses bold texts and headings which makes it really easy to locate information.

Finding #3

Accessibility issues - Recently, University of California Berkeley was asked to take off some of its free educational content as it was not accessible to people who were blind, deaf or hard of hearing. Read the complete article here. Owing to that, we checked the website for accessibility standards and found several issues:

1. Alt text attribute not set for many images, thus using the website could be challenge for screen reader users.

LSA Honors website lacking alt text attribute

Using WAVE Accessibility system detects issues such as missing alt text, empty heading and links, problematic alt texts, etc.In addition, Heading levels are often skipped, and b tags are often used instead of h headings, which keeps screen reader users from skimming the webpage.

1. Color contrast below the 4.5:1 standard. Sometimes there is low contrast between the different elements on the page.

Lack of color contrast on LSA Honors website

1. Use of b tags for headings. Screen reader applications rely on heading tags to jump to different parts of the page. Incorrect use of heading tags decreases the skimmability of the webpages for screen reader users.

Using b html tags for headings

Recommendations for finding #3

1. Add meaningful alt text to images. This will make sure that the website complies with the ADA (Americans with disabilities act) and make it more accessible to its diverse range of users.
2. Using proper HTML tags for headings (h2, h3 instead of h4 and b). Adding proper HTML tags like h2, h3 rather than b, would make it easier for screen reader users to skim the webpages.
3. Use color contrast checker to make sure the color contrast meets the standard.

Next steps

1. Research and analyze the more frequently visited pages using Google analytics data and use these findings to inform a redesign of the website’s information hierarchy.
2. Complete a card sorting activity, in which participants organize topics into categories that make more sense to them, to reorganize the website’s information.

Shortcomings in the study

1. Many of our recruited participants either were associated with the LSA Honors staff or were extremely familiar with the Honors website.
2. Even after waiting for 2 weeks, we were only able to get 28 participants to respond to our survey, out of a total of 1900. Thus, the confidence level in the results obtained was very low.
   • Could have offered a raffle to encourage people to take the survey.
   • Employed other ways like approaching faculty to ask students in their class to take the survey.
3. All of our interviewees were freshman students which didn’t give us the complete perspective of the website usage by current students.
   • Offering participants some incentives to participate in our study could have got us a more diverse set of participants.

Looking back

1. The timing of the survey could impact the results a lot. Since our survey was sent over the spring break, we were able to get very less responses on it.
2. Confirming assumptions using the web analytics data is a really good idea, but it should be done earlier in the process. In our case, we got the analytics very late in the process and thus we could not look at it carefully due to time constraints and adapt accordingly.

The Team