Customer Portal

I completed the first version of Elephant's customer service portal in 2019. It was my first Angular project, and I learned a ton. Working closely with marketing, I designed and iterated on an interactive prototype in Adobe XD to be shared with stakeholders.Oonce we had some good feedback from the mocks, I worked alongside a full-stack developer who helped a ton with API integration and the business logic while I focused on the UI elements and component architecture.

Over the last few years, I've worked with marketing to expand the UX process and branding guidelines. Basing many of the web brand guidelines on my work on the Quote journey and the first portal. With the new brand elements in hand I started designing in Figma.

We kept the "quick actions" from my original design, but included all four categories to mimic the navigation. I 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.

First item to be rebuilt was the login page. On larger screens, I created this simple two-column layout to allow allow for the mobile app banner to take more prominence without hindering user interaction. On mobile we've streamlined the page to allow for easy scannability and quick login.

During the development of the mobile app, we decided to rethink how the navigation would work on mobile. 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.

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.

Check out the Figma test prototype