Free shipping for the month of February. Use code FREESHIPPING

Development Showcase

Our work tells the story…

We are proud of our custom design and development of technology solutions!

There are many aspects of a brilliant website, web application, or mobile app design, that engages the visitor / user, and provides a great experience that they want to come back to time and again. This page is a small window into the user experiences we like to design & build, to give you a sense of what is possible, in all the different parts of a technology solution.

So Let’s Go!

Hero / Slider

The top of the first page of your website is the prime location for communicating to your prospect about what you do and why they would want to engage you or buy your product. So it’s no surprise that the dynamic hero image (aka ‘slider’) has become so popular, and persists as a key part of many websites. But that doesn’t mean it has to be boring!

On the Keynote Entertainment website, we took the concept of the dynamic hero image, and morphed it into a story told through dynamically changing content. This animation is built using Javascript.

In the Licence4Me website heros, illustrations we designed for the new brand have each been animated and incorporated into each page of the website, adding a subtle fun element aimed at the target audience, without being distracting. The animation of the SVG images (vectors for crisp edges and small file size, no matter the scale of the image) is achieved using Javascript. An example of the animated SVG is shown below.

The hero slider can also comprise multiple components which are either synchronised or animated independently. An example of synchronised movement can be seen in the Oxley Nets website hero where text over top of the image describing the sectors within which they supply netting solutions is matched with the underlying full-width photo of a sample of their work.

Independent animation of components of the hero is demonstrated in the animation we built for the Enudge website. Key services provided within the Enudge email and SMS marketing solution orbit independently around a central point.

Work / Case Studies

Displaying your work to maximum effect is an important part of most websites. Your web presence helps potential buyers to work out whether they think they can trust you, and whether you provide the types of products and services they need, in the right timeframe, at the right price. The more expensive the product or service, the more important your brand is to the potential customer.

The way you present your work will be highly dependent on the type or work you do … obviously showing off how you build cars will be utterly different to showcasing delivery of strategic consulting.

Here’s some food for thought on showcasing your work:

Client / Testimonial Carousel

Scrolling client logos is often kept fairly simple which can be seen in the Radterm website. But you can spice it up with some playful animation, of course still being respectful of your use of your client branding.

But there’s much more to your work than the companies that hire you. Telling your story through the use of video and animations can convey so much more than text and static images.

Story Telling

The before and after slider employed in the Technilux website is an interactive way to allow customers to experience the value of your work.

Animations can be as simple as a collection of static images, which are zoomed into or panned across, with text over top explaining your work. Or they can be animated characters acting out a scene with a voice over which are used to great effect in the Capacity Builders website. And of course, you can go all out and hire a video production company to interview you and your clients, and produce an artefact that makes a strong statement about your place in the market, as demonstrated by the Hamilton Wealth Partners video.

Ecommerce

Selling products online is like Olympic synchronised swimming – so many parts need to work together to achieve a great buying experience, but when done well, it looks effortless.

To draw attention to special offers, a slide in offer notification is often used at the very top of the screen. Show me.

To buy your product, the customer must find the product, figure out that it’s going to solve their problem, perhaps customise the product, add it to their cart (and potentially find & add the other products they also need with their original product), provide you with their address information, choose an appropriate shipping method, and finally make payment.

Payment sounds simple, but there are so many choices – Google/Apple Pay, PayPal, pay by credit card, debit card or EFT, pay on invoice. You might need to cater for part / full payment by loyalty points. You might have a promotion code, and need to give feedback to the client about whether their code is valid for the product they are trying to buy. Then there’s pay by instalments such as AfterPay and Zip Pay.

After payment, you need to provide a receipt, perhaps a method for returning the items. You want to get a great review to help you sell more and / or for the customer to come back and buy again. You need to keep your customer informed with regard to progress of their shipment.

For the sale of physical products, the ecommerce solution needs to support your processes for picking and shipping the order, and managing inventory.

In an attempt to reduce friction around ecommerce, many different ways of laying out shopping carts and the purchase process have been devised, including:

  • customer login to allow the purchaser to setup their address and payment options, so that checkout can be streamlined
  • multi-page process, with step numbers and explanations
  • single page check-out, with the individual steps building on one another, tucked away in an accordion component as you progress, so that if you really need to you can easily return to the previous step
  • sending the whole cart over to an external cart system such as PayPal.

Over the last 2 decades, we have implemented each one of these methods! We have also on numerous occasions built custom purchase solutions to manage very unique functionality, such as the ability to return to your checkout later to continue your purchase of a personalised item, and viewing your product on your wall by virtue of a mobile app and your camera.

Forms

Web forms are arguably the most important aspect of any website, because it’s how visitors actually engage with you. Whether it’s subscribing to your newsletter, obtaining your white paper, or buying a product, it’s always done via a form.

Due to the use of cookies, for the most part forms are pre-filled based on data stored in your browser, but it still happens through a form. It pays to make sure your forms are as easy to use as possible!

Animation used strategically within web forms can significantly improve the likelihood that your website visitor or web application user will actually complete and submit your form.

Animated text boxes became standard a few years ago:

Including icons (as well as placeholder text) within form fields can help the user understand what is required much more quickly:
Starting with a simple form (so that people don’t look at it and think, that looks too hard and leave) and then expanding for only the situations when you need the information, via a beautifully animated form can be very helpful:

Vast amounts of research has been carried out on forms, and making them as easy to use as possible. We recommend using Google Analytics and tools like heat mapping to understand where there is friction in your forms, reducing the likelihood that people will engage.

Let’s get your forms humming like well-oiled machines!

Footnote

The footer of your website usually contains more navigation elements, to help you fit in links to all the pages you need, but don’t necessarily need to take up room in your main navigation. We’re talking terms and conditions, privacy policies … But it’s also a great place to make it super quick for people to get in touch with you, and to reinforce your messaging about your credibility.

Often your awards and industry associations are included in the footer, along with links to your insurance documents and other information your customers need on a regular basis.

Here’s some interesting ways to add a bit more life to an otherwise boring footer:

  • use a custom cursor / mouse pointer, to help you differentiate this section of your page
  • animate your online form to “keep up to date on your latest announcements” or similar engaging call to action for people who are interested, but not quite ready to buy

 

Our love for custom technology is aimed at helping your organisation grow. To discuss your unique requirements, please get in touch.

Got a question? Ask AI?

Close Speech Send