🏆 WINNER: Storytelling
Atlassian's Codegeist: Magic Stories

Design Lead in Collaboration with Tech Lead
Leveraging Generative AI to create user stories in Jira
Deadline to submit the hackathon was October 24, 2023. We started on the evening of October 21st.

Two Sisters:  Leveraging Generative AI to create user stories

Every year, my sister and I try to work on an idea together.  Jenearly is in Acton, MA, and I’m in sunny Southern California 10 minutes from Disneyland in a city called Tustin.

We're not your run-of-the-mill techies; we're card-carrying members of the Mom Squad too. Sure, we've faced tech-industry challenges, but nothing can stop the mighty combo of tech-wizards and super-moms, because we all know moms get things done. We've got diaper bags and laptops, multitasking like bosses in the world of ones and zeroes.
With a tight development deadline, we delivered and won! Our idea? We leveraged generative AI to create user stories in Jira.
Try it out:
Magic Stories Prototype
2023 | Most Valuable Storytelling
Our Story Submission
Strategy, Wireframe, high-fidelity Design, Process
This year, we set our sights on Atlassian's Codegeist Unleashed Hackathon, and decided to dive into the world of AI together, specifically in the software development workflow. With just two days left before the submission deadline, my sister, reached out to me to join her and without a moment's doubt, I accepted.I didn't even have time to blink. It was like someone had shouted, "Free pizza!" I pounced on the opportunity faster than a cat chasing a laser pointer. The hackathon, my dear friends, was going to be a wild two day affair.

Hackathons are a great place to find team members and work on ideas. We highly recommend it. And as a product designer, we can even use it in our portfolios and showcase our design process.

Here's our take on our Atlassian's Codegeist Unleashed Hackathon Experience


The Design Process

For reference, here's a link to our Figjam
On day one, we were like a bunch of caffeinated squirrels, ready to embark on our creative quest. We jumped headfirst into the adventure, launching a Figjam board. Then, we hopped on Google Hangout. Each of us threw in our ideas and talked through them.

As the day unfolded, we realized we needed to narrow down to one problem that was a huge enough pain point we could solve with AI in a short amount of time.
m as we discover what we wanted to do

The Problem

We narrowed it down to creating user stories but this time leveraging generative AI to do so. My sister, a tech lead, often found herself drafting tickets when her product manager was busy, and I, as a product designer, had walked a similar path. We understood all too well the complexity involved in crafting user stories and adding acceptance criteria.

In those highly regulated industries, documentation was the queen bee, and we'd seen enough paperwork to rival the Library of Congress. Our team had spent more time documenting than a detective in a never-ending crime novel. It was like watching an action movie where the heroes save the day by filing paperwork.

Now, why do we need these user stories to be as detailed? Because it's like the secret sauce to make our process sail smooth. Without it, our project would move slow. So, we're basically writing the superhero script that saves the day, one user story at a time.

Flow & Wireframe
We encountered bugs and limitations as we worked on this together. We had to use Atlassian's Forge API and a limited design component library.

Because of the time constraint, we knew that there will be some things we'd have to cut out, or it would be too much to do.

what the wireframe looks like
Ah, software development, where arguments are as common as computer screens! It's like a digital showdown where keyboards do the talking, and heated debates are just part of the daily workout.But guess what?

Those arguments are necessary. They might sound like chaos, but they're secretly helping us speed up our product launch.It's like our digital version of "Rock, Paper, Scissors" but with way higher stakes and, luckily, fewer paper cuts. We were aligned.

The Challenges

Some of the changes and constraints we faced in the development of this project:

Development Factors
- Limited amount of time.
- We started on October 21, 2023
- API are free but with limitations
- Cost of API calls over a limit concerns
- Limited Forge capabilities

Design Factors
Design constraints
- User experience concerns

We know that an ideal AI experience that is native to Atlassian would be ideal, however, that's not the case, as we are outsiders and have to leverage their Forge API.

Tools we used to communicate
Facebook Messenger
- Google Hangouts
- Loom (to do async videos) - we are in different time zones.

The Process

After much brainstorming and deliberation, we zeroed in on a solution. Our chosen mission: to unlock the potential of Jira and AI, crafting user stories from the issue's title or summary.

Jenearly wanted to include a Figma Preview for attachments (it was something we worked on previously for another Atlassian project).

The path ahead presented a lot of choices, a debate between a modal approach and an inline solution came up.

In the face of some tricky modal issues, we embraced the simplicity of an inline solution. It made perfect sense. Onward we go.

An example issue shown in a screenshot of a chat

The Solution

For the user, after a ticket is created, there is a title or summary created. We figured this idea would help be the text to go into the prompt.

To generate a user story, a user, can click on ‘Magic Stories’ and launch the app by generating a prompt from the description as seen. Once it’s added, you review and add it to the description. Refresh and it's there.

You can even go back to edit your description at anytime.


This took many quick iterations. We haven't user tested it. If we had more time we would have done this.

Sure, our creation might have a few usability quirks, but hey, it's like building a spaceship with a few extra buttons – it might not look pretty, but it's going to get us to the moon! It's our MVP.

Built with:

To kickstart our project, we leveraged Figjam for initial brainstorming. Subsequently, we transitioned to Figma to gain a comprehensive understanding of the user experience.

For the foundation of our app, we sought the following essentials:

An integrated development environment (IDE): We opted for VS Code. To collaborate effectively with the Atlassian Forge CLI, we required the following tools: Docker Desktop Node Git GitHub Virtual Machine (VM) enabled.

As we commenced app development, we identified the following critical dependencies and elucidated their significance:
@forge/api fetch: Vital for making API calls to Figma and Ai21. storage: Necessary for securely storing API keys, should users choose to do so. @forge/ui The cornerstone of our app's user interface, encompassing everything from buttons to modals.

In terms of our API interactions:

The core functionality of our app relies on Ai21. We simply send a prompt text to their API, and in response, receive AI-generated text precisely tailored to our request. An intriguing feature involves interfacing with Figma. If a user incorporates a Figma link in their prompt, our custom listener seamlessly processes it through Figma's API, creating a dedicated section for it.

What about us?

Honestly, this was one of the most fun project we got a chance to collaborate on, where we had fun using AI in mostly everything we did. It wasn't just limited to our app, but in how we created a theme out of it in our design and content.

Even our headshots were AI generated. Our team name was AI generated.

We know AI is the future. Somehow while balancing the life we have, we managed to make an app, raise our kids, create content, bond and have fun.

This funfest was so good that we've decided to turn it into a yearly tradition. In fact, we've got our sights set on another hackathon! Two in a year? You better believe it!

We're like tech-savvy superheroes, always growing, and learning new tricks, and not even having a family can slow us down. We've become the Jedi masters of time management, and that's why we rock the 5AM wake-up call – it's the secret sauce to our superpowers.

What's next for Magic Stories

- Improved user experience in Jira
- Ability to do more than user stories and incoproateinto Confluence deveraging Open AI's ChatGPT.

Special Thanks

Atlassian for hosting the Codegeist Unleashed HackathonJason Fukura, CUA for your wireframe kit wireframe kitFigma for allowing us to jam and create our workCapCut for being an awesome free app I could use to edit my videosChatGPT this wouldn't have ever been possible if it weren't for you

Magic Stories step 1Magic Stories Step 2Stories Step 3