Statecharts in product development ?
At Seven Senders, this year the product management team rediscovered a computer science concept/theory under a new angle… State Machine!
The development teams at Seven Senders use state machines all the time in their projects. But when the Front End team started using State Machine inside the UI of our new application Sendwise, something clicked…
We started to have the following conversation:
PM 1: If you think about it, isn’t an application just a succession of states?
PM 2: Hum… Yes, you can see it like that for basics pages indeed like login, signup, on boarding etc… but for some other pages that we have it is way more complex!
PM 1: Let’s try to describe our product as a State Machine just to see if it hold!
PM 2: OK, but I can assure you it is going to be messy…
Indeed it is and the chart that you see on the left is still a work in progress, not all the pages and interactions have been represented!
We used statecharts website to learn the concepts about Statecharts and State Machine.
The chart on the left was made via the super tool called Sketch.systems
We use it to represent all the states of our product, all new features ideas or improvements.
It really helps us PMs to manage the complexity of the UI System.
What we learned
- Our product is way more complex than we imagined
- Some states do not have a specific UI linked to it (mostly all asynchronous state when we save content)
- Statecharts are super easy to understand for PM and it really helps to translate business idea/requirements into functional specifications
How PMs use Statecharts at Seven Senders
Imagine the following situation:
A stakeholder/customer/anyone brings a new idea/feature/improvement for your application/website/software. As PM, we look into our Statechart where this change will have an impact inside our system.
This helps us to quickly understand how much we will need to change the UI to implement this change.
With this knowledge we can better prioritise between different request when we need to develop them.
When the implementation/design of the idea/feature/improvement starts, the UI/UX designer can see quickly which states need to be designed or improved.
When the Front End team starts the work they already have their State Machine updated and all the screens/mocks for all the states.
This has helped us to drastically reduce development time for complex UI interactions.
