Coinful Trading Platform



UI / UX Study Case



About Coinful Trading Platform



Coinful is one of the fastest growing Nogle ventures focusing on blockchain and cryptocurrency. It is an automated trading platform deploying algorithmic trading strategies and connecting to all the major cryptocurrency exchanges.



My Role



UI/UX Design Lead

Research related platforms, Design review, Wireframe, Define UI style



The Challenge



- Lack of reference in the market

- Multiple trading methods on one single platform

- Complex data visualization and information architecture

- Functions added continuously

- Speed and security in buy & sell



Design Process



- Understand: What is the trading platform we need?

- Persona: Who are our users? What do the traders need?

- User Journey & User Story: Find important features with PM & stakeholders

- Wireframe: Lay out the architecture and functionalities

- UI Design: Define UI style from low to high fidelity

- Testing & Design review: Interview and shadow traders to discover problems

- Iteration: improve the product with team via Agile methods



User Story



Conducted user story research with the Project Manager to capture the essential requirements such as:
- Who is it for?
- What is expected from the system?
- Why is it important?

Then arranged and organized the user story cards to prioritize and define the development goals and schedule and kicked off iterative design cycles.
This was my first experience with implementing the user story process, which I found to be very intriguing and enjoyable. To collect the functionalities as described in the user stories and convert them into tasks for development and delivery. The use of Agile methods encouraged the team to communicate and work closely with the developers, users and product owner rather than focusing on documentation or basing on subjective assumptions.





Wireframe



Prior to creating mid-fidelity wireframes, I drafted wireframe sketches to facilitate discussion with the team to confirm functionalities, content, architecture and layout. Then I created the mid-fidelity wireframe designs to present the different states. Wireframe allowed us to map out the functionality of the pages, discover problems early in the process, save on time and resources on revisions.



First Version



Through the user story and user journey design processes, we completed the first iteration of the platform design, which was functional to perform trading on the exchanges but only limited to quantitative trading mode. In our next iteration, we conducted design review and user testing to identify the problems and explore potential improvements.



Design Review & User Testing



As the traders started to use the first iteration of the platform design, we worked on fixing some issues that resulted from the lack of clear definition or scoping in parallel. We continued to run design reviews and user testing, and through user interviews we discovered the below problems: Difficult to read: different currencies have different units of measure, we had to reassess the aliignment and rounding of figures Inadequate information: the platform did not have enough relevant information for the traders so the traders had to switch between many applications to analyze a variety of information Customization: provision of customized display of the content materials to match the behaviours and habits of each trader Level of relevance: there were a number of features and designs on the platform that proved to be irrelevant to the traders Account management: the need for account and permission management grew as the number of traders using the platform increased



Final UI Design



Dashboard:



Collate all the data that the trader requires to view on the same screen so that the traders do not need to swtich frequently between the different files or various applications. The format of the figures were fixed to improve readability for the traders at a glance. In addition to quantitative trading, other trading modes were designed and delivered for the users to select the various trading modes.



Balance:



Display the balance of various exchanges and the proportions of different currencies.



Transfers:



Clear record of all the transfer history for the admin accounts to view at a glance.



Trade:



Clear record of all the trading history and filter functions for the admin accounts to view at a glance.



Admin:



For the admin accounts to manage permissions and accounts as the number of traders and demand for the platform increased





Copyright © 2023 Ceci Chang. All rights reserved.