The Design, Development & Launch of Project Stronghold UK’s E-Commerce Experience

Introduction

After the successful Kickstarter campaign and the first production units reaching customers worldwide, Project Stronghold’s next step was clear: expand into e-commerce. With a growing customer base and the need for scalability, the time had come to start build of a digital storefront.

Making a Choice

Collaborating with Alex from Project Stronghold, we explored platform options for the storefront, finally settling on Shopify. Its digital storefront capabilities and scalability made it the best fit after reviewing competitor platforms. The goal of this choice was to ensure a robust foundation for both current and future needs.

Planning

Moving beyond the single-page lander I previously designed, the focus shifted to building a scalable and future-proof storefront. I began by identifying a site map to serve as the foundation of the build.

Next, I:

• Scoped essential features and layouts to drive the store.
• Ensured the system was flexible enough to accommodate future growth, such as additional products or new site features.

This planning phase laid the groundwork for the design and development process.

Content Management

One of the primary challenges was providing Alex with a system that gave him the power to manage the store independently. He needed the ability to:

• Add, edit, and remove products.
• Write and publish blog posts.
• Manage the site without needing to make design decisions.

To address these needs, I adopted a CMS approach, leveraging Shopify’s Liquid language. Custom templates acted as reusable building blocks for the storefront, enabling Alex to dynamically control content from the backend page editor without compromising the design.

Initial Design

With the foundations in place, I transitioned to Figma to develop the storefront’s look and feel.

The initial designs covered:

• Homepage, product page, cart, blogs, blog posts, contact, and policy pages.

The goal of this initial design phase was to find a balance between simplicity and flexibility, catering to both Alex’s needs and potential future growth.

CSS Practices

Given my prior experience designing Project Stronghold’s brand guidelines and Kickstarter lander, I was confident in making a start on a robust CSS stylesheet to support the new site.

The stylesheet followed a utility-class-first approach, ensuring:

• Reusable styles across the site for consistency and flexibility.
• Responsive design with modern CSS techniques like clamp to optimise layouts for both desktop and mobile.

Development

Learning Shopify’s Liquid was difficult at first. However, I quickly adapted and developed a range of custom templates tailored to Project Stronghold's needs.

The development phase focused on:

• Building drag-and-drop templates with simple input fields for editing content.
• Designing with scalability in mind, for example, modular templates accommodating the addition of more content.
• Prioritising usability, ensuring Alex could manage the site independently without technical knowledge.

This process was both rewarding and a significant learning experience, boosting my confidence in working with Shopify.

Finalisation of Design

After several review rounds with Alex, the designs were refined to strengthen the brand’s visual identity and ensure responsiveness across all devices. Dynamic pages were fully mapped, accommodating both populated and empty states.

Completion

The final sprint involved completing custom layouts, implementing content, and conducting thorough user flow testing. As most traffic was expected from mobile users, I ensured the mobile experience was seamless, with all necessary features easily accessible.

Key features included:

• A streamlined checkout process via Shopify’s Shop Pay, allowing users to complete purchases in just two steps from the product page (three from the homepage).

The store officially launched in November 2024, just in time for Black Friday. The project was a success, delivering a dynamic, user-friendly storefront tailored to Alex’s needs. This project was immensely rewarding, from overcoming technical challenges to giving Alex the power to manage his business as he saw fit. A key personal highlight was the strengethning of my skills in working with Shopify, and more specifically it's Liquid system for creating custom themes.

I wish Project Stronghold UK continued success and thank Alex for trusting me with this opportunity. Learn more about Project Stronghold UK

Visit Project Stronghold UK's Store.