To remain compliant with my NDA and client confidentiality, this case study only showcases wireframes and sketches
Order Entry pt. 1:
Investor Order Entry
Piersight would like to let its users submit self directed investment orders. The Order Entry project introduces an end-to-end flow for this, starting from helping the user make their investment decision, through to passing regulatory compliance checks and sending orders off to trade.
While none of our existing clients requested this service, Order Entry was identified by internal stakeholders as a priority project for a few reasons.
-
It was the bottleneck to other priority projects.
-
It allows Piersight to position itself in the market better. Order Entry is a valuable service to have in your product offering, and a notable omission from Piersight’s.
Due to the scope of this project, it was split into 2 parts. Part 1 introduces the dashboard an investor uses to submit and track their self-directed orders. Part 2 addresses the blotter than collects these orders, and the compliance checks an advisor performs before sending the orders off for trade.
The Product
Toogood Financial Systems (TFS) provides investment related services such as fund accounting, portfolio management, and client relations management. Through the client-facing portal Piersight, TFS takes the data from these services and packages it in a modern, user-friendly browser experience.
Image of Piersight, from chroniclefintech.com
Request
Internal stakeholders of Piersight wanted to expand its product offering to include investment order entry, starting with Funds and expanding to other security types in the future.
Part 1 of this project focuses on the Investor’s experience.
For investors that use Piersight, we will require a UI that allows them to:
-
See their account’s current status, so they may be informed on what type of order they can enter, how much to buy/sell, etc.
-
Enter the order
-
See status and history of entered orders.
Orders entered here will be fed into a financial advisor’s Order Blotter, where advisors will perform their checks and balances before sending it off for trading. The order blotter design is part 2 of this overall request.
“The Client”
For the MVP, we’ll be partnering with an investment dealer company, an existing client of Piersight. They are interested in a potential Order Entry service in Piersight, as such they have agreed to act as consultants and subject matter experts for this project. We will be using their mutual fund products as our initial offering, and also design with their advisors and investors as our main target users. For brevity, I’ll be referring to them as “the clients”.
My role
I am a Product Designer for Piersight. For this project, under the direction of the Product Architect and Chief Product Officer, I led the project through the wireframing and prototyping stages, and also helped coordinate the development and testing phases until launch.
Understanding & Research
Challenges
In our initial brainstorming sessions, we have identified some key challenges to be keep in mind:
-
Providing a customized solution without reinventing the wheel. There are hundreds of different order entry patterns out there, each with its own quirk.
-
Keeping scalability into consideration. Different security orders have their own checks and balances, and despite only supporting fund securities for MVP, the UI should be flexible to support more in the future.
-
Compatibility between Piersight’s system and other downstream systems. Today, all orders are collected in a spreadsheet and manually submitted to the back office’s system. We should automate this, but connecting 2 systems without human intervention will always be a challenge.
-
Finding the sweet spot between showing enough info vs. showing too much. It's easy to overload users with information, even if they're deemed relevant. We have to pick and choose what we surface and where we surface it.
Understanding the business flow
The first order of business is to understand the business flow of an entered order. We consulted with clients understand a fund order’s life cycle, and what job needs to be done at each stage.
Key takeaway:
-
Terminology of Order vs Trade
-
Order = a submitted request, to be sent out
-
Trade = an executed order, coming back from the trading place
-
-
Our system manages the “dealer front-office” only. Anything happening in the dealer-back-office are part of an external party's system and is out of our scope.
-
For orders, we make sure orders we send out are compatible with the back office’s systems.
-
For trades, we make sure trade confirmations coming back can be converted and displayable in our system’s UI.
-
High level diagram of a fund order life cycle
What's out there?
Next, we conduct competitor research to see what other banks and other popular investment apps had for their UI. Some of the competitors included
-
TD Investments
-
Questrade
-
Wealthsimple
-
HSBC InvestDirect
Key Insight
The actual data points we’re required to capture is very few when compared to the amount of supporting information required to make an informed decision.
For example, how much cash you’re willing to invest into a fund is just a simple number field. However, to know what number to enter requires you to know information such as Account Name, Account Balance, Account currency, FX rates etc.
This supporting information can clutter up the UI and overwhelm the investor.
The actual data points we’re required to capture is very few when compared to the amount of supporting information required to make an informed decision.
User Profile
Because Piersight also offers a Client Relationship Management service to the clients, we have a good understanding of the investors through the Know Your Client (KYC) forms. From speaking with the client’s dealers, we also compiled a list of acceptable assumptions about them.
This information allowed us to put together a user profile similar to a User Persona. Although structured and organized to resemble a KYC, it gives us a realistic profile of what our average end users are like.
Key takeaways:
-
Can assume moderate tech literacy
-
Can assume good understanding of their own investment
-
Looking for more autonomy when deciding their how they want to invest
-
Looking to avoid requiring to contact their advisor for any inquiries about their orders.
Excerpt of user profile for a typical end user
Design Approach
We split the solution into 2 sections:
-
Know Your Accounts, helping the investor figure out if the order they have in mind is possible.
-
Order Entry, helping the investor enter an order painlessly.
Know Your Accounts:
Orders Dashboard
The key information
To make informed decisions about submitting a fund order, the investor will need to know the following information:
For investors looking to buy (use cash in account to invest into a fund):
-
What account should I use? Different accounts have different characteristics, such as some being tax-free when you earn dividends.
-
How much cash do I have in this account? There are minimum buy-ins for a fund.
For investors looking to sell (cash out of a fund they are invested into):
-
What is the total value of my investments in this account? This is so you know how much cash you'll be getting back when you sell.
-
What are the funds this account is currently invested into? Each fund you're invested into is known as a "position"
Other considerations
-
When was the last time I entered an order with this account?
-
Are there any outstanding orders that may affect my decision to enter a new order?
Note: we have discussed with the clients and agreed that for MVP, we do not need to provide fund product related information to the investor (such as risk profile of a particular fund). They can be assumed to know information related to the fund they would like to order.
Orders Dashboard: design
The orders dashboard shows, at a high level, everything the user needs to know about orders they’ve entered and orders they’re about to enter.
Account Details card
Account Details card shows current related information that may inform order decisions: the currency, the total value of the account, and how much of that is currently in cash versus currently invested in a fund.
A collapsed Positions section can be expanded to include additional details about each held position, such as quantity, value and performance.
Decision to have this collapsed by default came from user feedback. Users find that this information is very useful, but only when they're thinking about sell orders.
Orders card
Order history card utilizes a simple table with filter options to display all entered orders in reverse chronological order. It provides order status, various dates, and other core details such as trade amounts and fees/commissions.
Based on user testing feedback (more details found in Usability Testing section), we have included an additional details modal that goes into more granular data points of an order or trade.
Order Entry:
Modal
The key information
The order entry modal contains its own set of challenges.
Although there are only 4-5 input fields required to submit an order, each field may require the UI to surface other related information in order to fill in the field (ie, before I buy, I need to know how much cash I have). These related information can clutter the UI quickly.
This table records the data points that needs to be captured, field validation for those points, and related information that will be immediately useful for the investor.
Orders Entry Modal: design
-
Simple 2 column pattern with a flex row height. Clear visual indicator when a field/section starts and ends. Since everything is on the same page, users can still scroll up and reference previously entered fields, instead of having to navigate to different pages.
-
Helpful information can be placed in the same row as the field it informs, so users can easily reference only what is relevant to the current field.
-
Review screen contains all the final compliance related checks and balances a user has to go through.
Usability testing
We conducted user feedback with a few fund dealers client-side, as well as select participants with moderate investment knowledge and experience with self-directed investing.
Usability testing revolved around the following questions:
-
Does the UI provide enough information to make informed order entry decisions?
-
Does the order entry UX flow well compared with their experience with other workflows and UIs?
The feedback came back mainly positive, with some tweaks to the UI suggested. Some recurring feedback are as following:
-
A summary view details of an order you’ve entered.
-
Resolution: Implemented Order Details modal
-
-
Why an entered order was returned or rejected. Unclear what actions can be done to fix a failed order.
-
Resolution: Addressed in part 2 with Advisor comments
-
What I've learned
Next Steps
With the main investor flow done, we will visit the Advisor’s perspective of an order for part 2. We anticipate working on the Advisor Order Blotter to have some upstream impact on the Investor’s flow, and the design may be refined.