AL-IBIEWI00%
Al-IbiewiAl-Ibiewi

Web Design, WordPress & Automation

ABUBAKAR ZUBAIR OKHAYOLEDESIGN ENGINEER
Abubakar Zubair Okhayole

Engineer by discipline, designer by obsession. Websites, online stores and automations that solve real business problems.

Zone A home page, premium handmade bags
Marketing Princess home page, digital marketing for Pilates studios
Al-Ibiewi LMS product walkthrough section
Al-Amānah Academy contact page
Zone A our craft page, every stitch tells a story
Marketing Princess accelerator page
Al-Ibiewi LMS blog for Islamic academy leaders
Zone A services page, beyond the bag
Marketing Princess portfolio page
Al-Khayr Qur'an Institute class selection and registration page
Al-Amānah Academy home page, learn Qur'an with ease
Zone A product collection of handmade bags
Marketing Princess founder introduction
Al-Ibiewi LMS about page
Al-Amānah Academy video testimonial section
Zone A shop page, buy handmade bags in Nigeria
Marketing Princess marketing story section
Al-Ibiewi LMS feature section
Al-Khayr Qur'an Institute home page, we teach children to become confident memorisers
Al-Ibiewi LMS home page, run your Quran madrasah from one place
Al-Amānah Academy about page
Zone A about page, crafted with purpose in Nigeria
Marketing Princess services page
Al-Ibiewi LMS platform guides and video tutorials
Al-Amānah Academy student application form
Zone A real Google reviews section
Al-Amānah Academy testimonials and partners
Al-Khayr Qur'an Institute Quranic packages section
03 flagship projects

Three products I designed and built end to end, and what they did for the people who use them.

01Al-Ibiewi Studio2026
10Academies onboarded within 24 hours of launch

One system to run an online Islamic academy

Most learning management systems fail Islamic academies because they assume pre-recorded videos rather than live Halaqah recitation. Al-Ibiewi LMS was engineered to bring live classes, Quran progress, attendance, and payments into one unified operating system.

My role/Product Design / Next.js / PostgreSQL

Al-Ibiewi LMS home page, run your Quran madrasah from one place
Al-Ibiewi LMS on mobile
02Al-Amānah Academy2024
70+Students enrolled in week one, $0 on ads

A Quran school that fills its classes from Google

There was no existing website. Everything was designed in Figma and developed in Elementor around how prospective parents evaluate online Quran and Arabic programmes.

My role/UX Design / WordPress / CRM Automation

Al-Amānah Academy home page, learn Qur'an with ease
Al-Amānah Academy on mobile
03Zone A Limited2025
#1On Google for handmade bags in Nigeria

A leather bag brand that finally sells online

Zone A already had high offline sales globally for its handcrafted leather bags, but its existing website had yielded zero online orders despite recurring hosting fees. I engineered a lean, fast e-commerce architecture designed to capture organic search intent and convert visits into paid orders.

My role/WooCommerce / Technical SEO

Zone A home page, premium handmade bags
Zone A on mobile
How I got here

Five chapters, one builder.

01 / 05DESIGN

It started with type, colour and layout.

I started out in graphic design and UI/UX, creating brand identities, marketing flyers, and screen layouts. I spent years obsessing over typography, colors, and layout rhythm so that every design looks intentional and feels effortless to use.

Picked up/Brand identity / Typography / Figma / Marketing flyers

SpecimenBricolage / Instrument
AaAa
Visual rhythm48px
Visual rhythm32px
Visual rhythm18px
Ink
#080808
Paper
#F4F4F6
Vermilion
#C44332
Muted
#9CA3AF
02 / 05MOTION

Then I made things move.

Static layouts only tell part of the story, so I expanded into motion design. Learning how elements should move and respond helped me create interfaces that feel alive and naturally guide people toward taking action.

Picked up/Micro-interactions / Transitions / Hover and feedback states / Framer Motion

Easingcubic-bezier(.16, 1, .3, 1)
linear
ease-out-expo
03 / 05WORDPRESS

Then designs had to go live.

Designing in Figma is great, but businesses need working websites. I started building with WordPress and Elementor to get sites live quickly, but I soon realized standard page builders had limits. So I learned how to build custom post types and relational database structures with Pods, which allowed me to build complex, dynamic sites without bloated code.

Picked up/WordPress / Elementor / Pods / Custom post types

Pods / custom post typesrelations
students
idrel
full_nametext
guardian_phonetext
enrollments
student_idrel
course_idrel
statustext
courses
idrel
titletext
tutortext
04 / 05GROWTH

Then sites had to pay for themselves.

You know what?! A website is only as good as the actual results it brings in. That is why I dove into technical SEO so my clients could rank on Google, built WooCommerce stores that turn visitors into buyers, and set up automated workflows using n8n so that new leads, invoices, and notifications run smoothly on autopilot.

Picked up/Technical SEO / WooCommerce / n8n / Google Business Profile

Search + n8non autopilot
handmade bags in Nigeria
#1
shopzonea.comZone A Limited, Handmade Leather Bags
Form
CRM
WhatsApp
Invoice
70+
Week one enrollments
$0
Spent on ads
05 / 05CODE

Now I build the whole thing in code.

To remove limitations completely, I went through Meta's Front-End Developer program and mastered modern development with JavaScript, React, and clean code principles. Today, I combine my engineering background with modern AI and agentic workflows to build custom themes, bespoke web apps, and automated digital solutions that load fast and work without friction.

Picked up/React / Next.js / TypeScript / Claude Code

enrol/page.tsxbilling.ts
1export default async function Enrol() {
2 const academy = await getTenant();
3 const plan = await paystack.subscribe(academy);
4 await n8n.trigger("welcome", plan);
5 return <Dashboard academy={academy} />;
6}
Type check passed
Production build passed
Agents draft it, I review every line
What this means for you

Mostprojectsgetpassedbetweenadesignerwhodoesnotcode,adeveloperwholacksvisualcraft,andamarketertryingtocompensateforaslowwebsite.

BecauseIhavewalkedtheentirepathacrossdesign,relationaldata,automations,andengineering,yougetoneunifiedmindowningtheentireoutcomefromconcepttoconversion.

Visual Elegance

01

Clean layouts, sharp typography, and purposeful motion that build instant credibility.

Zone A storefront
Zone A storefront

Solid Architecture

02

Dynamic data structures, custom themes, and zero unnecessary plugins.

Al-Ibiewi LMS roster
Al-Ibiewi LMS roster

Automated Operations

03

n8n pipelines that connect your forms, CRM, WhatsApp, and invoices to save hours of manual work.

Automated Paystack billing, Al-Ibiewi LMS
Automated Paystack billing, Al-Ibiewi LMS

Business Growth

04

Search-ready semantic code, fast load times, and high-converting checkouts.

Al-Amānah Academy ranking on Google
Al-Amānah Academy ranking on Google
What I use every day
FigmaNext.jsReactTypeScriptTailwind CSSWordPressWooCommercen8nPython
UI/UX designMotionWordPressWooCommerceTechnical SEOn8n automationNext.js appsBrand identity
Client proof

WallahitheonlythingIregretafterhavingthiswebsiteisnothavingitearlierbeforenow.
Amanullahi JimohFounder, Al-Amānah Academy
“I got my first website order today 🎉🥳🥳🥳🎉 I've been getting enquiries this past week but none was converting, it was frustrating at first but finally one got through today.. though they came to my inbox via the website but got my website suggestion when they searched for handmade bags in Nigeria 🎉🥳🥳🫂🫂 Alhamdulillah, more to come Insha'Allah”
Founder, Zone A LimitedFirst Online Order
“You are a lifesaver. Thank you so much. I appreciate all your efforts so far. Jazakumllahu Khairan.”
Marketing PrincessLong-term Retainer
Read the reviews on Google