UX Lead for a complex financial services product
Our client helped their clients, primarily in the real estate development space, manage variable interest rate risk over time in order to protect the cost of their investments and achieve the highest rate of return possible.
Our client differentiated themselves from their competitors with a higher degree of personalized service. Our goal was to design a client portal which would introduce efficiencies to their team’s process without replacing the skilled advisors. The portal would allow clients to view portfolios at a high-level, see a summary of their savings, and access documents.
There was pressure to have this portal released under a tight timeline since there was an upcoming transition in how variable interest rates are determined, and that transition would have a major impact on most of our client’s customers.
Design comps were created by the team visual designer with input from me as the project lead.
Snapshot
During this project, we delivered the following:
-
Kickoff: Brand Review
-
Kickoff: Brand UI Inspiration
-
Kickoff: User Centered Design Canvas
-
Stakeholder Interviews
-
Mood Boards
-
Interaction Concepting
-
Feature Scoping
-
Feature Assessment
-
Wireframe Design
-
Visual Design Comps
-
User Interviews / Usability Interviews
-
Content Guide
-
Style Guide and Component Library
My Role
I was the UX Lead on this project. While I worked on a majority of the strategy and design deliverables, I also managed communications with the client, oversaw design decisions from one other UX designer and a visual designer.
What was the problem?
Our client provided highly specialized financial services to clients in the real estate development space. Their primary service was to help these clients manage their variable interest rate investments. We were brought on to design a client portal so that our client’s customers could access important documents and see how their investments were performing over time.
At the time of this project, there was a transition underway from one benchmark interest rate to another, and we needed to make sure the portal not only accounted for that, but helped explain certain changes to the user while remaining in compliance of some strict regulatory requirements.
How did we solve it?
User Centered Design Canvas
We kicked off our project with a User Centered Design Canvas. I led this activity, remotely, with the full client team. Ahead of our engagement, we learned from our client’s President, that there were certain team dynamics that might make workshops difficult. I planned every activity with our client specifically to mitigate these issues.
For example, we learned that the smartest people on the team were often the most quiet. Because of that, I organized an activity that relied less on people talking aloud and more on folks writing responses to questions individually. We would then review those as a group. As a result, we were able to hear more from the people we needed to hear from, and the entire team felt bought-in on the process.
Our User Centered Design Canvas helped us to understand the users’ problems, motivations, and fears alongside our client’s offerings and solutions as they related to the users’ pain points.
Interaction Concepting
To get the ball rolling on design, we hosted an interaction concepting session. We conducted three rounds of remote concepting. This was particularly challenging since we had everyone on the call sketch their ideas, take a picture of their sketch, then email to me so I could share with everyone. While the logistics were a little tricky, the session actually worked really well, and we got a lot of valuable information and ideas from a team who rarely had the chance to think about design.
Feature Scoping
The next, and potentially most important part of our work included a feature scoping exercise I hosted remotely with the entire client team. To prepare for this, my team conducted a feature analysis of their existing internal tools. This gave an idea of what was possible and what they might want to include in a client portal.
We also conducted stakeholder interviews with everyone on the team to understand the subject matter and to learn more about their process. That information helped us create a backlog of features and requirements for the client portal.
From there, I walked the client team through a MoSCoW matrix. During this exercise, we force the client to think about which features are a “must-have,” which are a “should-have,” which are “could-haves,” and which features won’t be included in any future releases. Our goal was to deliver a first release including all the “must-haves.”
This was enormously helpful in keeping the team focused, and it provided a longer runway for the client team to think about potential future development.
Client Portal Wireframes
Once we had the requirements, concepts, and background discovery work completed, we moved in wireframing. I, along with the other UX designer on my team, worked alongside our visual designer to design and iterate on wires for a client portal containing complex data visualizations and document management.
Usability Testing
Throughout our design phase, we were able to speak with our client’s customers. We were only able to speak with a select few, and because this product is somewhat niche and very specific to a select group of users, it was difficult to source the amount of feedback we would typically engage on a project like this.
Overall, the feedback was helpful in determining the types of content users would prefer to access on a dashboard. We also learned more about our users’ mental models. Our client had a specific way of organizing information on the backend, and we learned that that model doesn’t always make sense to the customers.
Content Guide
Something we did that wasn’t part of the original scope, but we learned was a definite necessity was a content guide. Typically we wouldn’t create a content guide for a financial portal, but we learned that our client had inconsistent ways of explaining numbers. I put together a content guide based on other guides we’ve created for content sites. In this guide, we explained how our client should approach voice and tone as well as how they should present numerical data.
Style Guide and Component Library
Finally, throughout our design work, we’d been cataloging patterns and design components. Our style guide and component library was created to share with our client’s one-person dev team. The goal for this component library was to make the design process more efficient for any future devs, and to ensure there was a consistent design language for future iterations of work.
What was the result?
Our client was incredibly pleased with our final output. We were able to deliver an entire customer portal in just a few months. We also handed-off a plan for future release so that our client was left with an almost complete product roadmap. In addition to the work we did for this client, we actually received new work from other companies based on the referrals from the President of this company.