UX & UI from the ground up: My experience

**I just found this old blog entry that I never posted, and I honestly don't know why I didn't do it sooner. I've been updating my portfolio after completing a semester of my Masters in Information Design and Visualization at Northeastern University and so I'll be blogging a little bit more now. Here's the original entry:**


I haven't posted new projects or written in a long time, partly because I have been working with a Costa Rican startup focused on digital services, and because of the nature of my work I am bound by a confidentiality agreement that prevents me from revealing any images of the services we're designing and developing. However, really want to talk about the processes of implementing User Experience (and also User Interface) design from the ground up in a very flexible environment such as the one of a startup. 

The process of addressing UX issues when there is literally no previous work done clearly calls for a different strategy than the usual redesign job. Few of us rarely have the golden opportunity to plan, control, conduct research, prototype, evaluate and create without having to comply with old practices or legacy guidelines. This also comes at the cost of a notoriously higher responsibility to our users and our clients, and inherently comes with a bit more of trial and error from our part.

Part of the project roadmap and its stages.

Part of the project roadmap and its stages.

1. Laying down a Project Roadmap:

The first step in this process is to create a project roadmap that you can follow throughout the months of R+D. I created our based on a mix of the Lean UX book by Jeff Gothelf, the UX Project Checklist by Andrea Soverini and the Usability Cookbook by Franklin Hernández. The truth is that there are many different methodologies and rarely only one right answer as to how to address UX and UI problems. Moreover, the context will be different for each of you and for every project; in my case, this startup benefited from a Lean approach and a lot of researching and planning. I believe the principles for creating the project roadmap are the following:

1. Ask the team and yourself what the biggest needs of the project are. Do we know enough about the competition already? Are we terribly lacking in user feedback? What type of user research should we conduct first? How soon must we deploy? What can we do with the budget we have?


2. Now that you have an overview of the context, the project requirements and its limitations, create stages and add steps on every stage. These stages will most likely need to be completed sequentially (i.e. you can't create good user stories without proper interviews and ethnographic research). The stages should be written down on a board and marked completed. Make sure you see that list change every week. There is a basic sequence to these stages:

2. Set deadlines and meet them:

If you miss a deadline, understand why and strive to fix whatever went wrong. Chronically missing deadlines is a symptom of a much larger issue: either you lack structure, the roadmap is wrong or your teammates are lacking.


3. Document as you go:

don't wait until you're finished because then you'll never do it, and this is a problem because you need to...


4. Look back at your documentation:

Make sure your current decisions are still aligned with your previous conclusions. From the time you conduct your first interviews, to the time you evaluate high fidelity interfaces with test users, a good amount of weeks (or even months) will have passed by. Sometimes it's easy to lose sight of the original objectives and this will lead you astray. Your documentation is your best friend.


Bonus: Have fun and make sure you are happy with the work you're doing:

If you're not happy, then ask yourself if you could improve the quality of your work by adding more structure to it, and never forget to have fun. Analyzing research data can be cumbersome and repetitive, but remember your role as an experience designer can have a positive impact on user's lives and that enjoying what you do will always lead to better results for your team.

¡Estoy en las noticias!

Gracias a esfuerzos colaborativos y a diversas presentaciones que hicimos de mi proyecto final, algunos medios de noticias hicieron notas sobre el trabajo del equipo de diseño. Para leerlas, pueden visitar el Portal de Investigación de la UCR, AmeliaRueda y CR Hoy

Estamos extremadamente agradecidos con los reporteros que tuvieron el interés de saber más sobre lo que hacemos, porque el diseño costarricense merece ser divulgado y porque es un verdadero orgullo para nosotros poder dar a conocer nuestras ideas.

¡Muchas gracias!

How I made it: My Identity

If you've visited my portfolio, you have probably seen a project entitled "My Identity". I created a brand for myself using a very basic (and rather recreational) form of Data Visualization. I took my first name and used a simple substitution method where A = 1, B = 2 and so forth.

Turning letters into numbers allowed me to have a (very small) data set with which to play:

int[] letters = { 1, 14, 21, 16, 14, 9, 16 }; //ANTONIO

I then read this post by the amazing Daniel Shiffman about converting polar coordinates to Cartesian ones and decided I would turn my dataset into a polar plot. I wanted to do this using parameters of course, (hence having my letters into an array) and then I created this function:

r = 0;
theta = radians(-90);
increment = TWO_PI/count; //the angular increment

void grid() {
  for (int i=0; i < count; i++) {
    float xPos = letters[i]*10 * cos(theta);  //rectangular to polar coords.
    float yPos = letters[i]*10 * sin(theta);
    positionsX[i] = xPos;
    positionsY[i] = yPos;
    theta+= increment;

The following step involved drawing these dots in the canvas and drawing lines connection each dot. This can be done in different ways. In Processing, one might chose to use PVector instead of line because it allows more control over the shapes, but since my final goal was to export the shape to Illustrator, I went with the good ol' line object.


void draw() {
  // Translate the origin point to the center of the screen
  translate(width/2, height/2);

  //svg.beginDraw(); // And record this one

  // draw lines between all the nodes
  for (int i=0; i < count-1; i++) { //count-1 or else OutOfBounds!
    for (int a = 1; a < count; a++) {
      stroke(31, 112, 131, 90); //color code un RGBA
      line (positionsX [i], positionsY [i], positionsX[a], positionsY[a]);

  // draw ellipses in the posoition of the nodes
  for (int i=0; i < count; i++) {
    float xVal = positionsX [i];
    float yVal = positionsY [i];
    ellipse(xVal, yVal, 9, 9);

Finally, I used the free library P8gGraphicsSVG to export an SVG from Processing and edited it in Illustrator to my liking. I created a fluid identity, exploring form and meaning by selectively removing some of the lines that Processing had drawn. 

And that's about it. If you found this post interesting or would like to see more of the source code, please leave a comment or send me a message. I would me more than happy to hear from you!

Hello World

Risking having the most unoriginal title for my first post, I want to welcome you into my blog. The title is no accident for my work is oftentimes torn between physical and digital design and any programmer out there knows the joy of displaying for the first time those two words in their console's log.

I will be posting about my work, my thoughts on design, some detailed information about certain projects and any other ongoing activity that I find worthy of mentioning.

Most of my posts will be done in English because I would like to reach to as many people as possible, but I will write the occasional note in Spanish, too.

If you made it this far, thank you and do come back sometime soon.