A storytelling-first brand with a custom e-commerce engine

The brief

RarityByU isn't a shop with a story bolted on. It's the other way around. As Udene Jordan, the founder, puts it on the homepage:

RaritybyU was born out of the burning fire just to tell it all. I could remember things from as little as 3 years old, from extremely happy events to extremely traumatic events too. But growing up, I was only allowed to tell the happy ones while wave and smile keeping the rest to myself. And it's been the case for 23 years.

When Udene reached out through a mutual connection, she had an Instagram and TikTok presence but no website. The brand existed in her head and in her audience's replies, but nowhere she fully controlled. She wanted two things from the site, both of them difficult on their own and genuinely opposite when combined:

1. A platform for the storytelling. A place to write, share, and host the conversations her social posts had started but couldn't sustain.
2. A commerce engine for the personalised products she'd started selling: mugs, tumblers, and custom gift boxes carrying messages of empowerment, encouragement, and (her phrase) “rare beauty.”

Storytelling sites and commerce sites have opposite design needs. Storytelling wants white space, slow reading, editorial restraint. Commerce wants product-forward layouts, fast cart flows, conversion optimisation. Most attempts to do both end up doing neither well. The brief, in practice, was about reconciling those two without one cannibalising the other.

The approach

Three decisions shaped the build.

Decision 1: Separate the shop from the stories

The most important call was structural. Stories and shop got separate sections of the site, not blended together. The homepage doesn't push products in your face; the story pages don't feel like product funnels. They link to each other organically. A story about reclaiming something might mention a relevant personalised piece, and a product page might reference the story that inspired it, but they don't fight for the same real estate.

This was deliberate. The temptation in commerce-driven design is to put “Buy Now” buttons everywhere; the temptation in editorial design is to bury the products as if they were embarrassing. RarityByU needed neither. The products grow from the stories. That had to be visible in the architecture, not just claimed in copy.

Decision 2: Aggregate the existing audience, don't fragment it

Udene already had two thriving content channels on Instagram and YouTube. She didn't need a third one to manage; she needed a site that pulled the conversation in without forcing her to duplicate work.

So the site uses:

• A dedicated Posts section pulling her Instagram feed via an embed plugin
• A Stories section combining her YouTube videos and her on-site blog posts in one stream
• The blog itself, running on standard WordPress, for the long-form writing she couldn't do anywhere else

She publishes where she already publishes. The site reflects everything back into one place. No new workflow.

Decision 3: Match the visual language to the brand mark

Udene came in with a clear brand vision, including a logo built around a purple flower that became the brand's visual anchor. The site's palette extends from there: the purple matches the flower exactly, the supporting tones lean soft and editorial, the typography prioritises readability for long-form storytelling over commerce-site punchiness.

My role here wasn't to direct the brand, Udene had that handled. It was to translate it into a working web experience without losing the specific quality she'd already developed across her social presence.

The build

The technical core of this project was the e-commerce engine, and specifically the personalised product configuration. A note that matters: this was the first e-commerce site I had ever built. Saying that out loud is important because the choices we made, and the limitations we accepted, reflect that.

The personalised gift-box builder

The standout feature was a gift-box builder that lets customers select products, add a personal message to the whole box, and preview the result before checkout. Udene had pointed me to a reference site that did this; the brief was to replicate the capability, not the exact UX.

The implementation:

• WooCommerce for the e-commerce core, configured with variable products to handle the size/colour variations on items like mugs and tumblers
• A product add-ons plugin to handle the personal message inputs attached to gift box configurations
• Preview-before-checkout so customers could see what they were ordering with their message rendered

The honest part: the plugin we used was rigid and the result wasn't as polished as I'd have liked. The premium WooCommerce add-on ecosystem solves problems like this elegantly, but those plugins were beyond what the budget could absorb. So we stuck with free tooling, got the feature working, and accepted the trade-off that it wouldn't look as refined as paid alternatives. The feature worked, customers could configure, preview, and order, and for a launching brand, working beats refined.

If I were rebuilding this today on a larger budget, the gift-box builder would be the single area I'd most want to redo with custom development.

Variable products and custom fields

The personalised products themselves, a mug with a custom message, a tumbler with a name, a gift box with a recipient's note, required WooCommerce's variable product configuration extended with custom-field inputs at the product level. This was the trickiest part technically, and easily the steepest part of my learning curve on this project.

The shape of the problem: a customer doesn't just want a “medium mug.” They want a medium mug in a specific colour with a specific phrase on it. Stock management, pricing, image variants, and custom inputs all need to coordinate. Get any one of those wrong and you ship the wrong product to a real person.

This is the kind of work I now do confidently. In 2022 it was new territory, and I'm grateful Udene's patience gave me the room to figure it out.

Things I'm quietly proud of

A few small details that nobody would notice unless I pointed them out:

• The colour system actually works. Matching the brand flower's purple exactly across CSS, sitting comfortably alongside the supporting neutrals, scaling to states like hover and active without breaking, this took longer than it sounds and it's the foundation everything else sits on.
• The 404 page got real care. Most 404s are afterthoughts. This one matches the brand voice, gives helpful navigation back, and doesn't break the emotional register of the rest of the site.
• The checkout flow. Even with the budget-constrained tooling, the flow from cart → personalisation → checkout → confirmation works smoothly. The places it isn't pretty are the places where the plugin's default UI shows through; the places I had control over were tuned with care.
• Minor theme modifications throughout, spacing, typography, hover states, button styling, that don't look like modifications until you compare them to the original theme.

The outcome

The site went live in early 2023. Two things have stuck:

• Udene runs it independently. She manages products, writes stories, uploads to the shop, and publishes blog content without involving me. That was the brief and we hit it.
• The site became a destination, not just a brochure. Her audience found their way to it through her social channels, and the storytelling
  • product structure gave them somewhere to land that felt like a real brand, not a placeholder.

Udene's own words about the work, the ones she sent before the site even went live, remain my favourite kind of feedback. Not about the features, not about the technology, but about whether the feel matched her vision.

What this project taught me

Honest reflection: this was my first e-commerce project, and like all firsts, it was an education.

What I'd do differently: The gift-box builder is the obvious one. Today I'd either invest in better tooling upfront or build the configuration logic custom in PHP for full control. The free-plugin constraint was real at the time, but on a future similar project I'd push harder to get the right tools into the budget, because the refined experience would have served the brand better than the savings did.

What I'd keep the same: Almost everything else. The separation of stories and shop, the use of existing social feeds, the brand voice match, these were the right calls. I'd make them again on a similar project tomorrow.

The combination of those two, knowing when constraints forced an acceptable compromise, and when the architectural decisions were right , is the kind of clarity you only get by shipping. RarityByU was the project that taught me what good e-commerce architecture looks like, by building enough of one to see where it bent.