I designed and built the frontend. UI/UX designs of this project.
The Challenge
Morocco has thousands of people trying to sell online. Their options:
Youcan.shop — Templates look amateur. Everyone recognizes them. Kills credibility.
Shopify — Too expensive. Strict payment gateway requirements our market can't meet.
WooCommerce — Works, but too technical. Non-developers can't set it up.
People wanted to look professional without learning WordPress or paying Shopify prices.
Who This Was For
Abdelhadi owns a clothing store. Sells modest wear for hijabi women. Ramadan was coming, wanted to push sales online.
He tried Youcan — pricing didn't work for him. Tried Shopify — couldn't figure out the payment setup and monthly fees were too high.
Doesn't understand how websites work. Just wants: put up photos of his clothes, people buy, he ships. That's it.
What I Built
Drag-and-drop page builder (blocks with previews, not technical jargon)
Full RTL for Arabic
WhatsApp as a payment option (alongside Stripe/PayPal)
Customer portal for buyers
Light/dark mode toggle per block
Why WhatsApp Payments
Stripe/PayPal require business registration, bank accounts, approval processes. Most sellers don't qualify or don't want the hassle.
WhatsApp is already how they do business. So: buyer clicks checkout → WhatsApp opens with order details → seller confirms payment manually → buyer gets access.
No gateway fees. No approval process. Just works.
The Builder
Users don't think in "hero sections." They think: "I need to show my products" or "I want testimonials here."
So blocks are labeled by outcome, not structure. You see what it looks like, drag it in, done.
Onboarding
Most platforms overwhelm you with setup questions before you see anything. We do the opposite: three steps, store is live.
Pick your business type. Add a name, logo, tagline. Set up one product. Done. Your site exists.
Post-onboarding lets you customize — more products, colors, payment methods. But it's optional. The store works immediately. You can tweak later if you want, or just start selling.
The Design System
Messy Figma file. Components evolved over 8 months as needs got clearer. Some over-engineered, some hacked together at 2am. All of it is live.
What you're seeing: A Figma file that grew organically over 8 months. Not every component follows the same structure. Some are over-engineered, some are barely documented. But every one of them is in production.
What I'd Do Differently
Lock down spacing and naming conventions earlier. Test mobile editing sooner. Write down why I made certain decisions.
Platform's live. Sellers are using it.