Streamlining long forms into a stepper format

Streamlining long forms into a stepper format

Streamlining long forms into a stepper format

My role

My role

My role

UX Research, UI Design

UX Research, UI Design

UX Research, UI Design

Client

Client

Client

PeopleHum

PeopleHum

PeopleHum

Date

Date

Date

December, 2022

December, 2022

December, 2022

Objective

The aim of this project was to simplify the leave policy setup process, reducing form abandonment and increasing completion rates. The goal was to deliver an intuitive, user-centered solution that streamlined configuring leave policies, improved the user experience, and minimized support queries. The solution needed to be scalable and flexible to accommodate future features while ensuring compliance and technical feasibility.

Stakeholders: Product Managers, Developers
Target Users: Human Resource Managers, Admins

Problem statement

The original leave policy setup form was lengthy, complex, and overwhelming, leading to high abandonment rates. Users needed an intuitive, time-efficient, and scalable solution that aligned with business goals, simplified onboarding, and ensured technical feasibility.

Process

Following an agile framework, I collaborated closely with Product Managers and Developers throughout these stages to ensure alignment with requirements and technical feasibility.

  1. Research: Gathered insights from the customer success team and conducted competitor analysis.

  2. Ideation & Wireframing: Brainstormed solutions and developed low-fidelity designs based on findings.

  3. Prototyping & User Testing: Developed interactive prototypes and iteratively refined designs based on user feedback.

  4. Final Design: Delivered a scalable and intuitive solution while ensuring smooth implementation.

Research

The primary objective was to identify the issues users faced while filling out the leave policy forms and the reasons behind these problems. Since I was unable to directly interact with users, I turned to an alternative approach—gathering insights from the customer success team. They frequently assisted users with setting up leave and had a wealth of information on the pain points experienced during the process. Their input provided me with a valuable foundation to start analyzing the friction points in the form flow. I complemented this with competitor analysis and secondary research to identify industry trends and potential solutions.

Primary Research

I conducted interviews with the customer success team to gain a deeper understanding of recurring user challenges. I spoke with team members who were either responsible for or had firsthand experience with the leave form. They shared not only the pain points faced by users but also their own challenges. Some of the feedback included:

“I don’t know which fields are mandatory until I get an error.”

“I have to start over if I close the page, which is frustrating.”

“It’s hard to understand the impact and meaning of some of the fields in the form.”

Competitor Analysis

I examined industry standards for leave policy forms and reviewed external case studies addressing similar challenges. Competitors like Zoho, DarwinBox, and Keka were analyzed to understand how they structured their leave setup forms.

Secondary Research

I explored how other SaaS platforms tackled form drop-off issues and identified successful strategies that could be adapted to our scenario.

Key Findings:

  • The form was excessively long and overwhelming for users.

  • Labels lacked clarity, leading to confusion.

  • Users needed the ability to pause and resume the form at their convenience.

These insights set a strong foundation for the ideation phase.

Ideation

The ideation phase was where creativity met collaboration—it was dynamic, messy at times, and incredibly rewarding. I began by sketching out rough ideas, allowing my creativity to flow freely. To enrich the process, I actively involved stakeholders such as the Customer Success Team and Product Managers in collaborative exercises. Here’s how we tackled it:

Crazy 8 Exercise

This was a fast-paced ideation activity designed to encourage divergent thinking:

  • Setup: Participants were given a brief overview of the problem statement and key findings.

  • Process: Each person had 8 minutes to sketch out 8 ideas.

  • Discussion: Once time was up, we shared and discussed each idea. This helped surface creative solutions, even from participants who didn’t consider themselves “designers.”

Brainstorming Sessions

The brainstorming sessions were a mix of structured chaos and collective brilliance:

  • Kickoff: I set the stage by presenting the problem statements and research findings.

  • Idea Storming: Initially, participants were encouraged to shout out ideas freely (it got a bit chaotic, but that’s part of the fun).

  • Streamlining: To bring order, I asked participants to take turns sharing their thoughts, emphasizing a no-judgment rule. Others were encouraged to build on each idea rather than critique it.

  • Evaluation: Once we had a pool of ideas, I introduced evaluation criteria:

    • Technical Feasibility

    • Alignment with Business Goals

    • User Understanding and Simplicity

    • Ease of Development and Maintenance

Wireframing

Based on the findings, I brainstormed and explored two primary approaches to address the problem named as follows:

Conversational Flow (Personal favourite)

The form was broken into multiple steps with real-time feedback for each completed section. The flow mimicked a conversational style, dynamically adjusting questions based on user responses. This approach minimized unnecessary inputs, making the process more efficient for users with simpler policies.

Stepper Flow

A traditional stepper divided the form into logical sections, with the ability to save progress as a draft. Mandatory and optional steps were clearly marked, allowing users to skip non-mandatory sections if needed. A summary screen at the end provided a quick review of all entered details before submission.

Both ideas were evaluated based on user needs, feasibility, and alignment with business goals. Once the ideas were defined, I translated them into wireframes. The goal was to visualize how the concepts would look and function while ensuring a smooth user experience. These wireframes served as a blueprint for aligning with Product Managers and Developers, allowing them to evaluate if the design met business objectives and was technically feasible.

Prototyping

After presenting the wireframes to stakeholders and incorporating their feedback, I created high-fidelity prototypes for both proposed ideas using our design system. These prototypes provided a realistic representation of the user experience, showcasing detailed interactions and visual elements.

By prototyping both ideas, stakeholders could better compare and understand each approach in terms of usability, feasibility, and alignment with business objectives. This step also facilitated early identification of potential usability challenges and technical constraints, allowing for refinements before development. Prototypes were tested internally to validate workflows, ensuring a seamless and user-centered final design.

User testing

To validate the designs, we conducted user testing for both proposed flows. Collaborating with the Customer Success (CS) and Sales teams, we gathered feedback from 2-3 representatives from each team through interviews and hands-on testing. This process provided valuable insights into usability, user preferences, and potential challenges for each design.

Flow 1: Conversational Flow

Pros:
  1. Users appreciated the simplicity, with only one input required per step, making the process feel less overwhelming.

  2. Real-time updates on current progress and the number of remaining steps were highly engaging and provided clear direction.

  3. The minimalistic and clean design was a refreshing improvement over the old daunting form, enhancing the overall experience.

Cons:
  1. Scalability and maintainability posed challenges for future feature updates or additions.

  2. Users found it difficult to remember their previous inputs and had trouble navigating back to modify earlier steps. This reduced overall efficiency for users managing complex policies.

Flow 2: Stepper Flow

Pros:
  1. The familiar stepper layout was intuitive and required minimal learning, allowing users to navigate with ease.

  2. Grouped information helped users clearly identify mandatory and optional steps. Progress indicators offered a clear overview of the process.

  3. The ability to revisit and edit previous steps was seamless, while the summary page provided a clear overview of saved data before finalizing the policy.

Cons:
  1. Although clean and structured, the design required more development effort and presented challenges in maintaining future scalability.

  2. Users noted a slight adjustment period since the field positions differed from the older form layout, but this learning curve was minimal.

Outcome

Based on user feedback, the Stepper Flow emerged as the preferred solution due to its intuitive navigation, enhanced control over previously entered data, and structured progress indicators. However, the conversational flow also received positive remarks for its simplicity and engaging design, making it a valuable alternative for future contexts where shorter or guided form interactions are necessary.

These insights were critical in refining the final design, ensuring it balanced user needs, technical feasibility, and business objectives.

Final Designs

Separating Leave Categories & Policies

  1. Clear Structure & Customization
    • Categories define broad leave types (Casual, Sick, Maternity), while Policies handle specific rules for different employee groups (e.g., full-time vs. interns).

    • Allows multiple policies under the same category with different applicability and rules.

  2. Simplified Policy Management
    • Policies can be edited, updated, or deactivated without impacting the entire category.

    • New policies can be added within a category without affecting existing ones.

  3. Seamless Employee Transitions
    • Grouping policies within a category allows for configuring specific rules for every policy on how leave balances should be adjusted when employees transition between policies.

    • This ensures seamless balance adjustments without manual intervention, making policy transitions smoother and more efficient.


Why Stepper?

  1. Improved Clarity & Navigation
    • Breaks down the form into logical steps, making it easier to follow.

    • Users understand what each step covers and can jump directly to a section when editing.

    • Reduces cognitive load by presenting information in smaller, digestible chunks.

  2. Better User Experience & Higher Completion Rates
    • Step-by-step progression feels less overwhelming, increasing form completion rates.

    • Users see their progress, which keeps them engaged and motivated.

    • A structured flow provides a sense of direction, reducing confusion.


  3. Error Prevention & Real-Time Validation
    • Errors are flagged before proceeding to the next step, reducing frustration.

    • Users don’t have to track mistakes across the entire form.

  4. Scalability & Future-Proofing
    • New steps can be added seamlessly without disrupting the overall flow.

    • The modular structure allows for easy updates as requirements evolve.


Designed for Usability

  1. Clear Step Indicators
    • Visual markers for completed, ongoing, and skipped steps.

    • Clear distinction between mandatory and optional steps.

  2. Logical Grouping & Flow
    • Steps are grouped based on related information for better comprehension.

    • Each step has a clear title to reduce ambiguity.

  1. User Control & Flexibility
    • With button “Save as draft” Users can save progress and return without losing data.

    • "Previous step", "Next" and “Skip step” are provided to easily navigate the form

  2. Error Handling & Guidance
    • Step-by-step validation of input fields to prevent submission issues.

    • Inline messages and tooltips provide clarity on field requirements.

  3. Future-Proof Design
    • Steps are modular, allowing for easy addition of new features.

    • Policies or rules can be integrated without requiring a full redesign.


Leave Projection

  1. Error Prevention & Accuracy
    • Leave policy setup is complex and hence prone to errors, which can lead to incorrect leave balances, payroll issues, and employee dissatisfaction.

    • Errors are difficult to rectify once they occur, causing frustration for both HR teams and employees.

    • Projection provides a 12-month preview of scheduled leave balance changes, allowing users to validate configurations before finalizing the policy.

    • Users can view projections for future months even after saving, enabling proactive identification of discrepancies and minimizing miscalculations.

  2. Improved Visibility
    • Displays a clear timeline of upcoming changes, helping users understand how leave balances will be applied over time.

    • Highlights different types of leave-related events, making it easier to catch unexpected or unintended outcomes.

Summary Page

  1. Review & Confirmation
    • Provides an overview to ensure all settings align with the organization’s policy.

    • Enables last-minute corrections, minimizing mistakes before final submission.

  2. Quick Editing
    • Users can quickly update specific fields without navigating through all steps.

    • Reduces effort and improves efficiency in making corrections.

  3. User Experience & Completion
    • Acts as a natural pause before finalizing the form.

    • Reinforces user confidence by providing a final check.

Impacts

The redesigned leave setup process achieved significant improvements:

  • Completion Rate: Increased by 35%, demonstrating a substantial reduction in drop-offs due to the simplified and intuitive form structure.

  • Abandonment Rate: Dropped by 80%, with many users utilizing the new "save as draft" feature instead of abandoning the forms completely.

  • Support Queries: Reduced by 25%, as clearer labels and improved flow minimized confusion and user errors.

  • User Satisfaction: Garnered positive feedback from HR managers and the customer success team, who highlighted the streamlined and user-friendly experience.

  • Scalability: The modular design allowed easy additions of new settings, ensuring the system remained adaptable for future business requirements.

These changes not only enhanced the user experience but also aligned seamlessly with business goals, demonstrating the value of user-focused design.

Takeaways and reflections

  • This project taught me the power of collaboration and listening to the right people. The customer success team, often overlooked, became the unsung heroes of this project.

  • If I could change one thing? I’d love to incorporate direct user interviews to gather firsthand insights.

  • Another learning for me was that sometimes (or perhaps many times) your favourite idea is not always a better idea for the user.

The biggest win? Watching an HR manager breeze through the setup process, saying, “Finally, a form that doesn’t make me want to cry!”

More projects

Got questions?

I’m always excited to collaborate on innovative and exciting projects!

Got questions?

I’m always excited to collaborate on innovative and exciting projects!

Got questions?

I’m always excited to collaborate on innovative and exciting projects!