VelcoityEHS *New* Navigation Experience
A united navigational experience
Project Details
Project Role: UX Designer
VelocityEHS has led the ESG software industry for over 20 years, during which time both the industry and our company have seen significant expansion. When I joined Velocity, users had to log in separately to access different products, lacking a unified navigation system. Our challenge was to create a cohesive sitemap and singular navigation to offer clients a seamless user experience: a single login and the ability to view all products together.
Challenge
The company colors and page layouts were a bit incoheasive. No grid, different styles of imagery, and their brand logo was a rainbow, so no clear color palette. The result left users feeling jumbled, unsure what to do on screen with no lasting impression of the site. I wanted to make sure that the company's purpose and attributes shined through in the new design and create a web presence with a more targeted focus.
Company Research
After a couple of calls with the CEO we hashed out the top words that best described them.
"Empowering, stress-free, welcoming and purposeful"
These words would dictate my design decisions and gave myself a starting off point for the new look.
Reviewing the materials
Next I needed to look over the site and mobile application that they already had in place. I wanted to see what was working and what needed modification.
Different style CTA buttons, confusing for user.
Non-accessible text, too difficult to read. Does not pass WCAG standards
Logo too small, difficult to read.
No style format for big blocks of text.
No grid for an evenly spaced layout, also no headers.
Mobile Application
The mobile application had not launched yet and was mostly still in wireframes. However there were a few high fidelity pages completed.
Clicked state difficult to differenciate between unclicked state.
Different color CTA button
I liked this design with different flowing tones and wanted to incorporate it into the new style.
There were about five different color themes for mobile pages. Made the app feel disjointed.
The New Look
​
The Color Palette
The first section I wanted to tackle was the color palette. I wanted either a green or blue palette because those colors represent tranquillity and it was important that the site felt stress free and welcoming.
Imagery
I paired up with another employee to deliver the new cartoon graphics for the site. She created the images and I set up the parameters for the Style Guide. The larger imagery would all change for the site, however, we decided to keep some of the old smaller square graphics for the assessment descriptions since there were so many needed for each specific assessment.
The Logo
The original logo design the company created had issues with accessibility.
Words too difficult to read and losing detail in the outer rainbow.
I suggested that the team make a minimum of two versions, one they could use for light backgrounds and one for dark. I also suggested a third where the wording was more defined so users could read a smaller version of the logo. Finally, the logo needed a set padding size, because there were times on the site where other elements were obstructing it.
Typography
.png)
.png)
Personality
The Layout
Page layouts are crucial in creating a cohesive feel throughout the site. Users recognize patterns and the more a site feels familiar the more relaxed people will feel using it. I delivered the modified layouts but the examples include the old versions of the screens until they update.
.png)
.png)
Components
The old icons had some issues with accessibility. The difference between click and unclicked states was a minor color change that wouldn't be recognizable to all users. I designed clearer icon options for their sidebar and mobile iconography.
.png)
Design in Action
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.