The Redesign That Improved the Brand and Broke the Checkout
A specialty outdoor retailer with €95m online revenue relaunched its site after a rebrand: new design system, headless front end, cinematic hero video, and a simplified three-step checkout. Six weeks after launch, conversion is down 18% year on year, mobile conversion down 24%, and organic sessions down 11%. The brand team says the old site looked dated and the new identity must not be diluted; the e-commerce director wants to revert. Analytics shows the largest drop at the payment step, where the new wallet integration defaults to a saved card that many customers cannot edit. Automated accessibility testing flags contrast failures on the primary CTA and a keyboard trap in the size guide; a legal review is pending. The design system was adopted by only two of five product teams. The board meeting is in ten days.
1. In the first ten days, what do you revert, fix and leave alone? Justify the triage.
Read the worked answer
Triage by revenue and legal exposure, not by brand preference.
- Fix immediately (days 1–2): the saved-card defect at payment. It is the largest measured drop and a functional failure, not a design choice. Add an edit-payment path, test guest checkout, and monitor payment-step abandonment by device.
- Fix immediately (days 3–5): the keyboard trap and CTA contrast failures. These are accessibility defects with legal review pending; they are not aesthetic debates.
- Test, do not revert yet (days 6–10): the cinematic hero on mobile. Replace it with a poster image or shorter loop for mobile only, and A/B test LCP, scroll depth and conversion. Reverting the whole rebrand would discard brand equity without causal evidence.
- Diagnose: separate traffic-mix effects from on-site conversion. Paid brand campaign changes may explain organic-session shifts; do not attribute everything to design.
Present the board with a containment plan, not a binary revert. A full rollback is slow and risks losing the brand investment; doing nothing is indefensible because payment and accessibility are known defects.
2. The brand team insists the cinematic hero is non-negotiable. How do you resolve the conflict with performance and accessibility?
Read the worked answer
Reframe the conflict as brand guardrails versus delivery mechanics.
The brand team owns imagery, type, colour and tone. Performance and accessibility teams own load behaviour, contrast and interaction. A cinematic hero can remain part of the identity without forcing every mobile visitor to download it.
- Define a performance budget: maximum LCP, page weight and main-thread time for mobile. Translate it into a media spec.
- Use responsive delivery: poster image first, video only on capable devices and Wi-Fi, pause when off-screen, respect reduced-motion settings.
- Test brand recall, not just clicks: measure aided recall and preference alongside conversion. If the hero does not improve brand metrics enough to justify the conversion cost, the decision becomes evidence-based.
- Create a design-system exception process: the brand team can request an exception, but it must include a performance and accessibility assessment.
Reasoning: 'non-negotiable' usually means the underlying brand idea is non-negotiable, not the file size. Give the brand team a way to preserve identity while meeting measurable constraints.
3. Only two of five product teams adopted the design system. What operating model would make adoption stick?
Read the worked answer
Treat the design system as a product with users, funding and a roadmap-not as a PDF guideline.
- Name an owner and a small core team with funded time, not a side project.
- Publish adoption metrics: percentage of pages using core components, number of local overrides, accessibility defects per component, and time to launch a new page.
- Build contribution paths: product teams can propose components; the core team reviews, versions and documents them.
- Make the right thing easier: coded components, tokens, accessible defaults, and migration support. A design system that requires more work than a bespoke build will lose.
- Use governance with teeth: new pages must use core components unless an exception is approved with a remediation date.
- Report at the board level on adoption and defect reduction, linking the system to speed and risk.
Reasoning: adoption is a change-management problem, not a design-quality problem. The two teams that adopted it are evidence that the system works; the other three need incentives, support and consequences.