Patchwork

Inspiration

The theme for this designathon — Nostalgia and Joy — hit close to home for our team. We started by asking ourselves a simple question: what did we do before social media? What felt genuinely joyful, creative, and personal before everything became curated, optimized, and performative? We eventually landed on scrapbooking. There was something so tactile and intentional about sitting down by yourself or with your friends after a trip and making something together: cutting out photos, arranging them on a page, adding little handwritten captions and stickers. It was about the memory, not the audience. That feeling of making something for yourself and the people you love, rather than for likes or followers, is exactly what we wanted to bring back. From there, Patchwork was born — a collaborative digital scrapbook app that lets friends create, decorate, and keep shared memories together, in real time, in a visual language that feels warm, personal, and unmistakably human.

What it does

Patchwork is a mobile app centered around Events — shared spaces tied to a real-life moment, like a trip to Florida, a dinner out, or a random weekend with friends. Here's how it works:

• Users add friends and create an Event, naming it and inviting collaborators.
• Inside the Event, collaborators build scrapbook pages together in real time, adding photos from their own camera rolls, placing stickers (both included and custom-uploaded), writing text in expressive fonts, doodling, and changing the page color or pattern.
• Changes are visible to all collaborators live, with avatar indicators showing who is currently editing — a nod to the collaborative energy of early 2000s web tools.
• Finished pages can be exported as PNG or PDF to keep forever, print, or share.
• Past Events are saved in a gallery, a personal archive of memories always available to revisit or add to.

The aesthetic is deliberately Y2K and early 2000s: warm, saturated colors, layered stickers, bold display fonts, and a canvas that feels like a real page rather than a sterile digital interface.

How we built it

We started by using Figma Make to gain inspiration for layout and function. This allowed us to explore different screen structures and UI patterns quickly, iterating on the canvas editor, the home feed, the friends list, and the export flow before committing to any direction. We drew our visual inspiration from early 2000s web aesthetics and warm autumn color palettes, deliberately moving away from the clean, minimalistic look that dominates modern apps. We wanted Patchwork to feel bold, human, and slightly imperfect in the best possible way.

We transitioned over to classic Figma, creating frames and auto layouts, tweaking margins and gaps to our liking. The design process was deeply collaborative within our own team, which felt fitting given the product we were building. We fed off each other's ideas constantly — one small suggestion would spark a larger feature or a completely new direction. The music animation and the scrapbook element-adding animation, for example, emerged organically from team conversation rather than from any single planned design decision.

Challenges we ran into

Our biggest challenge was animation and interactivity within Figma. The core experience of Patchwork — dragging photos and stickers onto a canvas, repositioning them, layering them — is fundamentally kinetic and hands-on. Representing that feel in a static design tool was genuinely difficult. Figma's prototyping tools allowed us to show transitions between states, but conveying the fluid, tactile experience of placing a polaroid on a page or "plopping" a sticker down in exactly the right spot required a lot of creative workarounds. We were not entirely able to capture the full drag-and-drop experience, and that remains an area we would want to address in a higher-fidelity prototype or a functional build.

Accomplishments that we're proud of

We're proud of how cohesive the visual identity of Patchwork feels. From the home feed to the textured canvas to the elements popup with chunky, contrasting icons, the design holds together as a world — it feels like a place you'd want to spend time in. We're especially proud of the animations we achieved: the music animation and the scrapbook element-adding animation both added a layer of delight that elevated the prototype from a static mockup to something that actually felt alive. Those small moments of joy were exactly the point. We're also proud of how quickly we aligned as a team on a concept and executed it. Starting from the broad theme of nostalgia and landing on something as specific and fully realized as Patchwork — with a name, a visual language, a full feature set, and a working prototype — in a single designathon session felt like a real accomplishment.

What we learned

We learned that the best ideas often come from the simplest questions. "What did we do before social media?" was the question that unlocked everything. Sometimes the most powerful design prompt is a personal one. We also learned how much momentum a team creates when everyone is genuinely excited about what they're building. There's a reason collaboration is at the heart of Patchwork — we experienced firsthand how one small idea from one person can become a defining element of the whole project. On a more personal level, building Patchwork reminded us of something the prompt itself was pointing to: we miss the older days. We miss the version of sharing memories that was for us, not for an audience. That feeling informed every design decision we made.

What's next for Patchwork

There's a lot of room to grow. Features we'd love to build out include:

• Live collaborative view — a real-time activity feed showing exactly what each collaborator is adding or editing, similar to Google Docs' cursor tracking but more fun.
• Cross-app integration — the ability to pull photos directly from Instagram or Google Photos and share finished pages back out with a single tap.
• Video support — embedding short clips into scrapbook pages to make memories feel even more alive: a video from the dinner, a boomerang from the trip, a voice memo from the road.

Built With

• figma