Omni Partners Website Redesign

goldbashedAI and Robotics

Nov 15, 2013 (3 years and 10 months ago)

76 views











Omni Partners

Website
Redesign

Re
do

the
Omni Partners Marketing Site
us
ing parent
company corporate design
s
tandards

consistent with the

User
Interface and User Experience (UX)
of the
parent company’s various SaaS product
offerings
while retaining Minimalism and
Simplicity.


UX and USABILITY

2200 Lucien Way, Suite 201, Maitland, FL 32751




Omni Partners Marketing Site




2

|

P a g e





Table of Contents

Objective

................................
................................
................................
................................
................................
................................
.......................

4

Targeted screens

................................
................................
................................
................................
................................
................................
..........

4

Corporate Design Principle Differentiators

................................
................................
................................
................................
...............................

4

Left toolbar

................................
................................
................................
................................
................................
................................
................

4

Portlet Style

................................
................................
................................
................................
................................
................................
................

4

Tab and Grid Style

................................
................................
................................
................................
................................
................................
......

4

Color theme and fonts

................................
................................
................................
................................
................................
...............................

4

Color Scheme


1 primary 6 secondary and total ~50 colors
................................
................................
................................
................................
...

5

Color Groups Based on Emotions

................................
................................
................................
................................
................................
............

5

Master Color Palette:

................................
................................
................................
................................
................................
................................
....

6

Corporate Font Standard:

................................
................................
................................
................................
................................
............................

7

Areas where Font and colors should be standardized:

................................
................................
................................
................................
.........

8

Example

................................
................................
................................
................................
................................
................................
.........................

9

Toolbar, Fly out Menu, Bullet Style

................................
................................
................................
................................
................................
...........

10

Page Header, Portlet Header, Top Navigation, Quick Links

................................
................................
................................
................................
....

11

Portlets & Dashboards

................................
................................
................................
................................
................................
...............................

12

Tasks Portlet

................................
................................
................................
................................
................................
................................
...............

13

Tabs

................................
................................
................................
................................
................................
................................
..........................

14

Standard Tabs

................................
................................
................................
................................
................................
................................
..........

14


Omni Partners Marketing Site




3

|

P a g e



Wizard Pages D
esign

................................
................................
................................
................................
................................
................................
..

15

Example of a Collapsible Information Panel on the Right

................................
................................
................................
................................
.......

16

Dotted subtle Lines

................................
................................
................................
................................
................................
................................
....

17

Page divider

................................
................................
................................
................................
................................
................................
................

17

Icons on the Left Navigation

................................
................................
................................
................................
................................
......................

17

Informative wait window

................................
................................
................................
................................
................................
..........................

18

Help pages

................................
................................
................................
................................
................................
................................
...................

18

Tooltips for item description

................................
................................
................................
................................
................................
.....................

19

Search Box Examples

................................
................................
................................
................................
................................
.............................

19

Best Practices

................................
................................
................................
................................
................................
................................
..............

20

Use semantic H
TML

................................
................................
................................
................................
................................
................................
.

20

Fixed ratio/multiple

................................
................................
................................
................................
................................
................................
.

20

Start with a verb to represent user action

................................
................................
................................
................................
...............................

20

Appendix I: User Experience (UX)

................................
................................
................................
................................
................................
............

22





Omni Partners Marketing Site




4

|

P a g e



Objective

Redesign the Omni Partners Marketing site to incorporate the Corporate Design Standards which are f
ocus
ed

on overall
User Experience
. B
uild a clean crisp
site

that looks great while
retaining Minimalism and Simplicity
.

Give the marketing
site the same ‘look and feel’ as the Company’s SaaS products so that users seeing the marketing site, and seeing the
SaaS product, will know that they
are both from the same company.

Targeted screens



Home Page



Content Pages



Other screens as required


Corporate
Design
Principle

Differentiator
s


Left toolbar

Our left toolbar with the
fly out

menus are
a differentiator we
are going to
keep

and will move into all of our SaaS
applications and corporate marketing sites
.
No one else
in our space
has this
. This i
s very
useful

where the application
has to present rows of data as it saves vertical screen real estate

Portlet Style

Our portlet styl
e when applied across all screens will act as a differentiator

Tab and Grid Style

Our portlet style will drive the rest of the theme


so tabs, grids and accordions will follow that theme

Color theme and fonts

A multi colored theme to allow for customer
defined colors to blend in
while keeping
HRsoft main colors
as
primary.


Omni Partners Marketing Site




5

|

P a g e



Color Scheme



1

primary
6 secondary
and total

~
5
0 colors



One Primary Color : HRsoft Purple



6 Secondary colors:
Y
ellow,
B
lue,
O
range,
R
ed,
G
reen,
B
rown



The rest of the colors are
defined in the color palette on the next page



Relationships of Colors

t
here are plenty of terms to describe colors

and

it is
helpful to
understand
their emotional
meanings.

Complimentary colors

are colors that
complement

each other well and are located opposite of each other on the color
wheel. These are colors like blue and orange, purple and yellow, and red and green.

Analogous colors

are those located right next to each other on
a
color wheel, so they usually match fai
rly well but
provide little contrast when used together.


Color Groups Based on Emotions

There are color groups that are associated with emotions:
warm
,
cool

and
neutral
.

Warm colors

evoke warmth like red, yellow and orange.

Cool colors

make people think
of cool and chilly colors like blue, green and purple.

Neutral colors
, as the term suggests, don’t create much of an emotion. Colors like grey and brown are neutral colors.

The
above guidelines
can be used to help create meaning and suggest certain emotion
s in a web design without words





Omni Partners Marketing Site




6

|

P a g e



Master Color Palette:

Cool colors

[Blue
,

Green
,
Purple]


Warm Colors

[Red
,
Orange
,
Yellow]



Neutral Colors

[
Brown, Grey
]





Omni Partners Marketing Site




7

|

P a g e



Corporate

Font Standard:

Many sites choose to use a single font such as
Arial as their typeface for everything. This results in a bland, boring
and uniform look and feel.
Though t
here are many flavors in typography
,

our
Corporate Design Standard

define
s

a
combination of typefaces,
to make the site look
a lot more flavorful and

exciting
.

By using different typefaces for
headings and body text
we
’ll be able to make
our
site look better instantly. One way to do this is to use a serif font

(eg: Cambria)

for
the
topic
headings and a sans
-
serif font for
rest of the page
. This gives
the
text a contrast in letter
shape, while making it easy to read.

Our approved Corporate

font standard is as follows:


o

Century gothic, sans
-
serif
:
Use this for titles
(12+ size) and other big
-
sized text
page header
left menu
content

etc.

In small doses it conveys a fresh style.


o

Cambria: To be used
(preferably in bold)
only to highlight the main topic header in question on any
page. So only one use per section is expected.


o

Lucida Sans Unicode, Lucida Grande, sans
-
serif
:

This font is functional and quirky enough to look “different”. This
font does not look rigid and geometric such as Arial or Helvetica and has some “humanist” qualities that make it
make it more round and “personable”. It definitely has the balance of bein
g clean, readable and at the same time
stylish enough to be the default font of the body text of any web site.


o

Trebuchet MS,
sans
-
serif
: Very elegant. It is best used in websites that are sophisticated
-

Use it for the textual
content like parts of Help c
ontent Notes/Tooltips/table headers etc. It is best to avoid using it for the titles as a
large font size does not look well for this font type.


Note

about Font Size
:

Use the combination of relative font
-
size units
(%

and em) as recommended by W3C.

These units provides a
more consistent and accessible display for users. When the client changes
settings,
these units scale at
reasonable rate which
facilitate

preserving visual design and readability.



Omni Partners Marketing Site




8

|

P a g e



A
reas where Font

and colors

should be standardized:

o

Corporate
Marketing
Web site
s (Omni, HRsoft, Incentives Advisors)

o

Corporate e
-
mail

and signatures with defaults set from exchange

o

All Documentation and Presentation templates

o

Marketing materials, booths, banners etc.

o

Envelopes,
Letterheads and stationery

o

Visiting Cards




Omni Partners Marketing Site




9

|

P a g e



Example
(SaaS Product)


(NOTE


this is a SaaS product


not a marketing site)

Legend:

1

= 5px;
2

= 10px;
3

= 12px;
4

= 15 px
;
5

=

Medium Portlet: 66% of
frame
;
6
=

Small
Portlet:
33
% of frame

1

4

1

1

1

2

1

3

1

4

1

1

2

2

6

5


Omni Partners Marketing Site




10

|

P a g e



Toolbar
,
Fly out

Menu
, Bullet Style


Legend:

1

= Left Toolbar (Width: 40 px; Border Top: 5px; Border Right: 1px; Icon separator 2px;
2

= Expand Menu Icon;
3

=
Highlighted Toolbar icon Border Top, Left & bottom: 2px;
4

= Toolbar Icon: 40x40px;
5
=

Resource Menu Icons
;

6

= Bullet Enabled
, Font
Lucida Sans Unicode
;
7
=

Bullet Disabled
, Font
Lucida Sans Unicode;

5

1

2

3

4

6

7


Omni Partners Marketing Site




11

|

P a g e



Page Header, Portlet Header, Top
Navigation
, Quick Links

Legend:

1

= Logo 40% Max Area;
2

=

Top Navigation Icons 24x24px
, Font:
Trebuchet MS
;

3

=
Page
Quick Links, Font:
Lucida Sans
Unicode
;

4

= Portlet Header: Font: Century Gothic
,

BG Color:
#F7F7F7
, Border Bottom Color: #DDDDD;
5 =
Portlet Header Icons
14x14px;
6 =
Portlet Header Top Border 5px, Vary color based on HRsoft palette;
7

= Box Right & Bottom Shadow (shadow.png)

1

2

3

5

4

6

7


Omni Partners Marketing Site




12

|

P a g e



Pop ups




Use pop ups (example of above) for simple user tasks like ‘request

more information’ or ‘contact us’

Portlets & Dashboards



Use a flashier color for the header section

top bar

of the portlets. E.g. The flashier, the more important a portlet.



Portlet look and feel
should be
uniform,
with good
readability and
a sharp
look.



D
etail buttons
hidden
to reduce clutter: On top bar hover
(1 sec Delay) will
show detail buttons



Omni Partners Marketing Site




13

|

P a g e





Portlet Layout



6
Small
Portlets
should fit and be
visible on 1024x768

screen resolution



All portlets of same size
of the same dimension m
ultiple and
aligned



For Higher resolution use Fluid Layout system

Tasks Portlet



Use accordion
s

for tasks portlet
;
Task Portlet should take
up
a maximum of 2x portlet size


Omni Partners Marketing Site




14

|

P a g e




Tabs



Not more than 6 tabs should be allowed


beyond that, it becomes
a usability issue



If something takes more than 6 tabs


find another way to represent
(
a ticker tape approach

or dropdown)



The tabs must always be in the logical order of workflow


Standard
Tab
s

We
will use
different

colors
to differentiate
the tabs. The colors need not represent something but the secondary colors
should
always be in the same order.
H
aving colors
presented
on the tabs
help
familiar
ize
with color scheme
.


Omni Partners Marketing Site




15

|

P a g e



Wizard

Page
s

Design



Open in window with

minimal browser
chrome



Resizable vertical divider to
move to a
limited extent



T
abbed approach per page

of the wizard



Expand collapse sections to reduce clutter



Context sensitive help




Omni Partners Marketing Site




16

|

P a g e



Example of a
Collapsible Information Panel on the Right




This is a nice navigation concept that gives user the flexibility to expand or collapse
a

Navigator”

data
panel



Use the same type of style as the portlet header on the home page





Omni Partners Marketing Site




17

|

P a g e



Dotted subtle Lines


Solid lines make a site look grid like. Dotted lines are cleaner.
U
se dotted lines where appropriate

Page divider


Icons on the Left Navigation



Use

sprite


choose
palette
colors as much as possible



Opaque on select
-

Transparency 50% on deselect




Omni Partners Marketing Site




18

|

P a g e



Informative wait
window




When waiting for a page to load user should know what is going on behind the scene



Help pages



Implement context sensitive help for all major components



Omni Partners Marketing Site




19

|

P a g e



Tooltips for item description


Search
Box
Examples

Budget Modeling
Screen:






Omni Partners Marketing Site




20

|

P a g e




Best Practices

Use semantic HTML

o

Use semantic HTML Headers H1 and other standard definitions

o

Semantic HTML: is the use of HTML markup to reinforce the semantics, or meaning, of the information in
webpages rather than merely to define its
presentation.



Right now, if someone once to expand a header they just expand the size of the font. They should use
H1.



Low priority


but we may as well set the standard now.

Fixed ratio/multiple

o

Use fixed ratio for maximum number of screen artifacts as p
ossible.

Fix
pages where various text boxes are different sized and
not
aligned

D
efine sizes and ratios
that make sense for your site but follow the rules of symmetry

End user should be presented with
the same screen element ratios on each page

Start with

a verb to represent user action






Omni Partners Marketing Site




21

|

P a g e








Omni Partners Marketing Site




22

|

P a g e



Appendix
I
: User Experience (UX)

What is UX?



Read attached pdf to understand UX best practices (Tip: Read the 4 Best Practices Sections, those are most relevant)



A comprehensive guide :
http://usability.gov/guidelines/guidelines_book.pdf



Read:
http://mashable.com/2011/09/12/website
-
usability
-
tips/



See Slideshow:
http://www.slideshare.net/nickf/user
-
experience
-
best
-
practices



http://uxmovement.com/cont
ent/why
-
your
-
links
-
should
-
never
-
say
-
click
-
here/





Omni Partners Marketing Site




23

|

P a g e