Role

UX/UI Designer

Timeline

14 Weeks

Team

Individual Project

OVERVIEW

RSLog Design System

In my role as a UX Designer at Rocscience, I was assigned to work on one of our products: RSLog, a web-based borehole log management software. This tool is designed to centralize data and streamline the process of collecting, reviewing, and preparing borehole logs. While refining the product’s features, I noticed a few inconsistencies across the platform's UI. To address this, I took on the challenge of developing a comprehensive design system to enhance RSLog’s overall design and usability.

Challenge

RSLog suffers from inconsistencies due to the absence of a shared design language. This is impactng the platform’s user experience and coherence.

Solution

Create a unified design system that establishes clear design principles and components to ensure consistency across the platform’s UI.

OVERVIEW

Design Process

PROJECT PROPOSAL

Getting Buy-In

 
 

To initiate the RSLog Design System project, I put together a comprehensive plan and shared it with stakeholders. This outlined the existing user experience challenges in RSLog and how developing and implementing a design system would help us address them. The proposal outlined the project's objectives, its proposed actions, and emphasized the importance of this initiative. By demonstrating how the new system would enhance efficiency and productivity, I garnered support from all team members to kick-off the project.

Proposal Presented to Product Team

RESEARCH

Gathering Requirements

 
 

I first started with a UX audit of the existing platform. This involved identifying inconsistencies and summarizing findings into thematic discrepancies to gain a better understanding of areas with the highest impact on user experience. I then compiled all relevant UI components to inform the next phase of development.

During this time I also took inspiration from established Design systems such as Carbon Design, Material Design, and Microsoft's Fluent Design System to gain valuable insights on how well-established systems can inspire and inform our own.

Research Snapshot: Gathering Evidence for the Design System

DEVELOP

Design Principles

 
 

In the building phase of the design system, my initial focus was to create and establish concrete design principles. These guidelines would help shape the foundational appearance and functionality of RSlog. They cover essential elements such as layout, spacing, color usage, and typography. I defined specific rules regarding the placement of controls, spacing between content blocks, and the type scale for UI copy.

The objective was to ensure a uniform and user-friendly experience across the platform. Adhering to these principles would not only enhance visual coherence but also streamline development and maintenance, providing significant value to our product team.

Sample Design Principles from RSLog's Design System

DEVELOP

Component Library

 
 

In the second phase of building the design system, I constructed the component library for RSLog. This library is a comprehensive toolkit of pre-built UI components like buttons, menus, tabs, input fields, badges and more.

The component library facilitates easy to access component specs, instant color identification, and clear guidelines, speeding up feature development. This systematic approach not only reduces ambiguity for the development team but also streamlines the design and implementation process.

Sample Component Library from RSLog's Design System

DELIVER

Implementing the Design System

 
 

Once the design system was fully developed and tested, I created an implementation plan to leverage its tangible benefits. Presenting a four-phased approach, I outlined a roadmap to guide the adoption process. The primary objective was to ensure full integration of the system to enhance the platform’s UX/UI while also maintaining its status as a dynamic and evolving entity, serving as the product team’s single source of truth.

REFLECTION

Takeaways

 

This was my first time building a comprehensive design system for a professional product. The task felt daunting at first, not just due to the legwork involved, but because I had to convince an entire product team to get on board as well. Through this, I was able to practice not only my design-thinking skills but also my communication and negotiation abilities. Despite challenges, I eagerly embraced the project by breaking things down into manageable steps and establishing realistic timelines and milestones.

Going through this process and seeing the final design system come to life is truly one of the highlights of my design career!