Figma Sketch & Idea:

I’d like to create an interactive poem builder inspired by e.e. cummings. Since his poems are inherently abstract, I thought it would be cool to build a poem builder using actual lines from his poems to see if users can create a compelling re-organized e.e. cummings poem of their own.

My user flow would be…

1. Homescreen with a ‘start here’ button
2. Pick a first line with 3-4 options for the first line
3. From each ‘first line’ page, branch into options for 2nd, 3rd, 4th lines etc, all linking to different pages that have new line options. This will result in a ton of pages but each one would be relatively simple from an HTML/CSS perspective
4. I’m hoping to use JS to track the clicks and create an HTML element on the exit page (which all branched out pages will link to) that’s storing all the clicked lines
   1. Would be even cooler if I could have a stored database of all the iterations that users have created to browse??

Here’s my figma mockup (it’s new to me so not so sophisticated)

Omar comments

• This is a great fit for the project. I think something abstract like a poem works well in a web context where you’re programmatically adding/removing elements
• If you were to use Javascript (not required)
  • You could basically add/remove poem lines without directing the viewer to a different page — it would all be in the same page.
  • You could also introduce an element of randomness — so each user’s experience can be a bit different
  • For your idea of tracking clicks — each webpage would basically create a new javascript context.
  • Having a ‘real’ database would be too challenging unless you have prior experience. That said — there’s something called ‘localStorage’ that you can leverage. It’s basically a built-in database that a web browser offers. It persists stored items until a user deletes their web browser cache. This is fairly accessible and I think you can figure it out, but if you’re completely new to Javascript, it may still be a bit tough for this project
    • For context, there are two ways that web apps (say, twitter) track data: first they either use Javascript to morph a single webpage (”single page application”), or they store data to a persistent database that can be accessed across pages. Both of these things I would say are too challenging for the scope of this project.