> 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"
tl:dr;
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)
Understand needs
Find oportunities
Define what to build
Execute
Make things better
Spread knowledge
Repeat
Study and document the business, user and tech needs for the product.
Identify and determine how you can effectively add value and solve user and business problems.
Provide a breakdown of the features to include in the roadmap and prioritize each one.
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.
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.
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...
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
Introduction
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.
Principles
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:
Design Thinking + Lean + Agile = 😍✨
Simple is beautiful, easy is better
Isolate problems, scale solutions
From Human centered to human Augmented
Accessible, Inclusive & Evolving Experiences
Embrace Testing
Push Innovation
Encourage Experimentation
Build Systems != Documents
Design is Never Done
Prefer and Support Open Source
Deliver Value
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.
Simplicity comes with a cost, while simplicity should be a goal, most of the time making something easy is way better and helps usability.
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.
Let's not only solve problems. Let's empower humankind towards greatness.
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.
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.
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.
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.
A well designed system is a document by itself, and a system is better at handling changes and/or scalability.
Everything evolves, unless your are doing some disposable and temporary thing. Improvement must be continuous, therefore never done.
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 $$.
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.
Collaboration
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
Business Objectives
User Research
Content Strategy
Information Architecture
Interaction design
Visual Design
Frontend Development
Business requirements (briefs/specs), problems, goals, definition of success and vision.
Segment, environment, context, behavior, goals, pains and perceived value.
Data, words, visuals, relevant and useful info.
Layout, content, structure, linking and navigation.
Structure, flow and how the UI responds to user input (behavior).
UI design, look, feel, typography, spacing, branding, colors.
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:
- User/Customer.
- Business/Client
- 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
Blueprints
- Mock
- Information Architecture
- Sketch
- Define Layout & Components
- Atomic Design thinking
Models
- 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)
A rough representation of an interface without visual design, so the focus lays on function and composition.
A representation of the interface with real data, content, visual design and approximates of interactions and micro interactions.
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.***
Trade-offs
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**