BridgeFi Portal

The Ask

Tasked with updating the BridgeFi Portal, I first examined the design and determined how to make it feel on-brand and simple for client service reps to use.

Adopting a user-centric approach, I initiated the redesign process by closely observing the reps, identifying their pain points, and incorporating their preferences into the new portal version.

Before Diving into the Redesign

The previous version of the portal used a version of Material Design by Google. While it was working okay, it was never vetted by a designer. The screens were very dense, hard to read or scan, and not intuitive for the reps.

With the aim of significantly improving the user experience, I started by creating a design system for BridgeFi. Using Atomic Design principles, I quickly imagined how the new portal's look and feel would take shape, promising a more intuitive and user-friendly interface.

My personal design philosophy is always to maintain the architecture of a product currently being used. I prefer an incremental approach that users have reviewed and approved. To make a comparison, it would be like hiring an architect to redesign your house, and suddenly, you don't know where the bathroom or kitchen is. By taking an iterative approach, you avoid a potential situation that could tank the efficiency of the user's tasks.

Making it Responsive

Knowing that the client service reps worked on machines with varying display sizes, from Desktops with 24" monitors to Chromebooks with 13" screens, as well as different zoom levels, I had to be prepared for any combination of those situations.

Using Figma's Autolayout feature was a lifesaver in this situation. I could start with the mobile version of the portal, create a new frame, and resize it to quickly create the desktop version. Between those two versions, I could sit down with a developer, and we could figure out how to deal with any exception cases between screen sizes and zoom levels.