Project Details
Client:
Acid Test Design
Type:
Adobe XD to Webflow
Objective:
Working merch store.
Tools:
Adobe XD, Webflow, Finsweet Tools
Overview
I was subcontracted to bring a static Adobe XD design to life by creating a fully functional ecommerce store powered by Webflow. The design called for a side-scrolling layout, which presented a unique challenge. However, I was able to leverage my experience with Webflow's powerful CMS and interactions to create a seamless user experience.
The site features a custom-designed shopping cart, integrated with Stripe for secure payments, and custom-coded elements to enhance the site's functionality. The end result is a beautiful and intuitive ecommerce store that exceeded the client's expectations.
Approach
To approach the design of the ecommerce store, I first created a working wireframe layout using Webflow's on-scroll interaction. This allowed me to create a side-scrolling website that responded smoothly as the user navigated through the site.
I then added layers of parallax animations to the site to give it a sense of depth and movement. This created a visually engaging experience for users, which was essential for an ecommerce site that needed to capture the attention of potential customers.
In addition to the complexity of creating a fully functional side-scrolling e-commerce store, there was also the added challenge of ensuring that everything was fully responsive for mobile users. To further complicate matters, the client requested a light and dark mode for the website with a toggle on the home landing page.
To accomplish this, I used custom code to create a toggle switch that could change the color scheme of the entire website, including the Webflow CMS. This feature not only enhances the user experience but also demonstrates the website's flexibility and adaptability to different user preferences.
Conclusion
In conclusion, the project for Acid Test Designs presented several complexities, from turning a static Adobe XD design into a fully functional ecommerce store to creating a left-to-right sliding site with depth and parallax animations. Additionally, the site needed to be responsive to cater to mobile users and include a toggle for light and dark modes on the home landing page.
However, with careful planning and execution, the project was completed successfully, and the final result met the client's expectations. The site's engaging design, combined with its ease of use and responsiveness, provided an excellent user experience that is sure to attract and retain customers.