Raffle Tatt

Raffle Tatt is a personal project in production. It can illustrate the process of wireframing, prototyping, design and coding the layout. There's currently a user research study which will be uploaded very soon.

Wireframing

Putting the idea into paper, fast and rough it gives an idea for structure for future steps in the journey.

Design System

Currently in progress, the design system is an intent to ensure the consistency of the UI and improve the user experience as well as to make the process for new features in the product easier to implement.

Prototype

(An initial approach)

After the initial wireframe shape has been thought and brake over, we can start creating a prototype to test user journeys for creating an user to browsing and buying a raffle ticket.

To get to this prototype, there were many tries and error, different userflows and this has been the most close to the initial approach, eventhoug is not a final delivery.

Create account as artist userflow.

Create account as customer userflow.

Click here to try a basic technical layout of the project. This is an initial (very basic) state of UI where the main focus was to create the basis from where a final layout will be builded. Not a final version. I like to have these kind of work done for when the code time comes, there's already a layout to begin the web development.

This prototype layout was created using Node, Bootstrap, (CSS) SASS, Html, Material design.

Cotecna Inspeccions

The porpouse of this examples is to illustrate better the experience with the UI design code and layout.

This application was developed while in-office at Cotecna. From the sub-branding logo to the general layout, this project was developed using Google Material and Angular v4.

Branding element

The main objetive of this sub-branding was to give each App a color and name so our customers are always related to the App by it's look and feel. This examples illustrate the branding proposal for internal Apps used by coordinators and employees.

The SCSS code can be used by the DEV team as the intention was to create a clickable / on-screen example so my collaboration could go from design visual proposal to useful UI code.

Search form re-design

This proposal came after the approval of the initial design from which I created a functional example with the SCSS code for layout styling. Re-usable (SCSS) code.

User lateral navigation

Layout created for a project not done with Angular, so the main intention was to give it the same look & feel of the rest of projects created using Angular/Google Material. Re-usable (SCSS) code.

EasyVista UI Re-Design

This project was done with the intention of making more intuitive, useful, clear, the interface of the ticket creation software easyVista. This re-design was translated into code using the few options ev. gives to include HTML/CSS in an old fashion way. This UI is currently in use and got to say, is one of the re-design projects i'm most proud of.
Click on the title to go to a complete view of the screens.

Mobile push notifications

On this visual flow we tried to come up with a solution that allow users to understand what the notification was about while being on the list with other files and awaiting for actions like approve, review, etc.

Prototypes

During the experience on Cotecna, a few prototypes were very helpful in order to give a clear example of what we were trying to create and the user experience we wanted to build.

Control actions

This prorotype bring a new feature option when an item selected. The toolbar offers few options to apply on the selected row. Thanks to this feature was possible to asign actions when an item selected directly from the main list.

Add new item

For this process, the urge for a simplest way to upload a document was needed specially applying the new features of the material design components and chips, which could differentiate the status of each document on the list making it clear, at first glance, its status and next steps (if neccesary).

UI Dev & Design

Technical skills

Design tools

UI Development

Content Management Sysytems

Management & collaboration

Portfolio

About myself