\Smon \Human Resource Management System

Dec 2022 - Jun 2023

UX/UI design and research

As a (junior) Digital Product Designer in a small tech team, I served as the primary designer for the HR management system. I independently owned the design of multiple features across desktop portals, balancing user needs with business requirements to create intuitive interfaces that seamlessly connected the entire journey.

The product

HappyWork is a human resource (HR) management system offering features such as attendance check-in, organisation chart, and request/approval workflows. The ecosystem consists of a mobile user app, a desktop interface and an administrative back-office system. As a SaaS solution, it serves 450+ corporate clients.

The problem

The design needed comprehensive updates across all platforms. The existing application files required migration from Adobe XD to Figma, the admin portal lacked design documentation, and new features were planned for implementation. All functionality needed to work seamlessly on both mobile and desktop platforms.

The goal

To create a cohesive and intuitive design for the entire platform, including the admin CMS portal (desktop), user-facing desktop interface, and mobile application.

Responsibilities

Independently owned and designed the desktop system features.
Collaborated closely with business analysts, project managers, and senior designers during feedback and revision sprints.
Maintained the design system and ensured detailed documentation.
Prepared prototypes and supported usability testing led by a senior UX designer.
Contributed to the UX and visual concept design of the mobile application.

Important note

As most of the design details cannot be revealed, this case study emphasises my working methodology and collaborative approach in delivering this complex system.

Building on Established Foundations

I based the component design on existing style guides and libraries (built on Minimals UI) used by developers and other in-house products. While maintaining consistency, I specifically crafted components for this product's unique needs. I modified the colour palette to align with brand guidelines and shifted typography to Noto Sans to support future multi-language requirements.

Comparison between the reference product design and HappyWork implementation.

Transforming Complex Requirements into User-Friendly Interfaces

I translated complex business requirements into intuitive designs through collaborative communication with cross-functional teams and targeted user testing. This ensured alignment between business needs and user expectations.

Evolution from initial business analyst sketches and requirements to final polished interface.

As the owner of both admin and user desktop platforms, I maintained consistent communication with the mobile design team to ensure information created in the admin system was displayed correctly across all user touchpoints.

Admin request form editor modular items alongside user views of the same form on desktop and mobile platforms.

Request submission across desktop and mobile platforms.

Creating Colleague-Friendly Documentation

While prioritising intuitive user experiences, I recognised the importance of clear documentation for team discussions and development handoff. I annotated components and interactions, connected each screen with clear interaction paths, and documented potential edge cases.

Figma canvas showing feature flows and documentation, with a detailed view of interconnected screens and annotations.

Breaking Down Complexity

The HR back-office experience, particularly for form creation, presented complexity challenges. My initial design followed existing portal patterns with a single-page scrolling approach. After identifying cognitive load issues, I restructured the flow into distinct multi-step pages with a summary review screen, significantly improving usability.

Comparison between initial single-page form creation flow and revised multi-step approach.

User Testing and Validation

Some interfaces, like the approval flow editor, appeared complex at first glance but proved intuitive during user testing. This validation process allowed me to focus refinements on minor UI refinements rather than complete redesigns.

Comparison between initial and refined versions of the approval flow editor.

A more targeted, user-centric approach

Working in a startup environment meant adapting to evolving requirements. There were many features popped up during the process. While this is normal, I think we could have benefited from a more targeted approach with clearer goals. Creating more polished personas and better-documented user stories would have helped us evaluate whether new features were truly meaningful for users and strengthened our overall decision-making.

Accessibility

As a junior product designer, I honestly had limited knowledge about accessibility. Looking back at the design now, after gaining more experience through projects and education, I can spot several accessibility issues, particularly with colour contrast. This awareness has become an important part of my design process today.

The more challenges, the better I learn

This complex HR system was quite challenging for me as a junior designer, especially since I didn't have much corporate or HR experience. I'm grateful for the trust my manager placed in me, as this challenging project accelerated my professional development significantly. Although I left to pursue my master's degree before the launch, the experience provided me with an invaluable foundation in translating complex requirements into intuitive interfaces. The projects I've tackled since HappyWork all seem more manageable by comparison.