ProEd Course Pages

The course pages for an HSC tutoring centre in Sydney, built in Framer on one CMS template. Most of the work was deciding what belonged in the CMS, and then writing the few things Framer couldn't do on its own.

The problem

ProEd teaches Years 7 to 12 across English, maths and the sciences, out of more than one campus in Sydney. Every course needs a page of its own, and twenty seven pages maintained by hand drift apart inside a term.

The harder part was that the pages had to stay editable by the people who run the centre. Anything hard-coded would need a developer again later, so the real question on every section was whether it belonged in the CMS or in the furniture around it.

What I did

I built one template rather than twenty seven pages

Every course page runs off a single CMS template, with courses sitting alongside years, tutors, campuses and subjects, so a new course is a row rather than a page. Twenty nine of the text nodes on the page are bound to the CMS, and the fifteen that aren't are section furniture. That was the line I drew: if the centre would ever want to change it, it goes in the CMS.

I wrote the filters in code, because the canvas can't compare two values

The class finder has three dropdowns, for year, subject and campus. Framer's conditional visibility can ask whether a value is set and it can negate that, but it can't ask whether two values match, so a checked state was impossible to build on the canvas. I wrote a small checkbox component that takes the row's value and the current filter, normalises the case and the spacing, and draws the tick itself. Year and subject store the chosen name while campus stores the item id, so campus has to compare against its label instead.

I fixed the dropdowns that wouldn't close

Each field's tap set its own menu to open, and Framer has no toggle action, so nothing ever closed it again. A close layer inside the field didn't work either, because the click bubbled straight back to the field that had opened it. The fix was one backdrop per menu, sitting under the menu and over the page, which gives you both click again to close and click outside to dismiss.

I made the optional fields actually optional

Framer marks a new CMS field required by default, and that quietly broke every conditional section, because the centre couldn't leave a term, a holiday note, an FAQ or a testimonial empty without the page complaining. Re-adding each field with the same id and required set to false fixes it in place rather than creating a duplicate. Only the name, the year and the subject link are required now.

I missed a mobile frame that was already drawn

I built the mobile layout responsively from the desktop frame, and the Figma file had a mobile frame sitting in it the whole time that I never opened. It cost a rebuild. I check for a mobile frame before assuming a responsive pass will do now, because a designer who has drawn one has already made decisions I'd otherwise be guessing at.

What shipped

Twenty seven course pages across Years 7 to 12 in English, maths and the sciences, all running off one template, and each one carrying a sticky section nav, the weekly journey, the prices, the timetable and an FAQ. Desktop and mobile were merged and handed over in August 2026, and the pages are live at proed.framer.website.