Rushed page and campaign launches on our other company websites often resulted in technical debt, inconsistent layouts, broken responsiveness, and a cluttered WordPress back-end environment.

• Scalability Risk: The brand needed a site that could grow rapidly and reliably.
• ‍Bespoke Design Elements: Standard Elementor widgets and the default set-ups offered by Add-ons were often limited or poorly optimized for dynamic template use cases.
• Consistency Gaps: Responsive typography limitations for global styling as well as spacing inconsistencies around custom coded and edited Elements had noticeable effects to layout and design stability across the site, resulting in a tedious process to maintain design consistency while building template designs.

I adopted a "Structure-First" methodology:

• Data Mapping: I started by outlining the WordPress Post Types to be used, the attributes that would define them and the taxonomies that would organize them, essentially setting up where and how future content should be posted, and structuring the fields to reflect the content they would hold. (e.g where to post new Programmes, Resources, Brand Merchandise, News, etc.)
• Technical Prototyping: I used the Unlimited Elements Elementor Add-on to produce custom widgets, working with AI to debug and refine JavaScript code required for more advanced interactive functionalities.‍
• Variable System: I set-up CSS variables to be used as values in global typography and layout settings, allowing them to be used in custom CSS and disconnected elements to keep consistency with the design system set in the global theme settings.‍
• Knowledge Transfer: As part of my final duties, I prepared a comprehensive handover presentation and documentation to ensure the team could continue work toward launching the site confidently.

I delivered a "Low-Maintenance" Elementor Theme Building Environment:

• Dynamic Templates: Created master templates for pages and sections that pull directly from ACF fields, ensuring that content editors only need to fill out text fields to generate a perfectly designed page.
• Custom Interaction Layer: Produced a better performing dynamic product carousel widget that solved specific issues and limitations of the available options while providing a more intuitive scrolling experience on both desktop and touch screen devices.
• Responsive Typography: By using named CSS variables for font-sizes I was able to use the responsive typography methods possible with CSS to allow the text on the website to maintain ideal proportionality even through the screen sizes between the main 3, which Elementor's global typography settings seem to have a blindspot.
• Flexible Layouts, Consistent Spacing: The spacing variables I defined in CSS, are essentially the values set in the global layout settings being made easily accessible for when a section has to be disconnected from the master templates layout, that way the section can be kept consistent with the layout settings even when they need to be changed.

• Operational Readiness: The site is now a "plug-and-play" environment where the team can launch new courses, pages, products and posts in a more seamless and time efficient manner.
• Technical Stability: The use of global variables and a documented IA has creates a stable foundation that resists technical debt.
• Empowered Team: Through detailed documentation handover, the team has a clearly structured environment designed to guide the process toward the official launch and future iterations.

• Advanced Logic: Leverage AI as a pair-programmer was essential for producing clean, stable code for the carousels as the depth of JavaScript logic I was working with was at the edge of my professional experience, but the experience gave me some valuable insight on developing code for maintainability and efficient re-usability, as well as consideration of user accessibility needs in the functionality of the component.
• Balancing Visuals and Structure: While it was tempting to start tinkering with the visuals when I started setting-up the site, I found the template and page designing process a lot easier and more efficient when working with the completed Structural set-up.
• The Importance of a Living Document: This project reinforced the importance of documenting as I go through my problem solving processes rather than doing so after the fact. It's a key development area I'd been actively working on making habitual, and although I still struggled with consistency I was still able to see meaningful progress upon reflection.