UX DESIGN · UX RESEARCH · UI DESIGN

SCADpro x Deloitte

LEAVE MANAGEMENT PORTAL

Every year thousands of professionals initiate “leaves of absence” at Deloitte. Sometimes they are planned, like for pregnancy or sabbatical. Other times they are unplanned in the event of an accident or illness. While a multitude of resources exists, the process for taking leave can be disorienting.

Under the guidance of Deloitte services, our team worked to assist in the research and development of concepts for a leave management reboot that will positively affect Deloitte employees.

The vision is that the solution will equally benefit the Deloitte leaves team of four who manually manage, process, and track approximately 4,000 paid family leaves per year.

OVERVIEW

THE CHALLENGE
Create a stress-free leave experience, integrating Deloitte's existing capabilities into a single place for employees to access information before and during a leave of absence.

RESULT
We crafted and delivered a leave management portal for both Deloitte employees and the leaves team covering three main leave types using human centered design methodologies within 10 weeks.

CLIENT FEEDBACK
"It could solve 90% front-end problems."
"You guys are amazing and have been amazing to work with! You listened to our asks and needs and truly nailed it. Fantastic presentation and fantastic job!"
— Deloitte Leaves Team

 

📅 TIME
Mar – May 2021

💁🏻‍♀️ MY ROLE
Product Design Manager

🏷 KEYWORDS
To B
Service Design
Portal Design

👩🏻‍🤝‍👨🏼 TEAM
Design Team
Research Team
PMs

✅ MY JOBS
Secondary Research
Ideation
Wireframing
Hi-fidelity prototypes
Usability Testing
Iteration
UI Design

🛠 TOOL
Figma
Miro
Notion
Zoom
Slack

💪🏻 My Contribution to the Project

  1. Developed wireframes and interactive prototypes for three versions as the UX designer.
  2. Made testing plans with PMs and researchers and successfully dealing with an unexpected situation as the design manager.
  3. Conducted user testing as the moderator.
  4. Finalized the project by designing the UI system as the UI designer.

💪🏻 My Impact on the Team

  1. Clear Plans. Developing design plans including the work breakdown structures, task distribution, and the deliverables for each touchpoint.
  2. Efficient meetings. Minimizing meeting frequencies and maximizing meeting efficiency with clear goals and agendas.
  3. On behalf of the team. Sticking to the team goals and fight for the team benefits.

IN THIS CASE STUDY

Scroll down to explore

FINAL DESIGN
DESIGN PROCESS
  • Preparation
  • Draw Some Dots
  • Connect the Dots to a Line
  • Refine the Line
  • Develop a Network With More Lines
TAKEAWAYS

FINAL DESIGN

Our solution to the problem at hand was the prototype of a portal for Deloitte. We created three desktop flows that portrayed different scenarios, and interaction with the portal via mobile phone.

186

DESIGN PROCESS

Deloitte-process

0️⃣ PREPARATION

We started by researching Deloitte's current leave management flows to understand the context and find out the problems and opportunities.

👉

😱 PROBLEMS

1. Too much paperwork for leave initiation.

2. Both employees and the leaves team have to jump between emails, the intranet, and offline contact.

  

💡 OPPORTUNITIES

1. Simplify and digitalize the leave initiation process for employees.

2. Develop a one-stop shop for leave management.

👇

With the opportunities through research, we decided to develop a stress-free and accessible leave management portal that both employees and the leaves team can take actions before and during a leave absence.

1️⃣ DRAW SOME DOTS

We identified key features through the research findings. The key features are like dots in a network. We ideated what the dots would look like by brainstorming with sketches.

THE DOTS

ideation

HOW DID WE GET THE DOTS?

By analyzing the user needs for the HR side and combining the employee side we have ideated, we developed the information flow for both sides to help us identify the shared features for both sides and the distinct ones for each side.

HR-User-Needs
Workflow-for-both-sides

2️⃣ CONNECT THE DOTS TO A LINE

By connecting the dots (key features), we developed a complete flow of maternity leave. The goal was to get the client's feedback about the feature design and the overall leave initiation experience.

THE LINE (MATERNITY LEAVE FLOW)

V1

HOW DID WE GET THE LINE?

With the information flow diagram, we went back to the employee side and developed the sitemap for the employee portal. The detailed layout would help us account for every screen yet to be designed.

Sitemap

3️⃣ REFINE THE LINE

To make the line work better for next-level design, we refined the maternity flow based on the client's feedback.

THE REFINED LINE

❗According to the NDA, the detailed process of the flow is now allowed to show. So, here only present the iteration of feature design.

PROGRESS TRACKER & NOTIFICATION

1. Primary tracker. We redesigned the progress bar by adding colors and marking with status names to make the status easier to differentiate.

2. Secondary tracker. Instead of placing the sub tracker under each status, we fixed the position of the sub tracker and made it more obvious because it is the main focus for users when managing leaves.

3. Contacts for help. We moved the contacts out of the status tracker block to make the task processing less destructive.

4. Notifications. We replaced the notification block with pop-ups which would simplify the way of getting information. Besides, we added an important actions section to provide users the must-read messages.

CALENDAR

1. Legends. We minimized the legends to make the calendar easier to understand.

2. Reminder. We replaced the reminder with pop-up notifications to make the calendar cleaner.

TUTORIALS

1. Images. We replaced the images with stock photos because the client prefers real people rather than illustrations.

2. Categories. We categorized the tutorial videos to help users find what they need faster.

HOW DID WE MAKE ITERATION DECISIONS?

🗣 CLIENT'S FEEDBACK
  1. The interface is expected to be familiar but different.
  2. Communicate deadlines in one place.
  3. What if you don’t know what you don’t know when arriving at the portal the first time?

👉🏻

✅ TAKEAWAYS
  1. Refer to Deloitte's official website design and make changes to fit the leave management experience.
  2. The deadlines are supposed to be shown in a fixed and obvious place.
  3. Proactive information is needed, like a welcoming onboarding experience, a basic intro when initiating a leave, etc.

4️⃣ DEVELOP A NETWORK WITH MORE LINES

According to the validated line, we developed more lines and connected them. As a result, the final system covered three main leave types corresponding to three user flows.

3x2 LINES (3 FLOWS, BOTH SIDES)

Here are very detailed flows for three main leave types on both the employee and the leaves team. It informed our design to be very thorough and focused on a human-centered connection while tying into our final prototype

THE NETWORK (DELOITTE LEAVE MANAGEMENT PORTAL)

Frame-3964

TAKEAWAYS

1

Starting from the dots rather than the lines when creating a complex system.

In this project, we didn't follow the typical design process that preparing the user flow and sitemap for design. Instead, the design came before the user flow. By connecting the dots, we got a clear vision of what we would make. The reverse facilitated the development of the complex system.

2

Making plans and adjusting it.

Sometimes things went differently from what we planned at the beginning. As the lead, I got the experience of reacting quickly and adjusting the plan appropriately.

3

Always sticking to the goals.

When something unexpected happens, I kept the team's goal in my mind and refused a compromised solution that would lead the team to deviate from the track.

Thank you for your time! 😆
Life first. Things second.

© 2021 ZHU with 🍉

Back to top Arrow