Application UX/Style GuideRev: 1.1.3 - 10/04/2019

The focus of this document is to provide design and UX information related to Level’s SIT application and the Applications Portal.

Covering design, layout and UX; this document aims to provide a guide to the Designer and

Front-End Developer.

Brand

Brand Primary

Custom Colours

Greyscales

Brand Secondary

Hues Primary

Dark Teal #07272D

Mint Green #4AE5B4

Sky Blue #7DE7FF

Cold Grey #DDE6E8

Bright Blue #0098DB

Dark Teal 75 #455D62

Grass Green 75 #8FB06C

Burnt Orange 75 #EFA240

Burnt Orange 50 #F4C17F

Pomegranate 50 #EC5555

Dark Aqua 50 #477b81

Bright Blue 75 #264247

Dusky Grey #F2F8F9

Corn Blue #63A0F2

Charcoal 50 #63A0F2

Charcoal #2A3031

Charcoal 75 #63A0F2

Warm Yellow #F9CE55

Corn Blue 50#8AB8F5

Aqua #008B95

Burnt Orange #ED8B00

Mint Green 50 #95E5CC

Coral 50 #FAA1AC

Aqua 50 #7FC5CA

Violet Blue #5A55FD

Violet Blue 75 #8380FE

Violet Blue 50 #ACAAFE

Coral #F75646

Grass Green #6A963B

Dark Teal 50 #839396

Grass Green 50#B4CA9D

Bright Blue 50 #7FCBED

Pink #FF73BD

Yellow #FED100

Mint Green 75 #75E4C2

Coral 75 #F87B8A

Aqua 75 #40A8B0

Pomegranate #E51C1C

Dark Aqua #094f57

01. Foundations/ColourContents

01. FoundationsColour 3Grids System 4Typography 6Type Scale 7

02. ApplicationSIT 8SIT Worklow 10SIT Mobile 20Registration Admin 28Decision Modeller 38

03. ComponentsForms 44Headers 46Menus 47Tables 48Side Panels 50

04. AccessibilityAccessibility 51

3

Mixed Grids

The grid layout can be mixed. The example below represents the base layout for the SIT application - left menu, content, and information panel.

01. Foundations/Grids SystemThe SIT and Portal applications have been designed to a grid layout.The grid is composed of up to 12 flexible columns with a 10px padding on either side, that results in a gutter between columns of 20px.

Size 1 of 1

Size 1 of 2

Size 1 of 3

Size 1of 4

Size 1 of 8

Size 1 of 12

2/12 8/12 2/12

3/4 1/4

Other patterns can be used within the 12 column layout.

Grid Layout

Responsive and fixed layouts

The applications use a mixture of fixed and responsive grid areas. The left and right panels are fixed. While the header, content, and footer adjust to size.

Column layout with grid

4 5

01. Foundations/Typography

Bree Serif - The primary brand typeface.Bree Serif is used in titles and headings.

Trebuchet - The secondary typeface.Trebuchet is Level’s secondary typeface. Used for all body copy.

Roboto - The application typeface.Roboto is used for all functional text within the application. Covering, tables, forms, and any content that the applications presents to the user. Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some typefaces distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in serif types.

Other typefaces can be used instead of Roboto, provided they fit the requirements that Roboto serves.

Type ScaleFor the most part, type sizes can vary, depending on their use within the application. The following type size list is a guide.

General

Heading One 36px - 2.25em Bree Serif

Heading Two 32px - 2em Bree Serif

Heading Three 26px - 1.6em Bree Serif

Heading Four 18px - 1.125em Bree Serif

Body 16px - 1em Trebuchet

Application

Heading One 32px - 2em Roboto

Heading Two 26px - 1.6em Roboto

Heading Three 18px - 1.125em Roboto

Body 14px - 0.875em Roboto

6 7

02. Applications/SIT

Fixed width side-panel with scrollable menu and

search.

2 column grid

Flexible width footer-panel with title tab, and hide button. Main panel holds contact and

miscellaneous content.Can be hidden.

4 column grid

Fixed width side-panel with scrollable content.

2 column grid

Flexible content area. Incorporating application menu, content and data query table.

8 column grid

Flexible header panel. Title, Notications, and configuration.

12 column grid

SIT Application

The SIT application’s main feature is the query page, which pulls together all the required services for the querying of invoices.

It has, at its core, the invoice query table. Supported by the results data panel, all invoice status information can be retreaved on one page.

Colour coded references inform the administrator of the present status of each invoice. With immediate querying for each status and a search service for specific querying.

The SIT application comes with a registration, login, and a landing page that serves as a specifics search form.

See following application flow pages.

LoginRegistration Landing page

8

Worklow

Registration

The registration page is separated into three areas. The left area provides information. The central area, the registration form. And the right area for the question set.

The question set is hidden until full validated information is received from the registration form. 4

31

2

01. Registration page with advice panel and form detail.

02. Registration page showing validation error.

03. Registration page showing form completion

confirmation and question set.

04. Registration page showing question

set completion and submission.

10

Login

The login page has two forms. One for user access details, and one for verification. A link is provided for lost passwords and sign-up invitation.

The login flow shows access detail and verification responses in various background guises.

1

4

53

201. Opening login page.

02. Login page showing successful login and

advising of sent verification details.

03. Login page showing failed

login detail flag.

04. Login page showing

verification time elapsed flag.

05. Login page showing incorrect verification flag.

12

Invoice Search and Query

The Invoice Search Service landing page provides the option to either choose a Trust or search for invoices using specific criteria.

The following workflow shows the pages for: search, results, query, and the supplier details form.

4

31

01. Invoice Search page with search form for invoice: number, status, date, amount, and period. Example set to search for Outstanding invoices. 02. Invoice Search

Results page with results information and table showing Outstanding

invoices - colour coded purple. Clicking on a

table record presents detailed information in

the right panel.

2

03. Invoice Query page showing all results

for the chosen Trust, University Hospitals Of

North Midlands.

04. Update Supplier Details popup form.

14

8

75

6

01. Update Supplier Details form showing validation error.

02. Update Supplier Details form showing submission

confirmation.

03. Upload an Invoice popup

form.

04. Upload an Invoice popup form showing

validation flag.

Invoice Search and Query

Continuing with the workflow with Update Supplier validation error flag to the Submit Invoice popup showing an access error.

16

9 Style Variations

05. Update Supplier Details form submission confirmation.

The SITS Invoice Query application can be customised to suit the client’s brand colours.

These examples show the main Invoice Query page using colour variations from Level’s brand.

Invoice Search and Query

The final screen in this workflow shows the Upload an Invoice popup window with confirmation and the style variations of the Invoice Query page; demonstrating the options in colour that can be chosen.

18

02. Applications/SIT/Mobile

Design and Workflow

The mobile device version of the SIT Invoice Query application.

Login Register Information Registration Form Registration FormPosition selection.

Registration FormQuestion set.

Registration FormSubmission with anti-robot.

20

Invoice QueryLanding page selection.

Invoice QueryMenu links (slide).

Invoice QueryTrust selection.

Invoice QueryList of invoices of selected Trust.

Invoice QueryStatus of selected invoice.

Invoice QueryGeneral query form.

Invoice QueryGeneral query form - invoice number entry.

22

Invoice QueryGeneral query form -

invoice number.

Invoice QueryGeneral query form - invoice status option.

Invoice QueryGeneral query form -

invoice status option result (outstanding).

Invoice QueryGeneral query form -

invoice status information.

Invoice QueryGeneral query form -

invoice selected date(s).

Invoice QueryGeneral query form -

invoice selected date(s) entry.

Invoice QueryGeneral query form -

invoice selected date(s) result.

24

Invoice QueryRecieved Payment form.

Invoice QueryRecieved Payment form -

invoice amount entry.

Invoice QueryRecieved Payment form -

invoice amount.

Invoice QueryRecieved Payment form -

invoice amount not found.

Invoice QueryRecieved Payment form - invoice search by date(s).

Invoice QueryRecieved Payment form - invoice search date(s).

Invoice QueryRecieved Payment form -

invoice search result.

26

02. Applications/Registration Administration

Fixed width side-panel with icon mode option; with colour-coded core

menus.

2 column grid

Fixed width slide-in side-panel with scrollable content.

2 column grid

Expandable content area. Core application refresh section.

8 column grid

Flexible header panel. Title, Notications, and configuration.

12 column grid

Registration Administration

The Registration Administration sits within the application portal. Consisting of the three areas: Define Question, Assign Question, and help.

The Define Question section is a series of forms that provide the means to define question criteria in

relation to a specific user type - client, supplier, or employee.

The Assign Question pages are for assigning the defined questions to groups specific to the user type.

See following application flow pages.

Deffine Question Assign Question

28

Define Questions Workflow

The following workflow shows the different options within the Define Question workflow.

Consisting of numerous forms covering four criteria. And supported by slide-in help service.

4

31

01. Define Question with all criteria except Mandatory inactive.

02. Define Question showing the help slide-in

container.

03. Define Question with Mandatory and Validation

set to active. Showing validation input.

04. Define Question with Mandatory, Hidden and

Validation set to active. Showing mandatory and

validation input.

2

30

Define Questions Workflow 7

8

5

05. Define Question with Mandatory and Save active.

06. Define Question with Mandatory, Validation,

and Save active.

07. Define Question with Mandatory and

Validation active. Showing input data for

a Supplier user type.

08. Define Question with Mandatory and

Validation (approval) active. Showing input

data for a Customer user type.

6

32

Define Questions Workflow 9

09. Define Question with Mandatory and Save active. Showing input data for a Customer user type.

10. Define Question with Hidden

(conditional)active. Showing input data for

a Supplier user type.

10

34

Assign Question Workflow

The following shows the Assign Question workflow. The Assign Question page consists of a table listing of Groups with editing tools. Groups can be added, edited, delated, and activated, or deactivated.

Each Group has a show/hide icon, which reveals their respective question set list. Questions can be added, edited (at a high or low level), deleted, activated/deactivated and numerically organised.

3

4

1

01. Assign Question table, listing groups.

02. Assign Question table, showing a

group’s question set.

03. Assign Question table, showing drag and

drop of question set order and an alert to a

group deletion request.

04. Assign Question table, showing alert popup

in response a question removal request.

2

36

02. Applications/Decision Modeller

Fixed width side-panel holding colour-coded

core menus.

2 column grid

Fixed width slide-in side-panel with scrollable content.

2 column grid

Flexible content area. Self contained application prgress flow.

8 column grid

Flexible header panel. Title, Notications, and configuration.

12 column grid

Decision Modeller

The Decision Modeller sits within the application portal.

It consists of a selection of six tools: Dashboard, Rules, Entity Management, Tenants, Functions, and User Roles.

The portal enironment with which the Decision Modeller functions, provides a slide-in help service. Its left core menu can be switched to icon mode, providing furtherr workspace.

See following application flow pages.

TenantsEntities Functions

38

Decision Modeller Workflow

The following includes the Decision Modeller Dashboard showing the portal’s menu and help positions, the Rules, and Entity Management’s Entity Details page.

01. Decision Modeller dashboard with slide-in Help dialogue.

02. Decision Modeller dashboard with left core

menu in icon mode.

4

3

03. Decision Modeller Rules form in

question mode.

04. Decision Modeller in Entity Management mode

with Entity table list, showing Entity Details

1

2

40

Decision Modeller Workflow

Entity Management: Property Details form, Tenants table

05. Decision Modeller in Entity Management mode with Entity table list, showing Entity Properties and drag and drop ordering.

8

7

07. Decision Modeller in Functions mode.

Functions can be added, editied, and

deleted.

08. Decision Modeller in User Roles mode. Showing user group

listings and user editing tools.

5

06. Decision Modeller in Tenant mode showing

colour coded tenant list.

6

42

03. Components Forms Login form Invoice Query form

Login form buttons

Height: 250pxWidth: 340pxRoboto: 20px, 18pxCorner Rad: 20pxBorder: 2pxField Height: 50pxDark Teal: #07272DAqua: #008B95

Height: 665pxWidth: 710pxRoboto: 20px, 16pxBorder: 3pxField Height: 25pxDark Teal: #07272DMint Green #4AE5B4Bright Blue: #0098DB

Height: 169pxWidth: 340pxRoboto: 18pxCorner Rad: 20pxBorder: 2pxField Height: 50pxDark Teal: #07272DBright Blue: #0098DB

Height: 50pxWidth: 340pxRoboto: 18pxBurnt Orange: #ED8B00Pomegranite: #E51C1CGrass Green: #6A963B

Roboto: 13pxDark Teal: #07272D

Upload an Invoice form

Update Supplier Detail form Form Error and Success

Height: 327pxWidth: 485pxRoboto: 18px, 14pxRoboto Italic: 11pxBorder: 2pxField Height: 25pxPurple: #5A55FDBurnt Orange #ED8B00Aqua: #008B95Bright Blue: #0098DB

Height: 313pxWidth: 710pxRoboto: 20px, 16pxBorder: 3pxTextfield Height: 100pxDark Teal: #07272DMint Green #4AE5B4Bright Blue: #0098DB

Pomegranite: #E51C1CGrass Green: #8FB06C

Confirmatory

Warning/Error

Advisory

44

Forms Menus Alerts and Advisory

Headers

Buttons

Register form Portal menu (full mode)

Registration Administration menu

SIT menu

Portal menu (icon mode)

SIT

Application Portal

Height: 50pxWidth: 340pxRoboto: 18pxTextfield Height: 25pxBottom Border: 1px, dashed, blackBright Blue: #0098DB

Height: 25pxWidth: FlexibleRoboto: 18pxTextfield Height: 25pxBorder: 1px, blackBright Blue: #0098DB

Textfield Height: 35pxWidth: 33pxBorder: 1px, whiteDark Teal: #07272DDark Aqua: #094f57Burnt Orange: #ED8B00Dark Teal 75: * #455D61

Height: 30pxWidth: 990pxRoboto Bold: 13pxBorder: 1px, White Bright Blue: #0098DBAqua: #008B95Burnt Orange: #ED8B00Dark Teal: #07272D

Height: 25pxWidth: FlexibleRoboto: 14px

Button 01 Dark Teal: #07272DMint Green: #4AE5B4Dark Teal 75: * #455D61

Button 02 Bright Blue: #0098DBWhite: #FFFFFFBright Blue 75: * #40B2E4

Button 03 Aqua: #008B95White: #FFFFFFAqua 75: * #40A8B0

Button 04 Purple: #5A55FDWhite: #FFFFFFPurple 75: * #AA74BF

Button 05 Burnt Orange: #ED8B00White: #FFFFFFBurnt Orange 75: * #EFA240

Button 06 Dark Teal: #07272DWhite: #FFFFFF

* hover

Height: 50pxWidth: 1440pxRoboto: 24px Dark Teal: #07272D

Height: 30pxWidth: 990pxRoboto Bold: 13pxBorder: 1px, White Dark Teal: #07272DAqua: #008B95

Height: 25pxWidth: 245pxRoboto Bold: 16pxBorder: 1px, # E51C1C Pomegranite: #E51C1C

Height: 25pxWidth: 245pxRoboto Bold: 16pxBorder: 1px, #6A963B Grass Green: #6A963B

Height: 200pxWidth: 465pxRoboto Bold: 16pxBorder: 5px, #0098DB Dark Teal: #07272D

Height: 110pxWidth: 320pxRoboto Bold: 16pxBorder: 1px, #ED8B00 Dark Teal: #07272D

Height: 50pxWidth: 425pxRoboto Bold: 18pxGrass Green: #6A963B

Textfield Height: 35pxWidth: 285pxBorder: 1px, whiteDark Teal: #07272DDark Aqua: #094F57Bright Blue: #0098DBBurnt Orange: #ED8B00Aqua: #008B95Dark Teal 75: * #455D61

46

Tables Assign Question Invoice Query

Decision Modeller - Tenants

Decision Modeller - User Roles

Decision Modeller - Entities

Table function accessoriesHeight: 20pxWidth: 20pxBorder: 1px, #0098DBBright Blue: #0098DB

Height: 20pxWidth: 20pxBorder: 1px, #6A963BGrass Green: #6A963B

Height: 20pxWidth: 20pxBorder: 1px, #E51C1CPomegranite: #E51C1CBurnt Orange: #ED8B00

Height: 20pxWidth: 40pxBorder: 2pxBright Blue: #0098DBCold Grey: #DDE6E8Charcoal 75: #5F6465

Height: 30pxWidth: 30pxBright Blue: #0098DB

Height: 30pxWidth: 30pxBright Blue: #0098DBBurnt Orange: #ED8B00

Width: 1015pxHeader Height: 35pxField Height: 30pxRoboto: 18px, 16pxBorder: 1px, #07272DDark Teal: #07272D Aqua: #008B95Bright Blue: #0098DBCold Grey: #DDE6E8

Width: FlexibleHeight: 25pxRoboto: 16pxBorder: 1px, #07272DDark Teal: #07272D Aqua: #008B95

Width: 825pxHeight: 390pxHeader Height: 35pxField Height: 30pxRoboto: 14pxBorder: 1px, #008B95Dark Teal: #07272DDark Teal 75: #455D61Burnt Orange: #ED8B00Bright Blue: #0098DBPurple: #5A55FDCold Grey: #DDE6E8

Width: 1035pxHeight: FlexibleHeader Height: 35pxField Height: 30pxRoboto: 18px, 16pxBorder: 1px, #07272DBurnt Orange: #ED8B00Aqua: #008B95Bright Blue: #0098DBCold Grey: #DDE6E8

Width: 1035pxHeight: FlexibleHeader Height: 35pxField Height: 30pxRoboto: 18px, 16pxBright Blue: #0098DBCold Grey: #DDE6E8

Width: 1035pxHeight: FlexibleHeader Height: 35pxField Height: 30pxRoboto: 18px, 16pxBorder: 1px, user valueBright Blue: #0098DBCold Grey: #DDE6E8

Width: FlexibleHeight: FlexibleField Height: 30pxRoboto: 16pxField Border: 1px, whiteWrap Border: 1px, #0098DBBright Blue: #0098DBCold Grey: #DDE6E8

48

Accessibility

Accessible design not only helps users with disabilities; it provides better user experiences for everyone. All components within this document follow the WCAG AA, Section 508, and European standards. The design patterns and components should be perceivable, operable, and understandable to users, even when using a screen reader or other assistive technology.

For a product to be considered accessible, it should:

• Give every user the same benefits, regardless of ability• Adapt to any user in any context

Resources

Web Content Accessibility Guidelines (WCAG) 2.0W3C low vision requirements

Tools

Stark Sketch pluginNoCoffee vision simulatorColor contrast checker

Side Panels Registration Invoice Query Status

Help Fly-out Invoice Query

Width: 345pxHeight: FlexibleHeader Height: 35pxField Height: 30pxRoboto: 36px, 18pxBright Blue: #0098DB

Width: 223pxHeight: FlexibleHeader Height: 90pxField Height: 30pxRoboto: 20px, 13pxDark Teal: #07272DPomegranite: #E51C1C

Width: 260pxHeight: FlexibleHeader Height: 35pxRoboto: 24px, 13pxBright Blue: #0098DB

Width: 223pxHeight: FlexibleHeader Height: 90pxRow Height: 35pxRoboto: 20px, 14pxDark Teal: #07272DCold Grey: #DDE6E8

Width: 223pxHeight: 30pxRoboto: 14pxCold Grey: #DDE6E8

50 51

Application UX/Style Guide © Level 2019