This is my Work Process

In most cases I use the design thinking method, although depending on the type of project I work in some or several stages of this process.

During my first years of work I devoted myself exclusively to creating UIs and as time went by I gradually incorporated elements of User Experience such as User Research, Wireframes, Personas, Prototypes and Customer Journeys. But after getting a little more into what UX really is the I started incorporating the missing stage, the Brainstorming stage of the process.


This is where I empathize with my user enough so that I can understand his/her needs, thoughts, motivations and emotions. At this stage I try to collect as much information, talking with as many stakeholders as possible, to trylly understand the scope of the project. My most important tools at this stage are: User interviews, persona creations and customer journey maps.

Example: Karen Ruiz research stage

Identify the problem

There are times when the problem is already fully identified by the client, or by some stakeholder, but when this is not the case, I analyze all the information from the research stage and then I formulate a problem and some ideas on how to solve it. In this stage I use tools such as: Empathy maps and post it walls.

Example: Karen Ruiz Opportunitty Report

Coming up with Ideas

This is known as the Ideation process where the idea is to reach to one or several solutions to the problem, and here basically what I do is brainstorming sessions alone or with a member of my team.

Example: Versus App Wireframes


This is the execution stage. Here I start with a set of wireframes that I put together with the stakeholders,then those wireframes turn into a lo-fi prototype that will be tested. With the test results I start iterating until I reach a solution that I can turn into a UI Design.

Example: NJOY Prototype

Testing Stage

This is a usability and prototyping stage (Conducted with a Hi-Fi Prototype). The outcome of the results analysis and the iteration process is a design mockup (web or mobile) that will go on to become a fully functional HTML prototype or a set or graphic resources for a mobile developer

Example: JetCash usability report


At this stage I just concentrate on designing the UI of the project. I work based on a framework called Component Based Design, where I create and deliver the design in componentes and each component represents a specific stage of the process. Component-based design stages are: 1) Identity Stage (Typefaces, typography and color palette), 2) Elements stage (UI Library), 3) Components Stage (MenĂºs, heroes, banners, cards, avatars, list menus, etc), 4) Compositions Stage (Composition of elements), 5) Layout Stage (Grids, Layouts, Wrappers, etc) and 6) Pages (The actual pages, sections and/pr screens)

FrontEnd Stage

This is the execution stage where I start writing code in HTML + CSS + Javascript. Actually this is a very collaborative and team oriented stage because I need to be working directly with developers and project managers in order to write the best code possible. To achieve great communication and collaborative work i use this tools: Slack, Github, Hangouts and Skype.