Cocoon (Series A Startup B2B): Designing an In-Product Compliant Pregnancy Leave Tracker
Jump to Final Product
As a full-stack engineer at this startup, I had the unique opportunity to take over as a product designer when our team designer was out. I lead the project from scoping to Figma design for our first milestone to create a pregnancy disability leave tracker, as well as led the engineering efforts behind it.
Role: Product Designer, Lead Engineer
Team: Cocoon’s Core Leave & Pay Team
Timeline: 6 Weeks, May-June 2024
Skills: Product Design, XFN Research, UI Design
A mapping of how we currently handled parental leaves (blurred for privacy)...with a lot going on.
The product codifies federal and state laws to calculate each employee’s eligibility and automate designation notices, and enables users to privately plan a leave in minutes, easily f ile claims, and accurately track their pay.
Pregnancy disability leave (PDL) is one of the leaves that Cocoon covers. However, there are several nuances to keep the leave compliant, as well as be compatible with the way Cocoon’s system handles leaves.
Background
Cocoon is a leave management software that automates the complexities of compliance, claims, and payroll for People teams and their employees.
Employees don’t know what to expect for their leave if they need an extended amount of time away due to pregnancy disability.
Our current internal mapping of leave management was convoluted.
My initial goal was to understand the inner workings of our products and its gaps, as well as the legal implications behind pregnancy leave. I conducted in depth interviews with our operations team, who currently manually filed our user’s Americans with Disabilities Act (ADA) leaves, our Product Manager who handled leaves, and our legal team.
The insights from this research informed the design and implementation of key improvements, focusing on:
Defining Leave Approval and Compliance Requirements
Streamlining SHC (Serious Health Condition) and Supporting Document Handling
Improving Employer and Employee Interactions
Addressing Parental Leave Gaps
Research
Discovered Gaps
The stakeholder interviews uncovered existing system had gaps in handling compliance, SHC forms, and flexible approvals for extended leaves. Specific challenges included:
Ambiguity around when SHC forms were required.
Lack of clarity on the employer's role in approving extended leave and pay.
Compliance risks tied to insufficient or delayed SHC handling.
Auto-approval of parental disability leave without SHC documentation.
Employee’s leave dates ranges are limited in our current leave designer U.I
Design Cocoon’s flow to support pregnancy disability in our product.
Users should be able to plan a leave with a pregnancy disability from start to end.
The Challenge
With the product gaps in mind, I conducted a brainstorming session with our internal stakeholders - our engineering team, the marketing lead, operations lead, and our legal team.
How Might We...
... inform our users that they need to turn in an SHC to extend their parental leave, and that there are different implications to the leave depending on how the SHC form is filled out?
... inform our ER so that they feel empowered to approve/deny a leave?
Design Studio
From the voting, leave approval and denials, as well as SHC gaps were the two issues top of mind.
Blurred for anonymity
Brainstorming: Crazy 8s
With these in mind, I facilitated a design studio below where we each came up with some sketches.
First flow: Entry from our “Leave Design Timeline”
Second Flow: Entry during design flow, where the user may not know if they need it this early in the flow
Third Flow: Entry from ADA, after user clicks on “request leave accommodation”
I designed some initial wireframes for how our users would enter the new pregnancy disability flow.
Solutioning
Added a lighter shaded section to represent optional pay.
Created new component for clearer visualization of leave time available.
Added toggle to trigger accommodation leave flow.
Introduced graphic to point users toward new flow.
When designing the net new components, I tried to reuse as many tokens as possible. I also decided to use JSON Forms as the basis of the new forms and wrapping them in Cocoon theme colors rather than designing new elements from scratch since we already had it as a dependency.
Minimal Engineering Overhead
It was important to our stakeholders that users were able to enter the new flow at multiple points, as not every user would know they required pregnancy disability leave as a subset of their parental leave. This meant adding clear explanations that were toggle-able to not overwhelm users with an abundance of information.
Multiple Entry Points
Design Rationale
After discussing with other engineers, we narrowed down the flow to 3 main milestones with detailed acceptance criteria. I was able to complete the final high fidelity version for our first milestone.
The First milestone:
Allow users to extend pre/post birth disability with existing entitlement.
Final Design
Reflection
I was really happy to be given the opportunity to work as a product designer on our startup team. It was definitely a challenge to balance my engineering commitments while also taking on the role of designer - time management really saved me.
This was my first time really getting into the weeds of what we did at Cocoon - learning the landscape took way longer than I had originally budgeted for. I was proactive in asking questions and made sure I had a solid understanding of everything before proceeding. It was a lesson learned to always give some wiggle-room for projected timelines.
Design is really the bridge between our product, our users and our engineering team. I learned to make design decisions while taking into account the trade offs from so many perspectives: business, engineering, and user experience.
10:32AM