Collxx
How I converted a Figma design into a secure, high performing WordPress store that showcases COLLXX’s curated collections
See live site ↗ See live site ↗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.
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.
Engineering 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.
Explore more case studies.
Explore full architecture breakdowns, metrics, and before/after performance results.
