REFACTOR OS

RefactorOS is a saas data management platform that enables public sector organisations with autonomy, accuracy, and accessibility over their data.

A  comprehensive figma design system was created that supports the quick and accurate production of designs and prototypes to be used by RefactorOS.

The system was then used to design key pages such as a drag and drop user dashboard, a user permissions page, and a high fidelity working prototype with hover and focus features.

USER DASHBOARD

These screenshots showcase the transition from an out of the box dashboard to a custom dashboard designed to meet the needs of RefactorOS’s specific users.

Notable additions and changes have been made including:

A left-hand settings panel that is open by default has been added to allow for quick customisation of the dashboard. Widgets and settings are more easily accessed.

Edit and delete buttons have been added to each widget to allow users the freedom to execute these commands without the need to click into the widget settings.

A user permissions setting has been added to enable users the ability to grant access to different departments from the dashboard screen.

These changes have been made in order to free up the traditional dashboard, and to allow it to take on the shape that is most useful to the user.

USER PERMISSIONS

The user permissions screens have been optimised to allow for fast customisation with 100% accuracy.

The first image displays the early design for this screen. Notable shortcomings are present particularly within the UI design: headings are not prominent enough, listed items become cluttered, necessary filtering is missing creating manual work for users when searching for specific permissions.

With the design system guideleines applied, we see that headings are clearer, grouped information is communicated more effectively, and key interactions are made more obvious. 

Filtering options and primary buttons have been added in order to cut the manual work of searching long lists.  

DESIGN SYSTEM

The atomic design methodogy was followed when creating branded components such as buttons, icons, and text styles.

Each element is responsive, accessible, and utilises variants and global styles for total efficiency.

The smaller components or ‘atoms’ are incorporated into larger more complex components such as navigation menus and alert dialogues. These components also benefit from variants and global styling.

The components are then used to quickly and efficiently create mock-up screens, user flows, and prototypes with 100% accuracy.

COMPONENT EFFICIENCY

The video showcases the quick customisation of a fully responsive component.

Singular components are created with multiple variants and editable options. This enables mock-ups and prototypes to be produced at lightning speeds.

Each component is built using layouts that emulate those used on the front end. meaning there is 0 oversight between design and development.

FAST AND EFFECTIVE PROTOTYPING

A benefit of a comprehensive design system is the ability to produce high fidelity protoypes with ease.

The video showcases a prototype of the menu structure, demonstrating the various states such as hover and focus.

These prototypes can be used for user testing or for showcasing interactions with various elements.