Support Page Redesign

Redesigning support page in the My Sprint app

Overview

Context

• Historically the support page in the My Sprint app has received very little attention and it has become a dumping ground for features that don’t belong anywhere else in the app.
• With a bunch of unorganized features on the support tab, customers found it hard to access relevant information and were calling customer care for their support needs.

Problem

How might we reorganize the information on the support page to promote self service over calling the customer care?

Goals

Change the user behavior when looking for support to: self-service > Chat > Calling customer care.

Role

Primary Designer and Researcher

Duration

Dec 2019 - Apr 2020

Team

• Design direction: Keith Farb
• Product owner: Masoud Hashime / Blythe Cook
• Copywriter: Diamond Brown
• Business Analyst: Nagarajan Palaniswamy
• Project Manager: Ashley Merkt

Current Situation

On analyzing the support tab, we found 2 major issues in it.

• The page had 3 ways for users to chat with an agent.
• Search was buggy and was not returning any results.

Analyzing the current support tab

User Research

To get an idea about what is working and what isn't, we decided to conduct an unmoderated user research with the current support page.

Main objectives

• What kind of information do users look for in the support page?
• Do users understand the various links and options available on the support page?
• How do users navigate and look for a topic on the support page?

Study set up

The research involved a conducting a survey using Userzoom.

We asked questions to identify how users resolved issues currently, their experience with using the support page and preference of how they like to resolve an issue.

It also had a click test to identify where users go to get information on a topic.

Key Insights

• Users preferred to call customer support followed by chat to resolve their issues.
• Users preferred to use the Sprint community to resolve issues which we had completely neglected.
• Manage orders feature was used heavily when users had an order on the way.
• Users were not sure under which topic to find a specific issue.

Click Map of participants trying to find end of lease options

Data from other sources

Click data on support page

• This data was not complete as many features were not tagged.
• Chat and manage orders were still used heavily and had over a million clicks.

Top 5 searched terms

• Hulu
• Change number
• Activate device
• Hotspot
• Payment Arrangements

Top 5 chat intents

They were exactly the same as top searched terms.

Internal Brainstorming

We talked about all this information internally and came up with this priority order.

Couple of designs

After some design iterations, we came up with 2 designs. We were confident with the order of sections but were unable to come to a decision on which of these would make it easier for users to find information.

Couple of designs with different approaches

Design A
Separated out the options for Sprint complete and call/chat to different tabs.

Design B
Provided everything on 1 screen with a chat floating button and Sprint complete at the top

Usability Testing

To identify which approach works better, we conducted anunmoderated research with our latest designs.

Main objectives

• Which design takes less time for users to resolve an issue?
• How are users resolving an issue as compared to how we want them to?
• Are users able to find out the items rearranged in this redesign?: Sprint complete, Sprint Community, Finding a store

Study set up

We conducted 2 think out loud studies unmoderated using UserZoom.

Pre task questions: How do you resolve issues currently?

3 tasks related to finding information about:

• Device repair options
• Adding a payment method
• Find a store

Post task questions: Rank the different issue resolution mediums?

Key Insights

• In both designs, users preferred to self-serve > chat > call which was a big win for us.
• Users were not sure which category would contain the topic they were looking for.
• Users were not sure what all Sprint complete can be used for.
• Design A
  
  • Users utilized search at the top when they were unable to find resolution.
  • Sprint community option under the Still need help tab couldn’t be found by most users.
• Design B
  
  • Task completion was much higher.
  • Sprint complete looked like an ad/banner.

Solution

Main support page

• Kept Sprint Complete as a separate tab as not all users will have it and to provide more information about it.
• Added a little description for category options
• Floating chat button

Sprint Complete tab

• Added some more information and FAQs for users to understand more about Sprint Complete.

Retrospective

Understand the business constraints

• A lot of decisions in our redesign were made to keep the dev effort low and to maintain alignment with other teams.
• Sprint Rewards app was promoted on the support page as an agreement between the 2 app teams.
• We didn’t remove any features until we had talked to the teams behind them.

Payment Arrangement

Redesigning Payment Arrangement flow for the My Sprint app

Overview

Context

• A Payment Arrangement allows eligible customers extra time to pay their past due balance, while still enjoying uninterrupted service.
• Currently even with this feature in place many users end up defaulting on their bill or end up calling customer care asking questions related to it.

Problem

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

Goals

• Increase customer understanding of payment arrangements and the option when available.
• Reduce the call/chat volume related to payment arrangements.
• Increase on-time payments.

Case study scope

To keep the scope limited, I am only showing the most common use case and the part of the flow which enables users to find Payment arrangement and understand what it is. Link to full flow in the results section.
I can share more details upon request.

Role

Primary Designer and Researcher

Duration

Aug - Dec 2019

Team

• Design direction: Keith Farb
• Product owner: James Qureshi
• Copywriter: Gretchen Gniffke
• Business Analyst: Swechya Sharma, Nagaraj Palaniswamy

Current Situation

Scenarios in which users make a payment arrangement

• 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.

We identified 3 main issues in the flow:

• Obscure Placement
  Payment arrangement is not a feature that every user will utilize. But it is a life saver for those who need it. Currently, due to the placement of the Payment arrangement feature, it’s not immediately apparent.

Payment arrangement option hidden among other options

• Wordy explanations
  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.
  Currently, the messaging in the flow is too wordy. Users skipped them and called customer care to ask the same questions.

Too much explanation offered

• Numerous use cases
  My Sprint App has over 10 million users which leads to a lot of use cases. Some of those use cases cater to ineligibility of payment arrangement while others require some upfront payment to become eligible.
  As we tried to incorporate more of those use cases, the main use case kept on becoming more and more complex.

Process

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, we looked at some of our direct competitors like T-Mobile/At&t and indirect competitors like other utility companies.

Key Insight #1: Pay Now - Pay Later approach

Few utility companies had a pay now - pay later approach for users who don’t want/can’t pay their bill now. This approach doesn’t require them to have a prior understanding of what a Payment Arrangement is.

Key Insight #2: Succinct messaging for better experience

Both T-mobile and AT&T redirect their users to the FAQs page to learn more about Payment Arrangement. To prevent this break in the experience, we stuck with our current approach of showing messaging at the beginning of the flow but decided to make it more succinct.

Design changes

After a few brainstorming sessions with the team and going through a few iterations, we came up with these changes to solve the problems identified.

Main dashboard

Pay Now - Need More Time

Showing couple of iterations of the screen.

Messaging for Payment Arrangement

Multiple iterations showing the ways we tried to show payment arrangement messaging.

Usability Testing

In order to verify our design direction, we conducted an unmoderated user research with our latest designs.

Main objectives

• Does calling out Payment arrangement helps users with past due bills to enter the flow?
• Whether users read and understand the messaging related to Payment Arrangement?
• Are users able to make a payment arrangement by themselves?

Study set up

The research involved a click test using Userzoom to see how many users click on “Set up a payment arrangement” vs “Make a payment” to enter the Payment arrangement flow.

In the 2nd part of research, users were given a task to set up a payment arrangement for their past due bill with follow up questions to check their understanding.

Key Insights

• Explicit CTA for Payment Arrangement increased visibility
  With an explicit CTA for Payment Arrangement on the main billing page, users entered the Payment Arrangement flow much more (79% compared to 57%).
• Even after presenting messaging in a list format, users missed important information
  Most participants read only the headlines and the bullets. They were still skipping important information related to Autopay and Late Fees and were unsure of it in the end.

Solution

Main Dashboard

We called out “Set up a payment arrangement” explicitly on the dashboard to improve engagement when a user is past due on their bill.
This extra CTA for users who are eligible to make a payment arrangement increases visibility as well.

Pay Now: Need More Time

When the users are past due on their bill, the Segmented control shows “Need More Time” and starts a Payment Arrangement flow.
In all other cases, “Pay Later” is shown that allows users to schedule a future dated payment.

Payment Arrangement Messaging

We presented the messaging in a succinct manner using lists and icons. The heading of the list item explains the gist of the information and the description was limited to 2 lines.

Results

• Complete flow
  Play around with the full flow of the main use case here.
• Call Volume Reduction
  We were able to bring the call volumes down, exceeding our initial target of 5% call reduction by almost 40%.
• Positive Play Store reviews
  The play store reviews related to Payment Arrangements were highly positive.

Retrospective

• Understand your Product Managers (PMs)
  Talk to the PMs and understand how willing they are to take risks with new approaches and pushing the entire team.
  Introducing the bottom sheet instead of a modal for messaging was not taken very well initially by our finance team but our PMs vouched for it and got it implement
• 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 makes the process much easier.
  The research study conducted really helped us in building confidence among stakeholders with this design.

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