FXStreet is the leading provider of information and resources for Forex traders. Created in the year 2000, FXStreet offers tools to help traders take more informed decisions when entering the market, through an objective view of the market.
Development new components
Duration: October 2015 / October 2017
The main objectives in my work as front-end were to maintain the fxstreet site, implement new components worked with the development team and the product manager.
Interview the stakeholders to obtain inputs on the components to be developed.
Development prototypes and test with users and stakeholders.
Work in the new design system of the company with Omar Powell UX designer at that time.
What is a System Design?
Systems design is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements.
It all started with the need to create a system that was easy to maintain and that facilitates communication between designers, front-end and programmers.
The main source of inspiration for addressing this complex fabric of components was Brad Frost’s methodology. Atomic design.
The main idea was to work on the atoms and little by little to grow these tiny elements in components and finally in pages. For this we use a stylesheet preprocessor, Less.
Less allowed us to create a modular structure, and save long pieces of code.
We move the concept of objects used in programming to implement it in stylesheets. We created different stylesheets where they were hosted, for example, variables, mixins, extends, widgets etc.
The main css were called fxs_screen.less, as you can see in the image, each import called each piece of code that formed the general structure of the site.
You can see the complete design system and the code available in GitHub: https://ultravoz.github.io/UX-improvments/
The final result is uploaded to github, the environment in which we work on version control.
Each change was uploaded to the github environment and updated, each developer used this environment as a reference to understand the structure of each component.