Tina Lee | UX Designer
  • Portfolio
  • About Me
  • Resume

Portfolio


     

Multi-channel wealth management platform for financial advisors


Creative Fields
Detailed design, Responsive design, UX design
Team
UX lead, visual designer, business analyst, tech lead
Role
UX designer for Cash Management feature
Time
September 2014 - December 2014



 

Project Overview

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.

Experience Goal

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.

Challenge

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.


Approach

Identified use cases, workflow and pain points

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.

Whiteboarding_move money workflows

Worked with our business analyst and client’s UX manager to understand the current workflow

 

Sketched out user flows

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.

User flow

Used low-fidelity wireframes to validate the user flow with the client

 

Brainstormed multiple layouts and interaction patterns

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.

Whiteboard_Design options

Reviewed the design options with the internal UX team

 

Sketched out multiple interaction designs

 

Communicated proposed design solutions to the client

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

 

Designed for heavy-duty keyboard users

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.

Wireframe-keyboard use_scrubbed

Documented mouse, keyboard interactions and touch screen gestures

 

Partnered with the visual designer to create responsively designed visuals

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.

 

Wireframe-responsive tablet portrait grid-Scrubbed

Worked with other UX designer to leverage existing table framework and define the table layout for this new feature on the tablet portrait viewport

 

Wireframe-responsive tablet portrait detail_scrubbed

Worked with other UX designers to define the layout of the table details in tablet portrait viewport

 

Visual-Responsive design breakpoints_scrubbed

Our visual designer illustrated each breakpoint for desktop, tablet landscape and tablet portrait viewports

 

Visual-MoveMoney_scrubbed

Visual design by Kelwadis Butler

 

Iterated through the UX framework to incorporate new design patterns that could be scalable

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



 

     

RELATED PROJECTS


CM Cover photo
Cash Management Responsive Web Application Design
Detailed design, Responsive design, UX design  
Profile-driven human resources portal
Detailed design, Mobile application design, UX design  
Digital workplace on the go
Conceptual design, Mobile application design, UX design  


Made with Love in NYC | Tina Lee
ile
  • Portfolio
  • About Me
  • Resume