The Brief
In order to keep up with today’s ever-changing digital landscape, providing a seamless and engaging user experience across all platforms is critical to driving customer satisfaction, retention and conversions. Tech21’s digital presence had room for optimisation. The goal was to give every platform a premium look and feel that matched the quality of the products being sold.
The redesign was structured around three key focus areas: the product display page, the pushbag and cart experience, and the site navigation. Each was approached individually as part of an ongoing improvement programme throughout 2024 and into the present.
Research & Audit
Before any design work began, I conducted a thorough audit of the existing site alongside competitor research. Direct competitors, including Otterbox, Spigen, Mous, Casetify, Zagg and PanzerGlass were reviewed for how they handle product navigation, homepage structure and feature presentation. Indirect competitors such as Apple, Google, Native Union and SkinnyDip London were also reviewed — looking at how premium brands focus on products, guide users through their pages and tell their brand story.
UX and site design resources, including Baymard, Awwwards and the Nielsen Norman Group, were used to benchmark against industry best practices, ensuring the design decisions were grounded in evidence rather than preference.
Product Display Page (PDP)
The PDP redesign focused on improving how products were presented and how cross-selling was handled, specifically around Tech21’s bundle offering, which pairs cases with screen protectors and accessories.
Key changes included moving the primary CTA higher up the page, adding delivery information directly beneath it, and introducing a KSP callout section before the product details, giving users clear, scannable reasons to buy before they reach the full description. A bundle container was introduced below the product features section, allowing users to build their bundle directly from the PDP via a pullout drawer. The drawer design was chosen over a dropdown as it provides a clearer image, description and pricing comparison for each accessory option.
A sticky footer was also added — once a user scrolls past the main CTA, a persistent bar at the bottom of the screen allows them to add the product to their basket without scrolling back to the top. On desktop, this also surfaces the product name, image and price. All changes were designed for both desktop and mobile, with the mobile layout stacking sections vertically to accommodate the reduced screen space.
Pushbag & Cart
The pushbag and cart redesign addressed the full bundle journey. From the moment a user adds a product to their basket, through to checkout, both the pushbag (the slide-out panel triggered on add to basket) and the full cart page were redesigned across four distinct states: empty, bundle not started, bundle not complete, and bundle complete.
Each state communicates clearly where the user is in the bundle journey. If a user adds an eligible case but hasn’t started a bundle, the pushbag surfaces relevant accessory options immediately. If they’ve started but not completed a three-item bundle, messaging updates to let them know more can be added. Once complete, the bundle suggestions are removed, and the messaging confirms the bundle is done.
A free delivery progress indicator was also introduced, showing users how much more they need to spend to qualify, which provides an additional incentive to complete the bundle.
The cart page mirrors the pushbag states but with additional functionality, including quantity adjustment and an edit button for changing product options such as colour.
Navigation
The navigation redesign was one of the most structurally significant changes to the site. The existing menu had several usability issues: it was left-aligned, causing accidental hover triggers; the dropdown height made it difficult to dismiss on smaller screens; icons cluttered the sub-items; and the structure didn’t accurately reflect the full range of products Tech21 sells.
The redesigned navigation is centrally aligned, reducing accidental activation, which seemed to be a common pain point. The user would move their mouse away from the search/URL bar and hover over the menu most commonly on the left-hand side, and then the menu would appear, and because it covered nearly the full height of the screen, it made it much harder than it needed to be to close or hover off the menu.
The dropdown height has been significantly reduced. Icons have been removed from menu items to give elements more breathing room. Screen protectors have been elevated to their own top-level menu item rather than sitting inside accessories.
The new structure uses a five-column layout: sub-items on the left, and a mix of product listings and imagery filling the remaining four columns. This layout adapts per category: the Phones dropdown expands to show Apple, Samsung and Google with nested model-level navigation; the MacBook dropdown surfaces protection ranges before drilling into Air and Pro by size and year; the iPad section uses imagery to guide users, given the currently limited product range; and the Screen Protection and Accessories dropdowns link directly to collection pages without further nesting.
The search function was also redesigned, now a clickable icon that opens a full search bar with recommended products and popular searches, making it more consistent with the overall navigation aesthetic.
Mobile designs follow the same structural logic, with the menu stacking into a standard mobile navigation pattern with nested sub-menus and dropdown levels.
Blog & Editorial Content
Beyond the core site pages, I took ownership of how Tech21’s blog posts are built and presented. Previously, posts were constrained to whatever the default Shopify blog template allowed, functional, but limited in terms of layout and visual variety. I introduced a more flexible approach, combining the default layout with custom HTML blocks that give individual posts a richer, more editorial feel without requiring a full template rebuild.
The most recent example is the EvoGuard range post, where I used custom HTML alongside the standard layout to introduce a side-by-side comparison table, an icon-led feature grid and an embedded product video, all sitting cohesively within the same post. The result is a page that reads and feels more like a product editorial than a standard blog entry, which is more appropriate for a product launch and more effective at communicating what makes the product different.
This approach gives us meaningful control over layout and hierarchy on a post-by-post basis, without the overhead of building bespoke templates for every piece of content.
Help Centre
Tech21’s customer support was previously handled entirely through Zendesk, which opened as an external platform whenever a customer clicked through from the site. This created several problems. Because Zendesk redirects back to the US site by default, customers in the UK, EU and Asia who clicked “back to site” from support would land on the wrong regional site, a straightforward but frustrating UX failure. The content itself was also generic across all regions, meaning a UK customer looking for information specific to their region would see undifferentiated content written for all markets simultaneously. This was especially noticeable for content such as shipping and returns, as different countries, even in the same region, will have different return methods or carriers. So the original page had a very long list of information for different countries, separated by region. The new design means the pages are much shorter and there is only relevant information presented to the user. It also made it harder to write T&C’s for sales or promotions as we would have to convert & cater for all currencies in one paragraph, as opposed to being able to have different ones for different regions.
The fix was to move the Help Centre fully on-site, designing and building a dedicated section within the Tech21 site itself. I designed both desktop and mobile versions across all six sections: Shipping, Promotions & Discounts, Returns, Warranty, Product Info, and Contact Us. Each has its own landing and sub-page structure using an accordion FAQ pattern for the detailed content.
Bringing it on-site solves all three underlying issues. The regional redirect problem disappears entirely. Content can now be tailored per region, so UK customers see UK-specific shipping policies, warranty terms and return instructions rather than a one-size-fits-all document. And because it sits within the standard site CMS rather than an external platform, more people across the business can access, edit and maintain the content, reducing the bottleneck that comes with a third-party support tool.
The pages were deliberately designed to look slightly different from the rest of the content on the site (narrower content section, special navigation, titles, subtitles, and format) so that the user knows this is not the regular part of the site for shopping or brand stories, this is more the legal & business part of the site, whilst still maintaining the overall Tech21 look and feel. We used these custom elements to redesign our other legal pages, such as the privacy policy and modern slavery act pages, to provide consistency across the site and its content, whilst making it clear which parts of the site perform what actions.
