Bringing Affordable Internet to
an Underserved Population
Comcast Internet Essentials
Overview:
Comcast Internet Essentials offers internet from Xfinity Internet for underserved populations at a steeply discounted rate, around $10 a month. The catch? Customers have to prove their need to be in the program. They do this by filling out an application– oftentimes without access to their own desktop computer.
The Mission: Make a complicated application more accessible for the population it is meant to serve.
First, we optimized the application for even the smallest mobile device and updated graphics to load quickly at slow data speeds. Next, our goal was to simplify the layout to not overwhelm users even during the most complicated parts of the process. Finally, we evaluated language to ensure that is easily understandable.
Deliverables
Research
Site map and user journeys
Wireframes
Visual Designs
Timeline
February 2019 - March 2020
My Role
Research, UX Design, Visual Design
Existing Application Experience
Overall, the existing application was confusing and complicated. It was designed for desktop first, which led to awkward layouts and flows on mobile. Headers and labels were ambiguous and progress indicators offered little guidance.
Goals for Existing Application
Improve wayfinding in the application by updating the progress bar, headers, and labels.
Simplify application process by reordering and regrouping questions.
Lead the users by improving hierarchy of text and buttons.
Use micro interactions to give constant feedback to the users in order to encourage them to continue on the application.
‘Reduce amount of text and write in clearer, friendlier language.
Competitive Analysis
After evaluating each of the “competitor's websites,” it is clear that no one in this category has maximized their online registration experience.
So the door is open for Internet Essentials to raise the bar and set an example for the rest of the industry to follow.
Our Approach:
Make It Feel Easy
Simplicity is the number one goal. This means simplifying text, labels, and form fields.
Although not always attainable, the goal is to keep all of the questions on the page above the fold. This limits the number of questions on each page and stop sections of the application from becoming overwhelming.
In order to keep users encouraged and motivated, we ordered the questions starting with the easiest and progressed to the more complicated questions.
Explorations
Organization and Layout
We first wanted to find out what organization makes the application easiest.
What happens when we have fewer pages but more questions on each page?
Or is it better to have fewer questions on a page, but have more pages?
Experience Exploration 01
First we explored the experience if we had one question per page. The question would be fixed in the same position and the keyboard would always remain open.
Ultimately, we found that this made a long application seem even longer. It also made the experience a bit disjointed for the user as they couldn’t as easily put questions into context.
Experience Exploration 02
What happens if we keep the experience organized as a 4-step process?
All questions related to one step of the process would live on the same page-more questions per page, but fewer pages.
Experience Exploration 03
Our third exploration, and chosen approach, groups only a few questions per page. This way users have more context for each question, but there are not so many on a page that it feels overwhelming. Each page should have just the right amount of information to feel digestable. A good rule of thumb was to strive to keep all of the content per page above the fold.
Visual Design
Instead of a complete a total redesign, we did a series of very focused design exercises. Leading to a consistent and thoughtful design all focused around clarity and functionality.
Header Area
The header needs to tell users two things. 1. Where they are in the process 2. How much they have left. We explored the best way for users to quickly see this information while letting it take up the least amount of space.
Form Fields
There were two approaches for the form fields– outlined boxes versus a simple underline. The outlined box is more traditional and expected, but the underline would allow us to save space on the page and give everything more room to breathe, which makes the application feel more legible and digestable.
Accessibility
Although the color strategy for the design was to use the “Peacock” colors of Comcast’s branding, these colors did not offer enough contrast to work for users with color blindness. We explored darkening the colors while staying as close as we could to the “Peacock” colors.
User Journeys
The Happy Path
Most users will be approved in real time and will be able to complete the application process going down what we call “The Happy Path”. We started the process by focusing on “The Happy Path” before exploring all the different ways that a user could leave the happy path.
Simplifying Complicated Scenarios
There were some scenarios that a user did not auto-qualify for Internet Essentials. This could be because the user needs to provide documentation to prove that they are enrolled in low-income programs or because the user does not have a social security number and need to verify their identity another way.
These extra steps could make the process much more complicated for users. We refined the user journeys to use only a few, straight-forward steps for these users.
Documents Needed
No Social Security Number
If a user did not have a social security number they had two options for verifying their ID. They could either upload a selfie holding their identification or go to an Xfinity store in person.
States and Validation
Application needs to give users feedback in real time. Microinteractions let users know that they are successful in their interactions with the application.
Large Buttons
Pill Buttons
Form Fields
Autofill Forms
Continued Support
Once designed, we continued to work with the clients acting as a direct extension of their team and continued to iterate on the design. All while working with their in-house dev team to make sure our designs were optimized for the Sitecore platform.
In the end, application completions went up dramatically. While incomplete and abandoned applications decreased.
Credits
Rebecca Smith
UX Designer
Todd Slutzky
Creative Director