Routeburn Dart Wildlife Trust – Website

Routeburn Dart Wildlife Trust website

A wonderful initiative with a beautiful brand – and now, a website to match.

Role: Web Designer

The Routeburn Dart Wildlife Trust website is designed to have as much punch as it does empathy. Here the brief was to put the birds and the work of the Trust front and centre – pretty easy to do with fabulous photography and some serious data to present!

Leveraging powerful brand colours and strong typography, the end result is a welcoming, informative resource that leads the user to contribute support to this amazing cause.

Two of my favourite parts of this project are the Wiki-like information pages on both birds and their predators, providing an easily-digestible format; and the sliders of rolling figures the Trust works with on the home page, which provided an opportunity to dig into typography that is both bold and responsive.

One of the most cheerful websites I’ve had the pleasure of designing in a long time.

Visit the website here: rdwt.org

Routeburn Dart Wildlife Trust Web Mockup

Treebrush Apothecary – Brand Suite

Treebrush Apothecary label design

A complete identity suite from start to finish, this project is a little different. This is a side hustle turned main hustle where I was able to conceptualise both the product itself and every facet of its design following.

Role: EVERYTHING

Treebrush Apothecary started off life as a curiousity back in 2019. My father has been in the cosmetic and raw ingredient industry for decades, and as such, there was always a plethora of samples to play with as I grew up. A brush with another manufacturer’s product prompted me to get into it myself, where it served as a stimulating exercise in brand development as much as product development in my free time after work.

Naturally, 2020 drastically changed how this would play out in the immediate and long term.

At this stage, I had just three products (“No Regerts”, and twin balms “Thuck” and “Thun” – say it out loud!), early runs at packaging design, and so many questions about the future while living and working in a town whose lifeblood was overseas tourists. Having eventually run out of work while we were all in lockdown and the borders remained closed, this project became my majority focus from 2020 onward.

Branding

Treebrush Apothecary Logo

Font selection

Part of the excitement about this project was the prospect of being able to lean into some serious font nerdery.

I’m pretty darn passionate about fonts; there are so many facets to selecting the ideal one for a brand, and getting it right from the very start is worth the extra sweat.

Something I wanted for Treebrush Apothecary was a pair of humanist, cheeky, somewhat delicate fonts paired in a balanced logotype. These two share similar x-heights, though I modified the ascenders and descenders of the larger word to maximise the size of the smaller word – if you’re gonna print something small, you want to be able to read it!

The end result is a logo that is friendly and modern, able to target a broad audience without being suggestive of a target gender or age group.

Colour suite

Another thing I’m passionate about is getting a colour suite nailed. I’m a firm believer in keeping it simple – choose a punchy key colour, match a delicious highlight colour or two, and walk away. Walk away!

In this case, because this was always intended to have a strong web presence and a full suite of matched products, the two key colours have an alternate each. Dark, in the case of the blue. Light, in the case of the teal. The colour-matched flexibility for web means I was able to lead the viewer’s eye around the resulting website with high contrast CTAs without sacrificing colour harmony; the whole thing still tastes on brand, because the bright green standout colour is a direct derivative of the key blue.

As for the blue itself being the key colour: rather than blending in among a sea of green-hued eco brands, this one instead leans into ocean blues and teals as a nod to New Zealand’s island nature. When used as a gradient, it packs a bright, eye-catching punch – even in print.

Treebrush Apothecary colour suite

All but two products have directly related key colours as well, with the intention of creating harmony across a busy table of products lined up alongside each other. Regular users recognise “their” product among the lineup immediately, and recognise the brand among others; each has its own distinct look, but is colour-matched to unite with the rest of the brand.

The two exceptions are a honey-based balm which needed an inappropriately loud yellow-and-black combo that wasn’t calculated from the original blue, and a vegan balm that needed a warmer, earthier tone compared to the rest of the suite.

Treebrush Apothecary product colours

Product logos/branding

Given the start the project had with silly names buried under professional-looking branding, a theme was very much established from the outset. Make each product look slick and stand on its own two feet, but if possible, bury a dad-joke name among the pixels!

Each individual product ‘brand’ ties back to the parent Treebrush Apothecary brand, with a key colour generated from the Treebrush Apothecary blue and a typeface that fits with the whole suite.

Because each logo follows the internal conventions of Treebrush Apothecary’s branding first and foremost, they are all recognisably part of the same brand while also clearly displaying their own personality. As a result, Treebrush Apothecary products are becoming increasingly recognisable; it’s been a delight to have people quite excitedly spot my products from a distance at markets!

 

Photography

After years (decades!) of encouraging clients to use the best product/service photography available to them, the shoe’s on the other foot here!

I’ve made pretty epic use of my old Canon 550D and a borrowed 50mm prime lens over the years with Treebrush Apothecary. Composition, colour, focus and knowing what will pop is as much art as it is science; suffice it to say I’ve learned a thing or two about creating a rockstar shot cobbled together with bits and pieces from the surrounding environment!

Website

This is probably the fastest website I’ve ever designed and developed, and easily the one I’ve had the most involvement in ongoing development and maintenance.

 

Website - Treebrush Apothecary

Wakatipu High School International – Website

Wakatipu High School

Turn a beautiful glossy prospectus into a living, breathing web version? No problem!

Role: Web Designer

The International portal for Wakatipu High School is an engaging, easy to navigate, attractive resource that reflects its printed counterpart in an immediately recognisable way.

As much as the splash image at the top of each page is the star of the show (intentionally!), the main navigation’s design and position is intended to subtly draw attention to it without overshadowing the incredible imagery supplied by the school. This quietly reinforces the bold design paired with the prospectus and the school’s identity alike without yelling at the user.

Wakatipu Highschool International Landing Page

Visit the website here: international.wakatipu.school.nz

Wakatipu Highschool International Web Mockup

EA Ski & Snowboard – Website

EA Ski and Snowboard Header

A complete redesign of an existing asset, and a heavy sprucing up of the brand along the way. This project was a freelance collaboration.

Role: Web Designer, Graphic Designer

EA Ski & Snowboard was my favourite kind of project – first, an improvement of a dry, stiff brand suite that didn’t best target its young, adventurous target audience. Then, it was a total redesign of an otherwise cleverly structured website to become engaging and user-friendly for its user base.

The two brand colours became the colours that would lead skiiers vs snowboarders to pages relevant to them where necessary; additionally, the strong contrast between them allowed the rest of the website to maintain a tight colour scheme throughout. My focus remained on making sure the user was led to where they needed to be, with high conversions as the result for the client.

Finally, the creation of visually stunning new assets helped to modernise the overall experience for the user.

EA Ski and Snowboard CTA Form

Mobile-first: EA Ski & Snowboard was designed with mobile devices in mind. The target demographic is young, likely on an adventure or planning one – the mobile user base is huge! While the full desktop experience is stunning and immersive, the focus on mobile was ensuring that no element was overwhelmingly large or difficult to interact with via touch, and that the data tables further down the funnel were straightforward to use.

A joy to design; the best websites look engaging on the surface, but below their skin they are high performance machines that understand their users and produce conversions!

EA Ski and Snowboard Web Mockup

Stu’s Fly Shop – Website Redesign

Stu's Fly Fishing School

A thorough reskin of an existing online shop to better match the epic personality of its owner! This project was a fantastic opportunity to flex creative muscle within the confines of a complete but dated resource.

Role: Web Designer

Stu’s Fly Fishing School & Superior Flies had just undergone a complete rebrand with Fluid in Queenstown – the next step was to bring the online shop up to the same standard.

The adventure here was including all the new cheekiness the branding exuded over the existing grid, although there was plenty of room to thoroughly modernise the home page and main navigation.

One of my favourite things to do where possible is to animate the client’s logo once scroll is initiated; it’s a simple bit of design and CSS, but it really hits the spot for anyone who is proud of their new logo! In this case, upon load, the logo treatment more closely reflects the print material, and then on scroll, it retreats to a more standard navigation position, drawing attention without hogging real estate.

Stu's Fly Fishing - header animation

A key part of any reskin is making sure the designer at the helm understands the code they are catering to. If not, it’s almost guaranteed to be a headache for the developer! For this project, I spent about as much time with the Inspector open as I did in Illustrator so I could understand the logic beneath the pixels and hand it over to the developer with a clear and easy implementation of the new design.

This website redesign was a fun way for me to dip into both my design and developer knowledge.

Stu's Fly Fishing web mockup

New Zealand Trails – Website

New Zealand Trails Header

Huge total redesign, tight timeframe? No problem! This is the evolution of a finely-honed sales machine.

Role: Web Designer

The New Zealand Trails website redesign is where I truly found my feet as a “creative mercenary” – that is, a freelancer brought in half way through a project where creative firepower and good ol’ speed & technical proficiency is needed yesterday. The client had an ambitious project on their hands – a rebrand, four new products, and a complete website redesign that retained all of the old IA…but on a newer, more modern platform.

I was called in as a Freelancer to help with the unexpected heavy lifting that this all entailed, both outputting all of the final design for the developer, and helping to guide the UX/UI as it evolved from its exploratory phase to something the user base would interact with instinctively.

This involved taking relatively final drafts of page designs in Illustrator and expanding them into complete prototypes with UX/UI that followed the established best practice of the time, creating responsive designs from there, and shifting the final output to Photoshop. Hard to believe there was a time not so long ago where this process was business as usual!

Funnily enough, this is a team I stayed with for several years after the initial website launch; the website has evolved multiple times since then, and I also had the pleasure of designing several iterations of the ensuing magazine and brochure.

New Zealand Trails Trip Detail

The New Zealand Trails website has a target audience of middle-aged and older, the vast majority of whom are from outside of New Zealand.

One of the first things that changed was a different approach to the copy on the website. Raising the default font size to 20px and keeping the contrast as high as possible was critical for this demographic, as was making sure interactive elements looked “buttony” and calls to action followed predictable logical flow. Many an A/B test has been run on this site to improve its interactivity on all device sizes, keeping that audience in mind.

Crucial to this process was making sure that a more “traditional” UI didn’t reflect as an out-of-date web experience. The company offers a high-end, high value, so the branding over the top needed to remain modern to reflect the up-to-date service…without avant-garde or experimental interactivity that might frustrate the target demographic. Much work behind the scenes went into tweaking those initial nearly-finished designs for this reason.

New Zealand Trails Trip Comparison

Much of the website focuses on displaying information; the target demographic tend to be deep researchers, with some enjoying a long read while others prefer to dissect tables of data. The New Zealand Trails website provides both in an easily digestible format, all while leading visitors to request a beautiful, glossy printed brochure they can peruse at their leisure.

As a travel website, imagery is also of utmost importance: get aspirational photos into their faces! All the imagery on the site is strategically sized and positioned so the best parts are above the fold and lead the user down into the page, but at a size where speed performance is still absolutely on point. A significant but rewarding challenge arose after the site’s initial launch where, with the huge amount of assets that are delivered to each page, we chased high GPI numbers to get performance and indexing absolutely dialled.

All in all, this is a high performance sales machine beneath an attractive, easy to use skin.

View this website here: newzealandtrails.com

New Zealand Trails Web Mockup

Jewish Lives – Front End Development

Jewish Lives Museum Website

A collaborative effort, this website is all about an implementation that adapts to any and all devices.

Role: Front End Developer

The Jewish Lives website is a Squarespace site built from the ground-up, working alongside Prompt. The design was supplied to us by the client, and we made the magic happen. My role here was front end, and it was an amazing opportunity to apply super-modern CSS like grid, flex-box and a suite of responsive units.

We leveraged the cleverness of LESS to keep everything in proportion as the viewport scaled; the original design was set for a fairly small viewport, but the final result does not “look weird” when presented on a larger device. A satisfying problem to solve using clever markup!

Adapting to mobile and tablet on the fly while working within the framework of Squarespace was also a satisfying problem to solve.

The end result has the “magazine” feel the client had envisaged, while being accessible and high performance on every device.

View the website here: jewishlives.nz

Jewish Lives Website

Queenstown Young Professionals – Brand and Website

Queenstown Young Professionals

Branding and web presence that balances slick with fun.

Role: Graphic & web designer

Queenstown Young Professionals was a quick and fun project that required an eye-catching brand, bold colours and a simple and easy to navigate website to tie it all together.

Queenstown Young Professionals Web Mockup