COLLXX: WordPress E-commerce website

Ayodeji Praise

Ayodeji Praise Eluyemi

How I converted a Figma design into a secure, high performing WordPress store that showcases COLLXX’s curated collections

THE CHALLENGE
COLLXX needed a site that showcased products from many local designers, with clean navigation so users could easily browse categories like Clothing, Accessories, Fragrance, etc. The challenge was to:
Convert complex Figma components into reliable WordPress templates for desktop and mobile.
Upload, organise, and make discoverable more than 100 products with categories and filters.
Integrate secure payment options and build a seamless checkout experience to boost buyer trust.Improve mobile performance and implement on page SEO so the site can start ranking and driving organic traffic.
THE SOLUTION
While working with Tobams Group, I collaborated within a three person delivery team: a UI/UX designer, another WordPress developer, and myself. Together we delivered a responsive, secure, and optimised WordPress store.
Converted Figma layouts into pixel-accurate, reusable WordPress templates and adjusted responsive behaviours for touch devices.
Built a scalable product structure and import workflow to upload and categorise 100+ products for easy browsing.
Integrated payment gateways and applied security best practices to ensure safe transactions and visible trust signals.
Implemented performance and SEO improvements including image optimisation, caching, clean markup, metadata, and accessible content structure.
LINK TO LIVE SITE:
PROCESS
This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.
Research & Planning Mapped Figma screens to WordPress templates, defined product taxonomy, and planned the content upload process so the team could scale product entry without errors. Coordinated requirements and launch timeline with Tobams Group stakeholders.
Design & Prototyping Worked with the UI/UX designer to validate interactions and mobile layouts. Built quick prototypes for product lists and checkout flows to confirm usability before development.
Development & Implementation Converted components into WordPress templates, set up product imports, configured payment integrations, and hardened site security. Applied performance fixes, ran cross-device testing and SEO checks, then completed final QA before launch.
Like this project

Posted Jan 31, 2025

How I converted a Figma design into a secure, high performing WordPress store that showcases COLLXX’s curated collection.