top of page

UX AND WIREFRAMING

PAPER WIREFRAMES

Gray Black Aesthetic Phone Mockup Fashion Shop Promotion Banner (18)_edited.jpg

I began with paper wireframes to quickly map out layout ideas and test key user flows based on research insights.

These evolved into digital wireframes and a low-fidelity prototype built in Figma, allowing me to validate functionality early with real users.

Untitled design (15).png

DIGITAL WIREFRAMES

After sketching several layout ideas on paper, I pulled together my favorite elements and brought them into Figma to build the first digital flow. 

This low-fidelity version focused on clarity and ease of navigation, allowing me to test the user journey from viewing the shared calendar to quickly adding an event.

DIGITAL WIREFRAMES

Gray Black Aesthetic Phone Mockup Fashion Shop Promotion Banner (16).png

UI decisions:

  • Custom avatars for personalization

  • Soft color coding by family member

  • Icons for different event types

  • Toggle options for parents (visibility, reminders)

Not childish, not boring. Just functional and friendly.

Designing for Both Generations
The visual design needed to feel mature enough for teens but clear enough for busy parents

LOW FIDELITY PROTOTYPE

I wanted to walk in Mal and Riley’s shoes. I imagined Mal opening the app during a busy workday or Riley checking in between classes, so I kept things simple, clear, and free from distractions.

(Interactive prototype available on desktop)

 

Every screen focused on the features that would actually help them—like adding events, viewing their private calendar and chatting—so I could test the flow and get feedback fast. This gave me a solid blueprint to build a tool that would truly fit into their daily lives.

bottom of page