The project
Novus Media partnered with LightSpeed to design and launch a network of 22 newspaper websites in just 90 days. With 50+ stakeholders to align, and 13 distinct brand styles to support, the team needed a scalable solution. The answer: a shared news publication design system built in Figma, with an accurate, real-time prototype and brand-ready components that let everyone — from editors, advertising sales reps and senior management —see and shape the end product long before development began.
The company
About Novus Media
Novus Media Network is a regional newspaper publisher formed from the spinout of a legacy print group. With 21 local news titles and a national hub, Novus is focused on community reporting and local advertising across South Africa. The group’s challenge was to replace outdated systems and go fully digital—fast.
The challenges
Requirements research – mapping multi-departmental needs and varied reader profiles
Before we could design or build anything, we needed to understand the needs of various departments—editorial, advertising, leadership, and tech—each with its own priorities and goals. We ran workshops, conducted one-on-one interviews, and distributed detailed Google Forms to gather structured input from all stakeholders.
Crafting clarity from complexity: how strategy defined structure
One of the most significant challenges we faced early on was defining a content strategy that worked across 21 community papers and the Novus Media hub—each with its own audience, editorial voice, and publishing culture. This wasn’t just about agreeing on a structure; it was about unifying a brand voice while preserving what made each title unique.
We began by analysing reader profiles across all regions, identifying variations in language use, content formats, and user expectations. These insights helped shape Novus Media’s collective voice and tone—guiding not only future editorial decisions but also informing our AI-assisted content generation processes.
The workshops and interviews we ran during this phase yielded more than just ideas—they gave us the foundation for a mission statement that Novus continues to use today. That shared editorial north star helped everyone—from editors to designers—pull in the same direction.
To support collaboration across the network, we structured a central content document in Google Drive to mirror the future site architecture. Editors from each publication contributed to this living resource, which also served to align content categories, tags, and page-level priorities—ultimately shaping key destinations like homepages and community portals.
Creating content for such a diverse range of publications was never going to be simple. But with a unified strategy, a central mission, and early editorial alignment, we built a system that respected local nuance while supporting a strong, scalable framework.
Local voices, shared structure: collecting content across 21 newsrooms
To ensure every publication felt personal and grounded in its community, we initiated a structured content collection process. Heads of each region received detailed questionnaires requesting essential content for key pages like “About Us”, “Team”, and “Contact”, along with contextual information unique to their audiences.
The responses helped us:
- Understand the tone, voice, and community focus of each publication
- Populate first drafts of real content to replace placeholder text early in the process
- Guide our layout and component choices based on actual editorial needs
This content fed directly into our design strategy, allowing us to build realistic prototypes that resonated with stakeholders and led to faster approvals. By involving the right people at the right time, we gathered accurate, locally relevant content while avoiding costly rewrites later in the process.
Launching a brand from scratch: crafting content for the main site
While each of the 21 community publications had existing brand awareness and editorial context to work from, the Novus Media national hub site—novusmedia.co.za—had to be developed entirely from the ground up. Unlike the regional titles, which benefited from strong editorial identities and local insight, the main site needed to establish its own voice, tone, and purpose from scratch.
LightSpeed generated the first round of content based on a series of stakeholder interviews, effectively creating a foundation for what would become the face of the new brand. This included everything from mission statements and positioning to homepage headlines and section introductions.
The challenge was compounded by differing expectations: while we initially proposed launching with a streamlined corporate-style site, the client made it clear they wanted a full-fledged national news platform from day one. That meant producing rich, high-volume content on a short timeline, without the benefit of legacy materials or an existing content team.
This requirement pushed our strategy, content generation, and prototyping efforts further—but also laid the groundwork for a site that felt credible and complete at launch.
A 90-day deadline
Launching 22 sites from scratch meant every stage—from design approval to dev handoff—had to be fast and efficient. There was no time for rework or second-guessing once code began.
Stakeholder feedback, everywhere
Editors, sales teams, and executives across five provinces all had input, but most weren’t designers. Getting usable, consistent feedback from non-technical users was a major hurdle.
Establishing brand identity without fragmenting the platform
Each paper needed to stand out with its own visual style and local relevance, but the tech had to remain unified and maintainable. Our solution was one central theme system, capable of switching between 13 colour palettes without breaking consistency—ensuring every site looked unique while still running on the same core foundation.
The solutions
Aligning structure with story: content strategy as foundation
Our content strategy laid the foundation for a consistent yet locally relevant publishing experience across the entire network. Drawing directly from our workshops, stakeholder interviews, and structured questionnaires, we mapped out the full site architecture—including standard pages, categories, and user journeys.
This strategy ensured that:
- Every site followed a clear and intuitive navigation structure, tailored for news readership
- Content expectations were aligned across editorial and design teams
- Designs were grounded in real content types and editorial needs from the start
With this clarity, we could build page layouts and components in Figma that accurately reflected how the publications would function in the real world. It created a strong bridge between planning, design, and content generation, giving each team a shared reference point to work from.
From framework to first drafts: executing the content plan
With the content strategy in place, we moved into execution—defining structured page layouts that would guide how content is displayed across the network. These clear frameworks allowed stakeholders to visualise what was needed and where, enabling more targeted content contributions.
“With legacy sites closing, new platforms opening and email migration on top, we were under serious time pressure. LightSpeed kept us on track, refining prototypes overnight and guiding content collection across four provinces. Sign-offs that once dragged for weeks happened in two or three days, and we hit every launch deadline.”
– Elizabeth Giliomee
Novus Media
We also sourced real-world articles to populate the pages in the prototypes—making them feel immediately familiar and grounded in reality.
Gathering and curating this content wasn’t just about filling space—it directly informed our page designs and made the prototypes relatable and review-ready. Novus Media stakeholders found it easier to provide informed, relevant feedback when they could see their own content in action.
By basing design decisions on real editorial inputs, we ensured that layout choices, content blocks, and site structure were grounded in substance, not guesswork. This gave every prototype context and credibility, which sped up approvals and prevented late-stage rewrites.
“Bettie was the linchpin of this entire rollout. Whenever our project momentum slowed, she stepped in—bridging four provinces, dozens of newsrooms, and multiple management tiers—to secure answers, approvals, and content. Her mix of strategic vision and roll-up-your-sleeves practicality kept 22 publications and a brand-new corporate site moving forward on schedule. Quite simply, the Novus Media design system would still be a wireframe without her.”
– Ash Shaw
LightSpeed
Precision in practice: bringing the Design System to life
Initial prototypes filled with placeholder text weren’t enough—many stakeholders struggled to imagine their content in context, which led to vague or hesitant feedback. Once we incorporated real stories, headlines, and imagery from the newsrooms, reviews became sharper and more decisive. Familiar content made the prototypes easier to assess, leading to clearer feedback and faster consensus.
With that content in place, we built a structured Figma component library tailored to the needs of all 22 sites. Components used variable styling for brand flexibility and closely mirrored the WordPress environment—ensuring what stakeholders saw is exactly what they’d get.
This approach reduced ambiguity, sped up reviews, and allowed developers to build with confidence—knowing the designs had already been stress-tested and signed off by every key decision-maker.
Interactive prototypes for real user journeys
With real content collected and structured, we moved from static mockups to fully interactive prototypes—one for the national hub and another for a representative local title. Each was styled in its actual colour palette and populated with real headlines and imagery, giving stakeholders a genuine sense of how their site would look and feel.
These prototypes weren’t conceptual—they reflected real journeys and layouts. Editors could walk through reading flows, sales teams previewed ad placements, and managers could review overall structure and flexibility. Because the content was specific and the journeys accurate, feedback became sharp and actionable.
“Feedback went from vague emails to pinpoint Figma comments. Everyone saw what they were getting—and signed off faster because of it.”
Both mobile and desktop versions were presented, with experiences tailored to distinct audiences: a broad national readership for the hub and a hyper-local community focus for the regional prototype. This approach helped validate user flows and ensured each publication could serve its audience effectively.
Aligning structure with story: content strategy as foundation
Our content strategy laid the foundation for a consistent yet locally relevant publishing experience across the entire network. Drawing directly from our workshops, stakeholder interviews, and structured questionnaires, we mapped out the full site architecture—including standard pages, categories, and user journeys.
This strategy ensured:
- Every site followed a clear and intuitive navigation structure, tailored for news readership
- Content expectations were aligned across editorial and design teams
- Designs were grounded in real content types and editorial needs from the start
With this clarity, we could build page layouts and components in Figma that accurately reflected how the publications would function in the real world. It created a strong bridge between planning, design, and content generation, giving each team a shared reference point to work from.
From framework to first drafts: executing the content plan
With the content strategy in place, we moved into execution—defining structured page layouts that would guide how content is displayed across the network. These clear frameworks allowed stakeholders to visualise what was needed and where, enabling more targeted content contributions.
We also sourced real-world articles to populate the pages in the prototypes—making them feel immediately familiar and grounded in reality.
Gathering and curating this content wasn’t just about filling space—it directly informed our page designs and made the prototypes relatable and review-ready. Stakeholders found it easier to provide informed, relevant feedback when they could see their own content in action.
By basing design decisions on real editorial inputs, we ensured that layout choices, content blocks, and site structure were grounded in substance, not guesswork. This gave every prototype context and credibility, which sped up approvals and prevented late-stage rewrites.
Precision in practice: bringing the Design System to life
Initial prototypes filled with placeholder text weren’t enough—many stakeholders struggled to imagine their content in context, which led to vague or hesitant feedback. Once we incorporated real stories, headlines, and imagery from the newsrooms, reviews became sharper and more decisive. Familiar content made the prototypes easier to assess, leading to clearer feedback and faster consensus.
With that content in place, we built a structured Figma component library tailored to the needs of all 22 sites. Components used variable styling for brand flexibility and closely mirrored the WordPress environment—ensuring what stakeholders saw is exactly what they’d get.
This approach reduced ambiguity, sped up reviews, and allowed developers to build with confidence—knowing the designs had already been stress-tested and signed off by every key decision-maker.
Feedback before front-end
By enabling live feedback directly in the design, we resolved over 90% of layout and UI questions before handing off to development. Stakeholders made suggestions and saw changes reflected immediately—no mockups, meetings, or rebuilds required. That meant our developers could focus on building once, instead of iterating endlessly.
One theme, many brands
All sites ran off a single WordPress block theme, with brand identity handled through 13 JSON style variations. Because the Figma system mirrored the WordPress structure, devs could plug in approved designs with confidence, knowing they’d already been vetted by every decision-maker.
The results
The Novus project was delivered with speed and clarity—largely thanks to the strong foundation laid during the planning and prototyping phases. We didn’t just build a theme or design some templates; we built a system that worked across people, platforms, and publications. Every decision fed into the next, allowing us to reduce uncertainty, increase engagement, and deliver at scale.
Project timeline highlights:
- Interviews, workshops & stakeholder questionnaires: 1–2 months
- Content strategy development & initial content drafting: 1 month
- Content collection, review & sign-off: 6 weeks
- Design system assembly in Figma: 2 weeks
- Prototyping for first publication: 1 week
- Prototyping for the main site: 1 week
- Final sign-off per prototype: as little as 2–3 days
By grounding the entire process in real content and implementation-ready prototypes, we dramatically streamlined design approvals. Stakeholders weren’t imagining their brand—they were experiencing it. That clarity reduced review cycles from weeks to hours.
The outcome? Informed decisions, rapid iteration, and a dev team able to work with confidence. Each prototype became a blueprint, not a suggestion—guiding development forward without the usual guesswork. What might’ve been a drawn-out rollout became a showcase of what collaborative design can really achieve.
