Day 5

ChatGPT-4 Sketches to Stories

2023-10-25

Tags: GenerativeAI OpenAI ChatGPT ImageProcessing AgileStories

The idea in today's post is to ask ChatGPT to describe pictures from my notebook and eventually turn them into Agile Stories. Take note that my handrwriting is not good but ChatGPT is able to understand it.

Disclaimer: I have been a certified Scrum Master for years. This post is not meant to imply that Large Language Models can replace Scrum team members. It is meant to show how AI can be leveraged as a tool to help Scrum teams.

Prompt:

Please analyze these pictures.

Response:

Certainly! The images you provided appear to be pages from a notebook detailing the concept or plan for a project titled "100 Days Greetings."

Here's a summary of the content from the images:

Image 1:

Project Title: 100 Days Greetings.
Concept: A simple greeting card website using HTML, CSS, and JS only.
Card Building Page:
- A card is composed of 3 parts:
  1. Envelope:
    - Color of the envelope.
    - Person the card is for (their name).
  2. Cover:
    - Color of the cover.
    - A phrase or label which can be chosen from a list.
    - A picture that the user can pick from.
  3. Interior:
    - Color of the interior.
    - A phrase that the user can pick from a list.
    - Signature (Who the card is from).
For the phrases, users can also choose:
- Font (from a set list).
- Font color (from a set list).

Image 2:

Data Storage: The data points described in the card design will be stored only on the client's side.
Process after the Card is Built:
- Once the sender has designed their card and hits a "build" button, a link will be generated.
- This link will contain a compressed base 64 string as a parameter that encapsulates all the data points.
- The link will direct to a new page that will then build the card based on the base 64 object string.
Sharing:
- Card senders can then share this link with their friends.
- There's no login required from either party to view or send cards.

The project seems to be focused on creating a simple, user-friendly greeting card web application where users can customize different parts of the card. The fact that no logins are required and data is stored only on the client-side points to a focus on user privacy and simplicity.

Would you like insights, suggestions, or anything specific related to this project?

Prompt:

As an agile coach or scrum master. Please suggest epics and stories that represent these requirements. Please make sure that the stories include acceptance criteria and also provide t-shirt sizing for these stories.

Response:

Absolutely! Breaking this project into epics and user stories, while providing acceptance criteria and t-shirt sizing, is a great way to approach it in an Agile environment. Here's one way to structure the requirements:

Epic 1: User Interface for Card Creation

Story 1.1: Designing the Envelope Interface

As a user, I want to choose the color of my card's envelope.
- Acceptance Criteria:
  - Dropdown or color palette allows selection of predefined colors.
  - The chosen color is visually reflected in a preview pane.
- T-shirt Size: S
Story 1.2: Input for Recipient's Name
- As a user, I want to input the name of the person the card is for.
  - Acceptance Criteria:
    - Text box allows for name input.
    - Inputted name is shown on the preview pane, on the envelope.
  - T-shirt Size: S

Story 1.3: Designing the Cover Interface

As a user, I want to choose the color, phrase/label, font, and font color for my card's cover.
- Acceptance Criteria:
  - Dropdown or color palette for cover color selection.
  - List or dropdown for phrase/label selection.
  - Dropdown for font selection.
  - Dropdown or color palette for font color.
  - The chosen options are visually reflected on the cover in the preview pane.
- T-shirt Size: M
Story 1.4: Picture Selection for Cover
- As a user, I want to pick a picture to be placed on the cover of my card.
  - Acceptance Criteria:
    - Gallery or dropdown to select from predefined images.
    - The selected picture is shown on the cover in the preview pane.
  - T-shirt Size: M

Story 1.5: Designing the Interior Interface

As a user, I want to choose the color, phrase, font, and font color for my card's interior.
- Acceptance Criteria:
  - Dropdown or color palette for interior color selection.
  - List or dropdown for phrase selection.
  - Dropdown for font selection.
  - Dropdown or color palette for font color.
  - The chosen options are visually reflected in the interior section in the preview pane.
- T-shirt Size: M
Story 1.6: Signature Input
- As a user, I want to input a signature (name or phrase) to represent who the card is from.
  - Acceptance Criteria:
    - Text box allows for signature input.
    - Inputted signature is shown on the interior in the preview pane.
  - T-shirt Size: S

Epic 2: Card Data Storage & Sharing

Story 2.1: Storing Card Data on Client Side

As a developer, I want the card data to be stored only on the client side to ensure user privacy.
- Acceptance Criteria:
  - No server-side storage of card data.
  - Data is stored temporarily in the browser session or local storage.
- T-shirt Size: M

Story 2.2: Generating Sharing Link

As a user, after designing my card, I want to generate a unique link that encapsulates all my card details.
- Acceptance Criteria:
  - "Build" button creates a compressed base 64 string of card data.
  - A unique link is generated with this string as a parameter.
  - User is shown a prompt or notification with this link after pressing "Build".
- T-shirt Size: L

Story 2.3: Viewing Card from Link

As a recipient, I want to view the card by accessing the shared link.
- Acceptance Criteria:
  - Accessing the link leads to a page that decodes the base 64 string.
  - The card is dynamically built and displayed based on the decoded data.
- T-shirt Size: L

This should provide a foundational structure for the development of your project. The t-shirt sizes (S for Small, M for Medium, L for Large) give an estimate of the relative effort required for each story. Adjustments can be made based on team discussions and further refinement of requirements.

Prompt:

Can you suggest some additional story titles that you think I might not have captured?

Response:

Of course! Based on the requirements you've given, here are some additional story titles that might fill in some potential gaps or enhance the user experience:

Error Handling and Validation
- "Validate Name and Signature Input" - Ensure names and signatures don't contain inappropriate content or symbols.
- "Handle Image Loading Errors" - In case a selected picture doesn't load or there's an error with the file.
User Experience (UX) and User Interface (UI) Enhancements
- "Mobile Responsive Design" - Ensure that the card designing interface is usable and looks good on mobile devices.
- "Preview Before Finalization" - Allow users to see a full preview of their card before they finalize and share it.
- "Help Tooltips" - Provide users with tooltips or help icons in case they need guidance during the design process.
Usability Features
- "Save Card Design" - Let users save their card design for future edits or re-sharing.
- "History of Shared Cards" - Provide a history or list of cards they've previously created and shared.
- "Bulk Card Sending" - Allow users to send cards to multiple recipients at once.
Customization and Personalization
- "Upload Custom Pictures" - Let users upload their own images to use on the card cover.
- "Custom Phrases" - Allow users to write their own phrases instead of choosing from a list.
- "Select Background Music" - Offer a choice to include background music when the card is opened.
Security and Privacy
- "Data Retention Policy" - Clearly indicate how long the card data will be retained and how users can delete it.
- "GDPR Compliance" - Ensure the tool meets GDPR or other data protection regulations.
- "Data Encryption" - Ensure shared links and client-side data are encrypted.
Accessibility
- "Accessibility Features" - Ensure the card designing tool is accessible to users with disabilities, e.g., screen reader compatibility.
- "Provide Alt Text for Images" - For users with visual impairments to understand the content of the image.

These additional stories can further refine the project and enhance user experience. Depending on the project's scope and objectives, you can decide which of these (if any) are relevant and worth pursuing.

Prompt:

Can you create a csv file from this data that would be suitable to import into a system like Trello or JIRA

Response:

Of course! Here's how the data might be structured for a CSV file suitable for importing into systems like Trello or JIRA:

"Story ID","Title","Description","Acceptance Criteria","T-shirt Size"
"1.1","Designing the Envelope Interface","Design an interface for the envelope part of the card.","- Interface is responsive and user-friendly\n- Allows users to choose envelope colors","M"
"1.2","Input for Recipient's Name","Allow users to input the name of the person the card is for.","- A clear input field for the name is present\n- Name is displayed correctly on the envelope","S"
"1.3","Designing the Cover Interface","Design the interface for the cover of the greeting card.","- Interface is responsive and user-friendly\n- Users can choose cover colors and phrases\n- Users can select pictures from a list","M"
"1.4","Picture Selection for Cover","Users should be able to select a picture for the cover from a list.","- At least 4 pictures are available for selection\n- Selected picture displays correctly on the cover","S"
"1.5","Designing the Interior Interface","Design the interface for the interior part of the card.","- Interface is responsive and user-friendly\n- Users can select font, font color, and interior color\n- Users can choose phrases and see them displayed correctly","M"
"1.6","Signature Input","Allow users to input a signature or name indicating who the card is from.","- A clear input field for the signature is present\n- Signature displays correctly in the interior of the card","S"
"2.1","Storing Card Data on Client Side","Ensure that all card data is stored on the client side after the card is built.","- Data is stored securely and temporarily on the client side\n- Data remains intact during the session","M"
"2.2","Generating Sharing Link","Generate a unique sharing link for the card after it's built.","- Link is generated correctly after card creation\n- Link is easy to share (copy to clipboard functionality)","S"
"2.3","Viewing Card from Link","Allow recipients to view the card by clicking on the shared link.","- Card displays correctly from the link\n- All elements (envelope, cover, interior) are displayed as intended","M"

For a CSV, you would typically save the above text into a .csv file and then use the import functionality of Trello, JIRA, or another project management tool to create the tasks. Note that each tool may have a slightly different import format, so you might need to adjust the columns or details accordingly.

What have we learned?

Leveraging AI: AI, particularly ChatGPT, can serve as a powerful tool for Agile teams, helping to quickly translate raw notes or ideas into structured epics and user stories.
Limitations & Strengths: While ChatGPT can interpret and suggest, its output is based on provided input. Hence, clarity in the initial input results in better output.
Tool Augmentation: AI isn't here to replace Scrum Masters or Agile Coaches. Instead, it's an tool that can save time and allow the team to focus on collaboration.
Flexibility: Using AI offers flexibility. Not only can it help in story creation, but also in tasks like converting them to CSV files suitable for project management tools.

To conclude, this experiment showcases the potential of merging traditional methodologies with modern technology. As AI continues to evolve, its role in streamlining and enhancing Agile processes will undoubtedly become more pronounced.