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
MERCEDES-BENZ CLA — CONCEPTUAL WEBSITE REDESIGN
This conceptual redesign was created as part of an Envato challenge.
During my research, I discovered an existing website featuring the Mercedes-Benz CLA. I liked its core idea, but saw an opportunity to transform the presentation into a more immersive, modern, and cinematic digital experience.
I created my own visual interpretation and developed an interactive website that introduces the vehicle progressively through motion, depth, and scroll-based storytelling.
My contributions included:
• Complete website experience redesign
• Front-end development with React
• Scroll-triggered animations with GSAP
• UI/UX design
• Cinematic scrollytelling
• Interactive transitions
• Responsive development for desktop and mobile
• Performance optimization
• Build configuration and deployment
The main challenge was balancing visual impact with usability and performance. Each section was designed to guide users through the vehicle’s exterior, interior, technology, and performance while maintaining a continuous visual narrative.
The final result is an immersive automotive website that transforms a traditional product presentation into a memorable interactive experience.
View the live project:
Available for freelance projects involving landing pages, business websites, portfolios, interactive experiences, and custom Front-end development.
This is an independent conceptual project created for portfolio purposes. It is not officially affiliated with or endorsed by Mercedes-Benz.
#WebDevelopment #FrontendDevelopment #ReactJS #GSAP #WebDesign #UIDesign #UXDesign #Scrollytelling #InteractiveDesign #ResponsiveDesign #CreativeDevelopment
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
Two hero section directions for a client site- same headline, different visual approach. which one lands better?
.
.
More of this over on X, in real time ideas, questions, and the people building cool stuff https://x.com/rightnextstep?s=11
27 voted
51%
26 voted
49%
53 votes
Closed
The reason I chose Hero 1 is that the design style feels fresh and modern. I also think the image beneath the hero text complements the message really well, which makes the whole section feel more cohesive. That’s my perspective.
I’ve been exploring motion and design for Gambo Café's hero: a danish pastry / colombian beans café in Copenhagen... and I ended up liking both concepts for completely different reasons. Now I genuinely can’t decide which direction feels stronger!
Which one would you choose, 1 or 2? Feedback is always appreciated!
27 voted
23%
89 voted
77%
116 votes
Closed
Image driven is the way to go for me, it suits the caffe industry. Nice work on both.
Veranda, a luxury residential concept landing page
Veranda is a concept build I created for a fictional luxury residential brand. It is not client work or a real property. The images and hero motion were generated with AI as part of the creative process.
I wanted to explore something that matters when building high-fidelity landing pages: after several rounds of changes, how do you make sure the final page still looks like the design that was approved?
The site is built in Next.js with responsive layouts, self-hosted fonts, GSAP motion and an interactive walkthrough. I also built in a proper QA process around it, not just checking that the page loads and the buttons work.
It compares 12 sections across five screen sizes against approved visual baselines. It flags visual drift, missing baselines and changes that have not been reviewed. I also tested interactions, accessibility, contrast, performance, browser behaviour and reduced-motion states.
The main lesson for me was simple: a page can pass functional tests and still no longer be the page that was agreed.
Building a QA process that flags visual drift against approved baselines is such an underrated skill, most people just eyeball it after changes go in. What first made you start checking for that instead of trusting the build looked right?