Entegra is a global purchasing and procurement partner with a client portfolio spanning several industries, from hospitality and restaurants to senior living facilities and churches.

They had a portal for their existing customers to help them find the right products at the right prices for their unique needs, but it just wasn’t cutting it. The interface wasn’t intuitive, and it wasn’t adequately representing the breadth and depth of products and supplier relationships Entegra offered. More so, it wasn’t leveraging their enormous data set or surfacing the services and capabilities that set them apart in their industry, like helping their customers find savings without sacrificing quality.

Best (worst?) of all: it wasn’t mobile-friendly.

They needed a new, responsive interface designed around their then-newly minted brand guidelines, they needed to leverage the data visualization infrastructure of PowerBI (with our design guidance) — and they needed the entire, multi-tenancy system to have whitelabeling capabilities.

One of the biggest priorities for our client stakeholders was that the main data dashboard include clean, easy-to-digest dataviz modules from which their users could extrapolate findings at a glance, and have clear pathways to next steps. Knowing their users would primarily delve into this experience on desktop, we leveraged a swimlane-based design, similar to Trello and Jira.

The swimlanes were easily customizable to the user’s preferences, and they could add individual modules or entire swimlanes to their Favorites to quickly refer back to later. On desktop and mobile, the swimlanes scrolled top to bottom, left to right, with multiple dataviz modules in view at once. On mobile specifically, only one or two dataviz modules would be viewable at a time for optimum readability and focus.

The side rail navigation was collapsible so the interface could get out of the user’s way, so to speak, and the filter pane allowed users to view datasets as broadly or narrowly as they pleased. Finally, the experience could be easily whitelabeled with a simple swap of the logo and changing of core brand colors.

outcomes & roles

In the end, our client was extremely pleased. Not only did they agree the interface elevated their brand aesthetic and was much cleaner and more user-friendly, but they were particularly impressed with the vastness and modularity of the atomic system we designed and annotated for them.

    • Led the interface design

    • Established the visual tone for the desktop and mobile web interfaces

    • Created a digital style guide (as an extension of their core brand guidelines) and an atomic design system

    • Provided UX assistance to another team of designers

    • Regularly presented to client stakeholders

    • Worked closely with on- and off-shore developers to ensure our designs, animations, and microinteractions were possible to build within our timeline and budget

    • Pivoted as needed to ensure timelines were honored but design quality was not sacrificed

    • Provided the product team with annotations around UI, UX, PowerBI guidance, accessibility, animations, and microinteractions so design intent was clearly understood and developers could properly point tickets

    • Participated in sprint demos and agile ceremonies to ensure design integrity was maintained throughout the build phase