Secure Messaging Redesign

Secure Messaging
Redesign

Modernizing a Legacy Enterprise UI as Part of a Platform-Wide Transformation

Secure Messaging
Redesign

Secure Messaging was a critical feature within the product, but its outdated interface caused usability issues, slow task completion, and increased user frustration.

I led the UX redesign of Secure Messaging to align it with the new design system, improve usability, and create a more intuitive, modern communication experience for enterprise users.

Secure Messaging Redesign

At Q2, our Secure Messaging feature was very outdated. The design approach led to user confusion as it didn’t follow mental models for other applications with a messaging feature.

My competitive analysis revealed how far behind the finance space is in terms of modern design and functionality. This has propelled me to start several initiatives that will elevate Q2 far above our competitors.

After user testing redesign, we achieved a SUS Score of 92.9 and a VisAWI score of 6.1/7.

What was wrong with the previous design?

What was wrong with the previous design?

What was wrong with the previous design?

  • As part of the platform modernization effort, analytics and user feedback revealed Secure Messaging as one of the most problematic legacy features.

  • Users struggled to navigate conversations, complete basic tasks efficiently, and understand message status — largely due to outdated UI patterns that conflicted with modern mental models.

  • This resulted in slower task completion, increased user frustration, and additional support burden.

Research Goals

  • Understand user pain points in the legacy messaging experience

  • Identify modern messaging patterns users expect

  • Define usability benchmarks for the redesigned flow


Methods

  • Competitive analysis

  • Heuristic evaluation

  • Task analysis

  • Usability testing


Key Insights

  • Users expect chat-style conversation layouts rather than inbox-style threads

  • Message actions were hidden or unclear, slowing task completion

  • Lack of visual hierarchy made it difficult to scan conversations

  • Inconsistent patterns conflicted with the new design system


Task Flows

Task Flows

Task Flows

The most common tasks that users go through in Secure Messaging.

Inbox Low Fidelity Designs

Inbox Low Fidelity Designs

Inbox Low Fidelity Designs

I started with two versions to iterate on based on stakeholder feedback. After learning we had a third party integration that was a FAB, we decided to place the “New Message” button somewhere in the header.

We needed to have notifications and alerts together in the notifications tab so we needed to find a way to differentiate between them. These are explorations of how we could highlight alerts.

For the following iterations I was asked to use components from our design system. Explored using a search function vs a filter. We decided to move forward with search. At the time we decided to shorten the “New Message” button to “New.” I also explored options for displaying the checkbox. On smaller devices it felt a bit crammed but always having them display was more important.

Inbox High-Fidelity Designs

Inbox High-Fidelity Designs

Inbox High-Fidelity Designs

These designs were updated using our spacing variables from our design system.

After multiple rounds of presenting to the broader UX team and additional stakeholders. We were able to land on this design for the inbox.

While working within the constraints of our design system, we felt that these designs were modern and also aligned with mental models around how users expect an inbox to look and function.

Message Chat Design Iterations

Message Chat Design Iterations

Message Chat Design Iterations

Since we already knew we wanted to have a chat-style display/function, I only needed to make a few iterations before receiving design approval.

User Testing

User Testing

User Testing

I created a Figma prototype that included 10 tasks for users to complete.
We achieved a SUS Score of 92.9 and a VisAWI score of 6.1/7.

I created a Figma prototype that included 10 tasks that users needed to complete. We achieved a SUS Score of 92.9 and a VisAWI score of 6.1/7.

After testing, we decided to change "New Message" to "Contact Us" as it was a point of confusion for several users when asked how they would reach out to their bank.

Design Specs for Developer Hand-Off

Design Specs for Developer Hand-Off

Design Specs for Developer Hand-Off

There are many pages worth of specs for all of these designs so here's just one page to give an example of how I generate specs for project hand-off.

Impact Beyond This Feature

Impact Beyond This Feature

Impact Beyond This Feature

The Secure Messaging redesign established modern interaction patterns that informed other features across the platform modernization effort.

It also validated design system components in real production workflows, helping accelerate adoption across teams.

What I Learned

What I Learned

What I Learned

Designing within legacy constraints requires balancing ideal UX with technical realities.

Aligning features to a broader system transformation increases long-term product impact.

Early usability testing prevented costly rework later in development.


SH

Projects

About

Motion Lab

SH

Projects

About

Motion Lab