Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transcribe User Story Map #21

Open
StoneyJackson opened this issue Jun 8, 2019 · 26 comments

Comments

4 participants
@StoneyJackson
Copy link
Contributor

commented Jun 8, 2019

User story map is currently a set of photos in the minutes of our last retreat: https://docs.google.com/document/d/11rD6HK7vTY3DT9p3GIpHRLT9KgqcDhRbDLq2Ujcsn_A/edit#heading=h.4zke7gxll71o

Needs/Wants:

  • Needs to be editable as things are going to change
  • Needs to support grouping of stories into slices organized by user outcomes, that can then be prioritized
  • Want it to be easy to integrate with issue tracker

Open questions:

  • How should it be represented?
  • Where should it live?

First thoughts on implementation:

  • Use an issue tracker and a project board (which and where?). How should each sticky-note be represented? This gets tricky.
  • Use a separate tool (e.g., Miro).
  • Find and use a tool that integrates with issue tracker. Do they exist?
  • just use a diagram tool?
@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jun 14, 2019

Another tool possibility is FeatureMap. The free version might have the features we need, but is limited to 2 maps.

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jun 14, 2019

cardBoard allows unlimited public maps.

@StoneyJackson StoneyJackson moved this from Product Backlog to In progress in Coordinating Committee Board Jun 14, 2019

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

We would like someone to mockup the story board using different tools. Then we can hopefully pick one. There appear to be three basic categories of tools:

  • Interactive boards - These are interactive like Google Docs are interactive. They can be manipulated in realtime by multiple people and everyone sees the manipulations in realtime. Examples include those mentioned by @kwurst: cardBoard and FeatureMap.
  • Raw GitHub or GitLab - The idea here is to model the story map using the tools available with GitHub or GitLab: namely their issue tracker, labels, project boards, milestones and/or epics, etc. The advantage is that this might make it easier to transition stories from the user story map to a full-fledged issue in a project's issue tracker.
  • A diagram tool - Think yEd, Viso, etc. The idea here would be to create a diagram in such a tool and then save it both as an image and in a format that can be reopened and edited. Preferably the latter format would be some plaintext file (e.g., xml). Then both of files can be placed into a git repository. Then we can modify the diagram using a standard development workflow.

So, we need a mockup of the story map in one tool from each category. I don't think we need the whole story map modeled in each; just enough to get a sense for how it would look, how easy it would be to modify, and to allow us to think about how it would integrate with the rest of our workflows.

@StoneyJackson StoneyJackson moved this from In progress to Product Backlog in Coordinating Committee Board Jun 14, 2019

@dtran2017

This comment has been minimized.

Copy link

commented Jun 17, 2019

Some questions:

  • What exactly is meant by transcription and what would this entail?
  • Should there be multiple categories (for varying user outcomes) with subcategories to better organize different aspects of user outcomes?
  • Is there a particular outcome that is ideal or is prioritized as of the moment?
@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2019

@dtran2017 Great questions! I try to answer them below.

What exactly is meant by transcription and what would this entail?

We need a digital version of the user story map (the photos of the sticky notes on the wall). Whatever its final form, it should still be a user story map, and we want to be able update it: move cards around, add cards, remove cards, update the text on cards, etc. Here is a site with a PDF quick reference of user-story-maps: https://www.jpattonassociates.com/story-mapping-quick-ref/ .

Also, ultimately some of the yellow sticky notes will turn into issues.

Should there be multiple categories (for varying user outcomes) with subcategories to better organize different aspects of user outcomes?

Yes, we need to be able to organize stories by user outcome. Outcomes are used to slice stories into releases (the horizontal divisions in the quick reference). We haven't done this yet. But we'll needed to soon.

Is there a particular outcome that is ideal or is prioritized as of the moment?

Not yet. That's why we need the user-map digitized into a manipulatable form (i.e., "transcribed").


As mentioned in my previous post, we are now trying to pick an appropriate format/tool to use. Care to help us?

@dtran2017

This comment has been minimized.

Copy link

commented Jun 20, 2019

Thank you for answering my questions!
I can start doing some mock-ups as a visual (using any of the above suggestions) to further which direction we'd like to take in the future

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 20, 2019

Excellent! Looking forward to it!

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jun 22, 2019

Another tool, that I am liking more and more, is https://draft.do/.

We are trying it out for #39.

@dtran2017

This comment has been minimized.

Copy link

commented Jun 24, 2019

I've done some mock-ups in the diagram tools, Draw.io and (Microsoft) Visio, to give a visual to the user story map. I've used the information provided in the Google link previously mentioned above from the set of sticky notes (from the last retreat).

Here is a PNG file of the mock-up I've created in Draw.io:
Diagram tool mockup
Note: I am unable to upload the draw.io file itself since GitHub does not support this type of file.

Here is a PNG of a mock-up I've created in (Microsoft) Visio:
User_Story_Map_Mockup
Note: I am also unable to attach the vsd file itself since GitHub does not support this type of file.

While the tools themselves are relatively easy to use, I am not sure if these diagram tools are the best kind to use for transcribing the user story map.

  • Visio may pose a problem if some users do not have the program on their machine and due to its nature you would have to save and send an image of the new changes for other members to be able to view it.

  • Draw.io has the ability to be saved to your Google Drive which could then be shared to other people. Draw.io can also show real-time changes (that is, once the action has been completed. You will not be able to see someone dragging something from one side of the diagram to the other, only that the item has been moved to the new location "magically").

I will be taking a look into the interactive boards (including draft.do) next. I hope this helps!

@StoneyJackson StoneyJackson moved this from Product Backlog to In progress in Coordinating Committee Board Jun 27, 2019

@dtran2017

This comment has been minimized.

Copy link

commented Jun 27, 2019

I've created a mock-up of the User Story Map in the interactive board, cardBoard. I am still looking into the other interactive board options and I just wanted to give a quick update.

Here is a link to the mock-up: https://app.cardboardit.com/maps/guests/6156019f8262d986e703184e1f7b6e8b23cab5c66c351daa75d21efce228fb8c

Note: You will only be able to have view-only access due to not being a Collaborator, since this is just a mock-up.

cardBoard also offer different types of boards such as:

  • User story map
  • Opportunity canvas
  • Simple Kanban board
  • The 4L’s Retrospective (Liked, Lacked, Learned, Longed For)
  • Bullseye chart
  • Freeform canvas
  • Business model canvas
  • Swimlane Kanban board
  • Start, Stop, Continue Retrospective
    This may be beneficial in the future.

cardBoard provides the ability to add statuses and annotations (appears as back-drop images on cards) to individual cards - I've added some dummy ones to show how they would appear
If unclear, annotations can appear as a trashcan ("To Be Removed"), speech bubble ("Needs Discussion"), question mark ("Is Confusing"), blocked, or dislike ("Not Good") image on the background of a specific card.
Statuses can appear as "In Progress" or "Done", with "Not Started" not appearing on the card since the card defaults to this status.

You can also add "bar" dividers horizontally and vertically - I've added some dummy ones as an example.

You can also download just the cards themselves as a PDF, the entire board as a PDF or download as a CSV.

Other notable features:

  • Search tool makes it easy to find specific cards
  • MiniMap: tool that allows users to see a high level view of the entire board/story map (able to click on a card to zoom in on the board/takes you to that specific card)
  • Able to vote on cards to delegate which has what priority
  • Chat included
  • Can group cards together in a journey (specific paths of a story story that helps visualize user experiences, workflows or test paths)
  • Cards are similar to Trello cards (you can write more details in the description box on the cards)
@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 27, 2019

Awesome!

draw.io

When you say that you are not able to upload a file type, are you referring adding it to a comment in GitHub? I'm assuming that you can add most any type to git and push it to a repository. However, git plays nicer with small plain text files than images.

I think we are learning that it's better to store data in a repository. We can then better track changes, receive notifications, allow anyone to offer changes through pull-requests, etc. So I think we are moving away from Google Drive.

Also, I think a draw.io file is really just a link to open the diagram page in a browser (similar to a Google Doc or a Google Sheet). So the file doesn't actually contain the contents of the diagram. However, it looks like it can export and import XML. Just tried it and it seams to round-trip fine. By default, it wants to export in a compressed format. One would have to remember to deselect that.

An advantage of draw.io is that the interface would be the same for everyone.

Another advantage is that it is free.

Visio

A big disadvantage is that Visio is not free. Others in this category that are free and would function similarly are yEd, Dia, or LibreOffice Draw; Dia and LibreOffice are of course open source. All of these alternatives are available for all popular platforms.

I don't have Visio, but I assume it can export to a text-based format like XML, which would allow us to store the diagram in a git repository.

Cardboard

This is sounding very tempting. It sounds like it comes with many project management features, which would make it ideal for what we want to use it for. We just used draft.do to create a story map. It has a few of the features you mentioned. But not nearly as many. I especially like the idea of being able to mark cards with review and workflow status.

I'm surprised that cardboard is free for unlimited public boards.

It can export to CSV. And it looks like it can import it too (https://cardboardit.com/help/). So if we want to save snapshots in a repo we could.

It looks like cards (at least for story maps) are arranged into a grid. That's probably fine. draft.do allows free form layout. I found we spent a decent amount of time trying to line things up properly, even though the tool helped with alignment. I wonder how much easier it is if there is no choice and every card is on a grid? Was it easy?

I also like the trello-like features. That gives a place for discussion on a card.

@kwurst Didn't you look at cardboard and chose draft.do over it? What drove you away from cardboard and toward draft.do?

@StoneyJackson StoneyJackson moved this from In progress to Ready for review in Coordinating Committee Board Jun 27, 2019

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2019

@StoneyJackson

I suspect that some/most of those features you like are not free, but were available because @dtran2017 was building this during the free trial period for a new account.

Here is the pricing/feature information for Cardboard: https://cardboardit.com/pricing/

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2019

@cradkowski

You have now had some experience with the story mapping process. Can you please come up with a comparison of the possible story mapping tools? A bunch of the tools are mentioned above. You can also try to find others.

We are interested in features, and pricing details (in particular which features are included in the free versions of the tools). What features that are missing in the free versions are going to make it hard for us to do what we want to do.

Features we are particularly interested in are: number of public boards, number of interactive collaborators, tagging of cards, output options (especially to a text file that can be placed under version control), integrations with issue trackers.

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 28, 2019

cardboard only allows one person to edit on the free plan (unlimited viewing). That's probably a show stopper.

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jun 28, 2019

@dtran2017 @cradkowski feel free to collaborate on this.

@dtran2017

This comment has been minimized.

Copy link

commented Jun 28, 2019

@StoneyJackson

For draw.io I was referring to uploading its file type directly into the comment and not thinking about it in the git repository sense. I apologize for being unclear about that.

As for cardBoard, it does allow for free-form as well. You can have the option of no "bar" dividers (either horizontally, vertically or both). When you create a new board this is the default (as in, everything is blank.)

  • To add a "bar" divider all you have to do was click a button and drag it to the desired location.
  • To delete click the bar and hit the delete button.

I arranged it user story into a grid format to help emphasize difference of categories (Donor, Staff, Guest, etc...). You could have a board with no "bar" dividers at all, thus resembling the class sticky-notes style more. As for how easy it was to arrange the user story overall, it went quite smoothly with no hassle. It was not difficult to line things up.

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jul 10, 2019

So have we decided to use draft.do? If so, then someone can actually do the transcribing.

@StoneyJackson StoneyJackson moved this from Ready for review to In progress in Coordinating Committee Board Jul 10, 2019

@StoneyJackson StoneyJackson moved this from In progress to Product Backlog in Coordinating Committee Board Jul 10, 2019

@StoneyJackson StoneyJackson moved this from Product Backlog to Proposed in Coordinating Committee Board Jul 10, 2019

@StoneyJackson StoneyJackson moved this from Proposed to In progress in Coordinating Committee Board Jul 10, 2019

@cradkowski

This comment has been minimized.

Copy link
Collaborator

commented Jul 10, 2019

@StoneyJackson

So have we decided to use draft.do? If so, then someone can actually do the transcribing.

Last week I reviewed the various story board tools mentioned in this issue, along with a couple of others. This table summarizes my findings: https://docs.google.com/spreadsheets/d/1wzuKhfYN0n5ZbcR3qKCijHOMNYSHWFJUK23ORWvksms/edit?usp=sharing

@kwurst and I met yesterday and we think that draft.do is still the best free option unless anyone has found a better tool.

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jul 10, 2019

Great, let's go with draft.do.

@kwurst for the sake of permissions and ownership, do you need to create the board?

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2019

I will create a draft.do account using the LFP CC gmail account. Then create the story map under that account and add @StoneyJackson and @cradkowski. (I will also move the workflow story map under that account.)

@StoneyJackson

This comment has been minimized.

Copy link
Contributor Author

commented Jul 12, 2019

Shouldn't we use the lfp accounts email? If it hasn't been created it should.

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2019

I think that's what I meant... Thanks for the correction.

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2019

Board created for LibreFoodPantry Product Story Map: https://draft.do/77nv4

@cradkowski @dtran2017 Which one of you wants to work on it?

@kwurst

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2019

Contents of the board can be deleted. That's just the sample.

Whoever works on it probably should look at https://draft.do/eyb2z to see what our format looks like.

@cradkowski

This comment has been minimized.

Copy link
Collaborator

commented Jul 12, 2019

@kwurst @dtran2017

Board created for LibreFoodPantry Product Story Map: https://draft.do/77nv4
Which one of you wants to work on it?

I can work on this.

@cradkowski

This comment has been minimized.

Copy link
Collaborator

commented Jul 12, 2019

Initial transcription complete. @kwurst Can you take a look when you get the chance? The initial story map in the pictures from the June Retreat is somewhat different than how we did the shop-level workflow one, I want to make sure I did the card levels and colors correctly.

@StoneyJackson StoneyJackson moved this from In progress to Ready for review in Coordinating Committee Board Jul 16, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.