Bupa mockup
Bupa, November 2018

HR portal redesign

UX & UI Design

Client Bupa | Company Deloitte | UX and UI Designer Emma Mirabelle

This project involved UX and UI design for Bupa's HR portal. The process involved understanding the current state of the HR portal and defining what the future state should be. I employed a Design Thinking approach throughout the discovery (i.e. requirement gathering and user research) phase to the define (i.e. determining the problem and designing the solution) phase.

After an audit of the current state portal and numerous workshops and interviews, we discovered that it was difficult for users (employees) to find important information using the existing knowledge base system. Users would search the knowledge base for such things as what to do when a team member is underperforming or who to escalate a work issue to. However, the poor navigation of the site, the confusing content and the counter-intuitive interaction design meant that employees were not able to find the information in the portal. This resulted in an overly high number of HR service tickets.

Through synthesising the research, understanding the problem and then iteratively designing the new experience through co-design sessions with the client and development team, we were able to design a better knowledge base where information could be easily found.


Workshops

I ran multiple design workshops with end users and stakeholders to understand the current state HR portal experience and ideate the future state experience.

Design workshop
Design workshop

Technical process flowchart

I researched the current state process flow for end users (HR staff). I mapped both front-end and back-end processes in order to understand the current experience and then design an improved experience.

technical process flow

Iterative design

Designing the future state involved moving from low fidelity to high fidelity designs i.e. from handrawn sketches, to wireframes and then to creative screen designs.

low fidelity sketch

Responsive Design

The designs were responsive across different devices (desktop, tablet and mobile).

responsive design

Multiple templates

The below mockup gives an idea of some of the templates that I designed for the portal.

perspective design