AboutSolutionsProjectsCase StudiesContact
Refer a client — get 15% off your next project
Case study

Figma to Bricks WordPress portfolio for SerVeekay

Figma to Bricks Builder WordPress development

Project
first-time Figma to WordPress build
Timeline
3 weeks
Visit live site
Client context

SerVeekay is a personal portfolio and freelance services website for Waleed, a UI/UX and product designer. The goal was to convert a detailed Figma design into a polished WordPress website using Bricks Builder, while keeping the site responsive, editable, and focused on lead generation. The final website presents services, portfolio projects, pricing options, testimonials, FAQs, and discovery-call CTAs in a clean, conversion-focused structure.

Case typefirst-time Figma to WordPress build

Project context used to guide scope and delivery.

IndustryUI/UX design and product design services

Project context used to guide scope and delivery.

ObjectiveConvert Figma design into a responsive Bricks Builder WordPress website

Project context used to guide scope and delivery.

Project typeFigma to Bricks Builder WordPress development

Project context used to guide scope and delivery.

Timeline3 weeks

Project context used to guide scope and delivery.

Live siteserveekay.com

Open the completed production website.

Challenges and results

What changed after launch

A side-by-side view of the project friction and the practical outcomes delivered.

Before

Challenges

Detailed portfolio structureThe website needed to present services, case studies, pricing, testimonials, FAQs, and personal branding without making the page feel crowded.
Strong visual accuracyThe Figma design used custom typography, dark visual sections, gradients, rounded cards, and spacing systems that needed to be implemented accurately in Bricks Builder.
Lead-focused user flowThe site had to guide startup founders and businesses from portfolio browsing toward booking a discovery call or starting a project.
After

Results and benefits

Figma to Bricks conversionThe design was converted into a responsive Bricks Builder WordPress website with accurate typography, spacing, layout structure, and visual styling.
Editable portfolio foundationWordPress, ACF, and reusable Bricks sections made portfolio content, service information, and page sections easier to manage.
Conversion-focused presentationServices, pricing, testimonials, portfolio projects, FAQs, and CTAs were structured to support trust-building and lead generation.
Tools

Stack matched the workflow

Each tool had a specific job: editing, layout production, content structure, SEO, security, or performance.

The build focused on clean Bricks Builder structure, reusable sections, responsive layouts, organized CMS fields, and a lightweight plugin stack for easier long-term maintenance.

Bricks BuilderVisual WordPress builder for fast custom layouts and design.
Advanced Custom FieldsStructured WordPress fields for flexible editable website content.
SEOPressComplete WordPress SEO for metadata, indexing, and optimization.
Google Site KitGoogle insights for Search Console, Analytics, and performance data.
HappyFilesWordPress media organization for cleaner file management workflows.
Admin ColumnsCustom WordPress admin columns for efficient content management.
WordPress CMSFlexible content management for scalable business websites.
Branding and logo

A bold, premium portfolio style for a product designer.

The visual system uses dark backgrounds, warm peach highlights, custom typography, soft gradients, and rounded layouts to create a modern designer-led brand experience.

Typography
Primary fontNeue Haas Grotesk Display Pro
Font 2Bricolage Grotesque

Neue Haas Grotesk Display Pro creates a premium display feel, while Bricolage Grotesque supports expressive, modern interface typography.

Colors
Primary color#F1B890Background color#2F363CText color#FFFFFFMuted color#9FA6AC
Logo
SerVeekay logo
+
Brand system

The visual system uses dark backgrounds, warm peach highlights, custom typography, soft gradients, and rounded layouts to create a modern designer-led brand experience.

Delivered pages

Selected SerVeekay desktop page views

A focused look at the portfolio pages converted from Figma into Bricks Builder.

serveekay.com / serveekay landing page
serveekay.com / serveekay landing page
SerVeekay landing pageFirst-time WordPress page build
Contact / Hire Me

Let's build it right.

Share your goals, current site, and timeline. I will respond with a practical next step for custom React.js, HTML/CSS, JavaScript, or Next.js work.

Send project detailsGet a build estimate
Emailayoubkhan558@hotmail.com+92 334 781 2124LinkedIn