Audio Guestbook E-com | Webflow Dev + UI Design
Project Overview
Event Technology, Audio Recording, & Experiential Gifting : Product Design • Design System Creation • Variable Component System • Custom Banner • Web Development
Client: Tellygram
_____________________________________________________________________________________
Industry: Event Technology, Audio Recording, & Experiential Gifting
_____________________________________________________________________________________
Project Type: Website Design + Development + Brand Design Guide
_____________________________________________________________________________________
Tech Stack:
Design & Prototyping: Figma, Illustrator, Photoshop
Web Development: Webflow
Analytics & Tracking: Google Analytics, Google Tag Manager
_____________________________________________________________________________________
Objective
The goal was to enhance Tellygram’s online presence by creating a seamless, user-friendly, and visually compelling e-commerce platform that allows customers to explore, customize, and place orders for Tellygram’s unique audio guestbook service. The new website needed to blend vintage aesthetics with modern web functionality, ensuring an intuitive user journey from product selection to checkout.
_____________________________________________________________________________________
Scope of Work
Custom UI Design:
Crafted a visually engaging and intuitive interface that reflects Tellygram’s nostalgic yet innovative brand identity.
Ensured a responsive and cohesive experience across devices.
Webflow Development:
Implemented a fully functional, high-performance e-commerce solution using Webflow.
Developed a product catalog with detailed descriptions, pricing, and customization options.
E-Commerce Functionality:
Integrated a seamless shopping experience, allowing users to select their preferred Tellygram device, add it to the cart, and complete the purchase.
Implemented secure checkout and payment processing.
Optimized User Flow:
Streamlined navigation to guide users from discovery to conversion effortlessly.
Designed a structured information hierarchy to enhance user engagement.
_____________________________________________________________________________________
Challenges
Blending vintage aesthetics with modern UI principles: Ensuring that the nostalgic look and feel did not compromise usability and functionality.
Customizing e-commerce flows for a unique service-based product: Unlike traditional products, Tellygram’s offering required a booking-like purchasing experience.
Performance optimization in Webflow: Balancing animations and media elements to maintain fast load times without compromising on the brand’s visual appeal.
Mobile Responsiveness: Creating a seamless experience across mobile and desktop while ensuring ease of navigation and checkout.
_____________________________________________________________________________________
Strategic Solution
Design Approach:
Leveraged a modern-vintage aesthetic to reflect Tellygram’s brand identity while maintaining a clean and intuitive UI.
Used high-quality imagery, subtle animations, and engaging typography to enhance storytelling.
E-Commerce Development:
Customized Webflow’s CMS to manage product inventory and allow seamless updates.
Implemented a smooth order placement flow with minimal friction in adding items to the cart and checking out.
Integrated secure payment processing to ensure a hassle-free transaction experience.
Performance Optimization:
Compressed images and optimized animations to maintain high performance.
Ensured SEO best practices were in place for improved search visibility.
_____________________________________________________________________________________
Results
30% increase in user engagement post-launch, with visitors spending more time exploring product options.
20% improvement in conversion rates due to a frictionless purchase experience.
Enhanced brand credibility with a polished, professional website that reflects the uniqueness of Tellygram’s service.
Faster page load times and seamless navigation across all devices, leading to reduced bounce rates.
_____________________________________________________________________________________
Conclusion
By combining custom UI design with Webflow’s flexible development capabilities, we successfully transformed Tellygram’s digital experience into a high-performing, visually engaging e-commerce platform. The result is a website that not only captures the essence of Tellygram’s nostalgic charm but also delivers a modern, seamless, and conversion-driven shopping experience.
_____________________________________________________________________________________
Building a Web App?
From design to development, I create high-performing web apps that engage users and drive results. Let’s bring your vision to life—get in touch today!
Like this project
1
Posted May 25, 2024
Designed a custom Webflow e-commerce platform for Tellygram, optimizing product discovery, simplifying checkout, and enhancing seamless order placement.
Architecture Studio | UI Design + WIX Development + Animation
Portfolio Website : Web Development + UI Design
Locker Rental Android App | Flutter App
AI-based Travel Web-App | Shadcn UI Product Design + Prototype