Customer Portal

Current Design

I completed the first version of this customer service portal in 2018. It was my first Angular project. The current portal looks very similar to this, but with the addition of new features the navigation has become unwieldy. For the most part, it does a good enough job, but the design was created during a time when the future branding of Elephant was uncertain, and since I was the first full-time UX designer hired at Elephant, the feedback loop was not well established and requirements were sparse.

Login page

Over the last few years, I've expanded the UX process and Marketing has better defined it's branding guidelines. Some of these guidelines were taken directly from my work on the Quote journey and the old portal. With the new brand elements in hand I started designing in Figma.

First item to be rebuilt was the login page. Focusing on better utilization of larger screens and including more branded elements, I created this simple two-column layout to allow allow for the mobile app ad to take more prominence without hindering user interaction.

New Dashboard Layout

We kept the "quick actions" from the original design, but included all four categories to mimic the navigation. We also included icons for easier differentiation and a more friendly intro message for the quick actions.

Below the quick actions, the "At-a-glance" section gives the user a quick overview of their policy, as one would expect.

Revamped Mobile UX

Of course these screens will all be fully responsive, so I also decided to rethink how the navigation would work on mobile. During the creation of the mobile app, I added the ability to swap out the first button with the most important action we want the user to take (Eg, make a payment, sign a form, etc). This worked great, and so we decided it would be great to expand this functionality on the web — as shown for the "Policy Review" call-to-action on the middle view.

Since we're including the main navigation within the page of the dashboard, it seemed excessive to also have the navigation items all visible on mobile. I designed a dropdown navigation that would take the place of the elephant logo text, when on a subpage — as seen in the right view.

The making of...

Using Adobe XD, I created layout and interaction design for the new customer portal. This prototype was invaluable in gathering feedback and getting buy in for business prioritization.