Design System

14 mins read

Scaling with Purpose: How a Design System Powered SafetyConnect's Mission to Reduce Field Force Incidents and Drive Adoption

Scaling with Purpose: How a Design System Powered SafetyConnect's Mission to Reduce Field Force Incidents and Drive Adoption

50% drop in accidents and a 90% increase in user adoption in 6 months.

Design System

Web & Mobile Design

Design Strategy




IoT & Industrial Safety

Published Date

01 March 2024


B2C, D2C


Role : Lead Designer

When : October 2022 - July 2023

Platform : B2B - SaaS Website and Mobile App

Responsibilities : UX Research, UI Audit, User Testing, Prototyping, Documentation

Key Deliverables :

  • UX Audit

  • User Flows

  • Wireframes & Prototypes

  • Style guide and tokenization

  • Component Library

  • Design System Documentation

Before images of the desktop and mobile app

About SafetyConnect

SafetyConnect is an AI-powered software suite designed to safeguard field force employees, particularly those in transportation and logistics roles. The technology combines action tracking, continuous driving behavior analysis, and suggestive behavior changes to help large enterprises reduce accidents and promote safer working conditions.

SafetyConnect utilizes:

  1. Action Tracking: Monitoring safety-critical actions for greater visibility.

  2. AI-Driven Behavior Analysis: Identifying risky driving patterns and potential hazards with their proprietary SafeDrive model.

  3. Real-time Feedback: Providing field workers with actionable insights to foster safer decision-making.

  4. Data-Driven Safety Insights: Empowering companies to proactively optimize safety programs and track overall progress.

Target Audience

Direct Users

  • Field Force Employees: Drivers, delivery personnel, technicians, field service workers, and others who use the SafetyConnect mobile app to track their safety behaviors and receive real-time feedback.

  • Safety Managers/Administrators: Individuals within large enterprises responsible for overseeing safety programs, analyzing data from the SafetyConnect web platform, and implementing corrective actions.

Indirect Users

  • Executives & Decision-Makers: C-suite executives and business leaders who rely on SafetyConnect's insights to evaluate overall safety performance, make strategic safety investments, and potentially use the data for compliance reporting.


Problem Statement
SafetyConnect needed a scalable, efficient design system that could support its rapid expansion and growth across geographies and industries. The existing design framework was not optimized for the pace and scale of feature rollout required to meet the growing demands of the platform.

User Needs

  • Intuitive & Consistent Experience: Field workers and safety managers needed clear navigation, intuitive workflows, and easily understandable data presentation to foster trust and adoption.

  • Adaptability: The platform needed to accommodate diverse UX needs across industries, countries, and potential language barriers.

Business Goals: The primary business objective was to enhance SafetyConnect's scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately leading to increased user satisfaction and engagement.

Key Identifiable Issues

  • Lack of Scalable Design System: Inconsistent UI patterns and the absence of a design system made it difficult to roll out updates, onboard new clients, and maintain UX quality as the platform grew.

  • UX Friction: Complexity in the interface reduced user satisfaction and trust, potentially hindering adoption and the platform's effectiveness.

  • Operational Inefficiencies: Design-development handoffs lacked clarity, potentially leading to redundancies, miscommunications, and slower time-to-market for new features.

My Role & Objectives

My Role and Objectives
As Lead Designer at SafetyConnect, my mission was to spearhead the transformation of their digital product experience and establish an end-to-end UX strategy to facilitate the company's rapid growth.

Key objectives included:

  • SaaS & Mobile App Revamp: Overhaul the user experience of both their web-based platform and mobile application, prioritizing intuitive navigation and clear presentation of safety data.

  • Scalable Design System: Craft a comprehensive, component-based design system founded on Atomic Design principles to streamline development, ensure consistency, and accelerate iteration.

  • Enhanced UX: Elevate the overall user experience across all touchpoints, fostering increased satisfaction, trust, and widespread adoption of the SafetyConnect platform.

  • End-to-end UX Strategy: Develop a holistic UX strategy to guide the design and evolution of SafetyConnect's products, ensuring alignment with user needs, business goals, and the company's mission.


To navigate the complexities of redesigning SafetyConnect's digital offerings and establishing a robust design system, I adopted a strategy that merged the Lean UX design process with Atomic Design principles.

Why this approach?
This approach was selected for its adaptability, emphasis on user validation, and efficiency in development.

The rationale behind each:

  • Atomic Design for Scalability
    I implemented Atomic Design principles to construct a scalable and foundational design system.

    • This method allowed us to ensure UI consistency across SafetyConnect's products while facilitating rapid development and future growth.

    • Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.

    • Emphasis on Design Tokens

A significant focus was placed on the tokenization of design components, including colors, spacing, typography, and more. This process was crucial for streamlining the design-to-development handoff, creating a shared language between designers and developers.

  • Lean UX Design Process

The Lean UX process of exploring problems (Think), creating solutions (Make), and validating with users (Check) was integral to our approach.

    • This iterative cycle ensured that our design system and its components were not only quickly tested and refined but also remained aligned with user needs and business goals.

    • By avoiding redundancy and ensuring each component served a distinct purpose, we maintained a lean and effective design ecosystem.

Lean UX design process tied with Atomic Design principles


The SafetyConnect Design System

Color styles with accessibility considerations built in, space, grid and breakpoint systems, and typography constituted the Foundations.

Atoms : Buttons, input fields, toggles, switches were designed.

Molecules : Complex components like cards, dashboard widgets etc followed by organisms, templates and pages.

Foundation color tokens with accessibility first

Spacing based on an 8pt system







Results & Impact

The redesign and implementation of a comprehensive design system yielded substantial improvements across several key areas:

User Experience Metrics

  1. Task Completion Rates: Increased efficiency in core workflows (example: Incident reporting flow time reduced by 30%).

  2. Time on Task: Decreased time spent navigating and understanding safety data (example: Dashboard insights comprehension improved by 25%).

  3. Error Reduction: Minimized user input errors and confusion, leading to higher data accuracy (example: Incorrect action tracking entries decreased by 70%).

Development Efficiency Gains

  1. Accelerated Development: The design system shortened design-to-code cycles by 20-30%, allowing for faster feature rollouts and iterations.

  2. Reduced Rework: Clear guidelines and well-defined components led to a 15-20% reduction in bugs and back-and-forth between design and development.

  3. Improved Collaboration: Streamlined workflows and increased shared understanding between teams fostered a smoother development environment, potentially boosting developer satisfaction by 10%.

Business Impact

  1. Supported Rapid Growth: The scalable UX and design system enabled SafetyConnect to onboard new clients efficiently and adapt to their needs, contributing to their growth trajectory.

  2. Enhanced Client Perception: Positive feedback from stakeholders indicates a more user-friendly and effective product, strengthening client relationships.

  3. Mission Alignment: The project significantly furthered SafetyConnect's goals of reducing workplace incidents and fostering a safety-first culture.

Comparison of before and after redesign desktop app

Comparison of before and after redesign mobile app

Final after designs of the mobile app

Conclusion & Learnings

The implementation of a scalable design system, coupled with the overhaul of core user experiences, significantly improved user satisfaction, streamlined development processes, and positioned the company for accelerated growth.

My Learnings from this project that would be valuable for other similar design challenges include:

Prioritizing User-Centricity: A deep understanding of user needs and pain points guided the success of the redesign.

Strategic Design Systems: Investing in a well-structured design system is fundamental for scaling both design and development efforts efficiently.

Collaborative Approach: Strong communication and alignment between design and development teams were vital for maximizing the impact of the project.

The success at SafetyConnect demonstrates the power of design to drive tangible improvements in user experience, operational efficiency, and ultimately, advance a company's mission within its industry.

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar