Case Study

Designing for HROnline

HROnline is a cloud-based human resources service providing businesses with an easy method of managing their daily HR needs, such as approving holidays, recording lateness or sickness and updating employee details.

The platform's user interface was in need of an update with many inconsistencies throughout its design. And with the increasing usage of mobile devices and tablets, it needed to adapt.

I was asked to redesign the interface and produce a design that was clean, simple and consistent across all devices.

I Provided

  • User interface designs for all key areas of the web application
  • Responsive HTML/CSS templates
  • A style guide documenting component requirements
  • Designs for the iPhone app (a native iOS6 design)
A diagram showing the connection of image assets, documents and the cloud.

Analysis & Preparation

Before starting any design work, I had to get a thorough understanding of the web application, its features and the type of data displayed. With it being a very large system, I decided to create a visual map of all its areas and specific components first before attempting any wireframes or visuals.

The team at hronline provided some great examples of use cases and user types to help me with getting an understanding of who the target audience was. I looked at some similarly sized systems, some of which were unrelated, and gathered my thoughts together on a mood board.

Wireframes

Armed with all this information and my visual map, I now had a clear idea of what was required. I created a few wireframes for the dashboard and key areas of the application.

To make the application flexible to future features, I added the main navigation down the left-hand side.

A monotone wireframe depicting a layout for the HR Online dashboard.
A small snapshot of a style guide showing the Helvetica font and two colours; blue and slate grey.

Visuals

When it was time to begin the redesign, I decided to go with Helvetica as the standard font and colours that complimented the primary blue of the brand.

Using Helvetica, a standard web font, ensured there was no additional loading required and kept the application quick. Web fonts were still in their infancy at the time and were not always displayed nicely in some browsers or platforms due to anti-aliasing.

The Dashboard

One of the key areas of the web application was the dashboard. This was a screen that all users saw first and it was certainly lacking anything useful.

The aim here was to create a visual snapshot of the business so managers could quickly update their records and tasks without spending too much time navigating around the system.

I introduced various new UI features:

  • Notification bar
  • Employee timeline
  • Information widgets
The completed design for the HR Online dashboard showing a summary of employee availability, absence requests, the week at a glance and monthly planner.
A wireframe of the employee calendar where holidays can be requested and absences can be noted.

Employee Calendar

The calendar was perhaps the greatest challenge design-wise because it contained different information depending on whether you were viewing as an employee or a manager.

Wireframing was an important step in this design stage.

iPhone App

Unlike today, mobile devices had much smaller screens and it was also recommended to use native iOS elements to ensure familiarity.

The hronline iOS app followed these guidelines and was designed after the wireframes were approved.

Screen designs for the accompanying HR Online iOS iPhone app.