Prior to starting development, I meet up with stakeholders to meet with the users to ask them what could make their process more efficient. We had a demo of the current application.
Margin Trading Application
Designed a margin trading platform and introduced Data Viz.
Journey Mapping, Design Sessions, Sketches, Wireframes, Mockups, Prototyping, Usability Testing
Discovery Phase
![](http://perfectpixels.design/wp-content/uploads/2015/12/Screen-Shot-2018-11-21-at-16.19.25.png)
![](http://perfectpixels.design/wp-content/uploads/2015/12/Screen-Shot-2019-06-11-at-11.07.12.png)
Sketches & Concepting
Based on the research, one key elements was to help them understand the data more efficiently and faster. Data visualisation was the important element to digest all that data.
![](http://perfectpixels.design/wp-content/uploads/2015/12/diagram.png)
![](http://perfectpixels.design/wp-content/uploads/2015/12/sketch.png)
![](http://perfectpixels.design/wp-content/uploads/2015/12/graph-sketch.png)
Wireframes
Created wireframes to show the layout and workflow and to gather feedback quickly.
![](http://perfectpixels.design/wp-content/uploads/2015/12/Group-Copy-5.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/Group-Copy-4-1.jpg)
Visual Designs
Before creating the visual design of the platform, I created a Design System using the Atomic Design method. This would allow consistency accross applications.
![](http://perfectpixels.design/wp-content/uploads/2015/12/IMG_4737.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/IMG_4738.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/IMG_4739.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/visual-1.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/visual-3.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/visual-2.jpg)
![](http://perfectpixels.design/wp-content/uploads/2015/12/histogram.jpg)
Front-end Development
Once the design was approved, I worked closely with the front-end development team to have a smooth transition and narrow down bugs. We also had continous tests with users to get feedback.
![](http://perfectpixels.design/wp-content/uploads/2019/10/code.jpg)