Role & responsibility
UX Designer
Timeframe
March – June 2019
TEAM
1x UX Designer
1x SEO Specialist
1x Data Analyst
2x Designers (client’s)
1x Developer (client’s)
SKILLS
UX research
Data analysis
Competitor analysis
User flows
Wireframing
UX / UI Design
Stakeholder management
TOOLS
Google Analytics
Adobe Photoshop
Overview
Artilect, a subsidiary of Schöffel, is a performance clothing brand built around a clear identity: bold, dynamic and “convention-breaking”. They’d nailed the aesthetic. But behind the striking visuals, the site had real UX problems, including a high bounce rate, heavy assets weighing down page speed, and almost no way for a visitor to actually buy anything.
When Artilect moved to a new domain, as part of their shift from studio to global retailer, it created a natural opportunity to redesign their key pages. Our team worked closely with Artilect’s own designers and developer to propose and deliver improved pages that preserved everything distinctive about the brand, while making the site actually perform as a shop.
Impact
From 6.1s to 3.7s on average, following removal of heavy assets
Within 8 weeks of the new site going live
From the home page, driven by clearer CTAs and a structured user flow
THE PROBLEM/S
On the surface, Artilect looked the part. But there were very few shoppable sections on the site. A user landing on the homepage (as seen here) had no clear path to a product because the CTAs either weren’t there or didn’t lead anywhere logical, the nav wasn’t easy to locate or browse, and shoppable products weren’t linked. The journey from “I’m interested” to “I want to buy this” simply didn’t exist in any structured way.
As mentioned, Artilect’s signature aesthetic leaned heavily on high-impact visuals. This included interactive features such as:
That boldness came at a cost: page speed was poor, and the bounce rate reflected it. Users were leaving before the page had fully loaded. The brand identity they’d worked so hard to build was actively preventing people from seeing it.
USER RESEARCH
From solely looking at the original site, it was clear these changes needed to be made. But before we could propose redesigning pages along with the migration, we needed evidence that merited such changes. Our SEO specialist ran a technical site audit, and I pulled together performance data alongside some basic behavioural analysis. A few findings stood out immediately:
Well above the 3-second threshold at which most users abandon a page
Significantly above category benchmarks for apparel retail
On the home page, while also featuring on several other key pages
Suggesting users weren’t finding a way through
The data told a clear story: the branding was costing the site performance, and the lack of a navigable user journey was costing it conversions. These were the two areas the redesign needed to address. At this point we took our findings to the client and they agreed to a UX rework on key pages, as long as it didn’t cost the branding.
COMPETITOR RESEARCH
To validate the direction further, we audited a range of comparable brands – performance outdoor apparel retailers at a similar level. Brands like Arc’teryx, Patagonia, and Rapha were reference points, alongside a few emerging labels in the trail running and mountain sports space.
The consistent pattern across the strongest performers was clear: they didn’t make users hunt for products. The home page structured the journey, typically leading to gendered parent pages (Women’s / Men’s), which then branched into either product categories or activity-based filters. There was always a logical, low-friction route to purchase from the very first page.
Importantly, several of these brands also maintained a strong visual identity without the page speed penalty. Bold photography, strong typography, and confident colour choices achieved the same impact as GIFs, without the load cost. This became a key reference point when presenting our recommendations to the client.
DESIGN DECISIONS
The most significant design decision on this project wasn’t a visual one, it was structural. The first thing we needed to agree on, with both the client and the internal team, was the user flow. There was no point wireframing pages until we knew how they connected.
We proposed a four-level hierarchy, which would give the site a clear, scalable path from entry to purchase.
Women’s / Men’s
by type / activity
Offering two category filters for products, by product type and by activity, was intended to tailor to all customer needs. For example those coming in thinking “I need a base layer” (product-first) or those thinking “I need kit for an alpine trip” (activity-first).
The pages we agreed to redesign as a priority were the homepage and the parent product pages (Women’s and Men’s), as these were the highest-traffic entry points and the most critical links in the journey.
WIREFRAMES
Once the user flow was agreed, we moved into wireframes. LoFi first to lock down structure, then HiFi in Photoshop to get the client something they could actually react to. We shared exports with Artilect’s design team at each stage so they could flag anything that felt off-brand early.
For the home page the information was kept similar just condensed. The main changes were introducing CTAs above the fold and tiles linking to key pages (for example parent pages, or best selling products). On the HiFI wireframe we also reduced a lot of the interactive elements with motion that could overwhelm UX. For example, we swapped scrolling text for bold headers, instead of GIFs, we used bright illustrations which still maintained the brand’s distinct feel without overloading the page or the user.
For the women’s / men’s landing pages, the wireframes were kept simple and introduced a two-way entry to categories: a row of product-type tiles (jackets, tees, etc.) and an activity-based section below (trail, mountain, snow, etc). This gave users the two instinctive routes to find what they were looking for.
HOME PAGE WIREFRAME LOFI
HOME PAGE WIREFRAME HIFI
CHALLENGES
Artilect were proud of their brand and rightly so. The identity was genuinely distinctive, so they were understandably cautious about anything that might make the site look like every other outdoor retailer. With so much change reflected on the wireframes, getting their sign-off on the direction was the main challenge.
The argument that landed: the branding is only working if people actually see it. A 6-second load time and a 58% bounce rate means most visitors are leaving before the page has finished rendering. The best thing we could do for the site was make sure users actually stayed.
The key commitment we made to the client was that the brand wasn’t being dialled back, it was being made to work harder. Bold colours and illustration would stay. The GIFs would be replaced with high-quality static imagery and considered animation rather than removed entirely. And the page architecture would give the brand more space to breathe across more pages, not less.
ITERATIONS
The homepage direction was agreed relatively quickly, but the parent product pages (Women’s / Men’s) took longer to settle. We went through three distinct layouts before landing on the final version, working through the options collaboratively with Artilect’s design team by sharing HiFi exports at each stage.
The first version leaned into Artilect’s editorial roots: a full-bleed hero, large photography, and brand copy leading into the product categories. The client loved the aesthetic, but the path to product was still unclear – it read more like a lookbook than a shop. Without a clear CTA or category entry point above the fold, the page asked a lot of a visitor who’d arrived ready to browse.
The second version went product-first: a category tile grid high up the page with minimal editorial content. Functionally cleaner, but the client felt it was losing the brand feel they valued. In their words, it “looked like everyone else”. They weren’t wrong, and for a brand that had built its identity around being anything but conventional, that was a real problem worth taking seriously.
The final version struck the balance both sides needed. A strong editorial hero section (keeping the bold Artilect feel) followed immediately by a clearly signposted product category section, then the activity-based browsing below it, with different UI elements to present these sections in a more engaging way than a simple grid. It implemented a lot of illustrations and imagery to keep the brand’s fun feel.
The brand came through in the visual language; the UX came through in the structure. It gave the client the identity they were protective of, while giving the user a clear and logical route to purchase – both teams were happy to move forward with this version.
Final Design
The final designs kept everything that made Artilect’s identity distinct – the bright yellow, the strong typography, the bold illustration style – while removing the elements that were quietly working against them. GIFs were replaced with static imagery and fun overlapping illustrations. The navigation expanded to reflect the agreed user flow. And every key page now had at least one clear, prominent CTA pointing the user towards a product page.
The new parent product pages gave users two instinctive routes into the product range, by category and by activity, with the kind of clear layout that lets the photography do the brand-building while the architecture does the UX work. The site moved from artilect.studio to artilectperformance.com with the new design live across all key pages at launch.
HOME PAGE BEFORE
HOME PAGE AFTER
PARENT PRODUCT PAGES
OUTCOME
Within two months of the new site going live, the data showed improvement across every metric we’d set out to address.
Bringing the site within acceptable benchmarks for the first time
From the homepage, reflecting a functional user journey for the first time
Within the first 8 weeks. Users were staying and exploring
In the two months post-launch vs the two months prior
LEARNINGS
The turning point in this project wasn’t a wireframe or a visual, it was the page speed data. Once the conversation moved away from aesthetics and onto numbers, the client’s resistance dropped significantly. Brand loyalty and UX goals aren’t in conflict if you frame them correctly, but it has to be grounded in objectivity rather than subjectivity.
We could have jumped into HiFi designs much earlier on this project, but in hindsight that would have created more back-and-forth. Spending time agreeing the user flow and information architecture first meant everyone was designing towards the same goal before a single pixel was placed.
The three-version journey on the parent product pages could have felt frustrating, but sharing HiFi exports at each stage made the process more collaborative. By version 3, Artilect felt ownership over the direction rather than just approval of ours. That made implementation much smoother.
Given the timeline and the domain migration happening simultaneously, we didn’t have the opportunity to run structured A/B tests post-launch. With more time, testing the two category entry points (product-type vs. activity) against each other would have given us useful data to refine further. Something to build in from the start on future projects.
Get in touch to work together or just for a virtual coffee and a chat.
