The challenge:

I had inherited the Higg Index platform from a previous offshore designer and so the challenge was figuring out the reasoning behind some UI/UX choices and talking to the Higg team to see if there was an appetite for redesigning some major components. I found out there was definitely an appetite for fixing the navigation and create consistency across the platform. The Higg Index had gone through a few design iterations in the past so the UI/UX was inconsistent and the products had different UX solutions for the same componenets (like filters and animated drawers). I wanted to standardize the UI/UX across the platform so I started with navigation and page layouts first.

Research phase:

The research phase consisted of talking to team members who had been with Higg for a long time so I could learn the reasoning behind certain design choices. For example, why is the Higg FEM (Facility Environmental Module) structured in a seemingly haphazard way with no real information grouping or hierarchy? The answer was that the page needed to go out quickly so the information was slapped onto the page and rolled out. There was also the reasoning that anything was better than what the old system used to be, which was completely analog. Still, I sought out to improve the UI and information hierarchy of the pages.

Diagnosis:

I needed to group similar information together and put the most popular info at the top, emphasize it visually, and let the eye trickle down the page with less critical information.

How did I know what was less critical? FullStory recorded sessions showed us what was most clicked on and historic use cases revealed what users really cared about.

Wireframing phase:

Due to the speed of the sprints and primary goal to deploy code, my wireframing phase essentially became non-existent. I went straight to Figma to create full-color, code-ready designs that were iterated upon quickly and moved into development shortly after.

Design and Prototype phase:

Navigation:
I approached the navigation in a series of steps:
1) First, make it responsive! We did have half our users checking the platform on their mobile devices so it was crucial we fix the nav to respond to small screen sizes. I don’t love hamburger menus but we did go with that solution because it’s web standard and easily identified now.
2) Move some of the nav items around because honestly, some of the nav items didn’t make sense where they currently resided.
3) Secondary and tertiary navigation was changed from a light blue bar and white bar with dropdown to tabbed navigation (secondary) with floating text as tertiary nav level. I moved away from the colored bar UI because we were using colored bars as toasts and alert messages. I also utilized our Higg blue as navigation colors since the deep purple, which was another action color, was being used for CTA buttons.

Page layouts:
1) The FEM page needed some love. Some information needed (I can’t believe I’m using this word) to POP. Currently, everything looked the same with the same visual hierarchy indicating similar levels of importance. This was not so.
2) Since I was also working on standardizing the UI color palette, I used more GUI for our CTA’s (purple buttons) instead of making the users rely on identifying text links. The platform was already text-heavy and needed more GUI to break it up.

Old designs

Proposed designs