How AI helped us write user stories for an app

[Editor’s note: This is the fourth in a series of blog posts about how builders can inject AI into their software development process.]

When it comes to software development, there’s much discussion (and debate) about AI’s role in writing code. However, there are many other ways ArcTouch product teams use AI tools to augment our productivity so we can put more time and energy into solving higher-value problems for our clients.

This post demonstrates how we use generative AI to turn email and Slack messages from project team members into user stories for a client’s app.

4 examples of AI-created user stories

The bigger the project — and the more people involved in it — the more important it is to write really good user stories. A clear set of user stories ensures alignment among technical teams on user needs, prioritization, and planning.

The content for user stories comes from a variety of sources — meeting notes, emails, Slack messages, UX/UI designs, etc. — and from a variety of project team members and client stakeholders.

We’ve investigated whether it was possible to use AI to convert visual designs directly into written user stories. While vision AI offers some exciting capabilities, it isn’t quite there yet. So, we turned our attention to the text-based magic of today’s large-language models (LLMs).

Here are four examples of how we used communications from team members and client stakeholders as prompts for AI to generate user stories. We used OpenAI’s GPT-4 LLM available through WPP’s Imagine AI, an internal creative production tool. No customization or specialized training of the model was done.

These are real examples from an ArcTouch financial services client and their credit card app. Some pre-prompts were done to establish the role of the GPT to respond like an experienced software product manager, and to provide context about the app’s functionality and the various user personas. Additionally, in the AI responses people’s names, email addresses, and Slack handles were shortened to remove personally identifiable information.

1. Create a user story based on a Slack chat

The example below shows how AI can create a new user story based on a short Slack thread between project members and our client stakeholders. Our product teams typically collaborate with clients in shared Slack channels, which allows us to discuss project details and make decisions with agility.

Sometimes, these threads can be used to provide AI with enough context to write a user story.

In this case, we discussed a missing loading state from the credit card app we were building. A QA team member saw that loading credit card data was taking longer than usual in some specific situations. She suggested adding a loading state to that component.

Here’s the Slack thread, which served as the prompt for GPT-4:

Prompt

Based on the discussion below, please, suggest a new user story:

Alice 9 minutes ago @here when I was doing the demo I noticed we do not have a loading state for the Make a payment screen. Should we have one? In the video it was kind of quick, but earlier it took a while to get the response. What do you guys think? RPReplay_Final1696611791.MP4

3 replies

Rafael 7 minutes ago I think we should have one

Sato 7 minutes ago Yeah, I agree

Vinicius < 1 minute ago I agree. I’ll add a ticket to the backlog.

AI response

Title: Add Loading State to Make a Payment Screen

User Story:

As a card member, I want to see a loading state when making a payment, so that I know the app is processing my request and I can wait for the response.

Acceptance Criteria:

– When the user initiates a payment, a loading state should be displayed on the Make a Payment screen. – The loading state should be visible until the payment processing is completed or an error occurs. – The loading state should provide visual feedback to the user, indicating that the app is working on their request.

Technical Detailing:

– To be defined

The key learning here is that getting the most out of AI requires some nuance — and some iterations. In most cases, a secondary prompt is to be expected. However, using AI to generate user stories based on team chats proved an effective and time-saving approach. This user story met our requirements.

2. Turn an e-mail thread into a user story

Another common way of communicating among project team members and client stakeholders is e-mail. Unlike chat, e-mails usually don’t generate dynamic responses from a range of participants. Still, a detailed email and responses can sometimes provide enough context to generate a user story.

In the email example below, we engaged with our client to clarify the need to update a payment authorization text for one-time and repeat payments in the app. We asked the generative AI tool to create a user story from the email thread:

Prompt

Create a user story based on the following email thread:

On Wed, Sep 27, 2023 at 3:38 PM Scott wrote:

Below is the copy for the authorizationText field for one-time and repeat payments. You don’t need to hyperlink any URLs.

For one-time payment:

By tapping “Make payment”, I authorize provider to schedule and initiate the bank payment as listed above. Additionally, I understand that I may cancel or modify my scheduled payments until 7:00 pm ET on the day the payment is scheduled to be withdrawn by visiting the Payment activity page. Same day payments made between 7:00 pm ET and 11:59 pm ET can be modified or canceled up to 11:59 pm ET that same day.

It will typically take 2 business days for your payment to be reflected on your account and your available credit to be updated.

Please note if your payment is made on your due date you may see a late payment fee applied temporarily to your account. This fee will be deducted from your available credit. Once your payment has been posted, the late fee will be automatically removed and your available credit will be adjusted. Please make sure your new payment is set up correctly.

For repeat payments:

I have selected the minimum due payment withdrawal option. The date of my first payment withdrawal will be 09/23/2023. Payment withdrawals will continue monthly, on the due date shown on my statement. The withdrawal will be reflected on my funding account statement as an ACH withdrawal. The amount and date of the payment will be printed on my monthly credit card account statement.

If the amount I selected is less than the minimum payment due, provider will increase the amount to equal the minimum payment due to ensure my account does not go past due and remains in good standing.

Any new payments that post to my account by 7:00 pm ET on the date of my scheduled withdrawal date, that are not returned, may reduce the scheduled payment amount:

If the sum of the posted payments, returned payments and disputes made on my account during the current billing cycle:

• Reduce the statement balance to zero or less than zero, my scheduled payment toward that statement payment will be canceled.

• Reduce the statement balance to an amount greater than zero but less than my scheduled payment, my payment amount will be reduced to the remaining balance owed.

• Reduce the statement balance to an amount greater than zero and more than my scheduled Minimum Due or Other Amount, my payment will remain as scheduled.

• I understand that to cancel a scheduled Repeat Payment, the same modification will be made for all future Repeat Payments.

This authorization will remain in effect until I cancel or modify my Repeat Payment Enrollment. I can cancel or modify my Repeat Payment Enrollment by logging on to www.providerwebsite.com and select Repeat Payments by 7:00 pm ET on the scheduled withdrawal date. Provider can cancel these scheduled payments at any time.

From: Vinicius Sent: Tuesday, October 3, 2023 12:20 PM To: Scott; Lorian Cc: Andre; Sergey Subject: Re: Payment authorizationText field

Hey Scott, should we add one text to each payment form according to context (one-time or repeat payment)?

I was talking to Lorian and she mentioned that in her perspective, the text would be affected by the dropdowns. She understands the text may vary according to the selected options as well.

Thanks, Vinícius

From: Scott Tue, Oct 3, 8:27 PM (3 days ago) To: me, Lorian, Andre, Sergey

Yes, the “one-time” screen should use the one-time text I sent below.

When setting up repeat payments, the repeat payments text should be used.

AI response

Title: Update Payment Authorization Text for One-Time and Repeat Payments

User Story:

As a card member, I want to see the appropriate payment authorization text when making one-time or repeat payments, so that I understand the terms and conditions associated with my selected payment option.

Acceptance Criteria:

– When the user selects a one-time payment, display the one-time payment authorization text provided by Scott. – When the user selects a repeat payment, display the repeat payment authorization text provided by Scott. – The displayed authorization text should be consistent with the user’s selected payment option and should not be affected by other dropdown selections.

Technical Detailing:

– Create a function to update the authorization text based on the user’s selected payment option (one-time or repeat payment). – Ensure the text is properly formatted and displayed according to the app’s design guidelines.

Related Links:

– [Email Thread Reference]

Notice that the AI output did not include the actual copy of the payment authorization text for one-time and repeat payments as specified in the email. This omission made the user story incomplete.

We were more successful with a re-prompt to the AI with an additional request to include the specific copy for both one-time and repeat payment authorization texts.

Re-prompt

Review the user story to include the copy in the user story.

AI response

Title: Update Payment Authorization Text for One-Time and Repeat Payments

User Story:

As a card member, I want to see the appropriate payment authorization text when making one-time or repeat payments, so that I understand the terms and conditions associated with my selected payment option.

Acceptance Criteria:

– When the user selects a one-time payment, display the following one-time payment authorization text:

“By tapping “Make payment”, I authorize provider to schedule and initiate the bank payment as listed above. Additionally, I understand that I may cancel or modify my scheduled payments until 7:00 pm ET on the day the payment is scheduled to be withdrawn by visiting the Payment activity page. Same day payments made between 7:00 pm ET and 11:59 pm ET can be modified or canceled up to 11:59 pm ET that same day.

It will typically take 2 business days for your payment to be reflected on your account and your available credit to be updated.

Please note if your payment is made on your due date you may see a late payment fee applied temporarily to your account. This fee will be deducted from your available credit. Once your payment has been posted, the late fee will be automatically removed and your available credit will be adjusted. Please make sure your new payment is set up correctly.”

– When the user selects a repeat payment, display the following repeat payment authorization text:

“I have selected the minimum due payment withdrawal option. The date of my first payment withdrawal will be 09/23/2023. Payment withdrawals will continue monthly, on the due date shown on my statement. The withdrawal will be reflected on my funding account statement as an ACH withdrawal. The amount and date of the payment will be printed on my monthly credit card account statement.

If the amount I selected is less than the minimum payment due, provider will increase the amount to equal the minimum payment due to ensure my account does not go past due and remains in good standing.

Any new payments that post to my account by 7:00 pm ET on the date of my scheduled withdrawal date, that are not returned, may reduce the scheduled payment amount: (…)

I understand that to cancel a scheduled Repeat Payment, the same modification will be made for all future Repeat Payments.

This authorization will remain in effect until I cancel or modify my Repeat Payment Enrollment. I can cancel or modify my Repeat Payment Enrollment by logging on to www.providerwebsite.com and select Repeat Payments by 7:00 pm ET on the scheduled withdrawal date. Provider can cancel these scheduled payments at any time.”

– The displayed authorization text should be consistent with the user’s selected payment option and should not be affected by other dropdown selections.

Technical Detailing:

– Create a function to update the authorization text based on the user’s selected payment option (one-time or repeat payment). – Ensure the text is properly formatted and displayed according to the app’s design guidelines.

Related Links:

– [Email Thread Reference]

The second output generated by the AI was more accurate and complete, providing a clearer understanding of the feature requirements and ensuring that the user story met the team’s needs. Running the AI twice allowed us to refine the user story and better align it with the stakeholder’s vision for the product.

3. Describe a screen to generate a user story

Sometimes we create user stories based on wireframes or visual designs. This example uses a UX wireframe design for a login screen in the app. The screen contains a title, subtitle, two required input fields (email and password), an optional checkbox to remember the login for 60 days, error messages for unfilled required fields, and options for “Forgot Password” and “Register.”

Based on this description of the desired screen, we used AI to generate a user story that included both the UI and logic rules.

Prompt

Create a user story based on the description below:

I see a wireframe of a new screen to be included in the app.

It’s a login screen. I see Title, subtitle and 2 different inputs: e-mail and password (both required). I also see an optional checkbox to remember the login for 60 days.

If a required field isn’t filled, an error message appears according to each field. Suggest the proper messages.

Below the form, I see 2 options: “Forgot Password” and “Register”. Infer the expected behaviors based on option labels.

At the bottom of the page, I see a Log In button, that will lead the user to a log in action.

Remember to include acceptance criteria and technical details based on regular login flows and link to Figma source file: https://figma.com/url

AI response

Title: Implement Login Screen with Email, Password, and Optional Remember Me Feature

User Story:

As a card member, I want to log in to the app using my email and password, with an optional feature to remember my login for 60 days, so that I can access my account securely and conveniently.

Acceptance Criteria:

– The login screen should display a title and subtitle. – The login screen should have two required input fields: email and password. – An optional checkbox should be available to remember the user’s login for 60 days. – If a required field is not filled, display an error message: – For the email field: “Please enter your email address.” – For the password field: “Please enter your password.” – Below the form, there should be two options: “Forgot Password” and “Register”. – Tapping on “Forgot Password” should initiate the forgot password workflow. – Tapping on “Register” should lead the user to the registration process. – At the bottom of the screen, there should be a Log In button that leads the user to a login action upon tapping.

Technical Detailing:

– Implement form validation for email and password fields. – Integrate the login API to authenticate the user. – Store the user’s login information for 60 days if the “Remember Me” option is selected. – Handle error scenarios such as incorrect email/password or server issues.

Related Links:

– [Figma Design Reference](https://figma.com/url)

This AI response combined both the UI and logic rules of the login page into a single user story. While this approach covered all the necessary details, it might be more effective for the development team to separate the user story into two distinct stories: one for the UI and the other for the logic rules. This would allow for better organization and ensure that each aspect of the feature is thoroughly addressed and implemented.

A re-prompt achieved this, with an additional request to split the initial user story into two separate stories, one for the UI and the other for the logic rules.

Re-prompt

Split this user story in two: one for UI and the other for the logic rules.

AI response

Title: Implement Login Screen UI

User Story:

As a card member, I want to see a visually appealing and user-friendly login screen, so that I can easily enter my email and password to access my account.

Acceptance Criteria:

– The login screen should display a title and subtitle. – The login screen should have two input fields: email and password. – An optional checkbox should be available to remember the user’s login for 60 days. – Below the form, there should be two options: “Forgot Password” and “Register”. – At the bottom of the screen, there should be a Log In button.

Technical Detailing:

– Design the login screen according to the app’s design guidelines. – Ensure proper spacing and alignment of elements on the page.

Related Links:

– [Figma Design Reference](https://figma.com/url)

– – – –

Title: Implement Login Page Screen Rules

User Story:

As a card member, I want the login screen to validate my email and password and provide an option to remember my login for 60 days, so that I can securely and conveniently access my account.

Acceptance Criteria:

– If a required field is not filled, display an error message: – For the email field: “Please enter your email address.” – For the password field: “Please enter your password.” – Tapping on “Forgot Password” should initiate the forgot password workflow. – Tapping on “Register” should lead the user to the registration process. – The Log In button should lead the user to a login action upon tapping. – Store the user’s login information for 60 days if the “Remember Me” option is selected.

Technical Detailing:

– Implement form validation for email and password fields. – Integrate the login API to authenticate the user. – Handle error scenarios such as incorrect email/password or server issues.

Related Links:

– [Figma Design Reference](https://figma.com/url)

This generated two well-structured user stories that covered the UI and logic rules, respectively, making it easier to manage and implement the feature.

4. Turn a bug report into a user story

In this example, a request was received to change the behavior of a feature in an app. Specifically, on one screen in the app, search results were not being refreshed automatically when the user cleared the search field. To address this change request, we used AI to help create a new user story based on the provided bug report.

The bug report contained detailed information about the devices and operating systems affected, the current behavior, steps to reproduce the issue, and the expected behavior. By providing the AI with this context, it could create a user story aligned with the product requirements, addressing a change request on that specific feature.

Prompt

Help me to create a new user story based on the bug report below.

Title: [Reopen] [Filter and Search] When the user clears the search field the search result does not refresh

Description:

Devices: iPhone 14 Pro Max iOS 16 iPhone 13 Pro Max iOS 16 iPhone 12 iOS 16 Samsung Galaxy S23 Ultra Android 13 Samsung Galaxy S22 Ultra Android 12 Samsung Galaxy S22 Ultra Android 13

Current behavior: On the Transactions screens, when the user searches a transaction by keyword and then taps on the “X” button or deletes the keyword using the keyboard, the app is clearing the search field but not refreshing the search results.

How to reproduce: 1. Open the app 2. Tap on the account tile or account icon on the bottom nav bar 3. Login 4. Tap on the “See all” button 5. Enter a keyword on the search field 6. Clear the search field by tapping on the “X”/deleting the word 7. Check the behavior

Expected behavior:

On the Transactions screens, when the user searches a transaction by keyword and then taps on the “X” button or deletes the keyword using the keyboard, the app should automatically refresh the search results.

Evidence: Bug – clear search.MP4

AI response

Based on the bug report, here’s a user story to address the change request:

Title: Update Transactions Screen to Refresh Search Results When Clearing Search Field

User Story:

As a card member, I want the search results to be automatically refreshed when I clear the search field, so that I can easily view all transactions without manually refreshing the screen.

Acceptance Criteria:

– When the user enters a keyword in the search field and then clears it by tapping the “X” button or deleting the keyword using the keyboard, the app should automatically refresh the search results. – The refreshed search results should display all transactions, not just the ones matching the previously entered keyword. – This behavior should be consistent across all supported devices and operating systems mentioned in the bug report.

Technical Detailing:

– To be defined

AI turned the bug report into a user story quickly, and provided all the information needed for engineering and QA to focus on implementing the solution.

Overall takeaways on using AI to generate user stories

Our experiences using generative AI to create user stories were an obvious success.

Without much effort, we were able to effectively prompt GPT4 using information from our daily project team communications and quickly generate development-ready user stories. Of course, we needed to re-prompt the AI in many cases, but that’s mostly because it simply didn’t have enough clear context. Even with this extra effort, the productivity boost clearly benefited the project and our client and allowed us to spend more time doing the innovative creative and technical work they expect from ArcTouch.

Follow along

To read our series about injecting AI into software development, join our mailing list and follow us on LinkedIn and X.

About ArcTouch

ArcTouch has been building lovable apps, websites, and connected experiences for more than 15 years. And now we’re using AI to do that faster and better than ever before. Want to learn more? Contact us for a free consultation.