GZX
GZX is an industry-first online platform for trading of RIN, CA LCFS, and OR CFP credits.
Beginning as an early-stage startup in stealth mode, I worked closely with the client to help bring their vision to life.
Being a brand new platform, there were limited resources or UI patterns to follow. I researched other stock trading apps like Ameritrade to gain early inspiration. One desire from the client was to have as much content in a single view as possible. We ultimately decided on a tabbed interface with different components depending on interaction.
Other challenges included the need for "counterparties" to remain anonymous, while also needing to "match" with each other to complete a trade. This meant a user would not necessarily know with whom they were trying to transact with, and if they were not already matched it would be unlikely they would be able to complete the transaction.
User flows for trades were created to help illustrate the primary tasks a customer would make in the system. One key decision after creating and reviewing these flows with the development team and client was not to implement "spreads" due to overall complexity and so many unknowns with the feature (see last user flow below).
See user scenarios below:
Wireframes of all essential flows were created as a first step in visualizing the platform and all the screens needed to illustrate each flow. Wireframes from the left of center were part of the onboarding, and all other wireframe flows were post-onboarding.
See the wireframes below:
Note: To interact with the wireframes click the plus to the lower right or open in a new tab from the link in lower left of the frame.
The dashboard is the primary view when logging into the platform. From here, the user can view the live market, market trades, place an order, view orders, and buy and sell directly from the live market.
Because this is an anonymous trading platform where you must first be "matched" (willing to do business) with a counterparty, before you can complete a trade, there were challenges in how to represent this in the UI. We decided on placing "non-paired" counterparties in italics along with a note on the dashboard and after clicking, that you must first match the counterparty prior to completing a trade with them.
Dashboard
Order Book
Order Book is where all transactions are viewable, along with any interactions for those orders.
After receiving feedback from users that the filtering was confusing we iterated on this feature to add clarity to what type of order they were viewing.
Account Setup Wizard
There are two wizards in GZX that are used during the onboarding process, adding a facility, and adding a counterparty to transact with.
Modals
There are several modals in GZX the user will interact with when trading. These modals are designed to allow transacting when counterparties are matched, with minimal input from the user, while also maintaining anonymity of the business.
A screen-based prototype was created in InVision to communicate design decisions to the client and for them to provide feedback during the process.
