Introduction

HCL BigFix is a unified, AI-driven platform for managing and securing all endpoints (laptops, servers, cloud, mobile) across an organization, automating tasks like patching, compliance, software deployment, and inventory from a single console, even for diverse OSs and disconnected devices, reducing complexity and costs with its scalable architecture.

My Role and Responsibilities

• Create end to end UI design experience for the complex workflows of the product considering the possible edge cases and development feasibility.

• Working on low fidelity wireframes and creating high quality UI designs for the HCL BigFix SaaS.

• Designing the high fidelity designs using design systems and design patterns.

• Define the responsive behaviour of all the screens for zoom support accessibility.

• Incorporate accessibility standards including alt text, labels for screen readers and keyboard navigation order.

• Collaborate with PMs, design leaders and Engineering team to understand requirement and refine the design that meets the business as well as product goals.

• Create design-to-developer handoffs of all the screens with detailed user flows for implementation.

• Support developers to fix the design bugs and maintain consistency across all the UI designs.

Project Process

1.Understanding Need

Receive the low-fidelity wireframes from the UX designer and understand the user flow and design need.

2.Problem Identification

Collaborate with UX Designers to go through the user flows and identify the potential user problems which is not addressed in the wireframes through collaboration. Finalise the user flow after adding missing screens and define complete user flow.

3.Medium Fidelity Designs & UI Ideation

Create Medium fidelity designs based on the wireframes using UI components, design patterns and libraries. Share the design with UX designer and Design leaders to verify if the design is meeting the UX requirement with acceptable pattern.

4.High Fidelity Design

Finalize the high fidelity designs after getting feedback from UX designers and product managers. Design UI in Figma with auto-layout, Figma variables and tokens.

5.Design-to-Dev Handoff

Create and share a detailed documentation of design handoffs to the developers for implementations. The handoff includes details-

1. User flows

2. Responsive behaviour for mobile, tablet and desktop screen sizes.

3. Dark mode variant

4. Spacing tokens

5. Component details

6. Page layout and semantics

7. Alt text

8. Labels for screen readers

9. Heading structure

10. Keyboard navigation

11. Generic links

12. Long descriptions for charts.

13. Skip links

14. Logs of changes or updates happened to UI during development process.

6.Feedback and Iterations

Receive feedback from developers while development process and continuously improve the design through iterations. Check the implemented UI design, identify the bugs and share the defects with Developers through Jira.

Measurable Outcomes

0

+

UI Designs Shipped

0

+

Increased Conversion Rates (%)

0

+

Increased Feature Adoption (%)

0

+

Design handoffs Created

Qualitative Impacts

• Standardized the design patterns, responsive behaviour and visual hierarchy to boost system scalability.

• Incorporated WCAG accessibility guidelines into screen designs, ensuring compliance and improving usability for users with accessibility needs.

• Successfully coordinated with PMs and UX teams to eliminate potential blockers and accelerate time to market.

• Successfully delivered the designs within deadlines and contributed for business to achieve the target and launch by Sept’25 (V1 version).

Learnings

This project gave me opportunity to work on the complex user flows of HCL BigFix SaaS, as this application is highly complex due to its high learning curve.

The below are the key learnings I acquired from this project-

Collaboration Skills

• Stakeholder management

• Work under Agile methodology

• Articulation of design decisions

• Brainstorming for UI ideation

• Designer-developer mutual collaboration.

Technical Proficiency

• WCAG compliance standards

• Visual design specifications

• Advanced Figma functionalities

• Designing new UI components

• Scalable Design patterns

• Responsive UI Design

• High Fidelity designs and mockups

Analytical Skills

• Problem solving abilities

• Task flow analysis

• User journeys study

• Edge cases and Ideation