Wanna chat? 👉 Get in touch!

> Process_

*This is a constant work-in-progress.
*This is not a recipe; the following are just annotations from different experiences.
*Every project/product/experience is different and will have different requirements, goals and trade-offs.

"Engage collaborative creativity"


Design is incredibly misunderstood. Most people think of design as "making something pretty", which is an idea closer to what visual design is –and just a small part. Visual design is much more complex than that, and design, as a whole, even more.

To make it simple, design is about solving problems and the kind of thinking you put into it.

A mental framework.

This is my –tl:dr;'ed– approach to digital experience design:
(check the long version for more details)

  1. Understand needs

  2. Study and document the business, user and tech needs for the product.

  3. Find oportunities

  4. Identify and determine how you can effectively add value and solve user and business problems.

  5. Define what to build

  6. Provide a breakdown of the features to include in the roadmap and prioritize each one.

  7. Execute

  8. Build what you need. Work towards integrating design and development cycles, and generate common practices that involve the participation of the whole team during the design process.

  9. Make things better

  10. Establish procedures for testing and receiving feedback frequently from stakeholders, users, team, organization. This will improve the decision-making process and the overall way in which things work.

  11. Spread knowledge

  12. Every phase you cross provides some kind of results. Whether they are negative or positive, there's always something to learn from. Share the results from experimentation, feedback, mistakes, etc...

  13. Repeat

  14. Well, go back to step 1.

Workflow tl:dr;

The long version.

“We hesitate, in the face of change, because change is loss. But if we don’t accept some loss... we can lose everything”
Stephen Grosz - The Examined Life

From strategy to execution

Design is everywhere. Great designs and great solutions come from well thought processes. To be able to propose effective design solutions, problems-to-be-solved need to be isolated, well defined and validated –or discarded–, and this takes time.

Designing or developing an idea based on good/strong feelings is awesome, but if you want to succeed, you better use, adapt and improve the dynamics and technics that are already out there. Learn and use these methods and technics and with time, customize and make them your own. Work towards establishing a clear process that can handle your specific needs; tailored for the way you and your team work.

Remember, taking the time to carefully ideate, research, plan and execute a project will cost far less than fixing mistakes in the future, while offering a great reward towards collective knowledge.

In the end, it's all about understanding.

Ideas to empower people

Having well established principles helps individuals and groups work together smoothly.

The following are some of those ideas that have worked very well for me and the teams I've worked with:

  1. Design Thinking + Lean + Agile = 😍✨

  2. When used properly, these methodologies are brilliant. They are made for adaptability and there's nothing better in the working environment than quick adaptation. Just be careful not to build dogmas around them.

  3. Simple is beautiful, easy is better

  4. Simplicity comes with a cost, while simplicity should be a goal, most of the time making something easy is way better and helps usability.

  5. Isolate problems, scale solutions

  6. When tackling a problem, isolate it. Focus on it. When a solution is found, show it to the whole team and scale it at organization levels. Share your findings.

  7. From Human centered to human Augmented

  8. Let's not only solve problems. Let's empower humankind towards greatness.

  9. Accessible, Inclusive & Evolving Experiences

  10. Everyone should have access to be empowered by the technology we use on a daily basis. Keep this in mind for whatever you design and build; it's not that hard after all, so excuses are not allowed.

  11. Embrace Testing

  12. Test your ideas, test your mockups, test your code, test your perception, test your biases, test your privileges, test your weaknesses and test your strengths... Testing will help you validate or discard whatever you are thinking or working on.

  13. Push Innovation

  14. The biggest truth is that the "digital technology era" is just starting. The web has only 30 years and the smartphone 10. If you don't allow people to innovate, someone else is going to innovate for you.

  15. Encourage Experimentation

  16. How to innovate? Well, experimentation is the key. Having an environment that allows it is going to enable innovation by itself. Just remember, experimentation means failure and time; but it also –and specially– means learning.

  17. Build Systems != Documents

  18. A well designed system is a document by itself, and a system is better at handling changes and/or scalability.

  19. Design is Never Done

  20. Everything evolves, unless your are doing some disposable and temporary thing. Improvement must be continuous, therefore never done.

  21. Prefer and Support Open Source

  22. Open source is about collective knowledge. I trully believe that it's the better kind of knowledge out there. If you use OSS and can't support it with time and effort, consider doing it with some $$.

  23. Deliver Value

  24. Actual and perceived value are incredibly important and very often, not even understood. Whether it's with users or stakeholders and even with your team, delivering value is key for tackling psychological expectations.

Good communication leads the path

Throughout the years, I've learnt that the single most important thing when working with or within teams is communication. This becomes even more important when working with or within complex organizations.
Good communication acts as a catalyst for a healthy working environment and the gathering of collective knowledge.

Effective communication, not only verbal but through different dynamics that engage collaboration across the team and/or organizations is crucial.

Having the ability to quickly spread any idea, doubt or decision, across an entire team and organization, is basic in the working environment. It helps empower individuals.

Design overview
What do we need to look for

  1. Business Objectives

  2. Business requirements (briefs/specs), problems, goals, definition of success and vision.

  3. User Research

  4. Segment, environment, context, behavior, goals, pains and perceived value.

  5. Content Strategy

  6. Data, words, visuals, relevant and useful info.

  7. Information Architecture

  8. Layout, content, structure, linking and navigation.

  9. Interaction design

  10. Structure, flow and how the UI responds to user input (behavior).

  11. Visual Design

  12. UI design, look, feel, typography, spacing, branding, colors.

  13. Frontend Development

  14. UI development, browsers, mobile, performance, client code.

Asking the right questions
Why? Who? What? How?

These four questions can help define the framework of thought we need to start a whole project or even just design and develop a small feature:

  • Why are we doing this?

  • Who is this for?

  • What are we trying to accomplish?

  • How are we going to do it?

Balance is key!
Products are about people, but also businesses.

As designers, we need to push the user-first agenda. But, as it's great to encourage and nurture user-advocacy, we also need to understand that there are at least three key actors in every design/development project:

  1. User/Customer.
  2. Business/Client
  3. Technology/Tool

Finding that sweet spot between business objectives, users needs and technology capabilities will increase the perceived value of every deliverable, not only by users, but also by everyone involved in the process. It's hard to achieve but in the long run, it adds incredible value.

Defining solutions
Design is about problem solving

Solutions depend on how you frame the problem.

Work together to understand the constraints, parameters, and objectives that define the problem and the space/environment in which it occurs.

  • Frame the problem
  • Set direction
  • Fill gaps of knowledge

Sketch & prototype
From paper to code

  1. Blueprints

  2. A rough representation of an interface without visual design, so the focus lays on function and composition.

    • Mock
    • Information Architecture
    • Sketch
    • Define Layout & Components
    • Atomic Design thinking

  3. Models

  4. A representation of the interface with real data, content, visual design and approximates of interactions and micro interactions.

    • Define behavior
    • Lo-fi prototype
    • Define visual design
    • Hi-fi prototype
    • Functional and non-functional prototypes
      • Flow prototype: test navigation or complete user tasks (behavior)
      • Interaction Prototype: interactions and micro interactions (transitions, animations)

Testing, feedback and iteration
The quick cycles

Establishing testing mechanisms and searching for constant feedback can greatly improve the way iterations work. Every team member should be involved in testing sessions afor there's no better judge to one's work, than real world action.

Testing and feedback sessions will help us:

  • Ensure design is user-centric
  • Refine or discard prototypes
  • Evaluate as quickly and early as possible
  • Integrate results in shorter iterations

***I'll be digging deeper into this subject, showing methodologies that will help user testing, gathering and analyzing feedback, and integrating design changes into agile development cycles.***

There's always one...

Everytime you take a decision, there's a trade-off to evaluate.

Sometimes they're easy to spot and handle but other times they hide between trivialities. When there's a blocking trade-off, you'll need to elevate it into consideration of the whole team or even organization to know what to do. The most important thing to keep in mind is that there is always at least one. No decision comes without a trade-off.

Share everything
Collective knowledge for real

On a good working environment you should be able to share your findings, generate discussions, propose roundtables, etc. Talk to your teammates, users, stakeholders and be constantly revisiting what works and what doesn't work for your specific project.

Writing blog posts, keynotes or sharing through podcasts/vidcasts is also a good method.

This is a condensed overview of my personal "how-tos", gathered from the learnings of the past 10 years. I'm currently (re)working on theproject.io which explores all of these ideas in a deeper level.

Thanks a lot for taking the time to read.

That's all folks!!!
...for now. :P

**Icons designed by Eucalyp from Flaticon - Except for the 1st illustration**