protag

/

Website Re-design

New Zealand-based agritech company that has developed a high-tech, smart ear tag system for dairy cattle designed for continuous, real-time monitoring of health, location, and behaviour. provides detailed, actionable insights on individual animals, enabling farmers to make faster, data-driven decisions to increase productivity and improve animal welfare.

Before-and-After Image Slider Widget

Easily compare and contrast the differences between two images with our interactive Before-and-After Image Slider. Showcase transformations, improvements, and renovations with this customizable widget that is sure to leave a lasting impression on your audience.

the challenge

The key challenge was creating a design that engaged the target audience while clearly appealing to potential investors. Central to this was communicating ProTag’s unique value: continuous 24/7 cattle tracking.

We took a strategic approach, developing wireframes, refining copy, and collaborating closely with the founders. The decision to lead with a bold hero video helped set the tone instantly, aligning design, interaction, and storytelling to showcase the technology’s value.

Despite the challenges of a homepage-focused build, the result is a visually strong and effective experience that clearly tells ProTag’s story.

HIGH VISUAL PERFORMANCE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Discovery

During this phase, I facilitated a structured discovery session with the founders to define the objectives of the new design. At the time, ProTag was in its early stage, focused on R&D, design, and manufacturing configuration. This presented a challenge, as the product had not yet entered the market and supporting content needed to be developed ahead of launch. Baden and Tyrell highlighted the importance of clearly articulating ProTag’s point of difference to its target audience. This insight guided the strategic direction of the project and informed all outputs, including copywriting, graphics, UI design, and video editing.

Design

Based on insights from the discovery sessions, I developed a series of wireframes and concepts, keeping ProTag’s vision and goals central to the design. A key idea was using the hero video to set the tone for the site, while an interactive map section was created to boost engagement and deepen audience understanding of the product and its benefits.

Delivery

Once the design was built, the focus was moved to making sure the hero video was produced at the high quality. Once that was completed the CMS system on the blog page was conducted and the site was tested before launching and going live.

How to show content to edit:
1. Add class "current" to "accordion_vertical-component"
2. Add class "current" to "accordion_verical-bottom"
3. When you published, make sure to only add "current" for the classes in the first tab.

Tools used

Website – Webflow (development), Figma (prototype)
Graphics – Illustrator, Photoshop, Figma.
Motion / Video Design – Illustrator, Photoshop, After Effects, Premier Pro, Lottie Animation.