Coinful Trading Platform
UI / UX Study Case
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.
