OVERVIEW
Problem
There is a significant revenue opportunity to be gained by incorporating a "quick buy" option directly on the product collections page. By allowing users to add multiple items to their cart without having to click into each product detail page and make a selection, we can significantly improve the user experience and increase conversions.
CLIENT
SeaToSummit
Outcome
As the design manager, my primary responsibility was to ensure that the "quick buy" feature was not only visually appealing, but also effective, efficient, and user-friendly. This involved close collaboration with the UX/UI designer to develop a design that was not only visually consistent with the brand style, but also easy for users to understand and use.
Sea to Summit is an outdoor brand that specializes in producing high-quality outdoor gear and equipment for hikers, backpackers, climbers, and other outdoor enthusiasts.
INFO
Role
Design Manager
Team
Design Manager (me), CRO Strategist (Farid) & UX/UI Designer (Ellice)
Timeline
Wireframes 1 Week | UI Design 1 Week
UNDERSTANDING THE PROBLEM
Why are we doing this?
2
Increased Conversion Rates
A "quick buy" option can also have a significant impact on conversion rates. By reducing the number of clicks required to make a purchase, customers are more likely to complete the buying process and convert into paying customers.
This can ultimately lead to increased revenue and profits for the ecommerce company.
1
Improved User Experience
By providing a "quick buy" option on the collections page, customers can quickly and easily add items to their cart without the need to navigate to individual product pages.
This not only saves time but also provides a more streamlined and efficient user experience, which can lead to increased customer satisfaction and loyalty.
3
Competitive Advantage
In today's highly competitive ecommerce landscape, offering a "quick buy" option can provide a significant competitive advantage over other brands that don't offer this feature.
By making it easier and more convenient for customers to purchase products, ecommerce companies can differentiate themselves from competitors and attract more customers to their website.
HYPOTHESIS
By adding a "Quick Buy" option on client’s e-commerce collections page, we can streamline the purchase process and reduce friction in the buyer's journey, leading to an increase in conversion rates and revenue.
KEY OPPORTUNITIES
Overview of the previous experience
Our current collection page design requires the user to click on the product, view the product details, and then add it to their cart. This process can be time-consuming and may cause frustration, leading to a higher cart abandonment rate.
By adding a "Quick Buy" option, we can simplify the process and enable customers to purchase products with just one click. This will reduce the steps
in the conversion funnel and minimize the chance of losing customers due to
a complicated checkout process.
PAIN POINTS
1
3
Friction in the Buying Journey
Without a "Quick Buy" option, customers must navigate through several pages to purchase a product, which can be time-consuming and frustrating.
This friction in the buying journey can lead to cart abandonment and lower conversion rates.
Increased Cart Abandonment
When customers have to go through multiple steps to purchase a product, they may change their minds or become distracted, leading to cart abandonment.
This can result in lost sales and lower revenue for the e-commerce website.
2
Difficulty for Mobile Users
Mobile users may find it challenging to navigate through the entire purchase process, especially if the website is not mobile-friendly.
This can cause frustration and lower mobile conversion rates, as customers may choose to purchase from a competitor that offers a more seamless mobile experience.
4
Reduced Customer Satisfaction
Customers who are used to fast and efficient shopping experiences may be dissatisfied with a website that does not offer a "Quick Buy" option.
This dissatisfaction can lead to negative reviews and a damaged reputation for the e-commerce website.
STRATEGY
The plan of action
-
The first step is to understand the needs and preferences of the target audience. We can conduct user research to identify pain points in the buying journey and gather feedback on what features they would like to see in a "Quick Buy" option. We can also study the competitors' websites to identify best practices and opportunities for differentiation.
-
Based on the research findings, we can develop a prototype of the "Quick Buy" option. This prototype should be designed to align with the brand's visual identity and tone of voice. It should also be intuitive, easy to use, and accessible on both desktop and mobile devices.
-
I provided the client with a detailed design walkthrough that highlighted intuitive solutions using basic wireframes. Once the client approved our proposed solutions, the UX design team began implementing the final design while adhering to the brand guidelines. Throughout the design process, we ensured that the user's needs and goals remained at the forefront of our design decisions, creating a seamless and effective user experience.
-
After the design has been tested and refined, we can implement the "Quick Buy" option on the Sea to Summit website.
To address these concerns, I worked closely with our CRO strategists to identify the pain points and develop a strategy to improve the user’s experience.
Design Process
SOLUTION
A conversion-optimized design
RESULT
When a user hovers over an image, a 'Quick Shop' banner with a plus sign appears, indicating that it's clickable.
When the user clicks on the banner, a slide drawer appears from the right, allowing the user to quickly purchase the product without leaving the current page
After +QUICK SHOP
We were able to design and approve the high-fidelity prototype within just one week, which is a week faster than our expected timeline. Our client was highly impressed with the prototype and expressed no desire to make any changes to the design.
This is a testament to our team's dedication to delivering a high-quality product that met the client's expectations while also meeting the project timeline.
We're thrilled with the final design, and we look forward to seeing it live on the client's website!
2
Simplifying the product selection: Users to view and select product variants (such as size or color) directly from the quick buy drawer, and then add the selected variant to their cart by clicking the "Add-to-Cart" link. Once the link is clicked, the drawer will close, allowing the user to continue browsing or proceed to checkout.
4
Before +QUICK SHOP
PDP link: The option to still view the full product detail page is accessible via the “View Product Details” link.
Product image carousel: This Allows the user to view multiple product images in a scrollable flow within the sliding drawer
MOBILE EXPERIENCE
3
Responsive design: The drawer was designed to be responsive by adapting to different screen sizes and resolutions. This will ensure that users can access the drawer from any device, including desktop computers, tablets, and smartphones
1
RETROSPECTIVE
Final Thoughts & Takeaways
2
Purchasing Simplified
The Quick Buy slider drawer can significantly improve the user experience by reducing the friction of the purchase process. It provides users with a more seamless and efficient way to complete their purchase, which can ultimately lead to a more positive experience with the ecommerce website. This, in turn, can lead to increased customer loyalty and repeat business.
1
Completed Quickly
By involving stakeholders in the research and design process, we ensured that everyone is on the same page and working towards the same goal, which can further increase the chances of a successful solution on the first try. We were able to send this prototype into development a week early.
3
Standout From the Competition
This slider drawer helps to establish Sea to Summit as a modern and innovative brand that is committed to providing its users with the latest and most convenient features. This can help to build brand loyalty and attract new users who are looking for a more modern and user-friendly ecommerce experience.