• A Visually Engaging Landing Page: The Barbour x Land Rover collaboration was brought to life through a high-impact landing page. This feature-rich design highlighted the premium nature of both brands, using high-quality visuals and interactive elements to capture attention and guide users through the experience.
• Revitalised Basket and Payment Flow: Addressing pain points in the checkout process, the basket and payment journey were simplified for a smoother user experience. Key changes included clearer CTAs, more intuitive form layouts, and progress indicators to reduce friction and increase conversions.
• Responsive and Modern Design: The redesign ensured that Barbour’s website felt contemporary, with a responsive layout optimised for both desktop and mobile. This modernised interface provided a seamless and enjoyable shopping experience across all devices.
• Continuous Design Refinement: The design was continuously refined through multiple iterations, focusing on usability and user flow. These refinements ensured that the final design delivered an improved and seamless experience, with a clear emphasis on ease of navigation and visual appeal.

Desk research

The research phase began with desk research to understand the current challenges in e-commerce website design, particularly focusing on the user experience for premium brands like Barbour. The main focus areas included:

• User Engagement: Identifying challenges in creating a visually appealing yet functional layout that enhances the customer journey.
• Cluttered Interfaces: Analysing common issues such as overly complex navigation or dense content that might deter users from progressing through the website.
• Consistency: Evaluating the importance of delivering a seamless experience across desktop and mobile devices.

I also conducted a review of competitor websites and industry best practices, focusing on design trends and innovative features in e-commerce that improve navigation, product discovery, and trust signals. This helped guide the development of a user-friendly, mobile-optimised interface for Barbour's online store.

Competitor Analysis

In parallel, I explored what other premium brands were doing, particularly in terms of collaboration-driven landing pages. Brands like Land Rover and other luxury retail companies often use design elements that reflect the brand's identity while focusing on minimalism and clear messaging. Key takeaways from this included:

• Clear Visual Hierarchy: High-end brands often prioritise clean layouts that reduce visual clutter while ensuring prominent CTAs.
• Trust Elements: Many brands leverage trust signals (e.g., product reviews, secure checkout icons) prominently to instill confidence in users.
• Responsive Design: Given the shift to mobile shopping, responsive and mobile-first design was a priority, ensuring a seamless experience across devices.

User Feedback (Hypothetical)

Although this project did not involve direct user testing, I hypothesized potential pain points based on my research:

• Landing Page: Users might feel overwhelmed by a cluttered landing page, making it crucial to highlight the Barbour x Land Rover collaboration while keeping the design minimal.
• Checkout Process: Simplifying the checkout and payment flow to reduce drop-off rates during purchase.
• Mobile Experience: Given the trend of mobile shopping, ensuring the site was optimised for both mobile and desktop users was key.

I used these insights to refine the design and align it with Barbour's branding and user expectations.

Key Insights from Research

The research led to several insights:

1. Simplification: The landing page needed to prioritise key information and product highlights, particularly the Barbour x Land Rover collaboration, while avoiding visual clutter.
2. Consistency Across Devices: It became clear that both desktop and mobile users expect a seamless, consistent shopping experience, with quick load times and clear navigation.
3. Trust and Credibility: Users expect visible trust signals, especially when purchasing high-end products. This included ensuring easy access to product information, reviews, and secure payment options.

Reflection

Reflecting on the research findings, I identified key pain points to address and prioritised areas for improvement. The primary focus was to simplify the experience, enhance user engagement, and reflect Barbour’s premium image while incorporating the Land Rover collaboration. The main problem statements I aimed to address included:

• Creating Confidence: How can we design an experience that instills confidence in users as they engage with Barbour’s premium products and the Land Rover collaboration?
• Simplifying the Onboarding Process: How can we streamline the process, ensuring a smooth user flow from the landing page to checkout, reducing friction and abandonment?
• Balancing Functionality and Aesthetics: How can the design appeal to both cautious shoppers and those more tech-savvy, ensuring ease of use without compromising the premium aesthetic?
• Building Trust: How can we clearly communicate transparency and security throughout the experience to increase user confidence, especially in the checkout process?
• Ensuring Accessibility Across Devices: How can we ensure a seamless experience across desktop and mobile devices, maintaining usability and aesthetics?

Brainstorming

With these problem statements in mind, I began brainstorming potential solutions. Using low-fidelity wireframes, I explored concepts that would address these issues effectively. I prioritised creating a minimalistic yet engaging design that would highlight the Barbour x Land Rover collaboration while keeping the user journey streamlined.

Some of the ideas included:

• Simplified Navigation: Focus on intuitive menus and clearer CTAs that guide users through the experience with ease.
• Clear Product Focus: Emphasising the collaboration without overwhelming the user, using high-quality visuals and clear messaging.
• Trust Elements: Incorporating subtle trust signals, such as security icons and easy-to-find customer service contact details.

Userflows

To ensure smooth navigation, I mapped out key user flows for the site. These flows were designed to address user goals effectively, prioritising clarity and ease of use across devices:

1. Exploring the Barbour x Land Rover Collaboration: A flow that highlights the unique aspects of the collaboration, ensuring users can easily discover product details and exclusive offers.
2. Easy Checkout Process: A streamlined user flow that takes users from cart to checkout with minimal distractions, including trust-building elements and progress indicators.
3. Responsive Layouts: Ensuring that all pages are optimised for desktop and mobile experiences, providing consistency and accessibility.

Wireframes

I then transitioned to mid-fidelity wireframes using Figma, focusing on refining the layout, visual hierarchy, and placement of key elements like CTAs, forms, and product images. This stage allowed me to define:

• Clean Layouts: Emphasising simplicity with fewer elements that guide the user’s attention to key actions (e.g., purchasing, signing up for newsletters).
• CTA Visibility: Ensuring that call-to-action buttons stood out without being overwhelming, allowing for easy navigation toward the next step.
• Optimised Content Placement: Ensuring product descriptions and images were displayed clearly, with easy access to the Land Rover collaboration details.

Styleguide

The style guide was developed to ensure consistency with Barbour’s brand, incorporating a modern yet timeless look that conveys trust and sophistication. Key design decisions included:

• Color Palette: A blend of neutral tones with rich accent colors to maintain a premium feel while ensuring visual clarity and focus on key areas.
• Typography: Using clear, readable fonts with a balance between modernity and approachability, suitable for both product-focused and informational content.
• Icons & Buttons: Consistent iconography and buttons were used to create familiarity across the site and enhance usability, particularly on mobile.

High-Fidelity Designs

The final stage involved creating high-fidelity designs based on the wireframes and style guide. This step brought together all elements, ensuring that the design was polished, functional, and aligned with the user’s expectations for a premium brand experience. Special attention was given to:

• Responsiveness: Both desktop and mobile layouts were designed to maintain consistency and functionality across devices.li>
• Hierarchical Organisation: Information was clearly organised to ensure easy navigation and intuitive interaction, from exploring products to making a purchase.
• Trust Elements: Clear product details, including descriptions, customer reviews, and security features, were incorporated throughout the user journey.

Prototype

Finally, a clickable prototype was developed using Figma to simulate the functionality of the redesigned landing page and checkout experience. The prototype allowed for a seamless transition between key user flows, helping to validate the design choices. Although this was a personal project, the prototype served as a solid base for ensuring the design was intuitive and effective. By testing key interactions and reviewing the overall layout, I was able to refine the design to improve clarity and usability.

Usability Testing (Planned)

To ensure that the design would deliver an intuitive and user-friendly experience, usability testing is planned for the next stage of development. This testing phase will involve a small group of participants, who will interact with the Figma prototype to identify friction points and areas for refinement. The main goals will include:

• Navigability and Access: Evaluating how easily users can navigate through the landing page and key sections of the app, ensuring that actions are clear and easy to perform.
• Form Usability: Assessing the clarity and efficiency of forms, focusing on whether users can complete them without confusion.
• Tools for Managing Wealth: Identifying any usability issues with tools designed to help users manage their investments or plan for retirement, ensuring they are simple and effective to use.

Expected Areas for Improvement:

• Simplifying the layout to eliminate visual clutter and focus user attention on critical actions.
• Revamping forms to improve clarity and reduce unnecessary steps, making them quicker to complete.
• Enhancing tools to ensure they are easy to use, intuitive, and clearly labeled.

Beta Testing

Once the app prototype is fully functional, a beta testing phase will allow feedback collection from a small group of users. This audience will be reflective of the target demographic. The goal will be to test how well the app performs in a real-world context, validating the changes made to the landing page, forms, and investment tools.

Beta Testing Goals:

• Ensure the core features resonate with users and address their pain points.
• Refine the user flow and ensure that all features work as expected.
• Gather insights for any last-minute improvements before a wider launch.

A/B Testing (Future Consideration)

In future iterations, A/B testing will be used to refine specific design elements. For instance, different versions of the landing page and form layouts will be tested to see which configurations lead to better engagement and higher completion rates.

Planned A/B Testing Areas:

• Landing Page Design: Test various layout versions to identify the most effective design for user engagement.
• Basket and Payment Flow: Compare different designs for the basket and payment flow to identify the most efficient and user-friendly process that minimises drop-offs and maximises conversions.

This project provided valuable insights into the importance of aligning design with user needs. Through research and empathy, I learned that successful design emerges from understanding users’ pain points and motivations.

A key takeaway was the power of familiar design patterns, like Jacob’s Law, which helped create an intuitive, easy-to-navigate platform. The focus on simplicity and clarity ensured that users felt confident and engaged.

Overall, I’m proud of the user-centered design choices made throughout this process, and I’m excited about the potential impact this project can have in driving engagement and delivering value.