Project
/ | | ___ | | _____ _ | | | | | _____ __
| | | ' \ / _ / | |/ / _ | | | | | | | | |/ _ \ \ /\ / /
| || | | | / (| < () | || | | | | | | () \ V V /
_|| ||_|_||____/ _,|_| || ||___/ _/_/
.
.
Create a shopping app checkout experience with micro animations
.
.
Tools Used ChatGPT Claude Pencil/Paper Figma uizard
Project Video
For some reason, giphy is cutting off the second half of my demo, so I've included it here as a two part.
.gif)
Learning/Impact I came into this project with the mindset that I wanted to prioritize the animations, so I tried to use tools to help me generate the content that would be animated. I was also thinking that this would be a good simulation of a design sprint and wanted the ability to iterate rapidly. I'm glad I explored all the tools I did in this exercize, but i think ultimately, the push for speed may have slowed me down.
I want to be generating templates that I can use to streamline my workflow. Like a wireframe base that I can just drop assets into and change the local variables to give viewers a decent understanding of the feel for the solution.
Bonus: Edits outside Claude I'm trying out uizard, which is a ui focused AI generator. It's pretty solid, I just wanted to get something together quickly so i could iterate. The focus should be on the animations, but the content of the screens should be functional and not distracting.
I also dabbled with an html.to.design plugin in figma to try and get editable assets from established sources. It worked well, but it was also overwhelming, so I deleted it.
I used a different plugin to get editable design assets from screenshots to pull my design from uizard into figma. In retrospect, it would have just been easier to make it all myself. There were so many redundant groups and the elements weren't organized intuitively.
Initial Thoughts 3/3/25
I had a conversation with a GPT I'd built for career clarity to try and frame this project in a way that is in line with my goals outside of this program. So I'm looking at creating some sort of mindful shoping experience that uses animation to create pauses for users to make intentional shopping experiences. I'm thinking about this more like a plugin rather than an actual e-commerce site, but I'm just going to go forward with it being its own app to fulfill the assignment.
So I've bounced back and forth between uizard and a figma plugin that creates editable design files from screenshots. I've created a few screens for the checkout flow for an intentional e commerce site called "MindfulShop"
I've got a pretty fun navigational animation where clicking on the cart causes the cart to expand and zoom in such a way that it feels like the user is going "into" the cart. I'm working on the Add to Cart animation.
I'm piecing things together in figma. Gonna mess around with lottie files, seeing if I can create a fun cart number switch, but I' gotta head to class so actually I'm gonna leave it here for now.
3/4/25 The actual cart number change animation is giving me trouble. i wanted to create a little animation with lottie files, but now I'm stuck trying to figure out how to get the gif it output to be triggered when I click the Ad to cart button. I think there's the need for some boolean logic here and I honestly don't know if I'm wanting to put that much into this animation project.
Okay, I was able to find a workaround with components rather than with lottie files. I just took the frames that made up the lottie file animation and converted them to a component set. Then I adjusted the timing and added some color to help it pop. It broke my cart zoom animation, but I was able to duplicate the element and create the illusion. It isn't the cleanest, but I'm prioritizing speed here.
I added an aditional step so that the demo will go from the product page, animate into the cart, animate out, add to cart, animate back in, then show the checkout. Which means that I just have to animate the checout screen!
I'm trying to animate a press and hold element for the Proceed to checkout button to limit impulse buys. but the animation is broken. I don't know how to fix it. All the layers are named appropriately.
Okay, I got something workable for the button fill and i rigged it so that it fills while hovering, then you click to navigate. I'm close to being done. The only thing is that there doesn't seem to be enough feedback for the add to cart interaction. Everything else is so dynamic, this feels like it's too understated. I added a color animation to add some pop, but I think I'm going to leave it there.