Cash management is a set of functionalities include Bill Pay, Transfer Funds, and Debit Card Management that enable users or their finical advisors to make transactions with the cash balance in their brokerage accounts or retirement accounts.
Roles & Responsibilities
As a UX lead, my role involved the following responsibilities:
- Worked closely with product owner, product manager, and development leads to define and refine requirements.
- Worked with client’s head of design to iterate on design patterns and contributed to their components library and design system.
- Worked with front end lead and developers to implement the designs, conducted daily check in with offshore developers to iterate on CSS/HTML development of the responsive design
Our client is investing to improve and elevate their existing online wealth management platform experience to improve customer experience and drive customer engagement. The existing platform is limited in terms of cash management features. Users wants to move money in and out of their accounts intuitively, but the current platform offering can’t meet the customers’ expectations and the experience is clunky.
- The primary users are customers who have brokerage accounts, retirement accounts or other cash management eligible accounts. Most of them are in their 60s or 70s, with this consideration, the design patterns need to be straightforward and the font size needs to be comfortable to read.
- The secondary users are financial advisors who will carry out cash management transactions on behalf of their customers.
Enable users to view their cash balances and take actions on their cash balance such as making payments, transfer money to other accounts, or manage their debit card usage.
Challenges and constraints
Our product is a part of the wealth management online platform which client’s in-house design and development teams are building concurrently
There are lots of moving pieces and uncertainty when it comes to how users navigate to cash management features from the platform
Client’s design system, component library and style guide is evolving as they continue building out the platform
Limited control of experience when transitioning from our experience to vendors experience
Define requirements & site map and user flow
Started with sitemap and user flow to orient myself, validate flows, and the information hierarchy between cash management feature and the overall platform
These artifacts were used to help our team and the clients to align on the site hierarchy, navigation, and the scope.
Site Map to illustrate the relationship between the overall platform and cash management features
Site Map of Bill Pay and Transfer features
- User flow to communicate the page flows, understand what content data points is needed at which step
User flow of the primary use case of Bill Pay
Ideate variations of layout and interaction patterns options
Once aligned with the team and clients regarding the site structure, navigation and user flow, I proceeded to create different layout and interaction patterns. The considerations for the design options include:
- The function needs to be accessed from a platform that’s also under development concurrently, and the home for our feature is not yet defined
- Client’s design standard is not to have an orphan page and this feature needs to be readily accessible no matter where the user is in the platform
- The design needs to be responsive for mobile and tablet devices
I created low-fidelity wireframes to show what Bill Pay may look like within the overall platform. I pointed out the pros and cons of each option. I also validated the development feasibility and data points questions with the product manager, business analysts and development lead.
Layout options in low-fidelity wireframes
Created high-fidelity mockups and prototypes of responsive layouts
Once the overall pattern is established, I worked closely with product owner, product manager, technology lead, and the UX lead of the overall wealth management platform to create detailed designs and prototypes to illustrate interactions, data points, error states, and exceptions based on the user stories and requirements.
Bill Pay responsive layout
Transfer Funds responsive layout
Debit card management responsive layout
Cash management landing page within the overall platform
Worked with on-shore and off-shore front end developers to iterate on CSS and HTML development
Connected the front end development lead and the design lead of the overall platform to define new interaction components that solves their current usability issues and accommodate our needs.
Working with front end developers to fine tune html/css in the browser to make sure the development aligned with the design.