Protiviti

Responisive design for global consulting firm website.

ROLE

Lead designer
UX - UI - Visual - Iconography - graphics

2016-2017

01

Wireframes

Wireframes

02

Branding

Hero Imagery

X-ray imagery is used as hero imagery to convey that Protiviti sees things more deeply (uncovers opportunities) to shape your business success.

Images are used primarily on brand focused materials such as key Thought Leadership pieces, advertising and other specific brand collateral. These images set the foundation for the concept with support of other photography and graphic elements.
examples of xray images
protiviti homepage
protiviti homepage
protiviti homepage

Colors

Colors
Colors

Gradients

Brainstorming sketch

Imagery

Imagery

Iconography

Icons

Paragraph Iconography

Paragraph Iconography
Paragraph Iconography

Navigation

Left Hand Side Menu

"Being the engine that drives each website, navigation should be predictable, simple, consistent, and well-placed.
I opted for a left-hand side navigation design to avoid cluttering a horizontal bar with excessive text and options. This approach also provides more horizontal space for organizing navigation subcategories. For example, Protiviti has 8 navigation tabs, some of which contain up to 12 sub-navigation items, including sub-navigations with their own sub-navigation layers.
The choice of a left-hand side menu was influenced by the fact that it is easier for users to track and read large navigation menus. This is because we are accustomed to reading from left to right by default. When a user clicks on a category, the menu expands to reveal sub-options. Additionally, this layout offers more space to maintain a clean page design and emphasize the main message on the homepage.
In contrast, a horizontal navigation bar may work well when dealing with long content, as it allows users to scroll and easily click through the options."
Navigation

Navigation

Areas to Improve

The navigation tabs on the navigation bar should open on hover, as opposed to requiring a click.
Reason:
a) It reduces user effort by saving them from having to click. When tabs open on hover, it streamlines the navigation experience, making it more efficient.
b) Some of the tabs do not contain subcategories. When users click on these tabs, a new page opens, which creates inconsistency in functionality across the tabs. By having all tabs open on hover, we maintain a uniform user experience.
Core page
Events page
Company page
Location page