User Research

Study Objectives

Considering the user base of SCE and its app, we wanted to further understand the relationship between the mobile app and utility services. Therefore, we developed the following Study Objectives.

1. How do mobile apps support a certain lifestyle?

2. Are there different expectations for what a mobile app should do versus what a website should do? (features/characteristics people would like the app to possess)

3. What role does technology play in bill paying and solving utility-related problems?

Research Method

To better understand our target user group, we use semi-structured interviews and a survey as our methods to acquire the needed data. As a result, we have 10 interviewers and 42 survey participants.

We asked questions relating to demographics, mobile app use, and bill payment strategies. The interview subjects were selected from a group of customers who pay their own utility bills. Since one of our target population groups is college students whose age ranges from 18 to 22, our focus was to find how they pay their bills as well as note their complaints on current payment methods, and any other problems they encountered while using the services.

Reaching out to our other target population, older homeowners, was more difficult. Some of our members were able to rely on family members to participate in our interviews, but for the surveys we didn’t have a convenient communication channel to reach as many participants as we would have hoped.

Target Population

Our main target populations are college students who rent an apartment or a room and working homeowners.

College Students

Many college students are new to living on their own. This lack of living experience leads to an unfamiliarity with paying bills.

Their concerns...

I want an easier way to pay bills, like Apple Pay

I Wish I can deal with all utility-related problems in one place

I would like to have an app that notifies me of my bills, usage, etc.

I would like an easier way to contact SCE to deal with outages

Homeowners

Homeowners are generally in a higher economic class than renters. For older homeowners, some of the assumptions we made when we first selected them as our target population turned out to be incorrect.

We assumed that they would be less tech knowledgeable, which would impact their preferences in paying their electric bill. This wasn’t the case, as our interviewees and survey respondents stated that they were comfortable in using the web or mobile apps in their daily lives.

Their preference towards the website in particular was based on the fact that the interface conveniently fit with their lifestyle more than the mobile platform.

Their concerns...

Be able to quickly access bills and statements

If I could manage Auto Pay on my phone, that would be nice

Have online chat feature so I do not have to call them

Push notifications when the bill is ready

Findings

According to our research on direct and indirect competitors, we have a thorough understanding of where My SCE as a utility company’s app should focus.

We did find out that some of our users are not comfortable with a subscription payment, and they inevitably, at least sometimes, missed the payment due, which can lead to overdue penalization fee or even utility shut downs. In this situation, having a reminder feature is preferable for those people who tend to forget to pay bills on time.

Another interesting finding is that in the younger male demographic group, interviewees and survey takers would like to have the option to use modern online payment methods rather than credit cards. They listed Venmo and Apple Pay for preferred payment methods.

In addition, A common quality that both of our target populations wanted to see was an interface that was both easy and convenient to use.

Students wanted to see a well-designed mobile app where they could pay bills or deal with emergencies since they’re always moving from one place to the next and don’t always have access to a computer.
Older participants favored the use of a website because it was convenient to use with what they were already doing at work or at home.

Ideate
After conducting interviews, I transcribed the results and created the Affinity Diagram that contains all the pain points, desires, and their prior experiences of using utility apps.

This helped us to organize our thoughts and notes, and also gave me the initial redesign idea.

Personas

Redesign

Early Phase

Design Focus

Some key points about our new design:
1. User interface should be simple and straightforward
2. Highlight the core features by using the Gestalt laws and size, as well as the visual hierarchy
3. Complied with design specifications, but not with heavy graphic design
4. Design should be smooth and not overwhelm

Sketches

With the design goal in mind, we each sketched some redesign ideas. Then, we got together and presented our solutions and voted for the ones we want for the app.

Here are some of our initial sketches:

Agreeing to the Best Solution

There were disagreements about using Nick's interaction idea (Shown as Sketch#1) and other traditional designs.

As the figure above shows, the app's home page has the main functions of the app placed vertically at the center of the screen. When the user clicks one of the buttons, "Pay," it zooms in and show the billing page. If the button is at the left of the page, the user slides left to go back; if on the right side, then slide right.

It is an exciting way of interaction. Nevertheless, we decided to use the traditional interaction considering the characteristics and target audience of the app. Not everyone is tech-savvy and a new interaction design might significantly increase the learning curve, which was not what we wanted for an easy to use utility app.

High-Fidelity Prototypes

Design Concept

I organized the redundant functions for the final design by redesigning the menu bar and putting standard features (e.g., Outage, Usage) into an individual section.

For the color choices, I removed the color black from the color schemes.
The combination of black and white usually gives people the feeling of insecurity. An electricity company would not want this to happen. Therefore, I aggressively used yellow and dark green because they match the characteristics of an electricity app.
Yellow represents vigor and vitality; dark green represents green energy. I deemed that the color selection would make the whole app calm and safe, yet incandescent.

In addition, I reworked the "My Home" section on the Discover page. Each section of this page could also be a great place to promote advertisements. While users are browsing energy-saving tips articles here, electrical appliances suggestions can also be included.

Design System

Typography

Color

Primary brand colors

The primary brand colors are dark green and white. They come from the logo of SCE, and provide simplicity and consistency throughout all communications.

Safety color

Yellow is unique color and should be used sparingly for the moments of highlight and supporrt at times of interaction between users and app.

Secondary colors

Design Components

Hi-Fi Design

Login Page

1. The overall design of the app is not modern and user friendly. So we chose to redesign the entire app in order to have a consistent UI design.

2. The simplicity and planarization were important for a mobile App in 2019. Nevertheless, after we delved into the color schemes more, the intention of the color became more and more clear to us. So in the login page, we decided to add more bright yellow and made the App looks more friendly.

Problems
1. The main colors of the login interface are black and yellow. This becomes a problem that usually the combination of these two colors represents warning and caution.

2. The interface design violates the design guideline of Apple iOS.

3. A false signifier (“remember me” option) - remember username only. Users have to input the password again.

4. Login page is not the default page of the app when users open the app.

Home Page

1. From interviews and user surveys, most users were concerned with being able to access key features easily and quickly. By having content that isn’t relevant to their interests, users will be less likely to use the app.

2. Redesigned nav bar helps users identify the current page. In addition, we observed that if users tried to scroll past alert popups, they would end up skipping past some buttons or signifiers of the interface. Redesigning how alerts are handled would stop users from ignoring important interface components.

Problems
1. Old design’s homepage didn’t properly present the main features of the app. When first entering the app, the home screen uses most of its space for an image and a link that redirects you away from the app.

2. Alerts pop up when loading up most pages in the old app, including the home page.

My Bill Page

1. Viewing utility bills and making a payment were the top two selected choices of why our survey takers would use a utility app.

Problems
1. The original ‘My bill’ page can be accessed through a multi-step path: home-> my account-> billing & payments. Viewing my bill is one of the most significant features of the SCE mobile app, and this path is not very obvious and is too tedious.

2. The UI of the old page doesn’t do a very good job at visualizing information regarding users’ current bill: the wording of the due date is very tedious, making it hard to read for users; the difference between pay now and view bill isn’t obvious at first glance.

Discover Page

1. From analysis of the user survey, a majority of users would like customer support to be present in the app. Thus, we think it’s important to make customer support easily discoverable.

2. During the usability test, we found that most of our participants got confused over redundant features, such as “My Home”. They were misguided by the name of these features (false signifier), and therefore deviated from their original path.

Problems
1. The path to find customer service information is unnecessarily complicated. Users need to perform an extra step (clicking on “Contact Us”) to acquire customer service information when they are already on the customer support page.

2. Many features in the original app are redundant and unnecessary. Yet, their names are misleading. For example, the “My Home” feature, as shown in the third figure, displays nothing but advertisements for SoCal Edison’s programs.

Usage Page

1. This is a common functionality that users want to check based on the survey we did.

Problems
1. The usage function cannot be successfully accessed in the old mobile app. (false signifier)

Outage Page

1. In our usability test findings, a lot of users could not find Outage Center as a first time user. The “report outage” button is also hard to find.

Problems
1. The original report outage page had an out-moded layout. It excessively used inanimate colors and does not auto-resize in respect of different screen sizes.

2. Bad efficiency of using the interface space. The user had to scroll down to see the option of report outage.

Setting Page

1. In our usability test, we found that it was difficult for users to find the page to change personal information such as their name. They would click on “View/Manage Accounts” when the correct solution was to find the “Identity” page, which was hidden in the top right menu.

Problems
1. Hard to find in the original path design

2. False signifier, since “View/Manage Accounts” button in “My Account” page had an option to change nickname, but not other personal information.

3. Information was scattered in different parts of the app.

Overview

Design Process

Outcome

Role

Team

Timeline

Problem

Same layout, yet a different experience

Competitive Analysis

Comparing and Contrasting Market Offerings

User Research

Study Objectives

Research Method

Target Population

College Students

Their concerns...

Homeowners

Their concerns...

Findings

IdeateAfter conducting interviews, I transcribed the results and created the Affinity Diagram that contains all the pain points, desires, and their prior experiences of using utility apps. This helped us to organize our thoughts and notes, and also gave me the initial redesign idea.

Personas

Usability Issues

Methods

Usability Tests

Cognitive Walkthrough

Findings

Signifier and affordance mismatch

False signifier

Fails to provide easy reversal of actions

Bad interface layout

Some interface components do not appear properly

Results do not meet the expectation

Redesign

Early Phase

Design Focus

Sketches

Agreeing to the Best Solution

High-Fidelity Prototypes

Design Concept

Design System

Typography

Color

Primary brand colors

Safety color

Secondary colors

Design Components

Hi-Fi Design

My Bill Page 1. Viewing utility bills and making a payment were the top two selected choices of why our survey takers would use a utility app.

Usage Page 1. This is a common functionality that users want to check based on the survey we did.

Problems 1. The usage function cannot be successfully accessed in the old mobile app. (false signifier)

Outage Page 1. In our usability test findings, a lot of users could not find Outage Center as a first time user. The “report outage” button is also hard to find.

Problems 1. The original report outage page had an out-moded layout. It excessively used inanimate colors and does not auto-resize in respect of different screen sizes. 2. Bad efficiency of using the interface space. The user had to scroll down to see the option of report outage.

Setting Page 1. In our usability test, we found that it was difficult for users to find the page to change personal information such as their name. They would click on “View/Manage Accounts” when the correct solution was to find the “Identity” page, which was hidden in the top right menu.

Problems 1. Hard to find in the original path design 2. False signifier, since “View/Manage Accounts” button in “My Account” page had an option to change nickname, but not other personal information. 3. Information was scattered in different parts of the app.

Reflection

Ideate
After conducting interviews, I transcribed the results and created the Affinity Diagram that contains all the pain points, desires, and their prior experiences of using utility apps.

This helped us to organize our thoughts and notes, and also gave me the initial redesign idea.

My Bill Page

1. Viewing utility bills and making a payment were the top two selected choices of why our survey takers would use a utility app.

Usage Page

1. This is a common functionality that users want to check based on the survey we did.

Problems
1. The usage function cannot be successfully accessed in the old mobile app. (false signifier)

Outage Page

1. In our usability test findings, a lot of users could not find Outage Center as a first time user. The “report outage” button is also hard to find.

Problems
1. The original report outage page had an out-moded layout. It excessively used inanimate colors and does not auto-resize in respect of different screen sizes.

2. Bad efficiency of using the interface space. The user had to scroll down to see the option of report outage.

Setting Page

1. In our usability test, we found that it was difficult for users to find the page to change personal information such as their name. They would click on “View/Manage Accounts” when the correct solution was to find the “Identity” page, which was hidden in the top right menu.

Problems
1. Hard to find in the original path design

2. False signifier, since “View/Manage Accounts” button in “My Account” page had an option to change nickname, but not other personal information.

3. Information was scattered in different parts of the app.