Great product design is the result of the right people doing the right things in the right order.
Here at Supergreen, our approach to product design is to move from concept to release in a meaningful and user-centered way. On this journey, we also have to consider the business perspective as well as the increasingly complex impact from a technical and experience point-of-view. This journey can be visualized as a funnel that captures the progression from research to design to development.
Collaboration FTW!
Great product design isn’t done in isolation. There are no product design celebrities. And nothing good comes out of doing your part just to throw it over the wall to the next team.
Collaboration looks like a designer contributing to the project on a problem definition level. Don Norman is outstanding on the designer’s role in solving the right problem. Collaboration also looks like bringing together a cross-disciplinary team together to kick off the design process. We typically do this by organizing a design workshop where the team completes some initial design activities (journey mapping, mind mapping, thumbnailing, and wireframing) together. These working sessions help capture the best ideas, align the broader team, and identify gaps (both in the experience and technical). Most importantly, they create momentum to launch the project through our design process and into development.
As the project moves through the design process, collaboration is preserved as each round of review draws on the shared understanding created through that initial design workshop.
The Design Activities
UX design supports our portion of the design funnel through our toolkit of activities. Deciding which activities are appropriate for each project requires skill. (All activities are not always helpful.) Additionally, performing each of the activities (especially to facilitate with a broader group) requires skill to make sure the outcome is effective. Though some activities may be skipped or combined, it is important to do the activities in this sequence as they all build on the previous activities.
Doing these activities in the defined order has the intention of creating a cascading effect. Each activity informs the following activity.
Empathy Mapping
We base our empathy map off of Xplane’s process and documentation. It strategically captures a wide range of external and internal considerations. These steps include:
WHO are we empathizing with?
What do they need to DO?
What do they SEE?
What do they SAY?
What do they DO?
What do they HEAR?
What do they THINK and FEEL
Journey Mapping
Journey mapping existing workflows are used to better understand how a problem is currently being solved. It identifies key steps, frustrations, and opportunities. Here’s a really great approach.
Task Mapping
Task mapping gets down to the details of how things should work. Building off a completed journey map, it is a useful activity to break the journey into specific pieces (even page content and key functionality) and decide how those pieces inform and relate to one another.
User Conversation
Because the primary way we engage with our customers is through a digital product, it’s absolutely critical we try to 1. Be human, 2. Listen to their questions/concerns, and 3. Anticipate their needs. A very helpful activity we use to accomplish is writing a user conversation. Shopify has a great post on how they do this activity.
Mind Mapping
One key to having good ideas is to have lots of ideas. The challenge is that our brains often censor our ideas before they have an idea to develop. This stream of conscious activity allows us to explore many divergent concepts and opens the team up to new and wildly innovative ways of doing things. IDEO has a great post on Mind Mapping.
Thumbnailing
Thumbnailing is a low-fidelity format used to explore design possibilities that have been identified by the task map activity. It lends itself to quickly sketching high-level interactions between pages or within page elements.
Wireframing
With the wireframing activity, we begin to focus on page layout and content. In some cases, previously designed patterns make this step easy. But in cases of unique patterns or layout, there is typically a good opportunity to explore design solutions.
User Interface
Building on the wireframe activity, the user interface is the final step in the design process. While it might be revised based on user feedback from testing, this is the highest fidelity format before the designs are put into production by the development team. This also provides a basis to create a prototype for testing.
Prototyping
Even with extensive generative research, throughout the design process, it’s often necessary to make many assumptions about what user needs and wants. We also make assumptions about the usability of our designs. To mitigate this, we create a prototype to test with actual users in a moderated usability session.
Usability Testing
Usability testing is how we know we have effectively designed a product that meets the user's needs and is easy to use. We do this by recruiting candidates that will actually use our product after release and facilitate the session where they interact with the new product in the form of a prototype. Depending on user feedback, the designers might need to go back up the ladder to incorporate feedback.
If at first you don’t succeed, take a step back
Experienced designers might find they can combine or skip steps completely. And not every design project is worth the effort of completing every step. What I teach (and try to do myself) is when you realize you’re at an impasse, the issue is probably upstream. Having trouble laying out a page? You probably aren’t working from a sufficient task map. Having trouble smoothing out the flow in a sequence of pages? You probably don’t have a complete journey map. Anytime the designer starts to feel pain in the design process, the first place to look is upstream.
Don’t be afraid to customize
One of the biggest reasons this approach works for us is because it was designed to fit our unique business needs, product maturity, and organizational structure. And just because it works for us now, doesn’t mean it won’t need to scale as we grow. Feel free to borrow from this inventory of design activities and design your own process. If there are others that work for you, I’d love to hear about them in the comments below.
Great product design is the result of the right people doing the right things in the right order.
Here at Supergreen, our approach to product design is to move from concept to release in a meaningful and user-centered way. On this journey, we also have to consider the business perspective as well as the increasingly complex impact from a technical and experience point-of-view. This journey can be visualized as a funnel that captures the progression from research to design to development.
Collaboration FTW!
Great product design isn’t done in isolation. There are no product design celebrities. And nothing good comes out of doing your part just to throw it over the wall to the next team.
Collaboration looks like a designer contributing to the project on a problem definition level. Don Norman is outstanding on the designer’s role in solving the right problem. Collaboration also looks like bringing together a cross-disciplinary team together to kick off the design process. We typically do this by organizing a design workshop where the team completes some initial design activities (journey mapping, mind mapping, thumbnailing, and wireframing) together. These working sessions help capture the best ideas, align the broader team, and identify gaps (both in the experience and technical). Most importantly, they create momentum to launch the project through our design process and into development.
As the project moves through the design process, collaboration is preserved as each round of review draws on the shared understanding created through that initial design workshop.
The Design Activities
UX design supports our portion of the design funnel through our toolkit of activities. Deciding which activities are appropriate for each project requires skill. (All activities are not always helpful.) Additionally, performing each of the activities (especially to facilitate with a broader group) requires skill to make sure the outcome is effective. Though some activities may be skipped or combined, it is important to do the activities in this sequence as they all build on the previous activities.
Doing these activities in the defined order has the intention of creating a cascading effect. Each activity informs the following activity.
Empathy Mapping
We base our empathy map off of Xplane’s process and documentation. It strategically captures a wide range of external and internal considerations. These steps include:
WHO are we empathizing with?
What do they need to DO?
What do they SEE?
What do they SAY?
What do they DO?
What do they HEAR?
What do they THINK and FEEL
Journey Mapping
Journey mapping existing workflows are used to better understand how a problem is currently being solved. It identifies key steps, frustrations, and opportunities. Here’s a really great approach.
Task Mapping
Task mapping gets down to the details of how things should work. Building off a completed journey map, it is a useful activity to break the journey into specific pieces (even page content and key functionality) and decide how those pieces inform and relate to one another.
User Conversation
Because the primary way we engage with our customers is through a digital product, it’s absolutely critical we try to 1. Be human, 2. Listen to their questions/concerns, and 3. Anticipate their needs. A very helpful activity we use to accomplish is writing a user conversation. Shopify has a great post on how they do this activity.
Mind Mapping
One key to having good ideas is to have lots of ideas. The challenge is that our brains often censor our ideas before they have an idea to develop. This stream of conscious activity allows us to explore many divergent concepts and opens the team up to new and wildly innovative ways of doing things. IDEO has a great post on Mind Mapping.
Thumbnailing
Thumbnailing is a low-fidelity format used to explore design possibilities that have been identified by the task map activity. It lends itself to quickly sketching high-level interactions between pages or within page elements.
Wireframing
With the wireframing activity, we begin to focus on page layout and content. In some cases, previously designed patterns make this step easy. But in cases of unique patterns or layout, there is typically a good opportunity to explore design solutions.
User Interface
Building on the wireframe activity, the user interface is the final step in the design process. While it might be revised based on user feedback from testing, this is the highest fidelity format before the designs are put into production by the development team. This also provides a basis to create a prototype for testing.
Prototyping
Even with extensive generative research, throughout the design process, it’s often necessary to make many assumptions about what user needs and wants. We also make assumptions about the usability of our designs. To mitigate this, we create a prototype to test with actual users in a moderated usability session.
Usability Testing
Usability testing is how we know we have effectively designed a product that meets the user's needs and is easy to use. We do this by recruiting candidates that will actually use our product after release and facilitate the session where they interact with the new product in the form of a prototype. Depending on user feedback, the designers might need to go back up the ladder to incorporate feedback.
If at first you don’t succeed, take a step back
Experienced designers might find they can combine or skip steps completely. And not every design project is worth the effort of completing every step. What I teach (and try to do myself) is when you realize you’re at an impasse, the issue is probably upstream. Having trouble laying out a page? You probably aren’t working from a sufficient task map. Having trouble smoothing out the flow in a sequence of pages? You probably don’t have a complete journey map. Anytime the designer starts to feel pain in the design process, the first place to look is upstream.
Don’t be afraid to customize
One of the biggest reasons this approach works for us is because it was designed to fit our unique business needs, product maturity, and organizational structure. And just because it works for us now, doesn’t mean it won’t need to scale as we grow. Feel free to borrow from this inventory of design activities and design your own process. If there are others that work for you, I’d love to hear about them in the comments below.
Great product design is the result of the right people doing the right things in the right order.
Here at Supergreen, our approach to product design is to move from concept to release in a meaningful and user-centered way. On this journey, we also have to consider the business perspective as well as the increasingly complex impact from a technical and experience point-of-view. This journey can be visualized as a funnel that captures the progression from research to design to development.
Collaboration FTW!
Great product design isn’t done in isolation. There are no product design celebrities. And nothing good comes out of doing your part just to throw it over the wall to the next team.
Collaboration looks like a designer contributing to the project on a problem definition level. Don Norman is outstanding on the designer’s role in solving the right problem. Collaboration also looks like bringing together a cross-disciplinary team together to kick off the design process. We typically do this by organizing a design workshop where the team completes some initial design activities (journey mapping, mind mapping, thumbnailing, and wireframing) together. These working sessions help capture the best ideas, align the broader team, and identify gaps (both in the experience and technical). Most importantly, they create momentum to launch the project through our design process and into development.
As the project moves through the design process, collaboration is preserved as each round of review draws on the shared understanding created through that initial design workshop.
The Design Activities
UX design supports our portion of the design funnel through our toolkit of activities. Deciding which activities are appropriate for each project requires skill. (All activities are not always helpful.) Additionally, performing each of the activities (especially to facilitate with a broader group) requires skill to make sure the outcome is effective. Though some activities may be skipped or combined, it is important to do the activities in this sequence as they all build on the previous activities.
Doing these activities in the defined order has the intention of creating a cascading effect. Each activity informs the following activity.
Empathy Mapping
We base our empathy map off of Xplane’s process and documentation. It strategically captures a wide range of external and internal considerations. These steps include:
WHO are we empathizing with?
What do they need to DO?
What do they SEE?
What do they SAY?
What do they DO?
What do they HEAR?
What do they THINK and FEEL
Journey Mapping
Journey mapping existing workflows are used to better understand how a problem is currently being solved. It identifies key steps, frustrations, and opportunities. Here’s a really great approach.
Task Mapping
Task mapping gets down to the details of how things should work. Building off a completed journey map, it is a useful activity to break the journey into specific pieces (even page content and key functionality) and decide how those pieces inform and relate to one another.
User Conversation
Because the primary way we engage with our customers is through a digital product, it’s absolutely critical we try to 1. Be human, 2. Listen to their questions/concerns, and 3. Anticipate their needs. A very helpful activity we use to accomplish is writing a user conversation. Shopify has a great post on how they do this activity.
Mind Mapping
One key to having good ideas is to have lots of ideas. The challenge is that our brains often censor our ideas before they have an idea to develop. This stream of conscious activity allows us to explore many divergent concepts and opens the team up to new and wildly innovative ways of doing things. IDEO has a great post on Mind Mapping.
Thumbnailing
Thumbnailing is a low-fidelity format used to explore design possibilities that have been identified by the task map activity. It lends itself to quickly sketching high-level interactions between pages or within page elements.
Wireframing
With the wireframing activity, we begin to focus on page layout and content. In some cases, previously designed patterns make this step easy. But in cases of unique patterns or layout, there is typically a good opportunity to explore design solutions.
User Interface
Building on the wireframe activity, the user interface is the final step in the design process. While it might be revised based on user feedback from testing, this is the highest fidelity format before the designs are put into production by the development team. This also provides a basis to create a prototype for testing.
Prototyping
Even with extensive generative research, throughout the design process, it’s often necessary to make many assumptions about what user needs and wants. We also make assumptions about the usability of our designs. To mitigate this, we create a prototype to test with actual users in a moderated usability session.
Usability Testing
Usability testing is how we know we have effectively designed a product that meets the user's needs and is easy to use. We do this by recruiting candidates that will actually use our product after release and facilitate the session where they interact with the new product in the form of a prototype. Depending on user feedback, the designers might need to go back up the ladder to incorporate feedback.
If at first you don’t succeed, take a step back
Experienced designers might find they can combine or skip steps completely. And not every design project is worth the effort of completing every step. What I teach (and try to do myself) is when you realize you’re at an impasse, the issue is probably upstream. Having trouble laying out a page? You probably aren’t working from a sufficient task map. Having trouble smoothing out the flow in a sequence of pages? You probably don’t have a complete journey map. Anytime the designer starts to feel pain in the design process, the first place to look is upstream.
Don’t be afraid to customize
One of the biggest reasons this approach works for us is because it was designed to fit our unique business needs, product maturity, and organizational structure. And just because it works for us now, doesn’t mean it won’t need to scale as we grow. Feel free to borrow from this inventory of design activities and design your own process. If there are others that work for you, I’d love to hear about them in the comments below.