MOBILE APP

Phase 0

Sketches
Batch 1
December 2, 2016

DESIGN WITH INTENT

This document was created for the purpose of
CAPTURING THE THINKING AND DISCUSSIONS around

the WeEnergies Mobile App User Experience. The

insights in this document were captured during
story mapping sessions, a user story and
requirements generation process. The concept
and logic behind the sketches for each epic, flow
and screen are where the value lie.

SKETCHES
SKETCHES ARE

Expressions of user stories

Conceptual
Meant to demonstrate an experience
Intended to start a conversation
Adept in surfacing gaps

1.3. FORGOT PASSWORD STEP 1 & 2

High Level User Story ID

KEY IDEAS

High Level User Story Name

Concept and Logic

Authentication: users can select their

preferred method for authenticating
their identity. Only available methods
are offered, based on personal
information provided by the user.

User Interaction

BATCH 1
LOGIN

REGISTRATION

VIEW & PAY BILL

First Time Login

One-Step Registration

Pay Bill Flow

Login Methods

Registered User Redirect

Pay Bill Notifications

Registered User >5 Accounts

Add Accounts

Pay Bill Custom Payment Amount

Forgot Password

Profile Setup

Pay Bill Add New Payment Method

Customer Support

View Bill Flow

Billing Options
Set Up Budget Billing
Manage Auto Pay

LOGIN

EXPERIENCE
THEMES
ACROSS
LOGIN USER
STORIES

Simplified login

Multi-method
login

Easy to
remember

1.1. FIRST TIME LOGIN

KEY IDEAS
-

Standard Login: familiar Username

and Password displayed by default.
Alternative methods are also
available.

Registration Call to Action: Clear path

for new users to register.

1.1.1. LOGIN METHODS

KEY IDEAS
-

Smart Personalization: users can

select the login method, which will be
remembered and automatically
displayed on the next login session.

1.1.2. REGISTERED USER >5 ACCOUNTS

KEY IDEAS
-

Informative Error Messaging:

customers with 5 or more accounts
will be informed of why they cannot
log in, then provided a link to login to
the responsive My Account site.

1.3. FORGOT PASSWORD - FLOW

1.3. FORGOT PASSWORD STEP 1 & 2

KEY IDEAS
-

Authentication: users can select their

preferred method for authenticating
their identity. Only available methods
are offered, based on personal
information provided by the user.

1.3. FORGOT PASSWORD STEP 3 & 4

KEY IDEAS
-

Stay In The App: sending the user an

SMS with a 4-digit code allows them to
easily confirm their identity and
continue with the reset process.

REGISTRATION

EXPERIENCE
THEMES
ACROSS
REGISTRATION
USER STORIES

Allow for quick or

extensive registration

Leverage smart-phone
native capabilities

2.5. ONE-STEP REGISTRATION

KEY IDEAS
-

Quick & Easy: streamline the

registration process by making the
necessary inputs easy to complete,
allowing customers to access the app
instantly

2.1. REGISTERED USER REDIRECT - FLOW

2.1. REGISTERED USER REDIRECT

KEY IDEAS
-

Informative Error Messaging: let the

user know why they cant complete the
registration process, then pair with
suggested next action.

2.4. REGISTRATION ADD ACCOUNTS - FLOW

1.3.1. CUSTOMER SUPPORT

KEY IDEAS
-

Contextual Support: proactively

providing assistance where we see
where the user may encounter
problems

2.4. PROFILE SETUP - FLOW

2.4. PROFILE SETUP STEPS 1 & 2

KEY IDEAS
-

Encouraging Engagement: when users

provide personal information and
complete their profile set up, WE is able
to deliver a more personalized and
thoughtful experience.

Flexibility: users are able to start set up

now or be reminded later to complete
their profile.

2.4. PROFILE SETUP STEPS 3 - 5

KEY IDEAS
-

Communicative Visuals:
visual treatment makes
this list also appear as a
progress bar, both to
inform the user of the
steps and to encourage
them to complete all set
up sections.

VIEW & PAY BILL

EXPERIENCE
THEMES
ACROSS
VIEW/PAY BILL
USER STORIES

Stay in the app

when completing
a flow

Connect app to
other related
digital services

Pay for others

Comparative
data on bill

3.4-8. PAY BILL FLOW

3.1. PAY BILL FLOW STEPS 1 - 3

KEY IDEAS
-

Straight To The Action:

user is taken right to the
screen they opened the
app for.

Intentional Features:
distinct differences in use
cases for Auto Pay, One
Click Pay, and Scheduling
Payment.

3.5-3.6 PAY BILL FLOW STEPS 4 - 6

KEY IDEAS
-

Step Tracker: informs

users of where they are in
the process, how many
steps are left, etc.

Guided Experience: taking

care of one task at a time
per screen.

3.8. PAY BILL FLOW STEPS 7 & 8

KEY IDEAS
-

Recommended Actions: ability to make

modifications where it is relevant, such as
changing contact method after a
confirmation has been sent.

Contextual Promotion: promoting services

by providing entry ways where they make
sense, such as setting up Auto Pay at the
end of a bill payment flow.

3.4. PAY BILL NOTIFICATIONS

KEY IDEAS
-

Utilizing Phone
Capabilities: thinking
about how the experience
integrates beyond the app.

Notification Purposes: can

be applied to expiring
credit cards.

3.5. PAY BILL CUSTOM PAYMENT AMOUNT

3.7. PAY BILL FLOW ADD NEW PAYMENT METHOD

KEY IDEAS
-

Scalability for Different Payment Methods:

allow for payment service partnerships in
addition to bank accounts and cards.

3.1-2. VIEW BILL FLOW

3.1-2. VIEW BILL FLOW

KEY IDEAS
-

High Level + Deep

Dive: see highlights,
then tap to see more

3.1. VIEW BILL FLOW USAGE

KEY IDEAS
-

Encouraging Engagement: when users

provide personal information and complete
their profile set up, WE is able to deliver a
more personalized and thoughtful
experience.

3.9-12. BILLING OPTIONS

KEY IDEAS
-

Billing Options: one place to see all

the programs available and edit the
ones the user is enrolled in

3.12. SET UP BUDGET BILLING

3.9. MANAGE AUTOPAY

KEY IDEAS
-

Easy Management: simple

processes for managing profile
and payment configurations

THANKS!