MagsBC

MagsBC has a lot to hold: member publications, professional development, funding programs, news, resources, applications, and a growing network of places where readers can find magazines. Those parts had accumulated over time. The site needed a clearer visual language and more consistent ways to move between them.

The homepage also had a particular job to do. It needed to express the variety and creativity of BC publishing without reducing dozens of distinct magazines to a generic association website. A static cover grid could show the collection, but it did little to invite discovery.

The technology behind the site needed to move forward too. The earlier website used a page builder. As web tools, AI capabilities, and the organization’s needs change, I wanted MagsBC to have more control over its own foundation and fewer constraints on what could come next.

At the same time, the organization needed a site it could keep using. Forms had to reflect the actual membership process. Resources had to be easy to filter. New programs needed room to grow. A memorable first impression had to connect to useful everyday work.

I developed the hero through an iterative process: testing the depth, speed, density, colour treatment, and fading of the covers until the movement felt spacious. The central message stays steady while the publications move around it. Visitors can choose a cover, browse the full directory, or explore membership.

That interaction sits within a broader design system. Typography, colour, spacing, buttons, and links follow shared rules, documented in a public Design Guidelines page. The guidelines include usable logo downloads and examples from the site itself, giving staff and collaborators a practical reference.

I moved the site from Elementor into a custom, hand-built WordPress theme. Its layouts, interactions, and design rules now live in readable files, with changes tracked in version control. Editorial content remains in WordPress, so the team can keep managing the site through a familiar interface.

That separation matters. The site’s presentation is no longer dependent on a page builder’s proprietary layout settings. A developer can inspect and extend the templates directly, and newer tools can work with the code and shared design rules. It gives MagsBC more room to adapt without having to replace the whole site whenever a new need appears.

I think of this as preparing for the future, rather than promising that a website will never need maintenance. The world is changing quickly. My job is to give MagsBC a clear, adaptable foundation that can change with it. Guidance inside the editor explains which parts staff can change and which are custom, and a staging environment gives us somewhere to test improvements before they reach the public site.

Across the site, I refined the member directory, resource filters, video library, news layouts, and mobile stacking. Membership applications now distinguish between memberships that require board approval and those that can be purchased directly. Magazine and Associate applicants submit their information first; payment follows approval. Video cards show their actual titles and publication dates, and editors can feature timely news using a Pinned category.

The Non-Traditional Newsstands map extends the same approach to a specific program. Built with React and Leaflet and embedded in the site, it connects locations with photographs, addresses, and venue information. As the program adds locations, the tool can grow with it.

This is how my Design Guidelines, Online Experience Builds, and ongoing partnership work connect: a shared foundation, a distinctive experience built on it, and continued improvements informed by how the organization operates.