Mai’s Foods LLC is a food business built on a rich family tradition of over 45 years, specializing in handcrafted egg rolls (and upcoming products like crab rangoon). They sought a website that would effectively present their brand story, showcase product quality, allow potential customers/distributors to express interest, promote events & tastings, and support strong local SEO.
Amodkhandigital was entrusted to convert a Figma design into a fully functional, performant WordPress site using the GeneratePress theme, GenerateBlocks for page building, WP Rocket for performance, and RankMath for SEO.
Project Scope
The major deliverables for this project included:
- Converting a Figma design into a responsive WordPress site.
- Using GeneratePress as the theme for its lightweight footprint and flexibility.
- Using GenerateBlocks to build the page content and layout per design, maintaining consistency, modularity, and ease of editing.
- Setting up content sections: Home page, About, Contact, Product / Sample / Distributor interest forms, Events & Promotions, Reviews / Testimonials.
- Integrating contact or interest forms to capture leads (new customers, distributor requests).
- Ensuring site performance (loading speed, caching, image optimization).
- Implementing SEO best practices (on-page SEO, meta tags, structured data, mobile friendliness).
- Cross-browser testing and ensuring responsiveness (desktop, tablet, mobile).
- Branding integration: matching brand colors, typography, imagery from Figma design with attention to visual hierarchy and brand identity.
Planning & Process
Here’s how Amodkhandigital approached the project:
- Discovery & Requirements Gathering
- Met with the client to define goals: brand presentation, customer / distributor lead generation, events promotion, storytelling.
- Examined the Figma design: layout, sections, imagery, typography, interactions.
- Gathered content: copy for the brand story, product descriptions, event schedules, contact details, images.
- Technical Setup
- Chose GeneratePress for its lightweight code base, fast performance, and flexibility.
- Prepared hosting environment (wordpress install, SSL, backups).
- Development
- Converted Figma designs into static layouts using GenerateBlocks for block-based editing. This allowed modular reusable sections (hero sections, image + text, forms, testimonials, events).
- Ensured responsiveness (media queries, adjusting block settings) so that design would look good on mobile, tablet, desktop.
- Integrated WP-Rocket to handle caching, minification, lazy loading of images, optimizing serving static assets.
- Installed RankMath SEO plugin and configured site title tags, meta descriptions, sitemap, schema markup, SEO-friendly URLs.
- Content & Forms
- Built and styled forms for “Customer Interest”, “Distributor Request”, “Schedule a Tasting”. Ensured form fields match design and user needs.
- Populated content sections: brand story (“45-Year Special Family Recipe”), promise of quality, product images, events & promotions.
- Testing & Launch
- Tested across browsers (Chrome, Firefox, Safari, Edge) and devices.
- Optimized performance: tested page load times, image sizes, deferred scripts, etc.
- SEO audit: mobile usability, on-page elements (headings, image alt text), structured data.
- Client review and feedback, refinements.
- Final deployment and monitoring.
My Contributions
As the lead on this project (Amod Khan / Amodkhandigital), my contributions included:
- Translating the Figma design into WordPress structure: breaking the design into blocks, defining styles, custom spacing, typography, etc.
- Building the front-end using GenerateBlocks to match design responsiveness.
- Performance optimization: configuring WP Rocket, optimizing images, caching settings, lazy loading, asset minification.
- Setting up SEO foundations with RankMath: meta titles/descriptions, schema markup, sitemap and indexing, ensuring SEO best practices.
- Implementing lead generation forms and the logic for user paths (interest form, tasting, orders & distributor requests), and ensuring they are easy to use and well integrated with design.
- Ensuring brand consistency: matching colors, fonts, imagery, tone of voice.
- Quality assurance: cross-device / cross-browser testing, fixing responsive layout issues, and ensuring fast page speed.
Tools & Technologies
- WordPress as content management system.
- GeneratePress theme — chosen for speed, flexibility, clean code.
- GenerateBlocks — to build layout blocks and content in modular, reusable way.
- WP Rocket — for caching, optimization (minify, defer JS/CSS, lazy loading), improving performance metrics.
- RankMath SEO — for SEO configuration, metadata, permalink structure, schema.
- Figma — design source.
- Usual web development stack: HTML, CSS (within blocks), JS as needed for interactions.
Challenges & Solutions
| Challenge | Solution / Approach |
|---|---|
| Ensuring site speed while having rich imagery and media | Optimized image sizes, lazy loading, used WP Rocket for cache & asset minification/delayed loading; limited unnecessary plugins. |
| Maintaining pixel-perfect match with Figma across devices | Regular responsive checks, adjusting block settings, custom CSS tweaks where necessary. |
| Ensuring forms are both user-friendly and aligned with design | Prototype forms, ensure form fields are clear, error handling styled, ensure the flow (interest form → schedule → contact) is intuitive. |
| SEO & visibility | Used RankMath to define meta tags and structured data; ensured mobile friendliness and fast load times; clean HTML structure with headings and alt tags. |
Outcomes
- The website now communicates Mai’s Foods’ brand story effectively: heritage, flavor, quality.
- Lead-generation paths are built in (interest forms, distributor requests), making it easy for potential partners or customers to reach out.
- Events & Promotions section helps keep audience engaged and informed.
- Site performance is strong, which improves user experience and helps SEO.
- SEO setup ensures good visibility potential, indexing, and clean search engine presence.
If available, metrics such as page load times before vs after, SEO ranking improvements, or conversion/leads generated can be added here.
Lessons Learned & Future Opportunities
- Always optimize images from the beginning, especially for food / product photography, since visual appeal matters but large image sizes degrade performance.
- When working with block-based layout systems (like GenerateBlocks), sometimes doing custom block templates or patterns ahead helps speed up building repetitive sections.
- Monitoring performance over time is crucial—cache, plugin updates, etc. can affect speed.
- Opportunities for enhancements: adding richer media (video), multilingual support, more interactive content (e.g. tasting scheduling with calendar integration), or e-commerce if direct-sales are desired in future.
Conclusion
The Mai’s Foods LLC website is a project that embodies what Amodkhandigital strives for: merging strong brand storytelling with clean, performant, SEO-friendly development. By converting a detailed Figma design into a live, fully responsive site using GeneratePress, GenerateBlocks, WP Rocket, and RankMath, I delivered a solution that serves the client’s goals: attract customers, support distributors, promote the brand, and provide a solid online foundation.
