Sackcloth & Ashes is built on a promise: for every blanket purchased, another is donated to someone experiencing homelessness.
Over multi-phase stewardship across 5+ years, the website evolved through new collections, collaborations, and growing operational complexity, while staying calm, credible, and easy to navigate.
As the brand scaled, the challenge was consistency. Each launch introduced new content, layouts, and constraints, and the experience still had to remain cohesive.
I led UX, UI, and front-end implementation as a tech lead, building reusable patterns that strengthened impact and sustainability through visual hierarchy, clarified key decision points across the purchase journey, and improved conversion through production-shipped changes.
Senior UX/UI Designer + UI Engineer
UX/UI lead · System design · Information architecture · Collaboration and partnership page framework · Conversion optimization · Funnel and session analysis · Cart and checkout UX · Front-end implementation
Custom Shopify theme with reusable modules (Liquid + HTML/CSS/JS)
Sackcloth & Ashes
April 2021 – Present
As the brand expanded, the site became a multi-entry ecosystem. Customers can arrive through collections, campaigns, collaborations, or story pages, and each path needs to converge into the same purchase flow.
The risk was experience drift. When page types multiply, inconsistency shows up in small ways, different layouts, different interaction patterns, different rules, and customers feel it as uncertainty.
The goal was to keep the system cohesive across surfaces: consistent hierarchy, predictable patterns, and a purchase journey that stays clear no matter where someone starts.
Star Wars collaboration landing (archived) · After Effects motion concept to Shopify build · Implemented end to end · Responsive across breakpoints
Collaborations include: National Geographic · Smiley x Morgan Harper Nichols · Legacy x Naiomi and Tyler Glasses · Seasons x Lauren Good Day · Smokey Bear · Yellowstone · Distinct creative per partner · Consistent page system
• End-to-end UX/UI across the storefront, from information architecture to key page templates, interaction patterns, and decision clarity, while leading design and front-end delivery
• Collaboration and partnership landing framework, including reusable page patterns, hierarchy, visual systems, and launch-ready structure
• Core commerce experience: collection and product decision zones, cart behavior, checkout-adjacent UX, and confidence-building moments
• Continuous optimization through funnel and session analysis to remove friction, address drop-off points, and improve conversion
• Front-end implementation and production QA to ensure design intent held consistently across devices, breakpoints, and real edge cases
Homepage system in motion. Autoplay modules and scroll-based storytelling designed to keep the experience calm, cohesive, and conversion-ready, while funneling customers into the right shopping path by audience and intent.
Some of the core storefront surfaces: navigation, collection filtering, PDP decision structure, and a cart drawer with free-shipping progress and context-aware upsells.
E-commerce rarely fails because of visuals. It fails when the system becomes inconsistent under real customer behavior.
Sackcloth & Ashes had to balance four tensions most storefronts avoid:
Mission and meaning must build trust, without slowing down purchase decisions.
Collaborations and collections need distinct creative, while the underlying patterns stay predictable.
Browsing is not buying. The experience must support both and still converge into a clear next step.
Remove unnecessary steps, but keep the right guidance to reduce hesitation and drop-off.
This required system-level constraints that protect clarity across surfaces and time.
These were operational constraints used to make decisions repeatable across years of launches, collaborations, and seasonal peaks. They protected clarity as the site evolved, and they kept the purchase journey predictable no matter where someone entered.
Impact and sustainability are communicated with restraint: clear hierarchy, plain language, proof where needed. The tone is values-forward and confident, closer to Patagonia than a nonprofit pitch, meaning it invites learning and opting in to the cause rather than applying pressure or guilt.
Impact story · Sustainability proof · Values-forward tone · Trust signals
Every surface answers the basics quickly. Users should never work to understand what they’re looking at, how it works, or what to do next.
Landing hierarchy · Collection grid · PDP decision zones · Primary CTA
Seasonal intent changes behavior. During gifting peaks, customers are deciding, not exploring. Pages prioritize decision clarity: what it is, who it’s for, why it matters, and when it arrives.
Seasonal promo · Gift clarity · Shipping confidence · Delivery expectations
Collaborations and collections can look different, but they cannot behave differently. Layout rules, decision zones, and purchase patterns stay consistent so customers build confidence across pages.
Collaboration framework · Reusable modules · Shared layout rules · Consistent path to purchase
Upsells should reduce regret, not add noise. Suggestions appear only when they help the customer decide and never interrupt checkout flow.
Free-shipping progress · Cart guidance · Relevant upsells · Checkout momentum
Quality only holds when the work is modular and implementation is resilient. Reusable patterns protect clarity across devices, edge cases, and years of change.
Modular sections · Responsive behavior · Cross-browser QA · Launch-ready reuse
Together, these constraints kept the experience calm, credible, and easy to buy from, even as the brand scaled.
To keep a growing storefront cohesive, I paired quantitative funnel data with qualitative behavior signals, then benchmarked against mission led brands and best in class blanket retailers to pressure test clarity, credibility, and conversion.
Shopify Analytics + Reports: entry pages, discovery paths, add to cart rate, cart to checkout drop off, device mix, conversion by collection and campaign
Lucky Orange (replays + heatmaps): scroll depth, dead clicks, hesitation loops, nav usage, filter behavior, CTA engagement
Sessions by landing page · Add to cart and checkout reach · Scroll and click heatmaps · Replay based friction signals
Mission led commerce tone: Patagonia style values forward storytelling that invites learning and opt in support
1 for 1 models: Bombas, TOMS for impact clarity without guilt framing
Category credibility: Pendleton, Rumpl for craft cues, merchandising patterns, and product truth
Entry points diversified, but decision needs stayed constant. Most sessions still started on the homepage, with the rest distributed across collaborations, collections, campaigns, and impact or sustainability pages, so every route had to converge into the same decision zones.
Navigation and filtering acted like a confidence barometer. Repeated menu opens and filter toggling signaled uncertainty, not exploration, which pointed to hierarchy and wayfinding gaps.
On PDPs, clarity earned trust and story reinforced it. The strongest pages answered what it is, who it’s for, why it matters, and when it arrives first, then used mission and quality as proof.
Seasonality shifted behavior into buy mode. During gifting peaks, fewer choices and stronger shipping confidence reduced drop off without flattening the brand.
A Patagonia like impact voice increased credibility. Mission content worked best when it invited learning and opt in support, never urgency theater or guilt pressure.
These learnings shaped the constraints and patterns that follow, so every experience stays coherent and the path to purchase stays clear.
As Sackcloth & Ashes grew through collaborations, seasonal peaks, and new content routes, the site needed to stay predictable. No matter where a customer entered, the experience had to resolve into the same decision clarity and path to purchase.
To make that repeatable in production, I built the storefront as a set of custom sections and blocks managed through Shopify’s theme editor. That let the team compose pages, reuse patterns, and launch quickly without breaking hierarchy, behavior, or conversion flow.
Multiple entry points across home, navigation, collections, collaborations, PDPs, and mission routes
Consistency under variety so distinct creative still behaves like one system
Launch speed with guardrails so new pages ship fast without drift
Team scalability so non technical teammates can build and update confidently
I created a library of configurable sections with block level controls so pages could be assembled and adjusted in the theme editor without one off code changes for every launch.
Core surfaces followed the same decision pattern so customers always know where to look and what to do next. Navigation sets intent, collections narrow choices with predictable filtering, PDPs center the decision zone around what it is, why it matters, who it’s for, and when it arrives, and the cart drawer keeps momentum with free shipping progress and relevant add ons.
Impact and sustainability content uses the same system rules so it builds credibility and then returns users back into shopping without changing how the site behaves.
Modular patterns were engineered to hold across devices, edge cases, and ongoing iteration, keeping the experience consistent as the site evolved.
Multiple entry routes · Shared decision zones · Predictable path to purchase · Reusable Shopify sections + blocks · Launches without experience drift
Faster collaboration and seasonal launches using repeatable page building blocks
Consistent hierarchy and interaction rules across the entire storefront
Safer iteration driven by analytics without fragmenting the experience
Early on, I partnered with engineers when we needed custom solutions beyond the theme, including custom apps and deeper integrations that supported gifting and storefront operations. I helped translate product and UX requirements into buildable specs, protected the customer experience through implementation details, and ensured these solutions stayed consistent with the storefront system.
Over time, I took full ownership of the Shopify front end. That meant not only shipping UI, but shaping how the theme was structured, extended, and maintained so launches, collaborations, promotions, and seasonal peaks could scale without experience drift.
My goal was not to add complexity. It was to build patterns that survive production, are easy to iterate, and stay fast inside Shopify’s constraints.
When I build a custom section, I follow a repeatable structure:
Liquid and HTML structure: Clean, readable markup and predictable layout patterns so sections stay easy to evolve without breaking hierarchy.
Schema-driven configuration: Settings and blocks that let admins compose pages safely in the Shopify theme editor without developer support.
Scoped styling: Consistent styling aligned to the design system, avoiding conflicts across sections and pages.
Lightweight behavior when needed: JavaScript only where it improves clarity or reduces friction, keeping interactions predictable and performance-minded.
Theme editor controls · Schema powered blocks · Safe non dev updates · Reusable launch module · Consistent layout across pages
JSON schema defines settings + blocks · Liquid renders clean markup · Styling stays scoped · JavaScript powers key interactions · Built for maintainability in Shopify constraints
This approach is what allowed the storefront to scale. New pages shipped quickly, while the customer journey stayed consistent across devices, partners, and seasons.
Across the last 12 months, the strongest signal was compounding improvement at the key decision points: fewer low-intent exits, stronger checkout completion, and higher conversion in the back half of the year as the system matured.
Store conversion strengthened over time: 1.01% in H1 → 1.43% in H2 (+0.42 pts, ~+42% lift), peaking at 2.10% in December.
Checkout completion improved: 42.4% in January → 46.7% in December (+4.3 pts) from sessions that reached checkout.
Bounce rate declined: 65.3% in January → 57.9% in December (-7.4 pts), signaling better intent-setting and clearer paths forward.
Funnel clarity held at scale: 284,758 sessions → 11,431 cart-add sessions (4.0%) → 8,269 reached checkout (2.9%) → 3,445 completed checkout (1.21%).
Imperfect Blankets drove strong purchase intent: 9.9% cart-add rate and 8.6% reached checkout from that landing page.
Sale also showed elevated intent: 5.9% cart-add rate and 4.7% reached checkout from that landing page.
Theme-editor controlled sections reduced engineering dependency for routine launches and updates, so the team could ship faster without fragmenting UX.
Repeatable patterns lowered QA overhead because the same interaction rules and decision zones held across campaigns, collections, and gifting moments.
Net result: a calmer, more predictable path to purchase that improved conversion while making launches easier to ship and safer to maintain across seasonal cycles.
Designing and engineering mission commerce over years reinforced a few principles that held up through seasonal volume, new collaborations, and constant iteration.
Trust scales through clarity, not persuasion. The system wins when it answers questions early and removes doubt at decision points.
Sustainability works when it is values forward, not sales forward. “Imperfect” succeeds because it feels honest and useful, not promotional.
Gifting is speed plus confidence. The experience should reduce comparison fatigue and make the next step obvious, especially during holiday peaks.
Upsells should feel like help, not friction. Cart additions performed best when they were optional, relevant, and timed to reduce regret.
Implementation is part of the craft. If the system cannot be maintained in Shopify’s constraints, it will not survive the next launch.
Build systems that stay calm under change.
Use consistent decision zones across surfaces so customers do not have to relearn the store.
Treat engineering structure as a UX deliverable, because it protects quality over time.
Explore sackclothandashes.com to see the full experience in context, from impact storytelling through product discovery and checkout. If something speaks to you, grab a blanket and help send one to a neighbor in need.
KANÉLA CAFÉ
A grounded, calming site for a Cape Town café. Visual identity, layout, and front-end built to match the space’s nourishing atmosphere.
LOCL
A local community platform built for real participation, not endless scrolling. Designed end-to-end, from early research through cross-platform UI.