Textil Juan Moragas

Juan Moragas is a lifelong company based near Barcelona and dedicated to the fabrics industry.

  • Objective of the project Client needed a tool to make work easier for sales people. They needed to be able to place orders directly in their tablets and sync the data with their main ERP system.
  • My task in the project I analyzed the whole process hand to hand with client, to define how they worked before to understand their users and their reality. Then I wireframed all the screens and finally I designed the UI.
  • Tools used The classical paper and pen for the definition. Then Sketch and Marvel for the wireframes and design.

Whale Spray

Whale Spray is the leaders in the formulation and production of chemicals in Spray and Bulk format.

  • Objective of the project Their product catalog is the biggest in their field. So they needed a search engine to find products easily.
  • My task in the project After understanding the different types of products, variations and categories I wireframed a form that allowed users to find products through filters and options. Results are easy to find and very sharpened to what they are looking for. I also designed the whole website and coded the frontend with HTML in Twig system and SCSS.
  • Tools used The classical paper and pen for the definition. Then Sketch and Marvel for the wireframes and design. Then PHPStorm and Gulp for the coding process.

Iciaya

Iciaya is a French project to boost local business in Paris and big cities in France.

  • Objective of the project To level up local business it's important to put it online and grouped in a bigger concept. This was the objective of the client.
  • My task in the project Redefine and redefine. This were the first steps I did before wireframing. After talking with client we narrowed down the project and divided it in phases. That would help define, develop and test the project in real life. After everything was clear, I wireframed and designed all the pages and flows of the frontoffice for users and the backoffice for client. Then I designed the UI and coded coded the frontend with HTML in Twig system and SCSS.
  • Tools used Paper and pen for the definition. Then Sketch and Marvel for the wireframes and design. Then PHPStorm and Gulp for the coding process.

Design System for developers

After many projects seeing non UX developers trying their best to create backoffice interfaces, I decided to create a code design system done in Twig files. Why? Because sometimes, developers may not know HTML structure at their best: classes, layout, grid system, button hierarchy...

This is based in Bootstrap basic idea, but tunned and encapsulated in twig includes and embededs. There is no plain HTML in the code. No unclassed divs, no elements added without layout, no unconsistent HTML.

Yes, but why? Because sometimes, backoffices are the forgotten interfaces. And most of them are used by our clients. Who are our users. We cannot forget about our company first users. Taking care of the code is taking care of the user experience.

Other frontend coding works

I've coded many websites using HTML/Twig and SCSS. Some of them: