My design process

Because a lot of my work is under and NDA agreement, I wanted to show you a quick and simple overview of how it’s my design process. Obviously this is a general and simplified version and it change depending on the situation and the project, but hopefully it will help you to understand a little bit more how I work and have five cents about my skills.

1. Understand the task

Say it task, problem, improvement, user story… Before anything else I start by identifying, reading or discussing about what’s need to be done. This helps to define the process and choose the best approach and tools to solve it.

2. Research

After knowing what is needed, usually the next phase is doing research. This can involve simple to complex tasks depending on the situation. It can go from gathering information from meetings to reading internal documentation, from doing benchmarking to conducting a card sorting session, etc.

3. Wireframing and Prototiping

With all the information from the research phase the wireframing and prototiping can start. The most important things to accomplish here is to be sure that we have all the elements and information in a way that it’s easy to use and understand for the users and matches all the acceptance criteria from the stakeholders or the project.

4. Validate and test

We have our shiny… Well… We have our greyscale wireframes and/or prototypes but we need to validate it and check that is user friendly and everyone in the team is on the same page. Here we go through meetings, user testing, feedback sessions and even early heuristics evaluations.

Is at this phase were we want to found the most errors possible to avoid extra work in the most advanced stages of the design or even the implementation. Now is cheaper to fail and improve and it will be an iterative moment were we will cicle trough wireframes, prototypes, validate and test, and even go back to the research phase if it’s needed.

After this we will end up with the heavy UX work and will move on to the aesthetics stages.

5. Design

It’s time to convert the boring greyscale wireframes to a modern crazy good looking superb awesome UI. At this point we want to finish our designs adding all the color, shadows, typography etc. For doing this we will use our design system, brand guidelines, style guides etc at our disposal to end with a finish design that is consistent, visually pleasant and accesible.

Aesthetic designs are perceived as easier to use than less-aesthetic designs, thats why we have to pay attention to every detail.

After finishing our designs we will start a new iterative phase, validating and testing this hi-fi designs with user testing, heuristic reviews, meetings, feedback sessions, etc, and again trying to find usability error before moving to the implementation phase. We don’t have to be afraid of going back to the wireframing or even the research phase, but most of the time this would not be the case.

6. Implementation

Because I’m an HTML and CSS developer too, I usually handle all of that to be sure that my designs look the same on production. I try to use a modular approach and using BEM witch is much more easier using SASS or LESS.

After doing the pull request of my code, then the developers will do their magic and make it work. I’m used to work really closely with them and I like to think that this helps me on the all the design phase too, because I can have that developer view present when I need it.

It’s common to setup the A/B test at this phase too, to be able to evaluate some of our designs or theories.

7. Evaluation

After passing all the QA process and going to production, we will be able to evaluate our designs with more quantitative data from sources as Google Analytics or other tools.

Usually stakeholders, PM, PO and BI will handle and digest most of this information to make their decisions on what will be the next steps. All of this will help us to understand our designs and the product to improve in the future.