Dream Machine Archive
Project Type
User Experience Design
User Interface Design
Web Design
Programs Used
Figma
VSCode
Overview
Dream Machine is a site designed to house the packaging designs of physical film media such as dvd, vhs, and blu-ray.
The target audience for the archive are adults born between the years 1970 and 1999 who want to introduce the younger generation to physical media that was pervasive during their youth and young adult life.
The overall theme for the site's design and purpose is something I've
called "digital memento mori"
, a reminder of planned
obselescence across film formats.
Process
The design process for Dream Machine was centered around the lived experiences of the target audience.
Personas
Linda
female | age 42
Born and raised in the United States to an upper middle class family. College, married mother of 2 children (ages 1 month and 8 years). Her oldest daughter is curious about the stack of dvds and the dusty cabinet of vhs in her grandmother's house.
Vishnu
male | age 55
Immigrant from India, moved to United States in the early 80s, married, father to three children (ages 20, 17, and 8 years). They all live together and have moved several times, losing parts of their physical media collection in the process.
Design Process
In the constant chaos of life, people find little time to indulge in the process of buying physical media and watch it at home in the era of streaming.
How do we bring that experience, create nostalgia, and house the information?
Solution
Skeumorphism and personality are the driving force of the archive site, recalling obsolete technology for escapism and cultural transmission.
Wireframes
The inspiration for the site's style was custom media players from the 90s and early 2000s, specifically those of the widely celebrated Frutiger Aero and Dark Frutiger Aero aesthetics.
I used detail that evokes depth through light and shadow so that the site feels like a memory rather than a tool.
User Journey
I needed an interesting way for the user to navigate the site that didn't feel like a chore and involved user memory and imagination.
Home Video Stack
As home video enjoyers do, I stacked the different category links in the form of media players by the first category criteria: format.
My research landed me at the peak of video viewing technology, the disk changer dvd player.
Though it seems like only a small detail of a site frame, this discovery also led me to the idea of a universal remote that can be used to navigate the site.
The Assistant
As the site needed a way to navigate and also handle multiple filter types, I sought out a way to contain all of those things in one FOB.
The Assistant adds personalty and a satisfying form of interactivity with its blinking eye and design system integration.
The aesthetic influences I mentioned earlier have an overarching theme of futurism and the idea of digital technology creating a paradise.
The Assistant is what unifies the site's design. From color to shape contours to its absolute positioning on the site's pages. It is there to help.
The Assistant was based on the science fiction AI that are featured in the Halo video game series and the roaming programs from the TRON film franchise. Bright, luminous colors light the darkness as the Assistant helps the user accomplish their goal.
User Journey End
The user's end goal is to see the package art of the film they chose. For disk formats, disc art is included along with the slip cover.