Website powered by

UX/UI: Messaging in Passare

While working for Director's Investment Group, I was given the challenge of redesigning the landing page for Passare's Planning Center. The page was overcrowded and difficult to use, with the main part of the screen being completely passed over by customers, as the heatmap demonstrates.

While in the process of adding a messaging option for families using the platform to contact the funeral coordinators, I decided, with the help of my mentor and design team, that it would be best to simplify the page by removing the repetitive clutter and adding messages as the primary focus of the screen.
The only part of the original central content of the page is the events tab, which I resized to fit the space better and make it more usable.

As a result, families had a much easier time navigating the landing page during usability testing, and felt less overwhelmed overall. Learning to use the messaging feature was intuitive and understandable, and even our older users said it was simple to learn.

Home screen with new, unread messages. The outline goes away when you click on the messages card.

Home screen with new, unread messages. The outline goes away when you click on the messages card.

Home screen with read messages

Home screen with read messages

Home screen with no new messages and a response

Home screen with no new messages and a response

Home screen with no messages

Home screen with no messages

For new customers, a tutorial video is shown on the home screen. It shrinks to a button when they navigate away or refresh the page.

For new customers, a tutorial video is shown on the home screen. It shrinks to a button when they navigate away or refresh the page.

The original home page with a heatmap showing that users were not interacting with the main portion of the page at all.

The original home page with a heatmap showing that users were not interacting with the main portion of the page at all.

Mobile home screen with new, unread messages. The outline goes away when you click on the messages card.

Mobile home screen with new, unread messages. The outline goes away when you click on the messages card.

Mobile home screen with read messages

Mobile home screen with read messages

Mobile home screen with no new messages and a response

Mobile home screen with no new messages and a response

Mobile home screen no messages

Mobile home screen no messages

Mobile new customer screen

Mobile new customer screen

Blue-lining my initial thoughts for the project

Blue-lining my initial thoughts for the project

Some iterations of the messaging card I did before settling on the final version

Some iterations of the messaging card I did before settling on the final version