Objective
The physical story board demonstrated that visitors were willing to contribute memories when they were given a clear prompt and an approachable collection method. However, it was restricted by the size of the board, the number of available cards, and the duration and location of the exhibition. The objective of the website was to digitise the existing stories and build a platform where the archive could continue receiving submissions from people outside the physical space.
Process Breakdown
Extending the Physical Collection
The original installation asked visitors to respond to prompts and categorise their family relationships through emotional and visual choices. I wanted to retain this reflective approach online rather than reducing the archive to a standard submission form and searchable database.
Exploring Submission Metaphors
I brainstormed several ways of gamifying the process of submitting and retrieving stories. The mailbox became the strongest direction because sending and receiving mail is already associated with personal messages, distance and connection. It also gave me several familiar objects to redesign, including postcards, stamps, envelopes, paper patterns and letters.
Building the First MVP
I developed the first minimum viable product with the basic features required for an archival website: submitting a story, filtering the collection and browsing existing entries. At this stage, the priority was testing whether the structure and functions worked, rather than producing a refined visual design.
Using Codex for Development
I used Codex to support the coding process and created a detailed prompt explaining the page structure, data categories, visual behaviour and desired user flow. This made me realise that working with generative coding tools still requires careful system planning, since vague instructions would create a website that technically worked but did not reflect the intended experience.
Applying the Art Direction
Once the MVP functions were working, I redesigned the website to match the visual identity of the wider project. This included the typography, colours, hard shadows, postcard imagery and playful interface elements that later became part of the Stories Mailbox identity.
Key Takeaways
- Building the website in functional stages allowed me to test the archive structure before investing too much time in visual refinement.
- The mailbox metaphor created a flexible system that could support story submission, filtering, browsing and receiving stories through one consistent theme.
Reflection
- The MVP helped move the archive from an abstract idea into something I could actually navigate and test.
- The development prompt became a design document because it required me to define every interaction clearly.
- The website only began to feel connected to the project after the visual redesign, showing that functionality and art direction were equally important in this case.