The IT Hub

Background

Understanding the issues

This was the legacy website...

Logo design

High points

In my previous organization – Actuant,
The Hub was an internal Communication website.
Every department (Finance, Engineering, IT,
HR, etc.) had its own Hub. To know about the service
offerings of these departments, Users visited The Hub.

All the Hubs were legacy application with least attention towards User Experience. Programmers built it with an archaic design. These Hubs desperately required modernization. To start with, we chose to modernize IT Hub.

All the Hubs looked similar and generic. There was no distinction. Our IT Director suggested to provide a different identity to IT Hub.

I suggested to have a logo for IT Hub.

After several permutations, and several logo options, our Director liked the following logo for IT Hub.

Insights

Some of the sections such as Reach Us and News Digest were prioritized and placed above the fold
Dedicated blog segment for the Chief Information Officer
Dedicated section for SLA updates of IT sub-divisions (DB, InfoSec, Infrastructure, etc.) were to be made available online
Small micro interactions animations could make the site engaging

Interaction design is provided at the top of this page

Pain Points

I did a Heuristic evaluation of the IT Hub. Though there were several usability issues, few key issues were:

Lack of visual cohesiveness
Navigational inconsistencies, incorrect labeling,
in-appropriate error messages
Unrelated and disproportionate images, improper grid alignments
Hyperlinks lacked affordance/visual-clue
Generic segmentation of information

High Fidelity Prototypes

This overall application modernization was implemented by 2 employees – Me (UX Designer) and another colleague who programmed and implemented the design. We worked on this as a stretch assignment
Our IT Director highly recognized and appreciated the effort
By the time I left the company, there were talks on modernizing other Hubs of the company

Visual Treatment

The content heavy website was given definition with a grid-based tiled structure. Color palette were kept around the Actuant Maroon, Black, Greys and white.

Heuristic evaluation

UI Design

Sketches

Once IT Hub logo got approved, next was to come up with layouts of the new IT Hub website.

There were marathon meetings internally with the IT Team. I sketched quick whiteboard sketches for brainstorming. We took feedback on these sketches from
5 users internally and 4 users from other departments.