HoloNav
Alex Pina (ID), Julian Cunningham (ID), Kareen Yeung (ID, ME), Levi Tucker (ECE), Trevor Goo (ECE), George Lee (ECE)
My Role: Research Phase Lead · UX Lead · UI Design · User Testing
The Problem
As city dwellers turn to micro-mobility solutions, they face risks navigating in streets not often designed to include them.
How might we identify, measure, and prevent risk?
The Brief
Design an augmented-reality navigation solution for personal electric vehicles (PEVs) that is safer than navigating with a phone.
How might we minimize distraction?
50%
of traffic injury cases, phone use was involved within one minute of the incident
28%
of ride time spent looking at a phone-mounted screen while cycling
87%
of PEV owners surveyed would spend $100+ on AR navigation technology
Discovery
Scope: Primary Research, Stakeholder Identification, Usage Scenario, Value Proposition
Methods: Literature Reviews, Interviews, Surveys, White Space Analysis, Personas, Journey Mapping
We started broad — exploring the characteristics and needs of micro-mobility users through interviews, field observations, secondary research, and a survey of PEV owners via Prolific.
Our research surfaced a clear pattern:
Phone-based navigation methods are dangerous because they are distracting, and there is an opportunity to create a less distracting alternative.
1. Distraction is the core risk
Studies showed riders using phone-mounted navigation spent significant portions of their ride looking away from the road, which is directly correlated with increased accident rates.
2. PEV owners are eager early adopters
Our Prolific survey confirmed that PEV owners aged 30–60 are willing to invest in wearable navigation tech. 66% would pay $100–$350 for a solution that keeps their eyes on the road.
3. No AR solution exists for this niche
Competitors like REKKIE (skiing), FORM (swimming), and ENGO 2 (cycling stats) are locked into other sports. No one targets PEV riders with navigation-first AR.
[IMAGE: White space / competitive landscape map.
Your 2×2 matrix showing High Trust ↔ Low Trust vs. Provider Focused ↔ Patient Focused,
with the "Opportunity" area highlighted. Clean it up for portfolio use.]
Your 2×2 matrix showing High Trust ↔ Low Trust vs. Provider Focused ↔ Patient Focused,
with the "Opportunity" area highlighted. Clean it up for portfolio use.]
Competitive landscape analysis — the white space sits at the intersection of high-trust, patient-focused AR wearables.
Target User
PEV owners aged 30–60 — urban commuters with intermediate riding experience who rely on their vehicles for regular transportation. This demographic sits at the highest overlap between e-bike ownership and interest in wearable technology.
[FILL IN: 1–2 sentences about "The Dynamic Dad" persona — his goals, frustrations, and why he represents your ideal user. Pull from your persona work.]
[IMAGE: Target user analysis graphic — the age distribution chart
showing e-bike owner demographics overlaid with wearable tech adoption.
Clean up from Appendix A3.]
showing e-bike owner demographics overlaid with wearable tech adoption.
Clean up from Appendix A3.]
Over 60% of e-bike riders are 45+, with the strongest wearable tech overlap in the 30–60 range.
Prototype & Test
Approach: Rapid iteration — build, test, measure distraction, redesign
Metrics: Eyes-off-road time, Dwell time per glance, Qualitative exit surveys
We built 3 generations of prototypes in 14 weeks, each one testing a specific hypothesis about how to reduce rider distraction.
Generation 1 → 1.5
Helmet-Mounted Opaque Display
Our first prototype used an opaque TFT screen on an adjustable helmet arm, connected to a phone via WiFi. Initial test results were inconclusive — so we refined our methodology, filming riders' faces to capture glance frequency, glance duration, and total eyes-off-road time.
Gen 1.5 results showed the head-mounted display was less distracting than a phone mount: 5.8% eyes-off-road vs. 7.3% for the control, with 0.33s dwell time per glance vs. 0.65s.
[IMAGE: Side-by-side of Gen 1 prototype (helmet with TFT display arm)
and a testing photo from Piedmont Park. Show the scrappy, real-world testing context.]
and a testing photo from Piedmont Park. Show the scrappy, real-world testing context.]
Gen 1 prototype — opaque TFT display mounted on a helmet, tested in Piedmont Park.
Interface Study
Display Method & Information Density
To determine the ideal display format, I led a Prolific survey testing wireframes across three display methods: waveguide projection, transparent reflection, and opaque screens. Users preferred transparent displays with lower information density. Map views ranked lowest — turn-by-turn was the clear priority.
71% of participants preferred glasses over a visor helmet attachment, which directly shaped our final form factor decision.
[IMAGE: Interface prototype survey results — the ranked display method comparison
(waveguide 71%, transparent OLED 73%, opaque 55%) and/or the information density
ranked preference graphic. Clean versions from Appendix C1–C3.]
(waveguide 71%, transparent OLED 73%, opaque 55%) and/or the information density
ranked preference graphic. Clean versions from Appendix C1–C3.]
Interface survey results — transparent displays with minimal information density ranked highest.
Generation 3
AR Smart Glasses — Brilliant Frames
Our final working prototype used the Brilliant Frames, an open-source AR glasses platform, running our custom navigation software. We built a companion Android app (Flutter + Mapbox API) that sends turn-by-turn data to the glasses via Bluetooth Low Energy.
[FILL IN: 1 sentence about your specific contribution to this prototype — what you designed, tested, or led.]
[IMAGE: Gen 3 prototype — the Brilliant Frames on a rider with
the HUD visible in the lens. Use your Figure 3 photo (rider with helmet
+ close-up of the "In 200 ft, Rosedale Road" display).]
the HUD visible in the lens. Use your Figure 3 photo (rider with helmet
+ close-up of the "In 200 ft, Rosedale Road" display).]
Gen 3 prototype — custom navigation software running on Brilliant Frames during field testing.
Results
Using the same testing methodology across prototypes, we measured a consistent reduction in distraction compared to phone-mounted navigation.
Phone Mount (Control)
11.5%
eyes-off-road time
0.55s
dwell time per glance
HoloNav AR HUD
6.3%
eyes-off-road time
0.71s
dwell time per glance
The AR HUD reduced eyes-off-road time by 45% compared to the phone mount. Dwell time was slightly higher we attributed this to user unfamiliarity with the AR interface, occasional software errors, and a fluctuating battery indicator that would be removed in the final UI. With refinement and repeated use, we believe dwell time would decrease.
Qualitative feedback revealed riders felt a constant need to glance up to avoid missing instructions, indicating that auditory or haptic cues should be prioritized in future iterations.
Interface Design
Tools: [FILL IN: Figma / Sketch / etc.]
Focus: Minimal cognitive load, glanceable information hierarchy, display customization
The UI evolved across three display generations. Early interfaces used simple directional arrows with distance countdowns. The final UI concept introduced tiered information density— letting users toggle between turn-by-turn only, turn + street name, and turn + street + arrival info.
Survey data showed simplicity and clarity scored highest (84%), with turn-by-turn ranked as the most important feature (83%), followed by street name (75%). When forced to sacrifice one of four features, only 13% of users kept the map view.
[SCREEN 1:
HUD — minimal
turn arrow only]
HUD — minimal
turn arrow only]
[SCREEN 2:
HUD — turn +
street name]
HUD — turn +
street name]
[SCREEN 3:
HUD — turn + street
+ arrival info]
HUD — turn + street
+ arrival info]
[SCREEN 4:
Companion app
customization UI]
Companion app
customization UI]
HUD information density tiers (L→R: minimal, standard, detailed) and companion app concept.
[FILL IN: 1–2 sentences about your specific design decisions for the UI — what you prioritized and why.]
Final Concept
HoloNav is an aviator-style AR smart glasses with a reflected Micro-OLED near-eye display, Bluetooth Low Energy connectivity, and capacitive touch input. The display projects navigation into the rider's peripheral vision, informed by our finding that riders preferred non-intrusive, side-of-view placement.
[IMAGE: Final product render — the hero shot of the HoloNav glasses.
Use your Figure 6 render (the aviator glasses with tinted yellow lenses
against the city backdrop). This is your money shot — make it large and clean.]
Use your Figure 6 render (the aviator glasses with tinted yellow lenses
against the city backdrop). This is your money shot — make it large and clean.]
HoloNav — aviator-style AR smart glasses with reflected Micro-OLED display.
[IMAGE: Exploded view or dimensioned drawing — Figure 7.
Shows physical specs and how PCB + display fit in the arm.]
Shows physical specs and how PCB + display fit in the arm.]
Form dimensions and component layout.
[IMAGE: PCB assembly render — Figure 8 or 9.
Streamlined 4-layer board (6×44mm).]
Streamlined 4-layer board (6×44mm).]
Custom PCB — consolidated single-board design, 6×44mm.
[IMAGE: Lifestyle shot — rider wearing HoloNav with helmet,
companion app visible on phone nearby. Full system in context.]
companion app visible on phone nearby. Full system in context.]
HoloNav system in use — AR glasses paired with companion navigation app.
Companion App
The Android companion app (built with Flutter + Mapbox API) serves as the primary input — riders set their destination on the phone, and navigation data streams to the glasses via BLE. We also designed a concept for interface customization, letting users adjust text thickness, map scale, and toggle display features through the app.
[SCREEN:
App — route
input / map view]
App — route
input / map view]
[SCREEN:
App — navigation
active state]
App — navigation
active state]
[SCREEN:
App — display
customization panel]
App — display
customization panel]
[SCREEN:
App — settings /
glasses pairing]
App — settings /
glasses pairing]
Companion app — route planning, active navigation, and HUD customization.
Reflection
[FILL IN: 2–3 sentences reflecting on what you learned from leading the research phase. What worked? What was the hardest call you made? What would you do differently?]
[FILL IN: 1–2 sentences on what you'd explore next — e.g., haptic/audio cues, longer-term usability studies, dwell time optimization, accessibility for prescription lens wearers.]
[FILL IN: A closing personal note — what this project meant to you, how it shaped your design perspective. Keep it to 1–2 sentences.]
Template Notes & Advice
Fill-in-the-Blank Items
- Yellow highlighted text = places where you need to write personal copy.
- The "Dynamic Dad" persona sentence — hiring managers love seeing that your research led to a specific, named archetype.
- Your specific contributions — be precise. "I designed the exit survey" > "I contributed to research."
- Reflection — most underused section in junior portfolios. A thoughtful 3-sentence reflection shows maturity.
Image Guidance
- Hero image: Your existing glasses-on-city render is good. Widen the crop and add a subtle gradient fade at edges.
- Prototype photos: The raw testing photos are gold. Crop consistently, subtle desaturation to match the clean tone.
- UI screens: Export at 2x from Figma on clean backgrounds. Place in device mockups.
- Data visualizations: Redraw the white space map, survey results, and age distribution to match your portfolio's visual language.
Suggested Additions
- Prototype video (30–60s): Short clip of someone riding with Gen 3. Embed at the top like Totem.
- Process GIF: Animated GIF of HUD state transitions (approach → turn → post-turn).
- Before/After graphic: Split visual — rider looking down at phone vs. rider looking ahead with AR overlay.
- Research wall: Photo of sticky notes or a designed FigJam/Miro export.
- Competitor table: Clean designed version of the REKKIE/FORM/ENGO comparison.
Copy Advice
- Bold key phrases — hiring managers skim.
- Lead with insight/result, not process.
- Stats (50%, 28%, 87%, 45% reduction) are your strongest hooks.
- Your dual role (Research Lead + UX Lead) is a differentiator — reference it throughout.
Cargo Implementation
- Paste holonav-v1-styles.css into Design → CSS Editor.
- Add each major section as its own Cargo content block.
- Use Cargo's native image/video blocks where possible.
- All classes prefixed with hn-v1- to avoid theme conflicts.