The client is one of the largest online brokerages. Our team was engaged to design and build a single platform that empowers financial advisors to access and manage their book-of-business across different devices efficiently and intuitively. I am the UX designer for the first launched transactional feature.
Financial advisors initiate transactions either based on client requests or the status updates of client portfolios; therefore, the goal of the design solution is to streamline financial advisors’ multi-tasking workflows by leveraging user’s context and reducing manual data entry.
The client was conservative about proposing new interaction patterns and suspected that the proposed solution could not cover all the use cases. To engage the client and gain their trust, our team conducted several working sessions with client’s UX team and brainstormed multiple design options. After getting the client side UX manager’s buy-in on selected option, I created several user scenarios with detailed design wireframes to illustrate how the design solution can not only improve overall user experience but also cover the edged use cases. This approach showed that the solution was a co-creation result and helped us overcome the communication barriers.
Teamed up with our business analyst to withhold working session with the subject matter expert at the client side and product owners to identity main use cases, current user pain points and gather functional requirements.
Considering that users typically don’t need this function on the go, both project stakeholders and us agreed that the feature will not be available on mobile but rather on desktop, tablet portrait and tablet landscape viewports.
Worked with our business analyst and client’s UX manager to understand the current workflow
With the understanding of use cases and workflow, I proceeded to sketch out user flows with low-fidelity wireframes to visualize my understanding and validated it with the business analyst and client.
Used low-fidelity wireframes to validate the user flow with the client
After validating the user flows with BA, SME, and product owners, I began to sketch out possible design options and reviewed them with the team.
Reviewed the design options with the internal UX team
Sketched out multiple interaction designs
Based on our internal review feedback, I iterated the design solutions with low-fidelity wireframes quickly. I documented the interaction flow and the pros and cons of each design option. This helped us engage with client’s UX team and had them back us up when socializing the desired design option to the broader project stakeholders.
Design option A: Initiate Move Money workflow in a new a window
Design option B: Initiate workflow in a sliding up drawer overlay
Design option C: Initiate Move Money workflow within the main working area and can view supporting information within the same working area
Most of users are heavy-duty keyboard users, so the design has to support at least basic keyboard shortcuts. I brainstormed with our UX team to come up with the design solution that supports users to find accounts, switch accounts and correct typos with keyboard usage only.
Since the application is a responsive design, I also created detailed wireframes to document different scenarios of using keyboard or touch screen gestures to complete tasks.
Documented mouse, keyboard interactions and touch screen gestures
I also partnered with other UX designers and our visual designer to create responsive designs that will be viewed on desktop, tablet landscape and tablet portrait viewports.
Worked with other UX designer to leverage existing table framework and define the table layout for this new feature on the tablet portrait viewport
Worked with other UX designers to define the layout of the table details in tablet portrait viewport
Our visual designer illustrated each breakpoint for desktop, tablet landscape and tablet portrait viewports
Visual design by Kelwadis Butler
Collaborated with other UX designers of other features to establish the UX framework (such as global navigation) that could be scaled for future phases.
Documented how the new feature is integrated into existing framework design
Defined how the user can access the new feature from the existing account contextual menu
