D3 Security HR Case Management Tool UI Design

Categories

UX/UI design, interaction design

Roles

UI/UX designer, UI design lead

Duration

September 2017 – November 2017

Relevant Programs & Tools

Adobe Illustrator, pencil and paper

Collaborators

Inky Kang

About

While working at D3 Security, my largest undertaking to date was successfully leading the UI/UX design of a human resources case management application for a large multinational e-commerce company. It was officially launched in June 2018, with over 4000 users around the world using it.

Please note that because this platform is being used by the client's internal teams and is not publicly accessible, I cannot disclose specific details nor show detailed UI sketches/mockups for this project on my portfolio.

Process

Background

While D3 currently has a successful case management within our enterprise incident management web application, it isn't specifically targeted for HR personnel. As a result, when the client requested a tool that had significantly different functionality and a vastly different UI/UX than what we have, we determined that we would need to significantly overhaul the UI and improve the UX. Another complication was that from the start of the project, they wanted the overall design to be presented and approved within two months (November 2017), with the full deployment of the software to be within nine months.

At the beginning of this project, our design team consisted only of myself as the sole UX/UI Designer, as well as another Software Architect. However, a new UI/UX Designer was hired one month into the project, after which I became the UI/UX lead. I promptly trained the new designer to get familiar with our existing application, then gradually got her more involved with this design project. I delegated tasks to her of increasing responsibility as the project went on, provided constructive feedback given our design specifications, and ultimately ensured that all mockups that either of us created were as high quality as possible and that they followed the functional specifications.

Design Process

The client wanted high-fidelity static UI mockups that could be presented as PDF slides as the finalized result of the design stage. As such, I chose to use a rapid prototyping method. I created a user flow diagram to determine how users might interact with our application to accomplish tasks. Then, based on the functional specifications provided by my manager and the Software Architect, I quickly sketched my ideas down using pen and paper, and then filtered down my ideas. After presenting my ideas to my manager, I translated my sketches into high-fidelity mockups using Illustrator. The high-fidelity mockups were presented to the client's project coordinator for feedback regularly; then, I iteratively revised them.

User flow diagram
A user flow diagram demonstrating various stages of the HR case investigation process.
Assortment of sketches
An assortment of my various UI sketches.

There were numerous challenging aspects with this project; the most significant one involved trying to find the balance between creating an intuitive UI that was user-friendly, especially for the client's entry-level HR staff, while also considering the initial five-month deployment timeline and our existing software's technical limitations based on that deadline. I handled this by taking the best of both sides: I knew what components could be reused, which could be newly implemented with relative ease using parts from the UI framework we utilize (Kendo UI), and what compromises would have to be made. The UI and UX were creating with these in mind.

Outcomes

This was a massive undertaking in which a total of 44 high-fidelity product mockups were created in the end. In mid-November, the mockups were then presented by D3's senior staff during an on-site meeting with the client's senior staff, as well as various user groups, to demonstrate the overall UI, functionality, and workflow. We received very good feedback, and the UI mockups ultimately played a huge role in helping their management express confidence in D3's product and our capability to deliver a solution that is easy to use yet is highly customizable for all their needs.