Veo One header is too heavy and has too many icons. Each icons has different interaction. According to my user feedback, most of the users are confused about all the icons mean.
The image blew shows Veo One current header. Icons takes most of the space, when user switch to smaller screen, the icons are hard to fit in. Also icons visual style are not in the sequence. Some are heavy, some are light.
Let me introduce all the features from left to right.
Client and account search: User can search client name, account number and account group name
Current account: This is a complexed tool. Now there is no account/client page displays on navigation. When user is working on one account portfolio page, this account number will show here. Click the "current account" icon, account number and account description will show in a pop over. If user close his/her current account portfolio page and go to "Trade" page or "Money Movement" page, this "current account" number will be sticky to all the input filed.
Marked and recent accounts/clients: This is another pop over shows all the marked accounts and clients. It also shows recent viewed accounts and clients.
All accounts: All accounts is a cool feature. When user click all account icon, it open a child window with all account list. User can switch different number for trading or rebalancing portfolio without losing their account list. For user who has multiple monitors, this is a very handy tools.
Secure message: user receive secure message from TD Ameritrade and some other venders
Get Quote: user can search for symbol or company go get current price, chart and volume.
Alerts: We keep last 30 days records of alerts, in the header icon, user can check today's unread alerts. The counter shows last 30 days unread alerts.
Tasks: Shows the tasks user needs to do.
Calendar: Shows TDA events and other venders' events.
Vender management: user can launch different venders platform also can manage vender such as link or unlink vender's data.
2. Group Similar Features
After researching, I found that some icons actually can be grouped together. Such as All accounts, Current Account and Marked Clients/Accounts, they all relate to account. Also, Alerts, Message, Tasks and Calendar Events all relates to alerts. So can we just simplify them?
When I am working on the project, my manager told me that it is a good time to update some visual design since TD Ameritrade Institutional is updating our new branding visual system. I always tell people that smart visual change can solve big UX problem. When we releasing some UX changes, fresh visual update is like lemon juice on the top of our dish.
We changed the new brand color #pine green as the header background color to highlight this section. Also, we updated all the icons to make sure the visual design in the same sequence.
I spend a lot of time to persuade people to get rid off some icons. It will reduce confusion, it also works easier for different screen sizes.
I try to use the icon has global visual language to help user easier understand their function. And I make sure they are same or similar icon in our other platforms. When user switch from one TDA product to another, they don't have to spend time to figure the new design logic.
From left to right: Navigation, Searching Bar, All Accounts, Current Account, Alerts and Vender
Navigation icon: The three short line are navigation icon.
Veo One Logo: We don't do any change for this.
Searching bar: Searching is available for account, client, account group and quote look up. I use all existing feature for saving my dev team time. When user clicks searching input filed, a pop over (existing behavior) shows with recently viewed (recent accounts and clients)
All account icon: The two people repents "all accounts". This is a very helpful function, I don't want burry it, instead, I want to highlight that. User can very easily launch all account list as a child window. All account list can be sort by "marked account" and "marked client".
Current account: Instead of finding an icon represent "current account", I decide to just list account number and account description. When user hover the texts, it show basic information includes Account Description, Account Type, Rep Code and Market Value. After the breaking point, the current account moves to navigation.
2. Less Icons, global visual language, similar visual style as other TDA platforms
Alerts: Alerts includes Messages, Tasks, Calendar Events and Alerts