Sparkle: E-commerce
Tools: Wordpress + WooCommerce + Elementor + Custom CSS
Role: Full-Stack Developer + Designer
Sparkle is a fictional jewelry store.
This project ensures an user-friendly online shopping experience for jewelry enthusiasts. With straightforward responsive navigation, users can explore the collection, pick their favorites, and enjoy a simple checkout process. It’s a practical showcase of functional design, making buying and selling online a breeze.
The entire page has custom CSS for colors and layout since the free options were very limited.
Check the Sparkle E-commerce UX/UI design showcase here.
Developing Process
Homepage Banner
I strategically incorporated a full-screen banner on the homepage, featuring a prominent ‘Shop Now’ button.
This design choice aims to eliminate the need for extensive scrolling, allowing users to quickly engage with the showcased products right from the start, aligning with the primary goal of the page to effortlessly showcase and attract users to make a purchase.
Products Displayed
By featuring these items upfront, I aimed to captivate attention, spark curiosity, and provide a dynamic experience for returning customers. This approach not only keeps the inventory exciting and ever-evolving but also ensures that visitors are promptly exposed to the latest trends and offerings, enhancing their engagement and encouraging exploration of our newest and best products.
Shop Page
For this page, we opted to employ custom CSS, transforming it into a grid with three columns instead of the original four used by WooCommerce. This adjustment was made to showcase products in a larger format, enhancing visual appeal. Additionally, custom CSS was utilized to position the category list beside the products, facilitating easy navigation and ensuring an improved user experience.
Single Product Page
By consolidating comprehensive product details, diverse payment options, and related products in one accessible location, I prioritized user convenience and efficiency.
This approach also enhances customer satisfaction, encouraging informed decision-making and potentially increasing the average transaction value.
Cart Preview
To enhance the overall visual coherence of my ecommerce platform, I took the initiative to customize the cart preview, ensuring it seamlessly aligns with the brand’s color palette.
By carefully selecting and implementing the specific hues and tones that characterize the overall aesthetic of the website, I aimed to create a consistent and visually appealing user experience.
Cart Page
For the cart, I chose to use a plugin that allowed me to have a different template than the default WooCommerce design commonly seen on various websites.
Despite having a unique appearance, the plugin ensures the same functionality, injecting a touch of innovation into the page.
