Our work tells the story…
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!
People find what they are looking for in your site or app via navigation.
Navigation can take a wide variety of forms, and often one web page or application screen will contain several different types of navigation.
The best type of navigation design depends very much on:
Mega menus like the one found in the Nortan Air Conditioning & Heating website, and the Oxley Nets website, are helpful to provide quick access to a large amount of content, including room for icons and other visual devices to help the user find what they need as quickly as possible.
When planning a new website or application, delving into the navigation structure (aka ‘information architecture’) is one of our first, and most important, tasks.
Buttons are one type of navigation, and the options for buttons are endless. Here’s a few ideas!
Navigation doesn’t only help people to find what they are looking for, it can also take you on a journey, through the content and the story you are telling.
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.
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:
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.
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.
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:
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.
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:
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!
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:
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?
One of our helpful team will get in touch with you shortly.