MOBILE APP VISUAL

DESIGN CONCEPTS
BATCH 03
PREFERENCE CENTER
PROFILE MANAGEMENT
ALERTS / NOTIFICATIONS

VISUAL DESIGN CONCEPTS

BATCH 03

CONTENT
1. PURPOSE OF CONCEPTS
2. FOCUS OF BATCH 03
3. FJORDS RECOMMENDATION

VISUAL DESIGN CONCEPTS

BATCH 03

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 03

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 03

BATCH 03 :
Batch 3 visual concepts are a continuation of Batch 2
explorations. Our focus for this batch was to build on
the feedback received regarding brand color usage.
We also created concepts in tablet view to show the
visual system scaling across devices. The epics in Batch
3 are primarily task driven, which resulted in a more
directive and straight forward visual design. Through
strong hierarchy of content, the visual language is
clearly informed by the intended interaction, making the
experience feel simple to the user.

VISUAL DESIGN CONCEPTS

BATCH 03

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 03

FJORDS RECOMMENDATION
BATCH 03
The clean and straight forward visual
language is clearly informed by the
intended interaction, making the
experience feel simple to the user.

Usage Highlights
UPDATED FROM BATCH 02

1. In this tablet view, the organization of

content has adjusted so that data fits on
one screen and the user swipes left and
right between categories. The hierarchy
has also adjusted to show the most
important information in the upper left
moving downward into detail.

2. The use of the brands blue colors draw a

stronger connection to the existing brand.

3. The comparative data visualization

now extends wider to increase visibility.

Outages
UPDATED FROM BATCH 02

1. Heres an example of a modal that

has scaled for tablet view.

Profile Settings

1. Subtle gradient of the primary

brand color enhances the brand
connection and is a bold welcome
to the user.

2. Clear groupings in intuitive order

enhance usability and guide the
user to complete a task.

Preference Center

1. Both the navigation banner and

cards are clearly labeled with a
title to inform users of where they
are and what to do.

Profile Information

1. Input fields change to an active

state when tapped on the text
field to make edits. Heres an
example of a text field in
active state.
1

2. Icons are an opportunity to

continue drawing a connection
to the brand through the use of
color. In this case, this decorative
icon signifies the primary contact
method information.

Profile Information

1. Strong hierarchy on modals

help guide the user through the
information and towards the call
to action buttons.
1

Profile Information

1. When editing an input field, the

device keyboard appears, and all
content gets pushed up so the
focus is on the input field.

Accounts
1

1. The navigation banner can act as a

simplified breadcrumb when deep
in a flow. The design allows the user
to know where they are in the app
without cluttering the banner.

Accounts

1. Destructive buttons are clearly

identified through the use of
red color.

Accounts

1. The use of different type weights

and sizes re-enforce the hierarchy
of information that is needed to
help the user clearly understand
the information they are looking at
before making decision.

Accounts
1

1. The placement and style of this

button simplifies the interface.
By placing it in the upper right,
the user knows this call to action
is related to what they see on
the screen. The iconography is
intuitive and simple.

2. The treatment of these cards

both display information and
feel actionable. This creates an
organized and concise layout for
multiple accounts.

Preference Center

1. Blue is applied on toggle

buttons to connect with the
brand and communicate that the
notification is active. Once the
notification is active, options for
configuration appear below it.
These toggle buttons also meet
touch point size standards.

1
2

2. The white and gray create a

hierarchy between the notification
and its setting options. This helps
guide the user through the list of
preferences.

3. The user is informed of the option

that they have selected through
icons. Using the brand color helps
unify the visual design.