part 1: an app
Goal: creating a “time machine” integrated into the ios system (a pre-installed app), works parallel to “camera”, “maps”, “find my”, “photos”.
Inspiration: Folklore tells us that getting the hiccups means someone is talking about you or missing you. If you go through a list of your friends in your head, your hiccups will stop when you get to the memory of the friend who is the culprit.
Why: create a unique digital interaction for a way we have already appropriated text messaging. Think of “hiccups” as a brand of out-of-context-of-conversation media (pics, videos, links) that just reminded you of someone.
What will it do:
- send hiccups: in this case ((AR)) “spatial photos” → video-like snippets with notes anchored to locations in the snippet
- receive hiccups: open a spatial photo sent to you and view it by panning your phone around ((VR))
- save hiccups: and get notified when you are ever in the same location as a saved hiccup.
How: finding more purposes for lidar and gyroscope B-)
The work process that works for me, a reflection on UI/UX design:
“I’m not a UI designer” — me, on many occasions. But I really really like to believe that I could be one if I wanted to. Right now, I kind of want to.
I spent hours going back and forth between researching examples of what a wireframe was “supposed” to look like, and trying to draw out my own.
But I couldn’t help but end up drawing up something like this:
Because it was only as I was drawing out screens, did I realize more and more details and interactions that were necessary. Contrary to the typical nature of wireframes, my first go at it was very non-linear, but I believe that is also a reflection of of the complexity and details my draft unveiled — because neither systems nor edge cases operate linearly, and that was my goal from wireframing.
So instead of the typical “lo-fi” look of shades of grey, straight lines that represent text, and X’d boxes for pictures, I chose other visual symbols (/metaphors) — that are arguably equally anonymous, non-distracting, and familiar. For the sake of my project, where I am the only person working on it, my priorities in this step were to just move away from writing ideas and see what I could learn from just getting started making it.
As the TM is meant to be part of the library of iPhone pre-installed apps, I looked at existing services for design system. The “send a hiccup” page mimics the “send my location” on Find-My. On another note, it was actually quite interesting and very educational to re-make that page; I felt thrilled every time I realized another UI detail that I overlook as a user. A painter in a previous life, I know and respect the value of making master copies — and I guess the same can be said for UI design.
Next steps:
- make TM’s own visual identity (scrap that temp. photos logo w/ something sexy)
- demonstrate (animate) the recording interaction → visual + haptic feedback
- 1. capture → send flow (using buttons)
- 2. capture → send flow (using screen)
- 3. receive interaction, has to pan phone to view
- hi-fi prototypes w/ assets from animations
- 1. capture (visual scans → anchor messages) → send
- 2. capture → map view
- additional assets: copywriting & notifications
Starting to Animate
‘’
In this project, I made Time Machine, a “machine” (read: app) that lets you capture, send, and save “spatial photos” — a practice evoked when you enter a physical place that reminds you of someone you know. These spatial photos are live scans of a space with optional messages anchored to objects in the space. They are sent as “hiccups” (like, “Emily sent you a hiccup!”), a metaphor from folklore regarding the origins of hiccups being a signal that someone is thinking about you. To view, the receiver’s phone turns into a “virtual reality” window, where the phone must be panned around in parallel motions to see the full spatial photo sent. When you enter a location of a previously saved hiccup, a notification will be sent to re-view the spatial photo.
‘’
There are two components to the Time Machine interface: a capture page and a map page.
With Time Machine, you can:
- capture and save spatial photos
- send spatial photos as hiccups
- receive, store, and re-access spatial photos
- get notified about when you enter a location of a saved spatial photo
[1] Capturing a Spatial Photo
— animation about capturing
- how to use the buttons
- anchoring a voice message
To capture a spatial photo, open Time Machine. Click down on the side button to start the capture. Hold down on a volume button to transcribe a voice message anchored to that frame in the space. Release the volume button to stop the message, and hold it down again in another frame in the space to anchor another.
When done capturing, send or save it (or both).
[2] Receiving a spatial photo
— animation about receiving
- how the photo as a whole can be viewed anywhere, but the phone must move in the same motion → acts like a window
To view a spatial photo, handle your phone like a window into the photo and pan it around to view it.
You will then have the option to save it to your own map.
Next steps:
- design Start->End prototype & interfaces.
- Finalize the two animations (this is not going to take more than 4 hours)
- Done :-)
Visual System
Deliverable
Animations: [1] capturing mode, [2] receiving mode, [3] traveling mode
Interfaces: [1] screen-based, [2] button-based, notification flier
Prototype: open to send → revisit saved photos
System: notification system
Capturing Mode:
Receiving:
