Digital Compass
- UX Design
- Product Design
- Prototyping
- Schoolwork: UCLA Extension
I was tasked with creating a multi-interface product and chose to work on a navigational system that utilizes several components: custom handheld hardware, a touch-screen terminal, and an augmented reality (AR) powered navigational app.
I named the system "Digital Compass." It could be modified for use in any hard-to-navigate area. To demonstrate how the Digital Compass (DC) worked, I wanted to show it being used in L.A.'s Metro rail system.
Different states of the handheld Digital Compass
Initial sketches demonstrate how the DC Phone App would work. Initially, it'd be used as a regular map app (a-la Google Maps or Apple Maps). However whenever a user approached a train station, they could activate a special AR mode revealed a path to find their train.
The system diagram shows how all the different components would interact with each other.
Initial sketches and system diagram
User journey matrices were created for the Handheld DC and the DC Phone App.
The interactions described here would be used to create prototypes and product demonstrations.
User journey matrices
After choosing an interaction for each device, these interactions were broken down into a detailed series of steps to later illustrate in prototype form.
Interaction flowcharts
Sketches of the DC Terminal's user interface flow were drawn, and guidelines were created for what the Handheld DC state's would look like.
DC Terminal user interface flow sketches and Handheld DC guide
Interactions for the handheld Digital Compass and DC terminal illustrated step-by-step.
Handheld DC and DC Terminal interaction steps
Different states were animated to show what the user would see while using the Handheld DC.
Handheld DC animation states
At a DC Terminal, a user could obtain a Handheld DC, orient their current device, or, add fare to their trip.
DC Terminal prototype
If the user preferred to use their phone instead, they could open the DC Phone App and utilize its' AR feature to guide them through the metro system.
App and AR-directional prototype
Digital Compass
- UX Design
- Product Design
- Prototyping
- Schoolwork: UCLA Extension
Different states of the handheld Digital Compass
I was tasked with creating a multi-interface product and chose to work on a navigational system that utilizes several components: custom handheld hardware, a touch-screen terminal, and an augmented reality (AR) powered navigational app.
I named the system "Digital Compass." It could be modified for use in any hard-to-navigate area. To demonstrate how the Digital Compass (DC) worked, I wanted to show it being used in L.A.'s Metro rail system.
Initial sketches and system diagram
Initial sketches demonstrate how the DC Phone App would work. Initially, it'd be used as a regular map app (a-la Google Maps or Apple Maps). However whenever a user approached a train station, they could activate a special AR mode revealed a path to find their train.
The system diagram shows how all the different components would interact with each other.
User journey matrices
User journey matrices were created for the Handheld DC and the DC Phone App.
The interactions described here would be used to create prototypes and product demonstrations.
Interaction flowcharts
After choosing an interaction for each device, these interactions were broken down into a detailed series of steps to later illustrate in prototype form.
DC Terminal user interface flow sketches and Handheld DC guide
Sketches of the DC Terminal's user interface flow were drawn, and guidelines were created for what the Handheld DC state's would look like.
Handheld DC and DC Terminal interaction steps
Interactions for the handheld Digital Compass and DC terminal illustrated step-by-step.
Handheld DC animation states
Different states were animated to show what the user would see while using the Handheld DC.
DC Terminal prototype
At a DC Terminal, a user could obtain a Handheld DC, orient their current device, or, add fare to their trip.
App and AR-directional prototype
If the user preferred to use their phone instead, they could open the DC Phone App and utilize its' AR feature to guide them through the metro system.
