We build a large amount of interactive content in Articulate Storyline, and flipcards are a recurring part of that work. At 50 courses a year with 5 modules each, even designing flipcards for just 2 modules adds up to **100 flipcards annually**. I built a [[Products/Flipcard Generator|flipcard generator]], which: - **Reduced design time** from 0.5–5 hours to 2–5 minutes - **Eliminated the need for an Articulate license** to create standard flipcards - **Freed licensed Storyline users** to focus on higher-value creative work - **Built accessibility into the process by default** ### The Problem #### Creating flipcards took more time than the task justified The first flipcard a designer creates in Storyline can take as long as 5 hours. With practice, that drops to 1-2 hours, and eventually to about 30 minutes when working from templates. But even at 30 minutes per card, 100 flipcards a year still adds up to 50 hours of production time before accounting for review and accessibility checks. #### The work was repetitive and low-variance Creating flipcards teaches useful Storyline skills the first few times. After that, the work becomes routine. Layouts are predictable, the interaction pattern rarely changes, and the content is often finalized before production begins. For experienced Storyline users, repeated flipcard creation was a chore that pulled time away from higher-value work. #### Not everyone can do it Not every designer had a Storyline license, and licenses cost thousands of dollars per seat. When a designer without a license needed a flipcard, they had to request one from someone who did have access. That turned a standard production task into a dependency on a small group of licensed users, introducing delays that could stretch from days to months depending on workload. ### Constraints - Flipcards still needed to look polished and consistent - Designers needed a path for creating standard cards without relying on Storyline - Accessibility requirements had to be handled reliably, not as an afterthought - Allow designers to still build something custom from scratch ### Design Decisions #### 1. Standardize without removing flexibility I designed the generator around a standardized layout for the most common use case. This made the routine task fast and repeatable, while still leaving room to design custom interactions in Storyline when a project called for something outside the standard pattern. #### 2. Remove the license bottleneck The generator made it possible for all designers to create standard flipcards without a Storyline license. Instead of submitting a request and waiting for a licensed user to pick it up, designers could generate the card themselves in minutes. This removed the dependency on a small set of license holders and reduced the number of handoffs required to complete a simple production task. #### 3. Build accessibility into the output The generator also handled the accessibility issues that typically made flipcard production more fragile in Storyline. Flip animations can be finicky, hyperlinks inside cards can interfere with interaction behavior, and accessibility details such as alt text, keyboard behavior, and color choice often require deliberate QA. By handling these behind the scenes, accessibility was no longer dependent on each individual designer remembering and rechecking the same details every time. #### 4. Eliminate duplicate QA Before the generator, the workflow created two separate QA burdens. Designers had to review flipcards when someone else built them, and they also had to check accessibility requirements such as color contrast, keyboard behavior, and alt text. Once designers could generate the flipcards themselves and those requirements were built into the output, both forms of QA were effectively removed from the standard workflow. <div> <iframe data-flipcard-theme-sync="true" src="https://pul-kit.github.io/padh.ai/assets/portfolio/2026_Flipcard_Generator.svg" title="Flipcard workflow animation" loading="lazy" style="width: 100%; display: block; border: 0; aspect-ratio: 48 / 7; background: transparent;" ></iframe> </div> The result was a much faster and more reliable process for producing a common interaction pattern. Standard flipcards went from taking anywhere between 0.5 and 5 hours to just 2-5 minutes. The generator freed designers to focus on creative problems that actually required their expertise.