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
please click here to see the animation created to show the loading and hover effects on homepage
Paragraph Iconography

Navigation

Left Hand Side Menu

Being the engine that drives each website, the navigation should be predictable, simple, consistent, and well-placed.

I used left-hand side navigation because it avoids cluttering a horizontal bar with too much text, and too many options. It also gives us more horizontal space for the navigation subcategories(Protiviti has 8 navigation tabs and some tabs consist of even 12 sub-navs and it has sub-navigations that have their own sub-navigation).

Another reason for using the LHS menu was that, when the navigation is sort of large, it's easier on the eyes to track it because we already used to read from left to right and by default, we expect that. Click on a category, and the menu expands to reveal sub-options… It also gives me more space to keep the page clean and highlight the main message executed on the homepage On the other hand, on the horizontal nav, in case the content is listed long, the user can simply scroll and click through.
Navigation

Navigation

Areas to Improve

Tabs on the nav-bar should open by hovering over them.
Reason:
a) It saves the user one click.
b) Some of the tabs don't have subcategories and by clicking on them a new page will open(basically tabs are supposed to have the same functionality but they don't).
Please click here to see the animation created to show the menu expansion and hover effects.

Insight Page

Insight page has a large result set and needed Filters to narrow results efficiently.

https://www.protiviti.com/US-en/Insights

I turned search into filters by suggesting categories and attributes users may be looking for.

For categorizing the content, I created tabs with icons for each media and specified color for each media category. And for filtering topics, I created a bar right above the categories to suggest users choose the topic and industry they are interested in.

The first question to ask is whether users are in an exploratory mode or they have clear search parameters in mind.

Considering the variety of users Protiviti has, Interactive filtering was the safest choice. Users make one selection, and the system updates the results. After looking through the updated results, they get an idea for another filter, select it, and the system updates the results again, and so on.
Insight page

Insight Page

Areas to Improve

when the user clicks on a box(color-coded based on its category), a new page opens with no sign of its category. It needs to add an indicator to show the category. Also if a user comes to the page through a link, it helps them to recognize which category the page belongs to.
Please click here to see the animation created to show the menu expansion and hover effects.
Core page
Events page
Company page
Location page