Veo one has account page and client page. Today we don't have household page in Veo One, by adding account number to client page, user can use client page as their household page. According to our user's feedback, we decided to build a household page.

The old Veo One page was not mobile friendly since most of our user use desktop. When I started to work on household page, I try to think about mobile, not mobile first, but at least mobile friendly.

My research started with current Veo One client page.

I grouped all the features to 3 classes:

  • Account management: Position, Balance and Transaction History

  • Venders management: more than 90 venders 

  • Tools: Alerts, account filter, adding notes, adding accounts, editing client info...

According to user feedback, we noticed that user doesn't use Veo One to manage the other venders data. They love using one platform to manage all the data, but the way Veo One build is not user friendly. There are too many tabs on the top which takes big vertical space. 

In the new page design, there are only two tabs: Accounts and Venders. 

The household page will be a brandy new page, when I working on that, I also want it could be used as a client page and account page. My understanding for household and client page is an account group page. If somehow we can we can filter those account number, this page frame can be used for all of them.

Account filter is not my invention. There is an account filter in Veo One client page. User use account filter to hide accounts they wouldn't like to show. 

1. Instead of using the old button, I move account filter on the top with some other "account management tools", account filter shows account counter, user can easily know how many accounts are selected. For example, if Brandy family household has 4 accounts, "4/4" means all accounts are selected.

2. I also let user to quickly hide accounts by clicking the "eye shape icon" in account list, so user doesn't have to click account filter on the top.

3. Unselected accounts won't be hidden, user can still see them on the table, but the data won't be accounted to the total number.

4. Try to use modal instead of pop over. In old Veo One, when user click account filter, accounts filter shows in a pop over. However, I realized that costs a problem when we switch to mobile and tablet. In the new design, you will notice that I try to avoid using pop over and use modal instead which is easier for mobile device.  

"Group by" feature was one of my favorite idea to help user to manage large data. It was firs used for Alerts. Later, we try use group by for "Consolidated View - Accounts". User can group accounts by client name, rep code, account type and account status.

Here, user can group position by position, asset type and global position. Each group will show total number for different columns. 

In Veo One, all accounts table can be launched as a child window. I like this feature since most of our user are using multi monitors, parent - child window can be very helpful. 

1. Position table can be launched as a child window. Discussed with my product manager and dev team, we decided to try position table first. By clicking the arrow icon on the top right side of the table, position table can be launched as a child window. User can check research, option chain, edit trading ticket without refreshing the position list.

2. After we talked about position table, I asked my PO, why not make the who household page be detached as a child window? Nowadays, Veo One user can only work for one client/account page. If household/client page can be detached as a child window, user can launch multiple pages. 

3. My dream is most of the Veo One modules can be detached as a child window which can be the same behavior as Thinkorswim (one of TDA trading product). Of course I know that's a long term work. 

If you are familiar with TDA has many different products, the problem for TDA Institutional is that our products doesn't keep the pattern in sequences. For example, the trading behavior in Veo One, iRebal, and Thinkpipes are very different.  

Talking with my team, we decided that for new components release, we will try to keep similar logic. 

1. Our old "Selected Positions" button is pined to the bottom of position table. But the problem is user sometimes couldn't find it, also it covered the last row. In the new design, we moved this button to the top with showing selected position count. 

2. Clicking the button will launch a modal with selected positions. For now, we only show symbol and price in the modal which is the same way today. In future, we may add more data. The modal design is smilier as TDAX since I want to gradually make everything in sequence. 

3. Adding removing icon for selected position

The new angular table provides me many new opportunities such as organizing table columns by dragging and dropping, multi cell copy and paste, fancy filter. 

1. I don't think drag and drop table column is a good solution for our table. 

I argued with people a lot about this feature. When the first time our develop demoed this feature to us, I felt this is cool. However, when I started to work on our table, I realized that maybe this is not the good idea for Veo One. Instead, in my new design, user can edit column view in a modal.

  • First, it is hard for mobile. Since we are not thinking about build a new Veo One app for mobile, everything we designed need to consider about mobile device. It will be very hard for user to use their finger to drag a column and move it. When I brought up this point, some people believe maybe we should not let user to edit their column views in mobile device. But my answer is that editing column view is more important for mobile user. When we switch our desktop view to a small mobile, we need to make sure their most important information displayed in the visible area.  

  • Second, we should keep the same pattern as TDAX and thinkorswim.  

  • My third reason is that we also want user to add or remove columns. There are 72 different data available for position, we should let user to pick what they want to show.

2. Copy and Paste

The new angular table can let user copy multi cells and paste to their excel sheet.