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 components (like filters and animated drawers). The Higg tables UI needed updating so this was one of the first things I tackled.

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) table in all gray and why are the CTA’s not grouped according to intent? 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 table.

Diagnosis:

One of the biggest issues with the Higg tables UI was the gray palette. Gray normally means disabled or not as important. One may argue that gray is perfectly fine for a global palette, but the type of gray being used on the tables was too light and was illegible and honestly looked disabled. I personally love gray so I tried to update it instead of completing removing it.

The other issues were:

• search fields at top of columns didn’t look like search fields
• column dividers/rules seemed half-finished
• the “…” more actions ellipses should be the last column
• the rows could benefit from alternating bg colors to break up the grid visually

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:

Table :
I approached the table toolbar (or lack of) in a series of steps:
1) Since our tables tended to go wide and force users to scroll horizontally, we needed a way to save space whenever possible. I added a toolbar that housed several items: filter, bulk actions, and table customization options. When a user clicked on “Customize table layout” a dropdown selector appeared with hide/show column options. This would hopefully allow users to see only columns that mattered to them and save precious screen space.
2) I also added a subtle tooltip UI (dotted blue line) that would display a black tooltip when a user hovered their mouse over the element.
3) Since the table rows were all white and only had a thin gray line to differentiate the rows, I added a subtle gray that alternated white and gray so it was easier on the eyes.
4) Lastly, I added a pale blue highlight bg for selected rows. It was a UI I wanted to introduce going forward.

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
(1st iteration)

Proposed designs
(2nd iteration)