Mercer - HR Scanner website
Mercer’s HR Operations Scanner gathers the necessary data to assess a company's current HR operations and help them make informed decisions about what to change to support their company’s success
The Design Problem
The current design of the HR Scanner is so confusing and website is very difficult to navigate. The business wanted to fix the pain points addressed by the users and make it easy for the users to navigate to a task.
Users of the Product
The Main users are HR Professionals who use this tool to help them make informed decisions about what to change to gather insights about their company's employees
In general the whole look feels dated. I’d like to see a bit more color or a different font. I’m sure the Mercer standards would give us some options for that. Although I do like that the colors are subtle and not bright and garish.Looks super dated
- Looks super dated
- Client branding? Should be visible
- Add an intro page that describes the different functions of HR
- Make Time Allocation Survey more visible (perhaps switch with Operations scanner at top… employees don’t need to know the trademark of the survey)
Started the user research by interviewing the actual users of the Tool. Started the interview by asking the following questions
- What do you see as the main pain points with the User Interface?
- What are the things you don’t like about the navigation/look/feel?
- What parts of the tool are hard to understand/navigate (be specific)?
- What would you like to improve in the User Interface (for example: I would like to quickly jump to the previously visited survey page)?
This is how, I approached the design problem in stages,
- The design approach started with reading out all the information gathered from the user research (MS Excel)
- Based on the user research, preparing the tasks to perform on the tool
- Executing the tasks on the tool and identifying the design changes
- Then started creating the mock ups and sending it out to the users for feedback and changes (Paper prototyping, Adobe Illustrator)
- Updating the mock-ups based on the feedback
- And finally creating the high fidelity mock ups (Adobe Photoshop)
The following are the final high fidelity mock-ups that were created as part of the design process which were delivered as an updated product
The results are very encouraging as the Product owner and the customers have shared their positive feedback and happiness over their increased productivity with the App.