Design Approach
Now that we have a confirmed approach and user shopping journey approved by the stakeholders, it’s time to start designing each component and page, which include:
- A dedicated sales page
- Homepage sales splash component
- Main navigation sale redirects
- Collections page sales component
- Sales pop-up modal
After discussing with the front-end lead, we also plan to run some quick A/B tests on these design changes before the upcoming major sales.
Dedicated Sales Page
Design Mockup
This is the initial sales page that was approved by the stakeholders after presenting several mockups. However, after discussing these mockups with the developers, we identified issues regarding the maintenance of certain components. Since the page needs to support multiple major sale campaigns, we realised the need for components that are easily manageable with minimal personalisation. Therefore, we decided to rethink and rework the page with the developers, aiming to create a versatile template suitable for multiple uses.
Final Sales Page
To consolidate and align all requirements from the main departments, I gathered the Integrated Marketing Team (responsible for the sale mechanics) and the front-end developers to finalise how the sale mechanics and components would be implemented for the major sale campaigns. By the end of these meetings, we agreed on a final design consisting of four main components. These components will be developed to facilitate easy management and replacement of information as the sale campaigns change.
Homepage Sales Splash Component
Design Mockup
This is the design of the Homepage Sales Splash component that has been approved by the stakeholders.
Objective: Streamline the users' shopping journey by reducing the number of steps required to achieve their goals.
How?: Offer a shorter, more direct path for users through one-stop destinations. Users are presented with options as soon as they land on the homepage.
Sales Splash User Journey
Here are the next page paths where we want to redirect the users.
Sales Splash A/B Test
We decided to run an A/B test to compare the following scenarios:
Scenario A: Users have access to the original sales splash, featuring two CTAs that lead to the collections page.
Scenario B: Users have access to the original CTAs along with additional links providing sales information, including details about discounts, leading to various category pages featuring products on sale.
Sales Splash Conclusion
Overall, the results show marginal differences and are spread across various regions, making it difficult to identify a clear superior variant for the future. However, when examining heatmaps, Variant 2 shows some benefits on mobile devices, acting as a convenient quick link or shortcut to various sale destinations.
In conclusion, considering the slight advantage observed for Variant 2, I recommended adopting this version for Black Friday and other major sales events. For regular sales and promotions, we suggest continuing with Variant 1.
Main Navigation Sales Navigation
We replaced the 'Shop All' navigation with a customised version for the Major Sales campaigns. While the overall journey remains the same, this change engages more users to shop sales and gives greater prominence to the sales.
Collections Page Sales Component
Here is the Sales component I proposed to place at the top of the Collections page. This ensures that users see the active offers as soon as they land on the Collections page to shop, followed by the original flow of the page that introduces one product at a time.
Sales Pop-Up Modal
After experimenting with various ways of displaying the detailed sales information in the pop-up, I decided to propose keeping it the same as the original sales. The purpose of the pop-up modal is to ensure easy maintenance, especially since the frequency of sales information changes is uncertain. Additionally, the current design provides an easy-to-read, good flow.
Shopping Cart A/B Test
In addition to optimising and designing the sales components, I discussed with the Front End lead the implementation of two A/B tests for the Shopping Cart. These tests aim to improve the checkout journey for users, especially since this major sales period will be one of the most important times of the year to drive conversions.
A/B Test 1: Cart Page - Re-ordering Content on Mobile
We tested two mobile variants with different content orders. In Variant A, warranty and shipping details were above the primary checkout CTA, while in Variant B, they were below it. Our goal was to see if the placement of these details affected users' purchase decisions and if showing the checkout CTA earlier led to higher conversion rates.
A/B Test 2: Cart Page - Hiding navigation elements
When users added products to their cart and were redirected to the cart page, our main goal was to encourage them to proceed to checkout while still allowing the option to add more products. The original cart page included navigation and a sales banner with a 'Shop Now' CTA. To improve conversion rates, we experimented with limiting or omitting some elements, making the option to continue shopping less prominent.
