Alien Handpan — Bilingual Musical Instrument eCommerce Website — Case Study
Digitex Crew transformed the approved Figma design into a custom WordPress eCommerce website for Alien Handpan, a Chinese musical instrument brand. The platform features a premium visual experience, responsive desktop and mobile layouts, Chinese and English content, custom post types, plugin-based functionality, and flexible content management. To support customers in the Chinese market, we also integrated Alipay and WeChat Pay. The result is a distinctive, user-friendly shopping experience that combines artistic brand storytelling with practical eCommerce functionality.
LIVE PREVIEW
Key Results
Accurately translate the original Figma design into WordPress
Result
Preserve the brand’s minimal and atmospheric visual style
Result
Support both Chinese and English content
Result
Work properly across desktop and mobile devices
Result
Provide payment methods familiar to Chinese customers
Result
Allow products and other website content to be managed efficiently
Result
The Challenge & Our Approach
The Challenge
The client had an approved Figma design for a premium handpan-instrument store and needed it translated into a working eCommerce site without losing its minimal, atmospheric style. The store also had to serve Chinese and English content, support the payment methods Chinese customers expect, and stay easy for the client to manage day to day.
Our Solution
Digitex Crew developed a custom, plugin-based WordPress solution based on the supplied Figma design. We created reusable content structures with custom post types, implemented bilingual content presentation, optimized the interface for multiple screen sizes and integrated Alipay and WeChat Pay into the purchasing experience. The development approach preserved the artistic direction of the original design while providing the client with a practical content-management system.
The Stack
WordPress
CMS the client can operate without a developer
Custom post types
Reusable content structures for products and pages
Bilingual content
Chinese and English presentation throughout
Alipay & WeChat Pay
Checkout methods familiar to Chinese customers
Responsive layouts
Faithful to the approved Figma design on all screens
How We Deliver Projects Like This
Every build in our portfolio — from a 195,000-product wholesale catalog to a bilingual WordPress storefront — moves through the same five-stage delivery process. It keeps the work predictable for us and stress-free for the client, and it is the reason projects like this one ship on scope instead of drifting. Here is what working with us looks like, stage by stage.
1. Discovery & Scoping
We start by listening, not pitching. Before any design or code, we sit down with the client — by video call, or in person for businesses in the GTA — to map what the site actually needs to do: who will use it, what actions they should take, which payment methods, languages, and account types are involved, and what content already exists. That conversation becomes a written scope with fixed deliverables, in plain English, so everyone knows exactly what is included before money changes hands.
2. Design
Once the scope is approved, design starts with structure: page hierarchy, navigation, and user flows come first, then the visual layer of layout, typography, and colour — including the states every screen needs, such as empty, loading, error, and success. Clients who arrive with brand files, like the approved Figma designs behind several of our builds, see their vision translated faithfully; clients without one get a direction proposed from scratch. Every design is worked out for mobile and desktop together, because that is how real visitors experience it.
3. Build
Development happens in staged milestones the client can actually review. We set up the right environment — whether that is a Next.js application with a PostgreSQL database, or a WordPress build with custom post types and plugins — then construct from the foundations upward: data models, accounts and permissions, payment integrations such as Alipay and WeChat Pay, and finally the interface on top. Milestone reviews mean the client watches progress while there is still time to adjust, rather than meeting one big reveal at the end.
4. Testing & Launch
Before anything goes live, we test the way a real user would: on phones and desktops, in every supported language, across the full order or sign-up flow — including declined payments and edge cases, not just the happy path. Content is loaded, analytics and SEO basics are configured, and performance is checked so first visits feel fast. Launch is scheduled with the client, not sprung on them: we pick a low-traffic window, watch the deployment closely, and stay on hand as the first real traffic arrives.
5. Support After Launch
Launch day is a beginning, not a handoff. Every build ships with a support period, and most clients keep us on for ongoing help: security updates, backups, content changes, small improvements, and advice when the business grows in a new direction. Because we document what we build and keep the stack understandable, clients are never locked in — most simply choose to stay.
Plain-English Pricing
Every project is quoted in Canadian dollars before work starts, priced against the written scope, and billed in milestones that match the stages above. A project like this one never turns into an open-ended hourly tab, and there are no surprise line items waiting at the end.
Because we serve both GTA small businesses and Chinese-language companies, many of our builds cross languages and payment cultures. We are comfortable delivering bilingual Chinese-English websites, integrating Alipay and WeChat Pay alongside conventional payment methods, and structuring content so both audiences can navigate it easily. For a non-technical client, that experience saves real time: we already know the questions a Chinese payment provider will ask, how bilingual navigation should be labelled, and where translation workflows usually break down — so those problems get solved during planning instead of surfacing mid-build.
Requirements sometimes change during a build — a new product line, an extra account type, a last-minute language. When that happens, we do not bury the change in the invoice. We explain what the change affects, quote it against the written scope, and let the client decide before any extra work begins. Small adjustments that clearly belong inside the original scope are simply absorbed. That habit keeps the trust earned during discovery intact all the way through launch, and it means the final bill never surprises anyone.
We also build with visibility in mind from day one. Clean page structure, fast load times, proper headings, local SEO signals for GTA searches, and answer-engine-friendly content are treated as part of delivery rather than as add-ons — because a well-built site that nobody finds has only done half its job. Every launch includes the technical SEO fundamentals, and we leave the client a plain-English summary of what to do next to be found on Google and in AI answer engines.
Throughout the project, communication stays direct: one shared channel with the people actually building the site, updates at every milestone rather than a weekly status deck, and fast answers when something small comes up. Clients are never left wondering what is happening — if a stage is waiting on a decision or on content from their side, we say so plainly, because in our experience most delays in web projects come from unanswered questions, not from code.
Handoff is taken as seriously as launch day. The client receives admin access to everything, documentation written for non-developers, and a short walkthrough of the parts they will touch most often — adding a product, publishing a post, checking an order. Where a platform like WordPress lets the owner run day-to-day content themselves, we train them to do exactly that, because a website the client can operate is cheaper to own over its whole life than one that needs a developer for every small edit.
The result is a build the client understands: they have seen each stage, approved each milestone, and knows exactly what their site does and why. That transparency is deliberate — it is how a small team earns repeat business and referrals across the GTA and abroad.
Why Businesses Hire Digitex Crew
Most of our clients are small business owners, and most have been burned at least once — by an agency that went quiet for months, a freelancer who disappeared mid-project, or a quote that doubled once the work was underway. We built Digitex Crew to be the opposite of that. We are a small local team based in North York, Toronto, and when you hire us you talk directly to the people doing the work: the same small group that scopes your project is the one designing, building, and answering your emails. There is no account-manager layer translating messages back and forth, and no junior team learning on your budget.
We also keep the business side plain. Proposals are written in everyday English rather than agency jargon, pricing is in Canadian dollars and fixed against a written scope before work begins, and we do not ask clients to sign long lock-in contracts. If a project needs ongoing help, we earn that work month by month. And if a client ever wants to take their site elsewhere, the code, the content, and the logins belong to them — we would rather keep clients with good work than with paperwork.
Finally, we are practical marketers, not just developers. A website is judged by what it does for the business — orders placed, courses joined, wholesale accounts registered, phone calls started — so we build with conversion, search visibility, and the client's own capacity to run the site in mind. That holds whether the project is a full-stack Next.js application with Chinese payment integration or a WordPress store the owner updates themselves, and it is why much of our work comes from referrals and repeat clients across Toronto, North York, Scarborough, Etobicoke, Mississauga, Vaughan, and Markham.
We are a good fit for owners who want a working partner rather than a vendor: businesses launching a first real website, established shops replacing an aging one, and Chinese-language businesses that need a team comfortable working across both languages. Most of our projects are modest in budget by big-agency standards and serious in intent — the client wants something dependable, understandable, and built to produce revenue, not a design trophy that wins awards and wins nothing else.
Getting started is deliberately low-pressure. Reach us at contact.digitexcrew@gmail.com or +1 709-600-9358, tell us briefly what you are trying to accomplish, and we will come back with honest questions and a realistic sense of cost and timing — including telling you straight if a project is not a good match for us. If it is, the next step is a short discovery conversation and a written, fixed quote in Canadian dollars, with no obligation to proceed.
Small local team
You talk to the people doing the work — no account managers in between.
Plain language
Proposals and updates in everyday English, no jargon and no fine print.
Canadian-dollar pricing
Fixed quotes against a written scope, billed in clear milestones.
No long lock-ins
We earn ongoing work month by month; your site, content, and logins stay yours.
Want a Build Like This?
We design and develop custom websites, eCommerce stores, and membership platforms from our North York, Toronto studio — for businesses in the GTA and abroad. See how our web design and development service works, or contact us for a fixed quote on your project.
Start Your Project