Shipped
Product Design @ Beca
2026
Images blurred for confidentiality reasons
Clear UI and UX issues
The core issue is clear: the interface feels outdated, and its lack of modern UX foundations shows. It was originally built without a dedicated product designer, so identifying the problems was straightforward - and user feedback strongly validated those initial observations. Together, these gaps contribute to a consistently negative user experience:
Clunky interface
Interactions feel heavy and unintuitive, slowing users down instead of guiding them. Especially when the AI chat is open, as well as the data summaries.
Lack of information hierarchy
Key actions and data aren’t prioritised, forcing users to hunt for what should be obvious.
Outdated visual design
The look and feel lacks modern structure, spacing, and clarity, reducing trust and usability - especially on smaller screens.
Current UX/UI issues. Images blurred for confidentiality reasons
Why does the website look like this?
I began to research the history behind the website and realised several challenges ahead - technical issues, limited budget, and branding guidelines to follow. To tackle this, I had to stray from a traditional double diamond design framework.
Delivery over execution
During the website build, the project had to meet a strict set of functional requirements to satisfy the contract. Those requirements focused almost entirely on functionality - not UX, UI quality, or long‑term scalability.
Project budget
There was no budget to rebuild a CSS system from scratch or to refactor the existing CSS due to the amount of technical debt baked into the platform. In practice, this meant we were stuck on legacy styling with no feasible path to modernisation.
Technical dependency/lack of scalability
The current setup relies on Form.io, which is locked to a very outdated version of Tailwind CSS. Because Form.io bundles that legacy build, developers couldn’t upgrade to the latest Tailwind features or utilities.
Branding constraints
There is a directive from the marketing, communications, and the product strategy team that the interface must be composed of the platform's trademark header and side navigation bar, along with floating windows/iframes (technical term). This was a non negotiable.
Establishing a design system with core principles
To address the platform’s outdated and inconsistent UX/UI, I first researched modern component libraries that could provide a scalable, maintainable foundation. The goal was to find something that fit our budget, worked seamlessly with React, offered strong theme flexibility, and could help us modernise the interface without introducing more technical debt.
Why shadcn/ui stood out
Shadcn/ui became the strongest option because it avoids the typical problems of traditional libraries. Most libraries ship as fixed NPM packages, which makes deep customisation difficult and often forces developers into hacks, wrappers, or mixing incompatible components. That approach wasn’t suitable for our long‑term needs.
Open comopnent code
Shadcn/ui solves this by giving us open component code, meaning every component can be modified to fit our design system without fighting the library. Its composable patterns make components predictable and easy to extend, and its flat‑file distribution keeps the system lightweight and maintainable.
Beautiful deafults
It also provides clean, minimal UX/UI defaults, which gave us a modern baseline without requiring a full redesign upfront. This was perfect for a project with limited budget and high scalability requirements.
Simplifying navigation
Sidebars are one of the most complex components in an application because they anchor the entire navigation model and often carry many moving parts.
In the current setup, users access primary pages through the sidebar, but secondary pages sit awkwardly in the header. This split creates a clunky experience and fragments the information hierarchy. By moving those sub‑pages into the sidebar, the navigation becomes cleaner, more predictable, and easier to scale.
Current navigation
In the current setup, users access primary pages through the sidebar, shown in 1.
However, the secondary pages sit awkwardly in the header, as shown in 2.
This split creates a clunky experience and fragments the information hierarchy.
New navigation
Using the navigation component, the primary pages stay the same but are now grouped by category and presented in a cleaner, simpler UI. The sidebar also includes a toggle that switches between the navigation view and the Agent view. The Agent view will be explained in more detail in the a later section of this case study.
This view shows the sub pages now as sub tabs within the navigation bar rather than the header bar.
This is what the new navigation bar looks like with the rest of the refreshed interface:
Pairing geotechnical data with AI
Finding thousands of datapoints faster
Adopting a model built using Copilot Foundry (we chose this because most of our backends used Microsoft tools), we redesigned how the AI chat appears in the interface and added strict guardrails to ensure the agent only searches for investigations. With thousands of investigations in NZGD, the map and table filters aren’t always enough, so the AI chat lets users simply describe what they know - an area, landmark, or detail and the agent automatically filters the map and table to surface the correct investigations.
Ensuring guardrails
The agent is intentionally limited to a single function: locating investigations. It will not interpret data, provide analysis, or answer unrelated questions. These restrictions are part of NZGD’s reputational‑risk controls—ensuring the AI never strays into areas the organisation cannot safely support. When a user asks something outside scope, the agent responds with a controlled guardrail message: “Sorry, I am not able to answer that question for you. Please ask about the investigations you are looking for.”
User research
We piloted the feature with ~50 users and collected quantitative and qualitative feedback on whether the AI could find the right investigations, return expected results, and reduce the time required to locate them. This feedback will guide refinements and determine readiness for wider release alongside the updated AI chat design.
Current navigation
Currently, as shown in 1, users open the Ai Assistant chat by selecting the AI sparkle icon at the header.
The pane opens up on the righthand side, as shown in 2.
Redesign
After user research, the agent will sit in the sidebar bar as a toggle that switches between the standard page navigation and the AI chat view. This optimises the real estate that users will have when using the chat. Since the AI chat is currently only used on the Maps page, this toggle works well without disrupting the overall navigation model. It also sets up a clear path for future scalability, allowing the AI chat to be introduced on other pages without redesigning the navigation again.
Sidebar with Home selected, showing navigation
Sidebar with Agent selected, showing the AI chat
This is what the AI chat looks like with the rest of the refreshed interface:
Designing clearer ways to see data in a single panel
The current design appends a panel to show the investigation summary and files when an investigation is selected from the table. This squishes the real estate of the map and table panel, and its especially hard to see any information.
This is what it looks like:
Current state
Redesign
The redesign will now show the details and summaries within the same frame, but above the table of investigations. To view the files, the user can just select the 'files' tab within the same panel:
Details about the selected investigation
Files related to the selected investigation
Making table interactions accessible
We can simplify user interactions by redesigning how action controls are presented. Instead of scattering buttons like Export, Filter, and other utilities across the interface, each category of actions is grouped into a single, consistent dropdown. This creates a cleaner hierarchy, reduces visual noise, and makes it easier for users to find the functions they need.
Clunky action buttons
Redesign of action buttons
An easier way to switch applications
Oftentimes, users have access to more than one application. They may switch between the New Zealand Geotechnical Database and other apps hosted on the same platform, depending on their permissions. To support this, a dropdown in the navigation bar lets users easily swap between applications, following the same pattern as the table‑level action menus.
The current state requires users to visit a separate landing page containing a list of applications. Since most users only have access to two or three apps, this extra navigation step is unnecessary, and the blank home page often creates confusion. Consolidating app switching into the sidebar removes friction and keeps users oriented within the platform.
Previous design
Updated design
What's next?
The redesign has been completed, reviewed, and scoped with an effort estimate for development. The work now sits in as backlog as a proposed future enhancement. Due to budget constraints, there is no capacity for user experience testing before rollout - therefore we are only able to gather feedback once these enhancements have been implemented.
Alongside this, the AI chat pilot - where I contributed to research and rollout - has been published as a Microsoft article.
The next phase would involve implementing the redesigned interface, expanding the AI agent within its guardrails, and preparing the platform for a wider release once development begins.