Thank you for your detailed answer, Michael. When I first read your answer, a lot of the gaps in the process and the design system were oblivious to me. I have a fairly better idea now, so I thought I’d post an update based on what I understand.
Yes, covering every flow including error states in wireframes has saved a lot of additional time and effort for my team and I down the lane. High-level task flows suffice since they just need to set the overall direction that the wireframes will flesh out.
As Michael pointed out, there are obvious gaps in three areas:
There is no common language for designers and developers for the most part.
This is creating inconsistent designs, duplication of work and an unnecessary amount of time discussing how something should work (and/or rebuilding interactions).
The design and development process is not mature
This results in designers/developers discovering missing screens at the prototyping/development stage. And mostly, we also discover that we hadn’t thought through how the product should behave in certain situations.
Incomplete understanding of the user
Lack of clarity on:
- Motivations behind using a particular feature
- Outcomes from using it
- Frustrations while trying to use it
- Different types of users who might use the feature
These issues are being addressed currently along with a few changes to the design process.
- After User research and before building user flows, designer breaks the PRD into user stories (smaller the better) to give clarity on outcomes.
- User scenarios are fleshed out before building user flows
- High-level user flows are built
- Fully fleshed out wireframes are built. They will cover every screen and flow.
By visualising the solution in detail at the wireframing stage we were able to gain a lot of clarity on gaps in our understanding of the problem. And because this comes during wireframing, we are able to react and modify based on new learnings much quicker than before.
Throughout this process, there is an ongoing discussion with Product Manager and engineering lead after each milestone.
Milestone 1: Completed user flows
M2: Completed 1st draft of wireframes
M3: Incorporated feedback into wireframes
M4: Complete 1st draft of visual design
M5: Incorporated feedback into visual design
The process still has a lot of gaps that I am trying to fix. I will try and post more updates when I learn more.