Secure Messaging Redesign

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 its competitors.

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

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 its competitors.

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

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.

My Approach

My Approach

My Approach

I broke this project down into 3 phases.

Phase 1

Conduct a heuristic evaluation of the current Secure Messaging design.

Conduct a competitive analysis to see how competitors are approaching messaging.

Phase 2

Generate task flows for common tasks that a user can complete.

Create low fidelity designs and later move into desktop/tablet.

Iterate on wireframes and move into higher fidelity designs.

Phase 3

Create prototypes and conduct user testing.

Iterate on designs based on research findings.

Work with developers throughout project handoff.

What was wrong with the previous design?

What was wrong with the previous design?

What was wrong with the previous design?

The inbox and the compose message button are on the same page.
Copy used is confusing. “Send A Message” on mobile thumb-bar, “Conversations.”
No ability to save a draft.
“Supported attachment file types” takes up too much space
Having “attachment (optional)” and the “Attach a File” link is redundant as the the link already is a good call to action.
“Go back” button should be removed and a back button/arrow should be in the top left of the page

Competitive Analysis

Competitive Analysis

Competitive Analysis

I researched competitors mobile applications approach to messaging as well as common applications mobile users engage with daily.

Findings

Based on the designs I found, I decided a chat-style display for messages would be the best approach. Not only is it more visually appealing, but it also aligns with the mental models users see in messaging applications they use daily.

Based on the designs I found, I decided a chat-style display for messages would be the best approach. Not only is it more visually appealing, but it also aligns with the mental models users see in messaging applications they use daily.

Additional Insights

During my competitive analysis, I was surprised to see how outdated the digital banking experience is for some of the biggest FIs. I saw this as a great opportunity to outshine the competition with this feature and countless others.

During my competitive analysis, I was surprised to see how outdated the digital banking experience is for some of the biggest FIs. I saw this as a great opportunity to outshine the competition with this feature and countless others.

Task Flows

Task Flows

Task Flows

I created task flows for the most common tasks that users go through.

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.

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.

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.

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.

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.

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.

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 that users needed 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.