top of page

Accelerate Design System

A unified experience for the future of safety

iStock-1330222719_edited_edited_edited.p
iStock-1309560111_edited_edited_edited.p

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.

Usability Heuristics - 1.png

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.

​

UX Heuristc 1.png

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. 

Fitts's and Woodworth's 1.png
Fitts's and Woodworth's 2.png

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. 

Accelerate SiteMap - 2022.png

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

Default _ All Solutions.png

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.

Screenshot 2024-06-23 at 2.30.27 PM.png

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

Screenshot 2024-06-23 at 2.36.29 PM.png
Screenshot 2024-06-23 at 2.36.38 PM.png
Screenshot 2024-06-23 at 2.36.44 PM.png

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.

Detail Page _ Template.png

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.

Screenshot 2024-02-21 at 12.12.png
Screenshot 2024-02-21 at 12.12.png

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.

© 2021 Lilianna Pedroni

bottom of page