2012Case 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)
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.
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
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.
