Part One — How we are creating a HR system that increases engagement and productivity.

The Challenge

The previous LoopHR system was outdated, unintuitive and no longer acting as a suitable solution for its users. Employee engagement levels were dropping and the number of new businesses signing up to LoopHR was declining. Product owner, Ian, admitted to being afraid of drawing attention to the old system because it was no longer doing what it was meant to.

It’s been our job to create an entirely new look and feel to LoopHR whilst also improving existing features and implementing a wide variety of new ones, with the overarching goal of boosting productivity and increasing engagement. The old system had a strong focus on admin managers with there being little functionality for employees. This new system has both admin managers and employees needs at the core.

The Process

Getting to know LoopHR and its users

We like to kick off every project with a workshop that consists of designers, developers and the key decision makers. This session is for us to learn about project goals so we can help our clients in achieving them. A kick-off workshop is so ingrained in our process we’d find it impossible to begin a project without one.

With LoopHR being such a large project, it was important to both us and the client to break down the project into smaller chunks. For LoopHR it was fairly easy to break down due to the different features of the product. Breaking the project down helped both parties knuckle down and remain focused. We’re all about forming long-lasting relationships with our clients and we hope they are too so we love it when clients trust us and our processes.

One of our favourite parts of a project is getting involved with users hands on. It’s really important for us to understand their frustrations and expectations when using LoopHR and other HR systems. During the workshop we identified the key user types that we needed to engage with:

• Experienced Business Owner
• New Business Owner
• Multi-Site Owner
• Employee

We spent some time putting together a number of surveys for each user type and reach out to ask them a variety of questions. The results we gained really helped us when moving forward into the sitemap and wireframing stages.

Survey Response Highlights

Users described the navigation as clunky and when struggling to find anything they have to get in touch with the product owner via email.

We looked into condensing menu items and adding icons to make them stand out. The positioning of nested sidebars in the old system was very confusing and not very logical. It was our aim to remove users having to spend time finding where the navigation sits and instead created a tabbed secondary level of navigation as opposed to having two sidebars. Our ultimate goal was to remove the need for a user to have to contact the product owner to help them navigate the system.

Users were having trouble using the Virtual Office tool and some were not finding it very useful. They weren’t really sure what it does or what it could do.

Within the new system, we have renamed this tool to Docs & Files and created a space that’s easier for admins and employees to store files. Admin users can upload files to the system and apply them to all their employees, a selected team or an individual. With this newly added flexibility and a minimal layout, we hope that users will see the benefits of this tool.

Users felt that the old holiday feature was lacking functionality to make it more powerful. Users want the ability to see an overall holiday calendar for everyone so they can see who is off for a whole team.

We’ve created a bespoke calendar component that allows admin users to filter employees by team or simply view all employees. This gives them to opportunity to view everyone’s holiday in a single view.

These are just a few of the many problems we discovered by talking to different user types. Doing this has helped us to design and build a new system that meets user expectations. But what’s next? Wireframes and iterations.

Wireframe, review, iterate

After collating all of our research and looking into competitors we started to experiment and create low fidelity wireframes for the admin side of the system. We always begin with low fidelity sketches as it means we can generate ideas quickly and not get attached to them.

Once we’re happy with the direction of a screen we’ll then create it in Sketch at medium-fidelity. During this stage, we avoid getting things pixel perfect. It’s more about getting a solid solution together that we can share with the client. Once we’d got all of the relevant screens together for a feature we’d stitch them together in the form of an InVision prototype.

There would then be a cycle of feedback between our team and the client. This would result in us making tweaks to the prototype until we had final sign off.

Round-Up

We’re going to round up this part of the case study. In part two we’ll be diving into the design phase, giving you an insight into how we’ve created a consistent set of reusable patterns. This has been especially important due to the scale of LoopHR.