Cost Share Setup Mockups

Wireframes - 05.29.17

Table of ContentsChapter 1 : Current BDM MockupsChapter 2 : Style Guides AppliedChapter 3 : Potential UX Changes

2

Chapter 1: Current BDM Mockups

User Enters Cost shares in order to build their system User is linked to page and is taken where they want togo after entering in information

The �ow of information is not broken and users canunderstand where they have come from and aregoing

Cost Share Setup

Headers are smalland users may

ignore for pagecontent

Breadcrumb systemshows how the user

can get aroundwithout having to

return to this screenconstantly, however

is small andine�cient in it’s

visual appeal

There is a lot ofwasted real estate

on the landingpage

4

Coinsurance Summary

Important actionis once again

hidden beneathcontent

Important link ishidden beneath

header anddoesn’t stand apart

from content Links have no visibledi�erent between

one another incolumns that havedi�erent forms of

information

5

Actions are writtenout in full taking up

real estate instead ofshown with a simple

icon

Copay Summary

Scenario Buildergets lost at thebottom of the

screen

The entirety of thepage is white with

black borders, whichdoesn’t separate

any of theinformation visually

from one another

Fields are organized into

strange boxes inorder to be readagainst all of thewhite text boxes

6

Out of Pocket Summary

Once again,important

interactions aremade small and

can’t be seen properly

Certain contenttakes up a large

amount of spaceand has a large

amount ofcognitive load

7

Deductible Summary (Relationship)

8

Once again,important

interactions aremade small and

can’t be seen properly

Deductible Summary (Occurrences)

Actions take up alarge amount of

unnecessary spacewhen they couldbe replaced withicons that could

give back importantreal estate

9

Certain contenttakes up a large

amount of spaceand has a large

amount ofcognitive load

Maximum Summary

10

There is very littlevisual di�erence

between thepage, table

headers, and data within

the tablewhich makes

the informationmore di�cult tocomprehend at

a glance

Scenario Builder

High amountof content

squeezed intospace and

creates cognitiveload

Content takes upa huge enough

amount of spaceto warrant it’s own

page

Cannot tell whatcontent is a

secondary popupuntil box is

clicked upon

11

Chapter 2: Style Guides Applied

Cost Share Setup

Important optionsare larger and takeup more space in

otherwise empty places

Font is readableand details

importance ofinformation on

a scale

13

Maximum Summary

Importantinformation to readstands alone, and isgiven it’s own placeon the page so user

can �nd easily

Breadcrumb systemis readable andshows you whatpage you are on

already

Importantinteractions are

given a prominentplace on the screen

for ease of use

Interactions that the user frequently

uses are given aprominent place

on the screen

14

Maximum Summary (Scenario Accordion)

Scenario Accordion headers each get enough space to be read when collapsed

or expanded

Interactions thatare permanentand may be a

detriment to theuser are given a

red highlightwith a negative

symbol

Field informationis given more

padding and adi�erent color

to allowthe user to properly

read theinformation

displayed

15

Coinsurance SummaryBreadcrumb

highlight cangesfrom page to page

to show thedi�erences in

pages

All pages are visuallysimilar and have

the same interactionproperties from

page to page

Important actionsthat perform thesame function indi�erent places

are visuallysimilar

16

Copay Summary

17

Scenario Accordion headers each get enough space to be read when collapsed

or expanded

Out of Pocket Summary

Components thatare important to the

user but don’t liveon the left side of

the page are givenvisual importanceto highlight their

existence

18

Important actionsthat perform thesame function indi�erent places

are visuallysimilar

Deductible Summary (Relationship)

19

All pages thatperform the same

functions are visuallysimilar and feel

consistent in theirdesign

Deductible Summary ( Occurrences)

Content in tablesthat is

important for theuser to read

is given adi�erent visual

style than the restof the pageallowing theuser a visual

break in heavycontent areas

The most importantbuttons on the page

are given aprominent spot,

but are styleddi�erently in

order for the user toimmediatelydi�erentiate

between theiractions

20

Scenario Builder

Content is givena hierarchy of sizeaccording to it’simportance to

the user

Content is moreeasily recognized

in groups thanpreviously because

of paddingrequirements

between columnsand content

21

Chapter 3: Potential UX Changes

Occurrence Actions

Move actions tothe beginning ofthe row to showinteractions that

a�ect the entiretyof the row, and

replace withicons

23

If text must beused, utilize

di�erent iconsor colors to helpuser understand

at a glace thedi�erence

between theseactions

Occurrence Accordion

Putting scenariosinto accordionsassociates the

scenarios with theiroccurrences

instead of pushingthem to the

bottom wherethey are often

lost

Although replacingevery interaction

with an iconmight be

unnecessary,it also frees the

page up and callsfor the user to only

have to read theimportant data

and not have thecognitive load

of �nding everyaction they mightneed to complete

24

Editing andDeleting actionsare shown at theend of the rowafter the user

has already readthe summary ofthe occurrence

contents

Scenario Builder

Scenario Contentis moved into

a vertical tab toshow a �ow of

information fromtop to bottomand frees up

more real estate

25

A summary allowsfor the potential ofbeing able to view,

edit, or delete any chanegs

at a glance

Scenario Builder Summary

26

Secondary Popup

27

When the editbutton or �eld

is pressed,it can bring up

a secondary popupwhich is organized

for the user tounderstand all

the informationpresented at a

glance