UX Design

Designing experiences is not about technologies, interfaces or development. It's a process in which, as designers, we try to know and understand our users in many ways, and then we could carefully ideate solutions for the matter in hand by iterating until we could verify that we succeded in helping our user to accomplish his goals gracefully.

Master en Diseño de Experiencia de usuario2015

In 2015, I earned a master's degree in User Experience Design, form Universidad Internacional de La Rioja. During the year, I've done several exercises for differents assignature. Here are the most relevants.

Check out wireframes and prototypeIt will open on a new tab/window.

Digital Library for learning insitutions - Master's Final Project

My last assignament was a interaction design project, so I decide to design a proof of concept of a Digital Library for universities.


Download the presentation in PDF

Persona and Escenarios

Download the presentation in PDF

FidelyNET2011 - 2013

During my time working at NexusCom, one of my duties was to ideate flow concepts for differents users tasks. In the Showcase below, you can see a concept I designed for a Registration process.

Another activity I usually performed was to creat walkthroughs so the developers could understand easily how to develop the backend of the UI I designed and layout. For that, I used to generate some deliverables like the ones you can download.

This a small portion of my tasks fo the product. Due to disclousure agreement, I'm only allow to show this deliverables and no more.


Open image on a new tab/window

Audit Of Expenses 2010

Internal Webapp developed for a special customer with a developer partner. We made a complete analysis of the needs, based on the workflow of the institution that can't have major changes. After that, in close contact with the customer, we came up with this approach that is already in use.

Application made for internal use, running on a local server.


Some features

  • Reports selection

    The main feature this application provides is the Reports generation. Reports could be monthly or Daily. Each of them displays the information in different ways, according to its objective .

    In order to simplify the path to the information, on the same page where the user selects the kind of report, he also has to choose the month or day of the report.

  • Monthly Reports

    On this report, the user get the information for the monthly expenses grouped by Departments, including a Department’s total, and sub-groups of expenses type.

    The report content could be filtered by hiding or showing Departments, using the checklist on the left. Also, the month to display could be quickly redefined.

    After filtering, the user could export the report, including only the visible Departments for the chosen month.

    In order to make this report one-page report navigation easier, a Department’s navigator is fixed allocated on the right bottom of the screen.

  • Daily Reports

    This report presents a different layout because it is used for others purposes. While the Monthly Report shows the expenses grouped by Departments, this one shows every expenses of a particular day.

    Also, it is possible to filter the expenses by one Department.

    As the audits are made and presented by month, it was necessary to provide a quick navigation through the days of a given month. This month, and the Department filter, could be easily redefined at any time.

    This report could also show more than one day, grouping the expenses daily, so in this case the fixed navigator lists the days that are being displayed.

SE Manager 2010

Massive SMS and E-mail sender webapp. Manage lists and categories of customers with an e-mail address and a cellphone number associated and send them a message through any of these ways of contact.

This was a concept that, unfortuntedly, never got finished.

Some features

  • Login

    As the product were going to be sell by resellers to specific clients, the users’ accounts must be created by an administrator on a backend access. At this point, users could only login, and no other actions were needed when entering to the system.

  • Import Customers

    This webapp was designed to import customers and manage them through a CSV file, with minimum information, to make it simpler.

  • Create list of Customers

    To organize the list of communications recipients, we develop a form that would make it easy to select customers by theirs category or contact information available, and to merge several lists to create a new one with the results.

  • Create communications

    Once the user has a list of customers to send a SMS or E-Mail (in this order of priority, depending on the contact information of each customer), we provide him a simple form to write the message, select a list of recipients, set an expiration date (the day when, if the message fails to be delivered, the system will stop to retry), send the message.

UI Design and Development

Since many years, I've working with Users Interfaces for the web, not only as designer, but also as UI developer. My skills gives me the opportunity to understand the factibility of the ideas we come up with, and prototypate them to test them and enhance it implementation.

My wedding invitation 2014

See it in actionIt will open on a new tab/window.

I got married last June, and with my wife we wanted to send online invitation to aur guests, so they will have all the information a click away.

This site was not only a responsive design that included 2 maps. It was a personalized email with an intelligent link that when it is follow, the page also displays a Confirmation form, so we could know who will come to the party. Also, I set up a raw acess tracker so I know who was noticed about the event and who needed to get a phone call.

The entire interface was designed and developed by me using HTML5, CSS3, JS and jQuery.

As the wedding has pass, the Confirmation form, and the name identification, and the countdown are not longer visible or working properly.


Some features

  • Responsive Design

    It was really important that the site were responsive, because the day of the wedding the maps were very useful to find the church and the party's place.

  • Scrolling animations.

    The cars' illustration that separate the Church map and the Party map are animated when you scroll the page. It was supponsed to explain that after Church, you needed to move in a vehicle to the party's place.

Football Tactics 2012

See it in actionIt will open on a new tab/window.

This is part of a project I’ve been working on during 2012 with some friends. The idea was to develop a fantasy football game, like Hattrick. Here you can see the page where the user set his line-up and tactics for the next match.

The entire interface was designed and developed by me using HTML5, CSS3, JS and jQuery.

As this project has never come to life, this section was take out from the game frame.


Some features

  • Dragging players into the field

    The main feature of this interface is the selection of your line-up and defining each player position on the field by dragging them from the side list. The user can also move the players as needed, and some validations are triggered to help him to get a better tactic.

  • PES-style pentagon graphic.

    Usign canvas and JS, I developed my own version of this cool graphic everybody knows from Pro-Evolution Soccer UI.

WhereAmI 2013

See it in actionIt will open on a new tab/window.

This is a project I’ve made for fun and to be considered in jobs’ applications. The idea is simple, just to track where you have been, and share it with your friends.

Its purpose was to develop a fancy and easy-to-use interface to show my skills, from idea to final product, including UX conception, design and HTML/CSS/JS coding.

Application made for internal use, running on a local server.


Some features

  • User panel

    Main page of the webapp, where the user must enter his locations, and could see the last places he visited. It also display a Social box with his Friends’ list and activity feed.

  • Places list

    The widest column shows the user’s personal activity feed, that is populated by the places he registered, from the most recent to the oldest ones. In the top is highlighted the user current place.

  • Current place entry form

    This is the form at the top og the right column o the interface. When entering an address and selecting a country, this form will show the place the user is looking for on the map. If it is actually the correct place, the user could register it as the current place by clicking the green button below (which states “let’s Go” and is not enabled until a place is pointed on the map).

  • Social

    The panel “My Friends” shows the user’s community and its activity feed.

mGrid 2013

See it in actionIt will open on a new tab/window.

This is a simple CSS3-based grid framework. It relays on the new pseudo-selectors to automatically determinates the grid's equal columns width, depending on the amount of columns. As a modern approach to laying out a grid, it is intended for modern browsers that support CSS3, so it doesn't work correctly on browsers like IE6 or IE7 by itself. Javascript workarounds are needed in order to be supported by old browsers.

I've made it for fun and to experiment with pseudo-elements. Turns out to be very simple and useful, so I used it on other projects.

Please visit the Github page of the project to know more. It won't take too much time, I promise!

Other works