To facilitate the transition of userstories into actual tangible code we combined our GUI workflow slides into 7 distinct React Frames that will represent different graphical frames solely through the modification of state.

To improve understanding and make the discussion of the tasks easier the following diagram tying the React Frames and GUI frames was created using draw.io:

Additionally a Work Breakdown Structure was generated to make individual tasks and their scope more obvious.

While discussing the user stories and the plan of action with the team it became obvious that it was difficult to establish a clear mental picture of the relationship between user stories and the graphical interface workflow which created an unnecessary communication barrier.

As such a second workflow diagram was created that mimicked the exact same layout as our GUI workflow but instead of graphics it contained user stories laid out on the exact frames they were meant to represent. There were also buttons added to represent the navigation between frames triggered by the completion of a particular user story.

Shneider S

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store