Compete HR Web design

Compete-HR Design System

Roles: UI/UX Designer

Tools: Pen and Paper, Adobe XD

Devices: Desktop, Tablet, Mobile

Project type: UI-Design

After establishing hundreds of UI components for a functional UI component library, I designed a complete interactive user guide with guidelines for the designers and developers to stay consistent within the corporate identity when expanding.

1. Feature Specification

Multiple modules

Compete offers multiple modules within their packages. At the time of writing, there are 5 (Free, Sick, Time, Access, and Zero) excluding Compete HR. All the individual components that are used widely will have to be included within the design system, without clutter.

Documentation

An overview with the correct usage and code properties needs to be documented for future devs to refer back to and ensure the component created is consistent with the corporate identity.

Live demo

Some interactive components, such as buttons, toasts, tooltips, tables, alerts, and more, must have the ability to be showcased without hindering documentation.

Future proof

In case of expanding to a new software module, we have to be able to add more modules and their respective components with ease.

2. Wireframes

3. Low Fidelity

The design we chose provides options for future expansion. It clearly communicates to the user what module is currently being viewed and there is enough space for showcasing one, or multiple components.