BGIS's internal employee portal — Intrazone — hadn't been updated in years. It was inaccessible, non-responsive, and visually outdated. I redesigned it from the ground up: modern UI, WCAG 2.1 compliant, and responsive across desktop, tablet, and mobile. The result was received so well the business commissioned the same approach across its other internal sites.
AA
WCAG 2.1 compliance achieved — including high contrast mode
3
Platforms fully supported — desktop, tablet, and mobile
2
Languages supported without simultaneous display issues
+
Approach extended to additional BGIS internal sites after launch
01 — Context
Intrazone is BGIS's employee homepage — the central hub linking to administrative tasks, training resources, employee health information, and team SharePoint pages. Every BGIS employee uses it. None of them had any say in how it looked or worked.
Internal tools tend to get deprioritised because they don't generate revenue directly. But they affect everyone who generates that revenue. A poorly designed employee portal creates friction every single day — for every single person who uses it.
By 2021, Intrazone was showing its age in ways that went beyond aesthetics. The site hadn't been meaningfully updated in years. New accessibility legislation and WCAG standards had raised the bar. The adoption of a new BGIS brand required a visual refresh. And the shift toward hybrid and remote work had created new demand for mobile and tablet access that the site simply didn't support.
The mandate was clear: modernise the look and feel, bring the site to WCAG 2.1 AA compliance, and make it fully responsive — without breaking the content workflows that administrators relied on to maintain it.
02 — Existing site audit
The existing site wasn't just outdated — it had structural problems that actively worked against usability and compliance. Each issue independently warranted a fix; together they made a strong case for a ground-up redesign rather than incremental patching.
An audit of the existing site mapped four distinct problem categories. Fixing them required coordinated design decisions — resolving one in isolation would have created new problems elsewhere.
03 — Design decisions
Each design decision was driven by a specific problem from the audit and had implications across the whole design — not just the surface it addressed directly.
01
Persistent links hub
The most-accessed links on Intrazone were buried inconsistently across different pages. Users had to remember where things lived rather than develop a predictable mental model. The redesign anchors a links hub to the right-hand side of every page — persistent across navigation, always in the same place regardless of content.
Why right column: The main content area needed to remain the focal point. Placing the links hub on the right preserves left-to-right reading flow while ensuring utility links are always within a short eye movement. On mobile and tablet, the sidebar collapses behind a persistent floating button — maintaining access without competing with the primary content.
02
High contrast mode toggle
WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text. The existing site's colour palette failed this threshold in multiple places. Rather than simply selecting compliant colours for the default theme and calling it done, the redesign introduced a high contrast mode toggle — giving users with visual impairments the option to activate significantly enhanced contrast at any time.
Why a toggle vs. system preference detection: Enterprise environments often have managed system settings that don't reflect individual employee preferences. A user-controlled toggle inside the portal ensures the option is always available regardless of what the operating system reports. It also makes the accessibility commitment visible — a signal that the organisation takes it seriously.
03
Modular, maintainable layout
A redesign that administrators couldn't maintain would revert to the old site within months. The layout was structured around well-defined, modular sections — each independently updatable without touching the others. This reduced maintenance effort significantly and ensured the redesign would stay current rather than accumulate debt.
Constraint acknowledged: SharePoint imposes real constraints on layout flexibility. The design was scoped to what the CMS could reliably support — not what was theoretically ideal. This required early conversations about what was buildable before committing to layouts in the design phase.
04 — Responsive design
With hybrid and remote work accelerating in 2021, employees were no longer guaranteed to be at a desktop when they needed to access Intrazone. A site that only worked at a desk wasn't a site that worked for its users.
Three distinct breakpoints — desktop, tablet, and mobile — each with intentional layout decisions rather than simple content stacking. The goal was to feel native to the device, not just technically functional on it.
Desktop
Full two-column layout. Links hub always visible in right sidebar.
Tablet
Grid layout. Links hub collapses into a persistent bottom button.
Mobile
Stacked list layout. Hamburger nav + floating Links button in header.
05 — Accessibility
Accessibility compliance for internal tools is often treated as a legal formality — something to check off before launch and then forget. This project treated it as a design constraint that improved the experience for everyone, not just users with disabilities.
The existing site had multiple WCAG failures — most significantly, embedding text inside images, which made content invisible to screen readers and impossible to resize. Every failure was addressed systematically, not just the ones most likely to be audited.
Distinguishable — Contrast
All text in the default theme meets the 4.5:1 minimum contrast ratio. High contrast mode significantly exceeds this threshold, targeting users with low vision or colour sensitivity.
Adaptable — Structure
All content is in live HTML with semantic heading structure. No text embedded in images. Screen readers can navigate the full content hierarchy without workarounds.
Resize Text
Content reflows correctly at 200% zoom without horizontal scrolling or content loss. Layouts were tested at multiple zoom levels across all three responsive breakpoints.
Keyboard Accessible
All interactive elements — navigation, links hub, language toggle, contrast mode toggle — are reachable and operable via keyboard alone, with visible focus indicators throughout.
Language of Page
The bilingual display issue is resolved. A language toggle presents a single language at a time, with correct lang attribute set on the HTML element so screen readers use the right voice profile.
High Contrast Mode
A user-triggered high contrast mode was designed as a full theme — not just colour inversion. Foreground colours are WCAG AAA-compliant (7:1+) for users who need maximum legibility.
06 — Outcomes
The redesign launched to strongly positive internal feedback. Employees noticed the difference immediately — the improvement in usability and visual clarity was significant enough that the reaction was qualitatively clear without needing formal measurement.
The business response was the clearest signal of success: BGIS requested that the same design principles and approach be applied to its other internal sites. A single project had established a design system and methodology that could scale across the organization's digital workplace.
AA
WCAG 2.1 compliance
Full WCAG 2.1 AA compliance achieved, including dedicated high contrast mode designed as a complete theme rather than a toggle.
3×
Platform reach
Desktop, tablet, and mobile — all supported with intentional layouts, not just stacked content.
+
Extended to other sites
The business commissioned the same design approach for additional internal sites — the strongest possible endorsement of the work.
07 — Reflection
The high contrast mode was designed as a user toggle, which was the right call for enterprise environments. But in hindsight, I'd push harder to also support the prefers-contrast: more CSS media query — so users whose operating system is already set to high contrast would get the mode automatically, without needing to discover and enable it manually.
I'd also build in a more formal usability testing phase with actual employees before launch. The warm reception suggests the design was on the right track, but qualitative feedback after launch is harder to act on than structured usability findings before it.
Accessibility work teaches you to design for the edges — and when you do that well, the middle benefits too. Every fix we made for screen reader compatibility, keyboard navigation, or colour contrast made the experience better for users without those needs as well. Accessible design is just good design.
The maintainability constraint also sharpened the design. When you know a content admin — not a developer — needs to update the site every month, you stop designing for ideal conditions and start designing for the real workflow. That constraint produced a more durable result than an unconstrained design would have.