MOBILE APP VISUAL

DESIGN CONCEPTS
BATCH 02
OUTAGES
SERVICE REQUESTS
VIEW USAGE

VISUAL DESIGN CONCEPTS

BATCH 02

CONTENT
1. PURPOSE OF CONCEPTS
2. FOCUS OF BATCH 02
3. FJORDS RECOMMENDATION
4. USER INTERFACE ELEMENTS

VISUAL DESIGN CONCEPTS

BATCH 02

WHAT ARE VISUAL

DESIGN CONCEPTS?
Design concepts are an early phase of the design
process in which the use of graphic elements and
form are articulated in a visual format to influence
the future state of the product.
Concepts intergrate previous ideas or studies on
how it should look and feel in a way that enhances
the user experience.

VISUAL DESIGN CONCEPTS

BATCH 02

WHY DO WE NEED THEM?

It will inform phase 1 design
It allows us to explore different directions,
so what we decide on in phase 1 is well informed
It helps us bring the sketches to life

VISUAL DESIGN CONCEPTS

BATCH 02

BATCH 02:
An evolution of batch one. Expanding on
the use of style, color, typography, and texture.
Focus on specific user interface elements such
as data visualization style and iconography.
Focus on layout of the screens, which are
influenced by the interaction patterns.

VISUAL DESIGN CONCEPTS

BATCH 02

The visual approach takes in consideration mood board

studies by applying visual style on elements that
allow the user experience to be:

FRIENDLY

LUMINOUS

WARM

MEMORABLE

DYNAMIC

FJORDS RECOMMENDATION
BATCH 02

FJORDS RECOMMENDATION
BATCH 02
A clean style that evokes a feeling
of trust and friendliness. It considers
interactive behaviors, which influence
the screen layouts.

Outages

1. Simple bold iconography is

used throughout this concept.
These are filled with a secondary
brand color.
1

2. Primary buttons expand wide to

meet best practice standards.

Outages

1. A subtle glowing effect is applied

to this loading spinner graphic. It
uses a gradient that includes the
main brand color with a lighter
tone of orange to communicate
the backend checking process so
the user stays on this page until
results are shown.

Outages

1. Modules include the same style as

a card. These are floating on top
of the map with everything behind
at an 80% opacity for
clear distinction.

2. Secondary buttons become

shorter in width and have a
more rounded radius.
2

Outages

1. When active, the outage map

is shown with a primary color
overlayed on top with a light
opacity so the map remains visible.

2. Primary brand color is applied on

elements such as location indicators
to keep brand consistency.
1

3. Floating cards only contain minimal

information. The content hierarchy
is created through use of color, type
size and weight.

2
3

Outages

1. A green color is applied on

confirmation elements or
positive statements such as
an active status.

2. Text links are underlined and also

use the secondary brand color.

1
2

Outages

1. Call to actions that contain an icon

are placed on top of a light grey
to increase usability.

Outages
1

1. The hero color is used throughout

the whole app as the main top
navigation color. By doing so, this
will unify all of the screens to form
a cohesive system.
2

2. Non-actionable icons are filled

with a second tone of blue and
are not placed on top of any
other color.

Usage Highlights
GAS ONLY

1. Green is used to show progress

and status of an aoutage.

2. The second card is cropped

intentionally at this point to
show the user that there is
more scrollable content below.

3. When using any form of video

clips such as outage tips, it
is recommended to use an
illustrative animation style. It
becomes a friendly style that
compliments well with the rest
of the app.
2

Usage Highlights
ELECTRIC AND GAS

1. Cards are used to be consistent

with the concept seen throughout
the app. Cards create strong
hierarchy and grouping of
information.

2. Warm tone gradients that

compliment the primary brand
color are used to differentiate
between electric and gas usage.
3. A floating navigation exposes
the three views of usage, which
include Usage Highlights (all),
Electric, and Gas. The user
can swipe left and right to the
different sections and see it
reflected on the navigation, or
tap the buttons on it to switch.
4. Toggle buttons have subtle inner
shadows and drop shadows to
create the effect of dimmensional
elements seen throughout the app.

Usage Highlights
ELECTRIC AND GAS - CONTINUED

1. Orange yellow becomes

representative of all elements and
functions related to electric. This
creates association of the color
with electric to the user.

2. All data points are size compliant

and meet accessability standards.
1

3. Clear hierarchy is applied to the

user data when compared against
other users.
2
3

Usage Highlights
ELECTRIC ONLY

1. When selecting any of the

options for usage on the
floating navigation, the button
becomes active.
2

2. Badges have the same

characteristics as iconography:
friendly and simple with the same
tones of blue.

3. Insightful data is shown in larger

type. By treating it almost as
a graphic element, the user
attention is drawn to information
that will be helpful to them.
1

Usage Highlights
GAS ONLY

1. The global navigation is shifted up

and scaled down to minimum data
as soon as user scrolls down to
increase visibility on cards.

1
3
2

2. Universal toggles have unique

style to differentiate from
section toggles.

1. Blues with dark red tones become

representative of all elements and
functions related to electric. This
creates association of the color
with gas to the user.
3

Usage Highlights

1. This drop down allows user

to switch views between time
frames. A frosted window effect
is applied so everything below is
still visible.

USER INTERFACE EFFECTS

When it comes to making an interface experience
special, its the small things that make a huge difference.
The detailed effects applied to user interface elements
are minimal but enhance the memorable and friendly
qualities of the user experience we want the user to have.

Icons with glowing effect

User Interface Effects

GLOWING EFFECTS AND DROP SHADOWS

1. Icons have a very subtle glowing

effect to soften the overall look
which enhances its friendliness
and luminous style.

Icons without glowing effect

User Interface Effects

GLOWING EFFECTS AND DROP SHADOWS

1. The level of detail on icons is kept

at minimum. They are easy to
recognize and have soft edges
that are consistent with the rest of
the rounded corners on all other
elements of the application.

ALL

ALL

ALL

User Interface Effects

GLOWING EFFECTS AND DROP SHADOWS

1. Data visualization on graphs also

mimic the dimensional effect by
using inner shadows. When a bar
is smaller, then a glowing effect is
used to increase visibility.

2. Drop shadows are used to create

the illusion that the data displayed
is inside a container.

3. An active data point is also

shown with a glowing effect in
the color of the group in which
it is displayed.

21 Therms | 18F