MIrage
Mirage is an AR/Web experience that takes the user on an interactive journey of the most precious memories of the past four years I've lived in Savannah. It is a new way to navigate memories and experiences.
The experience enables the user go out and engage with the story in their own timeline. The audience connects and becomes the spector to then relive the memories in three dimensions right then and there.
The experience enables the user go out and engage with the story in their own timeline. The audience connects and becomes the spector to then relive the memories in three dimensions right then and there.
Role:
Branding, UX/UI, Design Systems, Graphic Design, Creative Direction
Tools:
Figma, Spark AR, Adobe Aero, Photoshop
The design process
I planned out the project with a comprehensive 13-week timeline to stay on top of tasks and attack problems within the tight deadlines I had set for myself.
Why Web & AR?
Typically film, photography and social media have become the most common way of sharing stories. With media being so readily accessible we are bombarded with copious amounts of things that contest for our attention daily makes lot of the content meaningless in and forgettable down the line.
Proof of concept
Before jumping into the deep end, I made a prototype of the web and AR interaction. This was to test my capabilities with code and AR to test and the software of choice where I would flesh out the rest of the project on.
Prototype in Swift playgrounds
Prototype in AR
Breakdown
The illustrations were separated into different layers. To mimic how things were going to be arranged in AR. This separation created a sense of depth when the user viewed the illustration.
One of the caveats of using 2D assets in AR is that it limits the range of motion of tilting or walking around the layer space, breaking the illusion. A great solution for this problem is to use a frame in front of the picture plane to get more range of motion from the user's perspective and separation between the assets.
Final Illustration
Sketch
UX/UI
Designing the interface for the web app was one of my favorite parts of this project.
I utilized Figma to create user flows, wireframes, mock-ups, and high-fidelity prototypes.
The flow of the page consisted in having the user scroll through the initial concept and formation of mirage to then proceed to interact with the web or interactive portions of the site.
Wireframes and page flow
Setting up lo-fi wireframes before filling in content to testing the most effective flow for the user was essential to keep the clicks to the minimum and increased engagement to the maximum.
After testing the flow with users I decided to put a some prototypes together to test out breakpoints and scalability for both mobile app and web app.
Design of the pages
The color palette for mirage was chosen through the conot of seeing life through rose colored glasses. Since this was the highlight of my most precious memories I the user to feel the warmth and nostalgia thought he use of color and hazy gradients.
Map design
When designing the map I wanted the user to experience a simplified versions of the Savannah area where the could see the point of the experience andwhere they were located.
That illustrated map was usable for the web version as the user would not be moving around and depending on Geolocation to reveal the pins when nearby.
In the interactive portion I used a customizable map to match the color and branding of the project. This allowed the user to get direction and not have them leave the app to continue with the interaction.
That illustrated map was usable for the web version as the user would not be moving around and depending on Geolocation to reveal the pins when nearby.
In the interactive portion I used a customizable map to match the color and branding of the project. This allowed the user to get direction and not have them leave the app to continue with the interaction.
WEB DEVELOPMENT
This was the technical portion of the project. I taught myself CSS and Javascript to make illustrations interactive on the web.
Here is a snip of my code for the tilt interaction.
Illustrations
I wanted the illustrations to be places where I had a fond memory or somewhere that was significant to me. I wanted them to capture the sense of depth and ephemerality to make the viewer notice the small details and invoke a sense of wonder.
