I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Chonky Bubble Nav
August 30, 2023
Explorations
I'm often inspired by the UI demos Janum Trivedi shares on Twitter.
One in particular that caught my attention earlier this year, he described as "a chonkier, Apple TV-inspired action menu".
Check out Janum's original concept:
Then the other day, I saw a tweet where Nathan Manousos recreated Janum's concept in Javascript– and did an excellent job! This inspired me to take a shot at creating it in Framer.
I started out by creating a list that includes photo and text. This took about 2 hours.
I tried to emulate a bit of that tactile, touch+force responsiveness that comes with finger tracking, but there's only so far you can get it when it's cursor-based.
In my next iteration, I designed it to be a closed nav that opens on hover. Here's a live demo you can interact with:
There's a lot of micro interactions that went into this, but one of my favorite is when you reach the top or bottom of the list; it shrinks in and then stretches out.
It took quite a number of Framer component variants to make this work, but the main method is by having two variants when the mouse leaves the top or bottom of the menu- one to shrink the menu, and another to fade the white highlight frame out.
One thing Nathan managed to get in Javascript that I didn't in Framer is having the highlight move with your cursor within a single row. To do this in Framer would require an extra 2 variants per list item, in this case another 14 variants- not something I have time for right now, but I may go back to in the future and iterate further.
Nathan also created some really cool visualizations of how this technically works:
If you're into Swift, Janum released a spring-based animation engine called Wave that he used to build the UI concepts he posts.
I'll be including my chonky bubble nav in a future Framer template, but if you have any questions or are interested in a Remix, reach out and let me know.
Chonky Bubble Nav
August 30, 2023
Explorations
I'm often inspired by the UI demos Janum Trivedi shares on Twitter.
One in particular that caught my attention earlier this year, he described as "a chonkier, Apple TV-inspired action menu".
Check out Janum's original concept:
Then the other day, I saw a tweet where Nathan Manousos recreated Janum's concept in Javascript– and did an excellent job! This inspired me to take a shot at creating it in Framer.
I started out by creating a list that includes photo and text. This took about 2 hours.
I tried to emulate a bit of that tactile, touch+force responsiveness that comes with finger tracking, but there's only so far you can get it when it's cursor-based.
In my next iteration, I designed it to be a closed nav that opens on hover. Here's a live demo you can interact with:
There's a lot of micro interactions that went into this, but one of my favorite is when you reach the top or bottom of the list; it shrinks in and then stretches out.
It took quite a number of Framer component variants to make this work, but the main method is by having two variants when the mouse leaves the top or bottom of the menu- one to shrink the menu, and another to fade the white highlight frame out.
One thing Nathan managed to get in Javascript that I didn't in Framer is having the highlight move with your cursor within a single row. To do this in Framer would require an extra 2 variants per list item, in this case another 14 variants- not something I have time for right now, but I may go back to in the future and iterate further.
Nathan also created some really cool visualizations of how this technically works:
If you're into Swift, Janum released a spring-based animation engine called Wave that he used to build the UI concepts he posts.
I'll be including my chonky bubble nav in a future Framer template, but if you have any questions or are interested in a Remix, reach out and let me know.
Chonky Bubble Nav
August 30, 2023
Explorations
I'm often inspired by the UI demos Janum Trivedi shares on Twitter.
One in particular that caught my attention earlier this year, he described as "a chonkier, Apple TV-inspired action menu".
Check out Janum's original concept:
Then the other day, I saw a tweet where Nathan Manousos recreated Janum's concept in Javascript– and did an excellent job! This inspired me to take a shot at creating it in Framer.
I started out by creating a list that includes photo and text. This took about 2 hours.
I tried to emulate a bit of that tactile, touch+force responsiveness that comes with finger tracking, but there's only so far you can get it when it's cursor-based.
In my next iteration, I designed it to be a closed nav that opens on hover. Here's a live demo you can interact with:
There's a lot of micro interactions that went into this, but one of my favorite is when you reach the top or bottom of the list; it shrinks in and then stretches out.
It took quite a number of Framer component variants to make this work, but the main method is by having two variants when the mouse leaves the top or bottom of the menu- one to shrink the menu, and another to fade the white highlight frame out.
One thing Nathan managed to get in Javascript that I didn't in Framer is having the highlight move with your cursor within a single row. To do this in Framer would require an extra 2 variants per list item, in this case another 14 variants- not something I have time for right now, but I may go back to in the future and iterate further.
Nathan also created some really cool visualizations of how this technically works:
If you're into Swift, Janum released a spring-based animation engine called Wave that he used to build the UI concepts he posts.
I'll be including my chonky bubble nav in a future Framer template, but if you have any questions or are interested in a Remix, reach out and let me know.