The Checklist I Would Recommend Before Wireframing Web Apps

As a PM, how do you go about designing a complex user story?

Since every product is different, the process would obviously vary. That's why there's little content around this.

For web apps, I evolved my own checklist before wireframing:

1. Flag the Goal: Define the user's "done" state.

‍
2. Research existing design patterns in my product category & parallel industries.

‍
3. I start with a flowchart/swimlane. I scribble on paper, making quick ferocious, iterations.

‍
4. I work in 3 mindsets to develop options:

- Brute force: obvious happy flow
- Magic wand: what would it take to do this in 1-2 clicks?
- Left-Field: novel angle by breaking a few assumptions
(For left-field iterations, I always take a break & return to it after a while to channel creativity on a different vector.)
‍

5. Mix & match. Do a sanity check for feasibility & usability.

‍
6. Flesh in details for selected approach with this checklist:
- Navigation: how will the user discover this?
- Data: what data points need to be captured, validated etc.
- Logic: workflows, conditions
- Messaging: success/errors, emails, SMS content
- Presentation: screens, patterns, UI elements
- Meta: non-functional stuff e.g. meta-tags
- Tracking: insets that need to be added to track performance