1EdTech Europe

1EdTech is a global non-profit that writes open standards for education technology, such as LTI, OneRoster and Open Badges. In 2026 it set up 1EdTech Europe, a separate association registered in Belgium, with its own board, members and fees. It needed its own website: one that explains why a European university, ministry or edtech company should join, lists its 79 member organisations from 17 countries, and hosts Learning Impact Europe, the yearly conference.

Zoom

There was no shortage of material. The trouble was that it came from different owners, in different formats, and the pieces didn't always agree.

• The parent organisation had just rebranded and sent a 58-page brand guide written mostly for print. An updated version arrived halfway through the project.
• Its web team had a Figma design system with tokens and components based on those brand guidelines. On some values, such as button radius, drop shadows and heading weight, it contradicted the brand guide. It also lacked much of what a real website needs: navigation menus, a page header, cards, tabs, accordions and form fields.
• The content was a Word document with tracked changes and comments from three reviewers.
• The member list was a separate document, the fees lived on the old website, the event photos on Flickr, and the conference programme on a ticketing platform.
• Some content didn't even exist yet.

Zoom

On top of that, the site had to meet WCAG 2.2 AA, which the European Accessibility Act makes a legal requirement, and it had to be buildable in WordPress with Elementor, so other people could maintain it after launch.

Deciding what the design system was missing

The web design system had tokens, buttons, links and icons, and not much else. I built what the pages needed on the same tokens: mega menus, a shared sub-page header, tabs, accordions, a slideshow, a fee finder, form fields, a toggle switch and the footer, each with hover and focus states. Where the two sources disagreed, the split was simple. The Figma design system decides web values: spacing, radii, elevation, the type ramp. The brand guide decides brand rules: colour use, photography, the conduit shapes, the logo, the tone of voice.

Following the copy selectively

The content brief had to be used word for word: nothing reworded, nothing left out. But the brief also made layout decisions along the way, often arbitrarily: one list of benefits as bullet points, a set of options as cards, a comparison as running text. I kept every sentence and decided for myself how each piece should be shown, often overruling the format the brief suggested. A comparison became a table, six parallel reasons became tabs with a visual each, and long lists became accordions on mobile. Where it made the page easier to use, I added a short line, such as a section intro or a label, as long as every fact in it came from the brief.

One system, three viewports

Every page has a desktop (1440 px), tablet (768 px) and mobile (390 px) frame, side by side on the canvas. Padding, gaps, heading sizes and section spacing are bound to tokens with a viewport mode, so switching a frame to Tablet or Mobile rescales it without hand edits. The desktop frames are also fluid from 768 px up: content stays capped at 1440 px and the margins grow. This way, the content looks good no matter whether it's viewed on a mobile screen or an ultra-wide monitor.

Zoom

Accessibility from the first frame

Because WCAG 2.2 AA was a legal requirement, I designed for it from day one. Every interactive component has a focus variant. Mobile layouts must reflow at 320 px. Forms have error states and mark required fields. Text contrast was checked on every brand colour pairing. Touch targets are at least 44 px. Inline links are underlined at rest. Icons that carry meaning always have a text label. Colour is never the only way information is shown. With all of this in the components from the start, the build can follow the design as it is.

Making my own assets

Experience has taught me that a website looks only as good as its assets, and that the hard part is finding assets that fit together. All I had was a small set of stock photos of mixed quality, so I made my own assets, built from the brand's own geometry. The conduits (quarter-ring shapes taken from the logo) appear large and cropped as backgrounds, small as strips, and as patterns behind coloured sections.

Zoom

For the more abstract topics I modelled 3D objects and rendered them with a two-colour dither or halftone effect in the brand colours, using a 3rd party UI tool: a ring of stars for European regulation, a trophy for the awards, and a set of everyday objects for the mega menus. One effect across all of them makes them read as a family. On the membership page, I gave the brand guidelines to Claude Motion and made five short animations that each explain one of the reasons to join. They match the shapes, colours and diagram style of the rest of the page so closely that they read as official brand material.

Zoom

Zoom

I explored a lot of options for each section, combining my own ideas, brainstorming with Claude and patterns from Mobbin. Nothing was thrown away: rejected versions moved to an Archive page, grouped by section, so a decision can be revisited without redoing the work.

Zoom

Getting the photos right

Real photos from the Learning Impact Europe 2026 conference arrived mid-project, as a Flickr album of 595 images. Instead of downloading all of them, I went through the thumbnails and shortlisted 28. The first step was to place the shortlisted photos according to the context of each section.

The rest of the site used the few stock photos the client had supplied at the start, and a reviewer later called them "too somber". So I had to swap some of them. I listed every photo on the site, 26 of them, and flagged 17: the grey ones, the empty rooms, and the ones which repeated. Then I built a simple HTML review page with Claude. For each candidate it shows the current photo, the text beside it, the reason to replace it, and three options from two folders: 63 photos from the 2024 conference and 77 approved stock images.

Zoom

The rule I settled on was conference photos where the text is about the community or the organisation, and stock where it's about learners, teachers or abstract ideas. Otherwise the site turns into rows of people on stage. Done by hand, choosing from dozens of options and then swapping each photo on every page, at every viewport and inside every component, would have taken a long time. With Claude, I built the review page, made my picks, and had them automatically applied everywhere in about half an hour.

Hunting for missing content

Wherever the brief left a gap, the page shows a visible "[Content needed]" marker. Halfway through, I audited every marker and went looking. The conference's ticketing site had the full 2026 programme and the sponsors, and the advisory board arrived as a PDF from the General Assembly, so real sessions, 11 sponsor logos and nine board members went in.

Zoom

Some things weren't published anywhere. The 2026 award winners were announced at the ceremony but never published. For those, I went hunting by contacting the people involved. Whatever is still missing is in a one-page request for the content owner, with a link from each item to its Figma frame. It has 10 rows now.

Zoom

From Figma to Elementor

For this project I worked out a new pipeline for getting a design from Figma to a live website. In our company, we used to rely on UiChemy, a plugin that converts Figma designs into Elementor, but layouts break on the way and fixing them takes as long as building. Having AI write the website from scratch wasn't an option either. The site will have other editors who need to change text and make small edits on their own, and it needs a CMS for news, events and newsletters. So the site stays in WordPress with Elementor, and the job became getting designs into it faster, with higher fidelity, and with more consistency. I did some research on what our options are, and discovered Novamira, a free WordPress plugin that connects WordPress to Claude over MCP and can build pages directly in Elementor. With it, the pipeline became Figma → Claude Code → Novamira → Elementor, with no converter plugin in between. The tokens became Elementor globals, one per token per colour mode (94 colours), so nothing on a page is a hard-coded hex value or font, and an editor picks "Ivy / heading" from a list. The header and footer are Theme Builder templates. The whole pipeline is written up in a handover document, so it can be reused for the next site.

Working with an AI agent

This was the first project where I used AI seriously in my design process, through Claude Code connected to Figma, WordPress and a set of image tools. I directed every step. For each section I gave it the inputs (the brand guide, the design system, the brief), showed examples of what I wanted and described it in detail. Tasks that came up often became custom skills, so they ran the same way every time. Then came rounds of corrections, mostly as annotations in Figma, until each screen was exactly how I wanted it. Every correction was written into the project files, so it held from one session to the next, and each correction became a lasting rule.

AI was most useful for wide changes and audits, where doing it by hand means checking hundreds of layers. I used it to audit the designs against WCAG 2.2 AA, to find spacing, colour and type values that weren't bound to tokens, to check that every page's text matched the brief word for word, to review the photos, and to compare the designs with the brand guidelines. A fix found on one page could then be applied to every page and all three viewports in one pass.

I also gave it a list of third-party tools it could drive to make assets. For the hero, that meant a pipeline that built a 3D model from the brand's geometry and rendered it in a web-based effects tool, so I could compare dozens of combinations of shape, effect and colour. The same pipeline made the dithered objects for the menus and sections, and an ASCII texture for one of the membership visuals.

The animations took a similar route. I designed each one in Claude Motion and then had it converted into a small, self-contained HTML block. On the site it plays at full fidelity, weighs far less than a video, uses the brand's colours and diagram style, and explains an abstract idea, such as a tangle of custom connectors collapsing into one standard API.

Zoom

Together, this sped up the design process and multiplied the number of variants I could explore for each section.

The scattered, conflicting sources now live in one Figma file. The brand rules and the web tokens meet in a single component library, and all 18 pages and 6 theme templates are built from it, so every page looks like part of the same site.

The reason the site exists, getting European organisations to join, runs as one path: why join, what each membership type gets, the fees in a single fee finder, the directory of all 79 members as social proof, and an enquiry form at the end. A visitor never has to leave for the global site to make up their mind.

Zoom

Missing content doesn't hold the structure back. Every Learning Impact Europe edition, news post and newsletter issue is an entry on a template, so adding the 2027 conference means filling in a few fields, rather than designing a new page. Each gap is marked on the page and tracked in one list, so a page can go live as soon as its content arrives.

The legal requirements are built into the components themselves. Focus states, touch targets and contrast are built into every component, and the cookie banner gives Accept and Reject equal weight.

The people who run the site after launch work inside the same system. The tokens are Elementor globals, so editors can change text, images and posts without breaking the design.

The site hasn't launched yet. The design is complete for every page in the brief, at three viewports, and the landing and membership pages are built as drafts in Elementor on the staging site, with the rest following the same pipeline.

As of writing, the pipeline is ready to go and the build is waiting only for content. That content is now a list of 10 items, each with an owner and a Figma link. The rules behind the design (the design system extensions, the copy policy, the 29-rule viewport checklist, the accessibility checklist) are written down, so the next page, or the next person on the project, can start from them.