Momento

Interactive Design · Figma, Fabulation

Overview

A fabulation project that theorized what user interactions may exist in a world where people can share and sell memories through digital software. The final product is a satirical commentary on how such a world may capitalize on consumers through aggressive design practices.

Momento was produced by a group of four over two months.

https://youtu.be/eNMbRx4Juas?si=RTB1u4YvqAKiGBQp

Try it Out - Live Demo

In this project, I acted as a design and functionality lead. I helped establish the design and layout of each of the pages and directed team members on how best to expand the application with each iteration.

Additionally, I added most of the technical features that users see and interact with such as the pop-ups, buttons, log-in features, and payment features.

To experience the demo for yourself, feel free to interact with the embedded file to the right.

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FZVjvTSWx0NAZw8ukbz38r4%2FMomento-App%3Ftype%3Ddesign%26node-id%3D94-457%26t%3D3ptWJfWBrd95dN7v-1%26scaling%3Dscale-down%26page-id%3D94%253A167%26starting-point-node-id%3D94%253A457%26mode%3Ddesign

Fabulated Ideation

By using fabulation as our speculative design approach, we combined elements of design fiction and critical design to create the futuristic world that Momento exists in.

Through this process we aimed to provoke discussion through our world’s imagined scenario to consider: What would happen in a world where memories themselves are commodified through Memory Tourism?

We imagined the exchange of memories would be similar to social media platforms such as spotify, instagram, and twitter and took inspiration from their design structure.

Early world concept documentation

Early world concept documentation

In the end, we sought explore how aggressive advertising and social media addictions work together in heavily consumerist environments and how they affect the user’s experience.

Breakdown of the economic shifts seen in Momento’s world.

Breakdown of the economic shifts seen in Momento’s world.

Documentation of the Momento’s effects that guided out design process.

Documentation of the Momento’s effects that guided out design process.

Design Process

Making Momento comprised of a three step iterative process where each version received in-depth critiques from our peers and mentor, Noura Howell. Taking these suggestions, we further expanded the concept until reaching the final version.

Prototype - Version 1

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FeeDMt2akOZ4AFUsm2yx1BQ%2FMomento-v1%3Ftype%3Ddesign%26node-id%3D179-33%26t%3D0kaxhMsR08g3TWHR-1%26scaling%3Dscale-down%26page-id%3D27%253A76%26mode%3Ddesign

This initial prototype used simple shapes and greyscale tiles to test the potential layout and flow of Momento as we assessed potential design schemes.

Additions:

![Screenshot of all available pages in the v1 prototype

Pages from left to right: Mementos, You, Home, Posts, Premium](https://prod-files-secure.s3.us-west-2.amazonaws.com/809c3b09-2355-4688-b0d5-26e2bcbd19d0/a2b86e51-1f7e-4742-8472-33e68b5ebd21/Untitled.png)

Screenshot of all available pages in the v1 prototype

Pages from left to right: Mementos, You, Home, Posts, Premium

Prototype - Version 2

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FRIfmvOGkD9lMKiQXYoNuMF%2FMomento-v2%3Ftype%3Ddesign%26node-id%3D124-409%26t%3DKlvekRqt2e13NRjH-1%26scaling%3Dscale-down%26page-id%3D124%253A159%26starting-point-node-id%3D124%253A409%26mode%3Ddesign

Based on critiques on our initial prototype, our team expanded on the existing pages, added a new page, and applied a color scheme to the prototype.

Additions:

Altered:

![Screenshot of all pages in v2 prototype.

Pages from left to right: You, Momentos, Home, Posts, Premium, Upload](https://prod-files-secure.s3.us-west-2.amazonaws.com/809c3b09-2355-4688-b0d5-26e2bcbd19d0/d6e447e2-a3a4-4d6b-9c12-ed63032f089d/Untitled.png)

Screenshot of all pages in v2 prototype.

Pages from left to right: You, Momentos, Home, Posts, Premium, Upload

Final Version