Layers

Assets

Design System

Button

Input text

Input

Logo

Update

Labels

Update

Labels

Colours

Primary/100

Primary/200

Primary/300

Primary/400

Gradient/100

Gradient/200

Gradient/300

Gradient/400

How to use

Color is a foundational element within any design system, audiences. Thus, color becomes a dynamic force driving engagement and shaping user experiences within the digital landscape.

States

How to use

Empty states serves a multitude of purposes that are vital for enhancing user experience. Beyond being mere placeholders for content, they act as guiding beacons and offers users direction.

Desktop Cloud Platform

Plans

Add

Edit

View

Filters

Search for a filter here..

Filters

Projects

Project name

Status

Client

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Status not set

Retain International LTD

Updating Retain Design System

Desktop Cloud Platform

Plans

Add

Edit

View

Filters

Filter here

Filters

Projects

Project name

Status

Client

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Status not set

Retain International LTD

Team support

Unconfirmed

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Planned

Retain International LTD

Team support

Status not set

Retain International LTD

Retain International

Revamping, modernising and enhancing Retain's design system

About Retain

Retain International offers resource planning and talent management solutions globally through their cloud platform. Currently their cloud and mobile application is in a different branding to the markting site.

What this case study looks into

modernising Retain's design system, prioritising, accessibility and cohesion across platforms. Creating responsive and flexible components utilising auto-layouts, working in an atomic structure.

My role

UX/UI Designer

Time frame

6 weeks

Tools

Figma

Context

Open

all accordions

My contribution & responsibilities

I was the UX/UI designer who took the lead on designing the design system for both platforms mobile and desktop. I built every component using the atomic structure, looked into the accessibility of colours and typography and implemented all the states and variants.

Atomic design structure?

Retain's design system follows an atomic structure, starting with basic elements like typography and colors, which combine to form larger components such as buttons and headers. This modular approach allows for easy adaptation to rebrands or design changes by only modifying foundational elements

Click to read more

The design system was produced with the atomic structure in mind. Focusing on atoms such as:
‍
• Typography
• Colours
• Grids
• Icons
• Shadows

Which then when put together create molecules like:
•Buttons
•Inputs

These then are combined with more molecules to create organisms such as a header.This was done to future-proof Retain's design system should they go through another rebrand or major design changes only the atoms need to be changed as the foundation has been set.Below is an example of the atomic design in Retain.

What were the problems?

Retain faces challenges in maintaining brand consistency, achieving accessibility standards, and optimising design system efficiency, potentially hindering their professional image, accessibility compliance, and user experience.

Click to read more

1. Business consistency

Retain platform is blue and white, and their marketing site is green, white and black. When Retain goes to an event, showing their platform The potential clients see a blue and white platform but Retain's marketing material is green and black. This could lead to Retain looking less professional and by having this inconsistency of two brandings and prevent them from having a well-known brand image.

2. Accessibility

Unfortunately, the Retain green on the marketing site did not pass Aa accessibility with white text. This then led me to find another shade of green.

This was easier said than done, every green that would have paired nicely didn't pass accessibility and every green that did resembled Microsoft Excel.

This would lead to Retain not passing WCAG accessibility standards as Retain was getting evaluated for their accessibility fairly soon by Intopia.

3. Design system efficiency

While Retain's design system it's not user-friendly to use. Components are not wrapped in auto layouts for responsive design as well as missing variants. Meaning, components are being detached constantly.

Components constantly being detached could lead to human errors and inconsistencies. If these inconsistencies are not so spotted they could make their way into the cloud platform causing issues and potential annoyance for users.

What were the main goals?

Retain's goals are to refine their brand, improve accessibility, and optimize the design system for enhanced professionalism and user experience.

Click to read more

1. Brand consistency

Ensure a unified brand identity across all platforms, marketing materials, and events to strengthen Retain's professional image and brand recognition.

2. Accessibility compliance

Revise the marketing site's color scheme to meet Aa accessibility standards, ensuring that all users, including those with disabilities, can access and navigate the content effectively.

3. Design system optimisation

Enhance the design system's user-friendliness by implementing auto layouts for responsive design and incorporating missing variants, aiming to minimise component detachment, human errors, and inconsistencies, thus improving the overall user experience on the cloud platform.

What was the solution?

Retain's components come in three sizes with corresponding font sizes and padding, featuring states like Default, Hover, Active, and Disabled. Main components include Buttons, Inputs, Options and Ratings, Cascades, Trees, Tab Pickers, and Modals, tailored for iOS and Android platforms with responsive mobile design.

Click to read more

Components states and sizes

Each component has 3 sizes:

- Small - consisting of 12px size font
- Medium - consisting of 14 px size font
- Large - consisting of 16 px size font

Padding size also changes by 4px so small would be 8px padding, medium 12px padding and large 16px padding.

Depending on the component, depends on the variation types and amount of variations it has.
StatesStates are similar to variants in the sense that they depend on the component but typically the component has the states of:

- Default
- Hover
- Active
- Disabled

There are some others like buttons which have focused and pressed.

Buttons and Inputs

Options and ratings

Cascades, tree and tab pickers

Modals and alerts

Cascades, tree and tab pickers

And more

Above are the main components which I found are the most used in the platform. Putting all components states and variants would make this case study quite lengthy and possibly boring. Below are just a few more types of components created.

For iOS and Android

Responsive mobile design system for both iOS and Android platforms.

Empty state

If there are no jobs updated that week there's an empty state with a primary CTA to add time and a skeleton load if needed.

choosing jobs to log worked hours

Users work on multiple jobs throughout the week, for that reason the option of choosing more than one job at a time was available.

Logging hours

Since around 70% of our user base fills their time weekly, the design was more accommodating to bulk logging time where user chooses the day and inputs the amount of hours worked.

Accommodating to the other 30% of daily users

Understandably, over a quarter of our user base prefers to fill their timesheets daily. The process is not any different, once the user fills out the first day they can edit the remaining days and add more jobs on the top right.

Deleting logged hours

Deleting logged timesheets is possible with 2 clicks.

Changing dates

Deleting logged timesheets is possible with 2 clicks.

Filtering the job list

Deleting logged timesheets is possible with 2 clicks.

What were the results?

The consistent design system across platforms, coupled with modern colour schemes, has streamlined user experience and boosted efficiency by reducing instance detachment and maintaining component linkages, ensuring consistency and usability.

Click to read more

1. Consistent design

A design system that will lead to the cloud platform being in line with the marketing site as the mobile application has been rebranded to the new framework in Retain timesheets.

2. A more modern look and feel

The use of green, black and white makes the design system feel more modern, lighter and accessible.

3. An efficient design system

A powerful and responsive design system that allows the design team to not have to detach instances as frequently. Maintaining the component link and ultimately consistency by not having to pixel push as much.

Reflection

My thoughts

Personally, this was a long time coming, when I first joined Retain I wanted to rebrand the platform instantly. I am very grateful that I was the designer to do so.
‍
I wanted the design to be sleek and modern. For that reason, I used the 70-20-10 approach where the 10% would be the green branding for important elements like calls to action, links, etc.
‍
Before I left Retain, with the new design system I started to rebrand the cloud application and their marketing site.

How to use

How to use

Retain International

Revamping, modernising and enhancing Retain's design system

Linked In