Meet Dear: An AR Diary for Distant Connections

A quick, sweet, and easy way to communicate with family members, friends, and loved ones who live far away!

DURATION

3 weeks (Feb, 2025)

TOOLS

Glitch, Figma

TEAM

Solo XR Designer

SKILLS

XR Design, Developer, Research, Product Concept

TEAM

Solo XR Designer

TEAM

Solo XR Designer

TEAM

Solo XR Designer

DURATION

3 weeks (Feb, 2025)

DURATION

3 weeks (Feb, 2025)

DURATION

3 weeks (Feb, 2025)

TOOLS

Glitch, Figma

TOOLS

Glitch, Figma

TOOLS

Glitch, Figma

SKILLS

XR Design, Developer, Research, Product Concept

SKILLS

XR Design, Developer, Research, Product Concept

SKILLS

XR Design, Developer, Research, Product Concept

Why this project?

Handwritten notes carry a warmth that digital texts can’t replace. While it’s easy to share cards with friends nearby, distance makes it harder with family.

Why this project?

Handwritten notes carry a warmth that digital texts can’t replace. While it’s easy to share cards with friends nearby, distance makes it harder with family.

Why this project?

Handwritten notes carry a warmth that digital texts can’t replace. While it’s easy to share cards with friends nearby, distance makes it harder with family.

Introducing...

Dear: A simple, cozy way to feel near from far.

A tiny app for everyday moments: write or draw, add pics and clips, and watch them collect on a simple shared timeline.

Introducing...

Dear: A simple, cozy way to feel near from far.

A tiny app for everyday moments: write or draw, add pics and clips, and watch them collect on a simple shared timeline.

Introducing...

Dear: A simple, cozy way to feel near from far.

A tiny app for everyday moments: write or draw, add pics and clips, and watch them collect on a simple shared timeline.

Shared Diary Wall

See everyone moments in one, big, cozy, living thread.

Handwritten Notes

Jot down thoughts, notes or even doodle!

Photo/Video Snippets

Drop quick clips & pics to share everyday moments.

Outcome

People found it simple, sweet, and impactful

Outcome

People found it simple, sweet, and impactful

Outcome

People found it simple, sweet, and impactful

Now that you’ve had a peek, let’s go behind the scenes.

My goals

As it was my first time working in Glitch, I set out 3 clear goals to achieve the MVP.

My goals

As it was my first time working in Glitch, I set out 3 clear goals to achieve the MVP.

My goals

As it was my first time working in Glitch, I set out 3 clear goals to achieve the MVP.

Make the experience feel personal and tactile, like handwriting.

Capture and share everyday moments in a lightweight way.

Build a system to revisit memories over time.

Target Users

Since the target users are family and friends, regardless of age or their tech saviness, I wanted to prioritize:

Target Users

Since the target users are family and friends, regardless of age or their tech saviness, I wanted to prioritize:

Target Users

Since the target users are family and friends, regardless of age or their tech saviness, I wanted to prioritize:

Simple Interaction

Clear Instructions

Intuitive Flow

Design Inspiration

Carrying the personal touch of writing into a digital space

Since AR can feel a bit surreal, I wanted the interface to feel as warm and familiar as a real card. That way, the experience stays personal and grounded, even in a digital space.

Design Inspiration

Carrying the personal touch of writing into a digital space

Since AR can feel a bit surreal, I wanted the interface to feel as warm and familiar as a real card. That way, the experience stays personal and grounded, even in a digital space.

Design Inspiration

Carrying the personal touch of writing into a digital space

Since AR can feel a bit surreal, I wanted the interface to feel as warm and familiar as a real card. That way, the experience stays personal and grounded, even in a digital space.

User Flow

My goal was to keep the experience as short as possible.

From my research, AR projects seem to be a little bit daunting and complicated at times, therefore I wanted to keep the core interactions as simple as possible. The product would only be able to perform 2 core flows: making a new note, and viewing the memory wall.

User Flow

My goal was to keep the experience as short as possible.

From my research, AR projects seem to be a little bit daunting and complicated at times, therefore I wanted to keep the core interactions as simple as possible. The product would only be able to perform 2 core flows: making a new note, and viewing the memory wall.

User Flow

My goal was to keep the experience as short as possible.

From my research, AR projects seem to be a little bit daunting and complicated at times, therefore I wanted to keep the core interactions as simple as possible. The product would only be able to perform 2 core flows: making a new note, and viewing the memory wall.

Wireframes

Bringing the Flows to Life

While the user flows mapped out the journey, these wireframes showed how each step would actually play out on screen. I kept every interaction as simple as possible—whether it’s writing a note or viewing the memory wall—so users could move through the experience without friction.

Wireframes

Bringing the Flows to Life

While the user flows mapped out the journey, these wireframes showed how each step would actually play out on screen. I kept every interaction as simple as possible—whether it’s writing a note or viewing the memory wall—so users could move through the experience without friction.

I learned that AR feels tighter than expected, and splitting tasks into smaller steps made the experience more manageable.

Design

I built hi-fi mockups and components in Figma to make the coding process smoother.

Design

I built hi-fi mockups and components in Figma to make the coding process smoother.

Design

I built hi-fi mockups and components in Figma to make the coding process smoother.

Development Challenges

The project was coded in Glitch, with a bit of help from ChatGPT

Overall, the developememt stage of the product was really smooth. I first made sure to focus on the "Create a Note" flow, since I anticipated that this would be the most difficult to achieve.

Development Challenges

The project was coded in Glitch, with a bit of help from ChatGPT

Overall, the developememt stage of the product was really smooth. I first made sure to focus on the "Create a Note" flow, since I anticipated that this would be the most difficult to achieve.

Development Challenges

The project was coded in Glitch, with a bit of help from ChatGPT

Overall, the developememt stage of the product was really smooth. I first made sure to focus on the "Create a Note" flow, since I anticipated that this would be the most difficult to achieve.

01

Canvas sat behind the paper

Because of stacking order, drawings and text rendered behind the paper layer.

Fix z-index so the canvas sits on top; use a test background to spot issues.

02

It is easy to make mistakes

People mis-stroke a lot and need a safe way to reset their note.

Added a Clear button allowing users to Erase the Note.

03

Adding images felt messy

Uploaded photos and controls didn’t align, making the layout look jumpy.

Wrap image + controls in one container, center/justify, and auto-crop to 1:1.

04

Markerless placement out of scope

True markerless AR wasn’t feasible for v1.

Ship a simple “memory wall” carousel now; plan markerless for v2.

Final Product

Dear: Stay connected to those far away through shared memory walls, quick handwritten notes, and photos.

Final Product

Dear: Stay connected to those far away through shared memory walls, quick handwritten notes, and photos.

Final Product

Dear: Stay connected to those far away through shared memory walls, quick handwritten notes, and photos.

01

01

View shared memories between you and your loved one

View shared memories between you and your loved one

->

->

Calendar View

Calendar View

See your monthly interaction at a glance.

See your monthly interaction at a glance.

->

->

Immersive Carousel

Immersive Carousel

Flip through moments like postcards

Flip through moments like postcards

02

02

Digitally hand-write a personalized note…

Digitally hand-write a personalized note…

->

->

Feels like real paper

Feels like real paper

Finger-draw on a textured page with smooth strokes, plus Clear + Undo for quick fixes.

Finger-draw on a textured page with smooth strokes, plus Clear + Undo for quick fixes.

->

->

Add a tiny wow

Add a tiny wow

Use the HIRO marker to preview your note in space before saving it to the wall.

Use the HIRO marker to preview your note in space before saving it to the wall.

03

03

Keep them up to date by posting images…

Keep them up to date by posting images…

->

->

Snap & Share

Snap & Share

Jot down thoughts or doodle—capture the moment your way.

Jot down thoughts or doodle—capture the moment your way.

->

->

Pick from Library

Pick from Library

Import media you already have; we auto-crop nicely and keep file sizes light.

Import media you already have; we auto-crop nicely and keep file sizes light.

04

04

Decorate and personalize your note…

Decorate and personalize your note…

->

->

Stickers, Frames, Colors

Stickers, Frames, Colors

Choose a palette, add a frame, or drop a sticker for a little personality.

Choose a palette, add a frame, or drop a sticker for a little personality.

->

->

Cute, Simple Tools — No clutter

Cute, Simple Tools — No clutter

Lightweight controls that keep the focus on your message, not the UI.

Lightweight controls that keep the focus on your message, not the UI.

Reflections

For a first time AR project and a limited amount of time, I did pretty well!

Reflections

For a first time AR project and a limited amount of time, I did pretty well!

Reflections

For a first time AR project and a limited amount of time, I did pretty well!

AI Assistance is handy but tricky

It was great that I had prior HTML and CSS coding experience so I was able to catch mistakes that ChatGPT had.

Customization and Personalization

I was able to add some personalization to the “create memory” process!

Design and Styling of Elements

Just a bit of color, styling, and fonts felt like it brought the project to life!

If I had more time....

If I had more time....

If I had more time....

Markerless AR for an Immersive Feel

Figure out how to have a memory gallery wall in real space

Additional Interaction for More Personalization

While the core interactions are in place, I want to add more information so users can personalize their notes better.

Hand-tracking to Mimic Real Life Writing

While dragging on the screen works, it would be cool if i was able to actually “write”

(Bonus) Clean up code

My code was getting super messy, I had to use a lot of inline styling towards the end.

Similar Projects

Helping young professionals turn casual coffee chats into networking opportunities

Helping young professionals turn casual coffee chats into networking opportunities

Enhancing Greenlight’s digital presence through better information hierarchy and design

Enhancing Greenlight’s digital presence through better information hierarchy and design

Helping young professionals turn casual coffee chats into networking opportunities

Enhancing Greenlight’s digital presence through better information hierarchy and design

Enhancing the library’s online experience to support students and researchers

Ey, thanks for stopping by.

Feel free to reach out anytime, looking forward to it!

Minh Nguyen @ 2025

Ey, thanks for stopping by.

Feel free to reach out anytime, looking forward to it!

Minh Nguyen @ 2025

Ey, thanks for stopping by.

Feel free to reach out anytime, looking forward to it!

Minh Nguyen @ 2025