
Accelerate Design System
A unified experience for the future of safety



Project Details
Project Role: UX Designer
Mission: To create a design system for the company
Timeline: June 2022 - December 2023
VelocityEHS has established itself as a leading ESG software company with over two decades of trusted service. Amidst a series of acquisitions, the company inherited a mosaic of UI styles, leading to a fragmented user experience. Our objective was to develop a cohesive new design system, integrating every capability under unified navigation, user-friendly layouts, and refreshed color schemes and components.

Design Strategy
To establish our new framework we used the 10 usability heuristics to guide our design decisions and created a clickable document to share our strategy with our colleagues and stakeholders.
​

Since the company consists of over 10 main products, each being built on a different system, we wanted to streamline the new build by using an already established library as the building blocks for our new components. After meetings with our dev team, we decided to go with PrimeReact as our base library.

In addition to heuristic principles we also applied various design laws when constructing our page layout and user flows.


Navigation
Prior to this update there was no umbrella navigation, users had to sign in separtely to each of their purchased products, creating a clunky and sometime confusing experience. We needed to create a unifed navigation for our users to be able to view and seamlessly navigate between their products.

There were about five different color themes for mobile pages. Made the app feel disjointed.

This was the outline for the main Solutions or Platform navigation that would connect all the products under one roof. This navigation had to be collapsable because once the user entered a product that product would have it's own navigation or "Capability" navigation that needed to be shown.

Another challenge was converting old capablility navigations to our new design model.



Implementation
Being as clear as possible to our developers was key to the success of this design update. Since most pages are based on a pattern we were able to layout each page design and high light important elements like spacing.

Before And After
I have been working mainly on the update for the EHS capabliity so these screen grabs are from that product. However this design update will. need to be applied to 8 more capbilities that vary greatly in styles.


Design Guide Prototype
The feedback from the company was exceedingly positive. They agreed that the new look gave a more refined feel and made the objectives more clear on each page. The branding reflects their company attitudes and is more memorable to its users. They were also thrilled to have a space to refer back to for future iterations as they continue to build out their mobile application and update their website.

Takeaways
I learned a lot from this project and enjoyed collaborating with other designers to create this style guide. I had to be flexible and very time conscious to complete everything smoothly. Overall, I'm really pleased with how it turned out and look forward to another project that includes a total UI overhaul. At this time, I don't have any metrics on the new design since the company is still implementing these changes. I can say I've been told from the few users who have been shown, the company goals are much clearer and more defined.