The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Snacks.com is PepsiCo's direct-to-consumer store, and I came onto it when the launch date was already close. The client needed new flows and layout changes that had to slot straight into their existing design without looking bolted on, so most of the job was moving fast while staying invisible. The centrepiece was the Make Your Own Variety Pack builder, where someone picks 24 or 30 individual bags from the full Frito-Lay range and watches the pack fill up as they go. Getting that to feel simple on a phone screen took the most work.
I started with task flows and mindmaps in FigJam so everyone could see the logic before anything got drawn, then moved through low fidelity wireframes with the client in the room at each step. That collaboration is why the high fidelity screens needed so few revisions later. The final UI covers the browse and filter experience, the pack builder, cart, checkout, payment and order confirmation, all built on the existing Snacks.com colour and component language so it shipped as one continuous product rather than a bolt-on.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
If you had to choose one option to present your brand without actually talking to the users, what would you choose?
Lately, I've been pushing myself to explore what's possible with Figma Motion and see just how far I can take animations without leaving Figma.
I recently came across a really smooth WhatsApp animation and thought, why not recreate it? So I challenged myself to build it from scratch, paying close attention to the timing, easing, and micro-interactions.
It's been a fun way to learn, experiment, and sharpen my motion design skills.
How do you think it turned out? 👀
I'd love to hear your feedback!
23 voted
79%
6 voted
21%
29 votes
Closed
Animated visuals makes the user stay, while static will not attract much
"Leave It Here" is a digital ritual for thoughts that keep looping in your mind.
I created this concept from a personal experience: when a conversation or situation hurts or unsettles me, I often replay it again and again (sometimes I can't even sleep), thinking about what happened or what I should have said or done differently.
🔮 How I used Flowstep
While working in Flowstep, I created a set of design guidelines and continuously refined them to keep the experience consistent across typography, color, spacing, tone, and interaction. I used prompting for larger changes and refined the smaller details manually, including images, texts, and button colors.
🚀 What I liked the most
I especially liked the automatic screen connections, clickable prototyping, and additional interaction states generated by Flowstep.
🔗 Prototype link
https://app.flowstep.ai/file?activeFileId=f87f9bcd-57ee-49af-a879-383ac20301cc
P.S. The prototype currently opens on the second screen instead of the intended first screen. The first screen was created later in the workflow, and I could not find a way to redefine the starting point. Flowstep team, I would really appreciate your advice on this.
💻 Thank you, Contra and Flowstep, for creating this challenge and giving me the opportunity to bring this idea to life!
Concepts built around a real feeling instead of a business use case usually turn out more polished. every design decision has something real to check against instead of just a guess
Juncture just went live 🎉
Full custom Framer build for an executive advisory firm — six pages, a custom interactive framework component, and an animated scoring system built as a native code component instead of a static graphic.
Wrote up the full case study, including the two places I pushed past the original brief and why:
Beautiful
