A complete WordPress implementation combining information architecture, responsive UI, portfolio presentation, quotation flows, content planning, SEO foundations and hosting configuration.
Grupo A2 Prado needed a professional online presence capable of presenting engineering, architecture, interior design, project portfolios, content and the wider group structure without making the user navigate through a confusing collection of unrelated services.
The implementation was developed directly in WordPress using Divi. The existing visual identity and logo guided the interface, while custom CSS adjustments were used to refine the layout and adapt it for tablets and phones. The site also required portfolio documents presented through flipbooks, quotation forms with file uploads, a blog, newsletter capture, GDPR controls, security, caching and SEO configuration.
The workflow, sitemap and wireframes shown in this case study were reconstructed after launch from the implemented website. They document the real structure and decisions without suggesting that formal prototypes existed before the WordPress build.
Services, portfolio, group brands, blog and contact flows.
Visitors looking for construction, architecture or interior design support.
Reduce the route between initial research and a quotation request.
My contribution covered the website build, responsive refinement, content organisation and the operational setup required to publish and maintain the project. I also developed the websites for other companies within the group, including Master Roofs and Pró Resíduos, which will be documented as separate projects.
Built the pages in WordPress and Divi using the existing brand identity as the visual foundation.
Structured the website so visitors could understand the group, services and portfolio with less friction.
Prepared the technical environment instead of handing the final files to a separate infrastructure team.
Planned blog content around the construction market and configured the essential search-engine foundations.
The project was not designed through a traditional high-fidelity prototype before development. The interface evolved directly inside WordPress, using Divi as a visual implementation environment and custom CSS to solve responsive issues. The workflow below translates that real process into documentation that can be clearly explained to recruiters and clients.
The site had to support several user intentions: understanding the company, comparing services, reviewing completed projects, reading educational content, exploring other group brands and sending enough project information for a quotation.
Engineering, architecture and interior design are treated as distinct decision paths rather than one generic construction page.
Residential and commercial projects provide visual proof before asking the visitor to contact the company.
Educational content creates additional search entry points and supports the service pages through internal links.
Forms and file uploads collect project context and help the commercial team evaluate the enquiry.
These wireframes were reconstructed from the final website. They are not presented as original pre-development artefacts. Their purpose is to make the page hierarchy, content blocks and lead flow easier to understand.
You were already doing UX/UI work even without calling it that. The case demonstrates information hierarchy, responsive behaviour, conversion design, interface consistency and content organisation.
Custom CSS was used where default responsive behaviour was not enough, especially for spacing, typography, alignment and component proportions on tablets and phones.
The existing identity informed colour, typography and decorative details while headings, service summaries and calls to action retained clear priority.
Contact forms were structured to collect useful information and allow visitors to upload files for budget analysis.
DearFlip enabled visitors to review richer portfolio documents without leaving the website or downloading files first.
A Divi popup was configured to present an email capture message when the visitor appeared ready to leave.
Addresses, business hours, social links, maps and related brands were positioned as reassurance elements throughout the experience.
The portfolio should distinguish between the platform’s underlying technology and the code personally authored. WordPress runs on PHP and MySQL, while the direct contribution focused on Divi implementation, custom CSS, content configuration, code snippets, plugins and hosting administration.
WordPress and Divi implementation with custom CSS, plugin configuration, hosting setup and occasional code editing.
WordPress CMS with Divi, custom CSS, occasional HTML and code adjustments, plugin integrations, MySQL database configuration, cPanel deployment, DNS, SSL, email, caching and security.
The important technical story is not merely that plugins were installed. Each one supported a defined requirement within the user experience, marketing flow, security or maintenance process.
Displayed portfolio documents as interactive 3D flipbooks inside the site.
Portfolio experienceCreated quotation and contact forms, including project file uploads for commercial analysis.
Lead captureConfigured an exit-intent message encouraging newsletter registration before the visitor left.
RetentionManaged tracking code and small functional adjustments without editing core theme files directly.
CustomisationAdded consent controls and communication required for GDPR-oriented cookie compliance.
PrivacyReduced unwanted submissions and supported form hygiene.
Spam protectionSupported auditing, malware scanning and WordPress hardening.
SecurityImproved delivery speed through page caching and front-end optimisation options.
PerformanceConfigured essential metadata, indexation controls and the basic technical SEO structure.
Search visibilityThe blog was planned as more than a news area. Topic research and content planning created entry points related to construction, architecture, materials, technology and interior design, while the portfolio pages supported project-specific discovery.
Sucuri hardening and auditing, anti-spam controls and careful plugin configuration.
Cookie notification and consent configuration aligned with GDPR communication requirements.
WP Fastest Cache and image/content decisions to reduce unnecessary delivery weight.
Manual review and CSS correction for desktop, tablet and mobile layouts.
Form delivery, file uploads, navigation, links, popups and portfolio documents.
DNS, HTTPS, email accounts, hosting paths and live-domain behaviour.
The gallery is integrated directly into the case study. Each composition is displayed at a generous size, preserving its original proportion without cropping or distortion.
Key institutional sections, service hierarchy, project communication and presentation of the group structure.
Tablet and mobile adaptations created to maintain content hierarchy, navigation clarity and comfortable touch interaction.
The delivered result is a live institutional platform with service pages, a project portfolio, blog content, contact and quotation mechanisms, related group companies and the technical foundation required for hosting, security, performance and search visibility.
A published WordPress website configured from hosting through to user-facing forms and content.
A case that demonstrates design, implementation, infrastructure, SEO and marketing readiness together.
No verified analytics or conversion figures were provided, so the case avoids inventing quantitative results.
This project was completed without development assistance from generative AI. The portfolio states this explicitly because it is relevant to the project history.