Precision Electronics

Overview

When Attwood Electronics became Precision Electronics, the new name and identity needed a website to match. We designed the site, wrote and rebuilt its content, and built it on Next.js and Payload CMS, so a 30-year industrial repair workshop can explain what it does and keep its own pages up to date.

A new name on the bench

For more than 30 years, the team in East Tāmaki has kept New Zealand's machines running by repairing the electronics inside them. Variable speed drives, servo systems, PLCs, HMIs and control boards come into the workshop from factories, boatyards, crane operators and print shops, and most go back out repaired down to component level rather than replaced. The business had grown up as Attwood Electronics. When it became Precision Electronics, it came with a new name and a new identity designed by another studio, and an old WordPress site that matched neither.

We were brought in for everything after the logo. We designed the website, wrote and restructured its content, built it, and moved it across from the old site without losing the search traffic a business like this depends on.

Taking an identity onto the web.

The identity gave us a navy, a magenta, a bright cyan and a gradient between the first two. We turned that into a web design system in Figma. Services sit on cards that sweep from navy to magenta, industries on cyan cards with their own icons, and every section opens with a small coloured dot and a label so long pages stay easy to scan.

The identity also came with a photo treatment: workshop photos turned greyscale and laid under a magenta-to-cyan gradient in Photoshop. That works for a launch, but it means every new photo needs a designer before it can go online. So we rebuilt the treatment in the browser, down to the contrast curve that gives flat photos the same punch as the originals. Editors upload an ordinary photo, tick the brand filter on any image block, and it comes out matching the rest of the site.

Content

The old site said what Precision did in a few short paragraphs, repeated on most pages. We rewrote it around the questions customers actually bring to the workshop. Is it worth repairing, or should I replace it? Do you work on my brand of drive? What should I send you?

The four service pages explain repair, supply, design and maintenance in plain terms. They're careful about what a repair can promise, because a board that can't be repaired is still a useful answer when it comes before the freight bill.

Engineers often search for a brand before a service, so the repair page carries the full list of more than 70 drive, controller and machine brands the workshop works on, from ABB and Allen-Bradley to Yaskawa. It ends with an invitation to get in touch if a brand isn't listed, because it usually can still be worked on.

Each of the fifteen industries Precision serves, from apparel and aviation support to cranes, marine and pharmaceutical, has its own page. Each one is written for the way that industry talks about the problem rather than repeating the same copy with a new heading.

The marine page, for example, explains when a failed control module is worth assessing locally rather than shipping overseas, what to include with an enquiry, and where the workshop's job ends and the marine technician's begins. That kind of specific, honest detail is what helps people decide to get in touch, and it's also what search engines and AI assistants look for.

Every page has its own metadata and structured data, plus a sitemap, an RSS feed for the articles and an llms.txt file. Before launch, we checked every address in the old WordPress sitemap against the new site and redirected the ones that had moved, including articles that now live under the blog.

SMARTsolver

Precision doesn't just repair equipment. Its engineers also designed SMARTsolver, a handheld tester for resolvers and encoders that helps technicians recalibrate servo motors. We gave the product its own page with what it tests, what it's for and the problem it solves, plus direct links to order one, watch the demo and training videos, or download the instruction manual.

Under the hood

Next.js, with Payload CMS built in.

The site is a Next.js application with Payload CMS running inside it, so the website and its editing tools share one codebase and one deployment. Precision's team builds pages from a set of blocks we designed for them, with drafts and live preview before anything is published. Services and industries are managed as their own content types, each with its own card description, search settings and an icon chosen from a built-in picker, so a new industry page looks at home next to the others from the day it's published.

The contact page shows the workshop on an open-source map instead of a Google Maps embed. Enquiry and newsletter forms are protected by invisible bot checks, enquiries are emailed to the team, and newsletter signups go into Brevo.

Hosted where Precision wants it.

Precision's site is hosted by Digital Genius, so we built the deployment around their server rather than ours. Every change pushed to the main branch is built on their own runner, then their deploy service backs up the database, applies any schema migrations, swaps in the new release and checks it's healthy, rolling back automatically if it isn't. Errors are reported to Sentry, so problems surface before customers notice them.

Visit Precision Electronics

Technology

Got a project in mind?

Have a chat with The Caretakers.

We’re based in Auckland and work remotely with businesses across New Zealand. Tell us what you’re building, and let’s make it fast, secure, and a pleasure to use.

Call us, or use the form – we promise not to make it weird.

Phone: 09 929 1216