UX Designer projects
Front-end Developer projects
Fxstreet
launch

Role: Sublime text / Visual studio IDE / Axure rp / Papel and pencil / Css / less / Sass / Html / Javascript / Php / Jquery / Bootstrap

Overview

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.

Details

Job Description:
Development new components
Site maintenance
Design system.

Duration: October 2015 / October 2017

Permanent employee

Tools

Front-end developer tools:

Sublime text, Visual studio IDE, Axure rp, Papel and pencil, Css / less / Sass, Html, Javascript, Php, Jquery, Bootstrap
captura de imagen Fxstreet

Goals

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.

Methodology

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.

Result

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.

© 2017 Copyright Pablo Goris