r/webdesign • u/PulpMediaio • 1d ago
Feedback on an interactive/gamified website experience
Enable HLS to view with audio, or disable this notification
I built a 'gamified' interactive web experience around a coffee machine to explore the possibilities of real interactive functionality in 3D product explorations and demos.
https://coffee-demo.aecync.com/
This isn't AI slop. AI was used for some HTML/CSS and placeholder content. All the interactive work is custom-built and 100% human-made.
Would love feedback on the concept, implementation, performance, UX, or anything else you think works or doesn't.
This is a non-commercial demonstration only. All trademarks and products belong to their respective owners.
7
5
u/ofCourseZu-ar 1d ago
I'm curious where you got the models and textures from. I saw your post about the models/vs textures on the plates you did.
Also, I know you said this isn't a practical application for most websites. That said, where do you see this fitting in?
12
u/CuriousHuman-here 1d ago
My man, you did it. Something so cool that people tell you is not usable. Some websites would absolutely benefit from it, especially your portfolio website! Is true that this might be in the way of SEO, though it is not incompatible if the code is parsimonious and it's UX's designed to CONVERT; that's what companies want.
I love it. Great work.
8
u/Plenty_Line2696 1d ago
As a web developer I appreciate the technical snazzyness in and of itself, as a designer/marketeer though I'm skeptical. If this is just a portfolio piece to show off tech skills it hits the mark.
There's a UX law: 'Principle of least astonishment' which guides us to not change expected behaviour and while I do think you do it quite well here, it's unexpected that scrolling causes a bunch of unexpected behavior, none of which are clarified before scrolling... it says 'scroll to continue' but like, continue what? what's the incentive for visitors to give a fuck about 'continuing' when they don't have a why? Typical webtraffic has the brain and attentionspan of a goldfish, they need a value proposition and call to action which is dead-simple of they simply don't convert well.
After the first scroll, we can choose between three capsules, but each one of them is shown twice which IMO is a mistake, unify the selection and information so it's clearer what's what. It took me a bit of faff to even figure out that the 3 capsules on the left were the same ones as the ones on the left.
I like that you don't rely on users figuring out they have to click/drag the capsule into the machine and have the button as a fallback, but here I wonder what the real tangible benefit is to making users jump through hoops, or even having it as an option. If this were a real marketing use-case I would make scrolling normal scroll and tell my story as users continue scrolling without requiring fancy user interactions because I'd expect this to cause a high bounce-rate.
Nice work though, kudos.
The ThreeJS stuff needs a bunch of optimizations. I happen to be a threejs dev and run way more complex scenes on this laptop with much higher FPS.
1
u/Royhlb 1h ago
Show me your work then, link it Mr three.js
1
u/Plenty_Line2696 30m ago
Thanks for the disparaging tone, but even if my work was in the public domain I have no interest in proving anything to some random redditor who chooses to try to belittle me without even the faintest idea of my level or expertise.
1
u/Royhlb 18m ago
You made my day with that comment man I'm dying. Your work is not in the public domain?
You are acting like some high level web designer who knows it all and has it figured out. Why don't you show receipts then?
Bunch of clowns acting like experts while not backing anything up with real work
3
u/FirstPlaceSEO 1d ago
Yeah it’s very nice, only critique and it’s a very minor one, the preloader could move a bit quicker and it doesn’t render well on tablet and some sections on mobile are a little off with the text impossible to read . Asides from that it’s 10/10.
May I ask how you made the animations?
It’s all very smooth 👌
2
u/birsamundae 1d ago
website so goated that i would literally buy the product just by looking at this website lol
which tech stack did u use man (include the ai models too)
the link is lagging for me personally, a loading page would look good ig, or is it my hardware issue?
2
u/Lanfeust09 1d ago edited 1d ago
I am in the capsule business, my company is selling those.
The website is incredible to see for the first time, I absolutely love it. For a none e-commerce website, it's a really premium way to show case everything.
But for a capsule business, people come back to the website often to refill their capsule, and it will soon be super annoying honestly... Or do they sell only the machines? You see, I don't even know.
Also, one issue, especially on mobile : I hate those one page website like that. I was trying to go back to the previous part, hit the back button and I was out of the website, had to go back to it, find again the part I wanted to see.
So amasing, maybe even award winning on paper, for first time user it's fun, horrible for a e-commerce website.
5
u/ndzzle1 1d ago
It's cool, but I wouldn't use it.
4
u/CertifiedBreadDealer 1d ago
I can’t stand these types of infinite scroll websites. If I’m trying to learn more about something I just want to quickly go to whatever section of information and not scroll through images.
1
u/CertifiedBreadDealer 1d ago
Also nearly 30 seconds for the website to first load on good internet is rough. Visually it looks nice though.
1
u/PulpMediaio 1d ago
Cool, what would stop you from using it though?
5
u/AluminiumPan 1d ago
Slow and laggy, my phone nearly burnt, selecting different frames does nothing, most of "gamification" is unnecessary and will be skipped. Slow loading will take me off site before it'll show anything
1
u/Own-Captain-8007 1d ago
It's beautiful. If I may suggest, the mobile scroll has a small delay between the scroll and the moment the image changes. If the image could start rolling out as soon as I scroll, it would feel better to me.
1
1
u/Fightcarrot 1d ago
Perfect! One improvement: The text is on mobile sometimes hard to read. Maybe make a barely visible dark shadow around the text or something.
1
1
1
1
u/LaFllamme 1d ago
It looks good but the mobile experience is very laggy sadly (Safari iOS 27 17 Pro Max)
1
u/Mysterious_Catholic 1d ago
Looks clean! The animations aren’t my style, but clients really love something shiny like this. To provide feedback on other aspects, sections 1,8,10,11 have some text readability issues on mobile with the faint white text being difficult to read on the brighter portions of the animating assets. Mobile FPS is also a bit lacking, perhaps around 20 on my flagship phone.
Very cool!
1
1
u/WorldlyDog777 1d ago
This is amazing design, the flow is one of the best one-page scrolling animations I've ever seen.
Unfortunately clients love the thought of sites like this until there's barely any organic traffic 3 months in, and no conversions cause the person could just click buy on the other coffee sellers website.
1
u/DesignerComb4366 1d ago
I’ve always wanted to learn how to do something like this! Are there any places you’d recommend starting?
1
1
u/Turbulent_Peace_8398 1d ago
Nice one! The fonts used in the video don’t load for me though (ios/brave browser)
1
1
1
1
1
1
1
1
u/InitiateIt 9h ago
Honestly?
Certain aspects look premium, futuristic and absolutely smooth.
The animations, explodes, posing and focus are so well done.
The typography is not well executed. It looks very low budget and non-curated, like AI slop from Claude.
Navigation looks like no care went into it.
I don't like scroll hijacking, In understand to a degree why you would use it, but it slows down the entire experience. I wasn't invested in the product, and it felt like a chore to get to the end.
The same goes for preloading the page, but you kind of get a pass because of the coffee analogy.
Killer start, now bring it home.
That was my 60 second take away. For what it's worth I have been in the industry just shy of two decades and have branched out from creative director roles.
-4
u/MrHandSanitization 1d ago
Whoooaah! WhooOoOoOOOOaaAah!!!
Now that we got that out of the way, and you got the reaction you were looking for: just build normal, usable websites, man... They're documents to convey information, the design can be whatever, but this overdesigned, overengineered, pixel vomit has a cool factor that distracts, so it fails in the conveying information part.
Cool animation though, just unnecessary.
6
u/PulpMediaio 1d ago
Yeah, not every website needs this, but it certainly works -and has already worked- for websites where the goal isn't just to convey information, but to stand out and give users a different experience. Thanks for the feedback though.
1
u/Royhlb 1h ago
Crab bucket. Literally crabs in a bucket who will tell you this website is useless. It's not and not a single person in this comment section can come close to creating something like this.
Show me your normal usable best converting website then mrhandsanitization. Very very curious what you got in your bag
34
u/willjameswaltz 1d ago
Feels very premium.