Archive for the ‘Digital Design’ Category

9 Reasons to Use Website Animation in your Web Application or Website (and when not to)

April 26th, 2022 by Jimmy Bui

Website Animation

“Website animation” refers to movement of content onscreen, but is distinguished from video / movie content.

There are many useful applications for animation in your website or web application.  Some of the most common animations you will see in modern websites and web applications include:

ACTIVITY INDICATORS

Waiting for a screen to refresh after submitting information is bad enough, but when there is no indicator that something is happening, people get nervous!  The spinning icon that appears in the middle of the screen gives you just enough visual indicator that something is happening, to remove the temptation to click again, just to make sure something is happening.  🙂
Loading animation

Whilst tempting to fill the page with them, that’s the last animation we will actually embed in this post!

Interactive forms

When you click in a form field, and a set of instructions slides into view to help you fill out that field.  Showing (and then rapidly hiding) each keystroke as you enter your password uses animation to help you get your password right, without letting others easily see it.

There are many ways that animation of form elements is used to guide a person to complete a form, including on-the-fly error handling.

Photo SlideShows

Communicating key messages to your audience in the one area of the screen is often achieved via an image & message “slide show” at the top of a website home page.  The home page slider uses movement and visuals in a defined area of the screen to quickly convey information, and attract attention, without the visitor needing to scroll.

Animated Graphics

For example, a logo that draws the attention of the viewer as it “forms” in front of your eyes will help your audience remember your name and branding.  We have assisted clients recently with animated logos as intros / outros for webinar presentations.

Animated graphics are also used to delight the viewer, or make a big impact, for example the animation at the top of the Enudge website.

Animation is often used to help communicate concepts, and is widely found in online learning to emulate a physical educator, and/or visually teach the viewer.  The quiz / card game “Know Lupus” is a great example of the use of animation to educate.

Simulation can be greatly enhanced through the use of animation.  We used animation within a desktop application which helps a user of a centrifuge simulate the movement of liquid through the centrifuge.

The animation at the top of the Contactpoint website is another example of the use of animated graphics, which tells a story to help a visitor understand the types of technologies we work on.

The transitioning text at the top of the Kool Kidz Childcare website is another example of animation to communicate a key message, in a fun and eye-catching way.

What is JavaScript?

JavaScript is a scripting language which used to create and control dynamic website content on both client-side (that is, the content that the person using the web browser sees, and that is located on the visitor’s computer) and server-side (that is, the content that can be programmatically generated in reference to databases and other assets).  Dynamic content allows us to create highly interactive web pages and web applications.

JavaScript is the most common technology for achieving onscreen animation within websites and web applications.

There are numerous common JavaScript frameworks which are used by many web programmers, including:

  • jQuery
  • Vuejs
  • React
  • Nodejs

Each of these frameworks have JavaScript as their base, over top of which they provide numerous packages.  These often comprise:

  • A more succinct or more understandable programming syntax. It’s all still Javascript, but each of the common libraries mentioned above look very different from each other, to the programmer.
  • A collection of tools that achieve specific user interface tasks. That could be anything from common user interface components (such as forms, sliders, carousels etc), security components, data manipulation components, and more.

Some technology solutions require the use of more than one JavaScript framework, or additional JavaScript libraries that have a very specific purpose.  For example, when building a web application which has clear separation between backend processing and frontend design, we will likely use Vuejs for the frontend (client-side) aspects, and Nodejs for backend (server-side) processing.

For very complicated animation, developers may also use additional JavaScript libraries, which make animation easier and more convenient to achieve. The top 5 JavaScript animation libraries to help achieve much more complex animations are:

  • Anime.js
  • GSAP
  • Velocity.js
  • Threejs
  • MO.js

Reasons to use JavaScript to Animate

JavaScript is used for the following general purposes:

  • Adding interactivity to the user interface e.g. animation of key content to draw attention to it, guiding a user through submitting form.
  • Creating web, mobile and desktop applications. Because Javascript can be used for both client-side and server-side functionality, it makes it a great candidate to fast performing apps.  Developers benefit from using similar technology both client-side and server-side, as there are fewer languages required, and interactions between similar technologies has advantages.
  • Building web servers and server applications.
  • Game development. Although, very complex, multi-player games are more likely to be written in lower-level languages.

There are many reasons why JavaScript is the best choice to animate a website or web application, including:

  1. JavaScript is native to the web browser, meaning that it runs very fast.
  2. Whilst it is also possible to create animation within a website using CSS (cascading stylesheets), you can usually achieve the same thing (or better) in JavaScript more easily and with better browser support.
  3. It is a very popular language, which means that there are plenty of resources available when a developer is attempting to achieve a particular user interface.
  4. It has a very large online community, which provides strong support for learning and developing.

Although, it isn’t the only choice for creating animations, and for specific tasks might not be the right choice.  For example, the animated logo mentioned earlier might be better achieved using a .svg file, which is a special vector format image, that can be programmed to animate and retains perfectly crisp edges at any size.

When selecting a particular JavaScript framework, we consider the main features of each, and ensure that we choose a framework that will provide the right set of tools for the required solution.

When should a Website Avoid Animation?

We recommend that you should not include animation within your website or web application for the following reasons:

  1. Just because you can i.e. don’t animate everything and anything just because it is possible.  Animation for the sake of it can end up being annoying or distracting.
  2. To shift the location of web page content after page load.  Shifting page content can cause Google to penalise your website’s rank in its search engine results when Google determines that it is negatively impacting on the user experience.
  3. If it is unnecessarily slowing down the performance of your website / web application.

 

If you would like additional animation added to your website or web application, the Contactpoint development team is ready to help!

Facebooktwitterredditpinterestlinkedinmailby feather

Reducing Customer Friction, Building Customer Relationships

December 16th, 2019 by Dave O'Dwyer

When it comes to online interactions, reducing customer friction – making it easier for people to buy from you, or do business with you – will make for a quicker sale and less frustration, improving your relationship from the outset, and most important, lowering visitor drop-off and abandoned carts.

PayPal recently announced deeper integration provided through Facebook and Messenger, making it that bit easier for Facebook users to purchase. Removing steps and barriers to completion is vital for ecommerce and other transactional business platforms. This is an example of small (from the end-user perspective) adjustments in the user experience, which can have a big impact on the number of completed sales through Facebook using PayPal.

Next time you’re considering a new feature for your website, ask yourself “could this be easier? Clearer? Are there any frustration points that would make a user give up before completing the transaction?” If there are, then consider how to eliminate them – feel free to call us to discuss. This is a discipline of digital marketing called “Conversion Rate Optimisation” or CRO. Amazon rationalised their checkout down to a “One Click Checkout” by removing as many barriers as possible, which has been pivotal to their success.

However, just making a quick sale doesn’t build a relationship. So for most businesses your efforts to make it easy need to have a counterpoint of working out ways to relate to your customers, provide further value, and ensure you deliver more than just a transaction. Let’s look at an example.

Case Study: Kool Kidz Childcare – Safe Kidz Program

We have recently assisted Kool Kidz Childcare to run their Safe Kidz program designed to provide free community service – ensuring that child seats are fitted correctly into their vehicle – whilst at the same time having the opportunity to give potential customers a guided tour of their unique childcare centres.

Contactpoint designed and built the landing page for this service, including writing the copy to engage with the audience in a way that was open and honest about the opportunity. Rather than spend the marketing budget on gimmicks and discounts, Kool Kidz is providing a free service in order to get the word out about their centres. In doing so, they build their reputation in the community and provide a point of difference from their competition. We built-in functionality to make it very easy for parents to register and book into available car seat fitting appointment times.

Contactpoint also designed and implemented a pay-per-click campaign through Google Ads and Facebook to present geographically and demographically targeted ads to potential customers. The ads point to the landing page, the content of which is beautiful on both desktop and mobile, and keeps very much to the point of the interaction – understand why the service is being run, how you can take up the offer, and book in. Of course, there’s a little bit about why Kool Kidz Childcare is great for your children as well, to start to educate the potential customer. Customers don’t mind marketing when receiving a product or service for free.

Google are masters of providing useful services in return for access to all your online data, which they programmatically sell to the highest bidder. You don’t mind as you are getting free email and search functionality (amongst other services) that is useful to you. Even the ads you are shown are customised as to be as relevant to your specific data as possible, making you more likely to want to click on them.

We designed the Safekidz sign up process to both reduce barriers to conversion and build relationships through the initiative. Together with all the finer details of the process – confirmation messaging, email follow-ups, delivery of the experience – the process was seamless and gently promotes the Kool Kidz brand and values at each touchpoint. Ensuring the process is quick, logical and avoids user frustration was crucial to the success of the project.

The Safe Kidz initiative was piloted in Brighton, and based on initial success, we were able to quickly scale the platform to other locations of the childcare franchise with customised appointments, and appointment follow-ups, per location. The program is delivering a great flow of engaged new parents to the participating childcare centres.

Need Help?

Our Contactpoint Digital Marketing team is at the ready to help you reduce customer friction, but not at the expense of your customer relationship. We look forward to hearing from you when you are considering a new digital marketing campaign, new website functionality, or even a brand new website.

Facebooktwitterredditpinterestlinkedinmailby feather

Accessibility is key to removing barriers for website visitors with disability

March 12th, 2019 by Erina Hoque

Exploring a website is effortless for many of us (unless you are looking at a very old, or poorly constructed website), but that is not the reality for those with a disability. My recent Accessibility Assessment of a client’s website brought me face to face with this stark reality.

It is important to be aware of the challenges faced by those with a disability, in order to ensure your website is inclusive and accessible to all. Knowledge and understanding of the available assistive technologies also provides helpful insights.

The challenges for people with a disability can be broadly categorized into:

  1. Vision impairments including blindness, low vision, colour blindness. A Screen Reader is a technology that is widely used by the vision impaired. It reads aloud the contents on a computer screen. NVDA is a free and open-source screen reader software. The commercially available JAWS for Windows is another example of a screen reader.
  2. Hearing impairments such as deafness or low hearing. Tools which auto-generate transcripts and captions are useful for those experiencing deafness and low hearing. IBM’s Watson Speech to Text technology is one such tool which converts audio and voice into written text for quick understanding of content.
  3. Mobility impairments e.g. weakness or difficulty in controlling limbs. Speech recognition softwares help users create text and navigate online by speaking into a microphone. One example of speech recognition tools is Dragon Speech Recognition Software which allows users to use voice commands to type and navigate the internet.
  4. Cognitive impairments e.g. learning difficulties, difficulties in comprehension.

Some of the areas of accessibility can be achieved relatively easily for your website via your content management system (CMS). Other issues need a developer to implement the code of your website differently. Still other accessibility issues require consideration during the visual design process.

Below are examples of some easy ways that you can make your website more accessible via your CMS:

  • Non-text content such as images should be accompanied by text alternatives/descriptions to make them accessible to those with vision impairment. These text alternatives are captured and communicated to the user by a screen reader.
  • Including a link to a transcript of any audio content, so that those with hearing impairments are still able to access the content.

Other areas of accessibility can be more difficult to combat via a CMS, for example:

  • Mandatory form fields should be clearly labelled as such, and when users fail to provide input for any mandatory item, information should be provided as text to enable the visitor to identify which fields were omitted. Such error message text should be placed so that screen readers can quickly access that, and read it to the visitor. All visitors will benefit from this functionality, but especially those with cognitive impairments.
  • Ensuring that the content of pop-ups be accessed via screen readers and via the keyboard.
  • Ensuring that identical links are not repeated successively; this causes an issue for a person using your website solely using their keyboard. This can occur unintentionally due to the way a website is designed and then built for mobile responsiveness and with multiple menus. For users of assistive technologies, it can be confusing to encounter successive identical links.
  • Ensuring that there is sufficient contrast between all elements on screen, to help those who are visually impaired to see all information. One example of this which we see on a regular basis due to the cleanness of the design, is placeholder text inside form fields in a light grey (the only guide to a visitor regarding what should be entered into each form field), whilst the information they enter is shown in a darker colour. The lighter text looks nice but is hard for people with vision impairment to see.
  • Video content should be accompanied by captions to assist those with hearing impairment. This is a job for the creator of your video assets.

The above is just a subset of the ways in which a website can be made more accessible for visitors with disabilities – there are many more!

The World Wide Web Consortiums (W3C) Web Accessibility Initiative (WAI) has developed standards and extensive support materials to help understand and implement accessibility. More information is available via:

  • W3C Web Accessibility Initiative website: https://www.w3.org/WAI/
  • W3C Accessibility Guidelines: https://www.w3.org/WAI/standards-guidelines/

The Australian Disability Discrimination Act 1992 requires equal access for people with disabilities. The Australian Government mandated that all government websites must be constructed to comply with WCAG 2.0 by 2014.

Contactpoint would be pleased to assist you with an assessment of your website accessibility issues, or to implement changes to the code underlying your website to ensure that it is accessible.

Facebooktwitterredditpinterestlinkedinmailby feather

Latest trends in website design, and why …

January 22nd, 2019 by Heather Maloney

We have just undertaken the huge task of re-designing and re-building the Contactpoint website. Until last week, our website design was over 5 years old, which is ancient in web timelines, particularly for a web design & development company. Our previous website design was aimed squarely at indicating that we were working with the Windows Metro Tiles in our mobile app designs and builds. The Metro Tiles design style was fairly new at the time, which confirms just how old our site design was!

When you have a large website, with lots of historical content created as a result of hundreds of hours of investment, and when your site covers many areas of endeavour and really matters to the way your organisation is viewed in the marketplace, then refreshing your website is a significant undertaking.

Do you have the impression that your website looks a little out of date, but aren’t sure why? Are you wondering whether it is worth the time and resources required to refresh your website? In this article I will address both of these questions, and of course, I’d be very happy to discuss this questions with you if you need a sounding board.

Current Design Trends

First, let’s have a look at the latest design trends that you will be seeing in the newest websites, and some reasons behind those trends.

1. Cartoon / Hand Drawn images:

Latest design trends - illustrations

It is currently very popular to use illustrations, rather than photos, particularly in software-as-a-service or start-up technology company websites. Illustrations are helpful to convey new ideas without the constraint of a photo, and explain a new concept in pictures rather than lots of words. Similarly, we are also seeing much more use of hand-drawn, unique icons to help direct the user to the right information, and to solidify a point being made. The quirky and hand-drawn style of illustrations and icons make websites more friendly and engaging. You can see this in the icons used on the Yelp website and Slack website for example.

2. Lots of white/empty space providing separation of sections of content, also with less information per section. Both of these visual devices make it very easy for the visitor to take in the content, and focus on the key point/s. The new Firefox website shown above is also an example of this trend. This also makes mobile responsiveness easier, as you have less content to deal with on the mobile, however, it needs to be balanced against the impact on search engine optimisation; Google works out where your site should be ranked primarily on the content you include in your site, so you need to have significant amounts of content.

3. Animation of icons, logos and form fields. We won’t be going back to the days of flaming logos, however, with new programming libraries being created that facilitate easier, sophisticated animations using Javascript, animation is being more freely employed to:

  • provide visual cues to the visitor to suggest interaction points
  • gain the attention of the visitor to more important parts of the site
  • provide a delightful user experience

For a beautiful example of an animated logo, check out: Fubiz (you need to wait first for the whole site to download, and the logo animation doesn’t run constantly so you might need to be patient). The Myer website currently employs an animated logo to emphasise the “My” in Myer matching their TV advertising slogan. The Ikea website uses an animated icon to highlight information about their parcel delivery service.

4. Use of video. Like animation, video grabs the attention of the visitor, and provides for deeper engagement with your audience. The use of drones to create unique footage is also continuing to drive the popularity of video, as seen in the home page element of the new Brighter Lines website.

Video is increasing being used in more subtle applications – backgrounds that automatically play in order to add atmosphere to your website without requiring the user to focus on and listen to audio at the same time.

5. Design for mobile. This is not so much a new trend, but designing for a great experience on mobile devices has become even more important with Google’s recent change to “mobile first” for ranking of websites, whether you are searching via your mobile or not. Not only does your website need to look great on very small screens (and every other size) it must also be very fast to load on mobile.

6. Headings, Headlines and Buttons. Examples of the latest trends in headings, headlines and buttons are shown below. These trends are partly about fashion, but also strive to make text shorter, and calls to action, very clear and obvious. They are used to take the visitor down the desired path.

7. Typography. Choice of fonts has become more important with Google making it easier to incorporate a unique font into your website, without sacrificing load speed or readability. The font used in your website will be focused on ease of reading on screen which is why sans serif fonts dominate. Large fonts, and capitalised headings, are used widely, as shown in the examples above. The space between lines and paragraphs are carefully chosen for readability and aesthetics.

8. Cards, tiles and panels. Google’s Material Design was launched in 2014, incorporating flat design – predominantly solid, strong colours – bringing to digital design the concept of surfaces with edges that guide the user, but can extend based on interaction due to the digital nature of the surfaces. “Cards” and tiles with subtle drop shadows, becoming more pronounced on hover, help to focus the visitor’s attention as well as provide subtle interactivity with your website. Google also provide programming language around the elements of their design system to assist in their implementation. Cards and panels are usually implemented in a grid system, which aids mobile responsiveness. An example of cards implemented by CodePen.io is shown below.

Reddit and other news style sites use this design element extensively.

9. Asymmetrical Designs As a break away from the extensive use of grids and boxes, asymmetrical designs are becoming more frequent. The Cloco website is a great example of asymmetry. Our new Contactpoint home page – custom technology Melbourne with angled background sections are an example, leading the visitor’s eye to want to keep scrolling down to see what comes next.

10. Hardware driving design trends. For mobile app design, the iPhone X requires special treatment due to the “notch” cut out of the top of the display and the introduction of “Super Retina” display. The digital screens now surrounding stadiums such as the MCG and inside the Rod Laver Arena, also drive design changes as they extend the boundaries of what is possible, and increase expectations of viewers.

The above is not an exhaustive list of all the design trends you will be seeing on the web, but it will certainly help you to pinpoint why your site might be looking a little old compared to newer sites.

Why is it important to keep up with design trends?

If you are not in the fashion industry you might question why you need to try and keep up. Certainly, we are not planning to change our website design every time something new hits the web. However, the design of your website, and all your marketing material on and offline, is a powerful indicator of who you are, and who you serve.

The following are important reasons why you might consider a design refresh:

  1. Fashion. There are those who make up the numbers of the “standard deviation” (the outliers who like to start new trends, or go off grain) and then there is the majority; people behave in a tribal way, following the trends of the tribe or group of people with whom they want to identify. The concept of Tribal Marketing asserts that when the trends and look of the tribe that your organisation serves moves, you need to move with them so that you are still recognised as being part of the group and serving that group.
  2. Keeping up. The desire to keep up with the latest and greatest, or not miss out, is a strong drive. Looking outdated can be a signal that your products and services are also not up to date. Depending on your industry, falling behind can mean losing competitive advantage or missing out of value available to others.
  3. First Impression. Research has shown that website visitors make a judgement call about who you are in a fraction of a second. Having a good first impression via a strong website design is important to keep a prospect on your site long enough to find out more about your offer.
  4. Improvements in experience. Most of the design trends described above are not just about changing for the sake of fashion; the changes are part of constant improvement to help guide the people you serve, and want to serve, to action, and communicate your most important messages more clearly.
  5. Communication. Getting your message across – all of your message – can be delivered so much more effectively through design and visual elements, compared to all the words it would take to deliver the same message. The other side of this coin is that your design might be communicating messages to your visitor that you aren’t intending, especially if it has been the same for a long time.

We understand all the steps involved in designing a new look site that appropriately reflects your organisation and positions you correctly for your target audience, and then building your new site to achieve the greatest engagement of your visitors. Don’t hesitate to get in touch to discuss your website or web application design.

Facebooktwitterredditpinterestlinkedinmailby feather

The Latest Email Campaign Design trends

January 18th, 2019 by Heather Maloney

Design trends are a favourite topic for discussion at the start of each year. However, what is possible in the design of an email campaign is significantly constrained by email programs used by the recipient (or at least, the lowest common denominator of email clients). Email design must also ensure a great experience for those reading on a mobile phone, as well as a desktop computer; as of June 2018, 46% of all emails are opened on a mobile phone(1).

Emails from major brands continue to be highly designed, and consist predominantly of all images. It seems that the major brands expect that their customers will open and download the images so that they can actually see the email, without any further encouragement. Less popular brands and professional organisations, however, would be well advised to intermingle images with text and colour blocks that appear without image download, to entice the recipient to read with more than just the sender’s name and subject line.

One of the most popular design trends in emails is including animated gifs to entice curiosity and therefore click through to the organisation’s website. Animated gifs can also be used to better explain concepts inside an email; a picture tells a thousand words. Because you want the animation to surprise and delight, using them in every email you send runs the risk of becoming predictable, so mix it up.

It is also important to note some difficulties with animated gifs inside emails:

  • Unfortunately Outlook 2007, 2010 and 2013 do not support animated gifs, and will show the static version of the animation by presenting the first frame of the animation. That means you need to include all the important information in the first frame, to cater for the high percentage of users still using these versions of Outlook (approximately 8% of the global population).
  • Many frames and complex animations will cause your images to get very large, very quickly. So you should stick to very simple animations.
  • It takes more design skills to create great looking animated gifs, compared to a single static image.
  • Accessibility for the visually impaired can also be an issue. Consider slowing down rapid frame rates, depending on the image.


(image courtesy of Review Australia email)

Including live content in the body of your email – think live results from a poll, count down to the end of a sale or ticket availability, latest content shared by other customers, current weather, something happening close to the location of the opener. Live content is information that is updated when the recipient opens your email. This tactic, if used to provide richer, more relevant experiences for your reader (not just used as a gimmick) will significantly increase the engagement of your audience and possibly aid in community building, and will cause an increase in the number of times that an individual opens the same email. Live content is being seen increasingly in social platforms e.g. Facebook Live where users are streaming video from an event. Live content is also a tactic that you will want to make careful use of, as it can backfire if the live content rarely changes, is of poor quality, or is uninteresting.

The use of live content is likely part of a cross-channel marketing campaign. For example, a physical event, involving sharing of content online, with online ads pointing to the website, and an email campaign promoting the event before, during or after. This trend of co-ordinated marketing across multiple channels has been a goal for marketers over many years, but made difficult by disparate systems. As technology integrations proliferate some of these difficulties are being removed, and the end consumer is seeing the same message in more places, with great effect. Delivering a co-ordinated marketing campaign across multiple platforms – ads, website, emails, offline marketing – requires a lot more design effort and co-ordination across multiple teams in larger organisations, but will produce significantly better results than a message only distributed in one channel.

If you would like help to use any of the above trends in your email marketing, don’t hesitate to get in touch.

(1) https://litmus.com/blog/email-client-market-share-trends-first-half-of-2018

Facebooktwitterredditpinterestlinkedinmailby feather

Case Study: How a Landing Page Rescue Fixed a Leaking Sales Funnel!

June 20th, 2018 by Cameron Collins

fix leaking sales funnelAccording to Wikipedia1, people in sales and marketing positions have been talking about sales funnels since the 1920s. The sale of many products and services involve a lead time from investigation through to purchase. Having a certain number of leads at each stage of the sales funnel or customer journey is frequently used as a lead indicator of your likely sales volume at a point in the future. Marketing attempts to ensure that people entering an organisation’s sales funnel have a certain problem they are trying to solve or need that must be met, and that are aware that solutions to these problems exist. The organisation then attempts to guide the prospective purchasers through their process of research, interaction with the sales team, competitor evaluation and ultimately the purchase of that organisation’s products/services.

A well-managed sales funnel perpetuates interaction with the individuals even after they become clients. Client’s evaluations of the company, employee performance, products and services are ongoing. The sales process should nurture and support clients, leading to repurchase, renewal of contracts and referrals, that is, back to the top of the funnel.

Unfortunately, in practice not all leads will emerge from the bottom of the funnel as clients. Even the best companies will lose a few leads along the way. Astute marketers will be constantly seeking to identify and improve all interactions down through the sales funnel and seek ways to fix common leaks. Improving the efficiency of their sales funnel ranks as the second highest sales priority after closing more deals2.

The Graffiti Eaters is an example of a company who understood the benefits of a sales funnel but knew theirs was leaking somewhere along the way. They came to us with an existing website, Google AdWords campaign, and frequent blog and social media content to target prospects in the early stages of the sales funnel. Relationships with existing clients were maintained through blog and social media content as well as more personalised email newsletters.

After analysing the entire cycle, it became clear that the hole in this funnel was the website. We were able to drive significant traffic to the website of people who were looking to purchase their services via first page ranks in Google search results for relevant search terms. We were able to ensure the Google AdWords ads were displayed above organic search results. We were also able to encourage relevant traffic to click on the ads. However, once traffic reached a landing page of the website, much of the traffic did not continue through the sales funnel. Potential clients were lost and there was little to show for the advertising expenditure.

Landing pages play a key role in paid ad campaigns; they support the ad with more detailed content and help the prospect to take action and interact with the vendor. After clicking on an ad, visitors should be directed to a page that provides a clear, specific solution to their problem in a tone and style suitable for the audience type. Once the visitor has interpreted the key messages, that visitor should be guided on how to act on this information. A clear, yet tasteful ‘call-to-action’, such as a form for requesting a quote, a booking form, a request further contact link or the option to make a purchase.

After analysing The Graffiti Eaters website, we found that the landing page provided an unsatisfactory user experience and had significant room for improvement (see image below).

leaking sales funnel

A cluttered appearance, with excessive text, images and animations grouped close together made it difficult for visitors to find the key information. Style inconsistencies throughout the navigation, headings and text provided a substandard appearance which wasn’t appropriate for the predominantly B2B audience. The call-to-action comprising 3 different options was confusing, and on mobile devices, it was only visible by scrolling to the bottom of a very long page.

We analysed the top performing websites in graffiti removal and similar industries which target the same audience. A design was selected which overcame the aforementioned issues (see image below or visit www.graffitieaters.com.au/graffitiremoval/).

leaking funnel

The text was simplified to demonstrate the key points that owners and managers of commercial properties are looking for when seeking a professional graffiti removal service. A video was provided for those who are prepared to spend more time on the page.

We provided a clear call-to-action via the ‘Get it Off Now’ button which leads to a simple form, handling both bookings and quote requests. This button is part of a sticky header, which stays in view while the visitor scrolls down the page. A second button was placed towards the bottom of the page with the label ‘Request a Quote’.

The mobile number listed in the sticky header features click-to-call functionality when viewed on mobile devices. This enables visitors to click on the number and automatically call head office. As with the booking/quote request form interactions, this is linked to AdWords conversion tracking so that we can monitor the number of leads the ads provide.

These changes are part of an overall re-design of the website which is now clean, modern and user-friendly on desktop, tablet and mobile devices while retaining The Graffiti Eaters unique branding elements.

We reviewed the results of the AdWords Graffiti Removal ad group during April 2018 and compared it with April 2017 when the previous website was in use. The landing page gained an astonishing 242.85% more leads in April 2018 than in April 2017.

To put this into perspective, we compared the conversion rate of the Graffiti Removal Ad Group in April 2018 with global averages for AdWords campaigns across all industries3.

blog-landing-page-rescue-statistics

The campaign for The Graffiti Eaters achieved more than double the global industry average for conversions and more than triple the conversions gained from the previous website. Not only is the client receiving more leads, but they are also receiving a far greater return on their investment.

The effect of the new design was felt throughout the website, with the number of quotes completed increasing by 44.95% and the number of new clients generated increasing by 25.53%. A great result!

The Graffiti Eaters are one of many clients we are proud to have assisted with Google AdWords management (PPC), website design, and sales funnel optimisation.

Contact us to discuss how you can increase sales by optimising your digital marketing.

Facebooktwitterredditpinterestlinkedinmailby feather

Why Rebrand?

March 27th, 2017 by Heather Maloney

image-rebranding-squareThe visual identity (aka ‘logo’) of the Contact Point brand has just been updated, so the reason why businesses rebrand is top of mind. We are rebranding and have updated our logo for several reasons including:

1. To communicate our purpose more clearly
2. Modernise
3. Be more memorable

The Contact Point brand was established nearly 11 years ago. The visual identity of our brand comprises a hand-drawn asterisk; the idea was that if you were looking at a list of suppliers, you’d mark the one you wanted to contact with an asterisk. My Gen Y colleagues look at me blankly when I talk about written lists, and marking one with an asterisk. And let’s face it, we’re a technology company, so what place does write lists have in that? Time for a refresh!

Our business aim is to partner with our clients to help them be the contact point in their industry, by using the best technology solutions and digital strategies.

Our new logo contains a C, a dot / point in the centre, and a circle surrounding it which work together:
– To be easy to recognise.
– The outer circle reflects both the global nature of our work, as well as the team it requires to deliver.
– The overall logo is also reflective of a target. Our clients have goals that we assist them to achieve, and we are about making them the target – the contact point – of the right customers.

We would love your feedback re: whether you feel that our new visual identity successfully achieves the above goals. Stay tuned for our new website design which will better incorporate the new logo, as well as bringing the user experience up to date.

Other common reasons for rebranding include:

4. Change in purpose
Often such a change means that the brand no longer supports the organisation’s purpose.

5. Reaching new markets
New markets usually comprise people with different demographics, pain points, ways of communicating, and perhaps culture. A new brand may be required to better engage with that new target audience.

6. Consolidating multiple brands
Mergers and acquisitions usually combine brands that clash with one another. A rebrand in this situation will help the organisation to present a consistent message to the market.

7. Changing the name
A new name obviously requires a new brand when the visual identity is tied to or incorporates the original name. Imagine if Coca Cola changed their name (not likely given its value!). Their brand would most definitely need to change.

We regularly assist our clients with creating new brands, or refreshing their brand or visual identity. Feel free to get in touch if you would like to discuss this for your organisation.

Facebooktwitterredditpinterestlinkedinmailby feather

Use of Animation in Websites

March 3rd, 2017 by Chris Torralba

headline - website animation
The use of animation in web design is a current trend, although thankfully we haven’t returned to the days of flaming logos. Animations in websites work best when they serve a purpose and enhance the users experience. Adding animation to a website can bring a design to life, even if the motions on the page are subtle. Websites without any animation at all may run the risk of looking outdated. This blog post is going to look crazy busy, and you’d never combine so much animation in the one page, but below we describe the various ways animation can be employed to give websites that extra visual appeal and improve usability.

Attracting attention
Animations can direct the users focus to any point on the screen. As long as there are not many other competing elements on the screen, even the smallest amount of motion will grab attention. This can be used to influence what the user sees, or establish a visual hierarchy pointing them to important points on the website. Visuals like a slow fade, a box crawling in from the side, or a tile spinning to reveal more information are more preferable than the content suddenly appearing out of nowhere. In the example below animation is used to reveal the products tagline followed by a shop now call to action button.
animation to attract attention

Engaging the visitor
Animations can be used to point out possible ways for visitors to engage further with your website. The right animation in the right place can help get your message across and engage users. Animations as simple as changing the look of a button when the mouse pointer hovers over them can make your pages feel more alive and prompt visitors to select press or interact with your content. A good example of this would be an animated call to action button. Such buttons need to be displayed prominently on your website. Adding [restrained] animations make them more obvious and will let users know that they are interactive. In the example below when the mouse is hovered over the button not only changes shape and colour but produces bubbles as well.
Button hover effect

Web Forms
Animations when used correctly allow designers to produce faster, easier to use, and more productive web form experiences. Animating web forms is a great opportunity to add some subtle and interesting effects to a web page. Web forms are elements that your user will interact with and making them fun to use can enhance the experience. Because animated visuals can teach more effectively than words or static images animations can also be used to show a user how to fill out a web form, subtle animations can guide user interactions and make form filling less confusing. In the example below animation is used to let the user know when his details have been correctly processed.
Web form animation

Visual Appeal
Whilst animating for the sake of beauty can be easily overdone, making the user experience that bit more enjoyable or sophisticated will help to bring your visitor back, and help to encourage sharing of your website. Below is an example of a very subtle animation that just adds some class to the design of the image link.
animation for visual impact

What’s your favourite example of animation?

Facebooktwitterredditpinterestlinkedinmailby feather

Design-centric Application Development

December 6th, 2016 by Heather Maloney

Design-centric application development

A design-centric approach to application development (that’s web applications and mobile applications – is there any other sort these days??) differs from customer-centric or technology-centric approaches which have been more common of recent years. A design-centric approach focuses primarily on ensuring that the user experience is perfect – or perhaps more accurately “nearly perfect”.

There is always room for improvement – another revision, a new update – and users want continual improvement to make their life easier. User experience has been made king because research shows that organisations which focus on design significantly outperform those who don’t.

In a customer-centric approach the customer is asked what they want, and then the designer will set about delivering to their requirements. In a technology-driven approach, the technologists build the best algorithm or new solution to solve a particular problem and then look for a customer who values the technical solution. However, following a design-centric approach the designer will research the best current solutions in the problem landscape, put themselves in the customer’s shoes, and determine to provide the simplest way to achieve the desired goals. Gathering feedback on the design from a variety of potential users of different levels of expertise follows, and leads to iterative refinement until the first version is achieved. The developers – the people who turn the design into reality – are then directed by the design team to ensure that the intended outcome is achieved.

The Uber mobile app is a great example of design-centric application development, which is a significant factor in its amazing success. Anyone who has used the Uber App will agree – from being able to see where the on-approach vehicle is on the map, along with the number of minutes until it arrives continuously updated until arrival, to seeing a photo of the driver and vehicle, one press to make a call to the driver, and immediate payment upon arriving at the destination without needing to handover a credit card. I could go on and on about the ease with which you can hail an Uber, and receive a brilliant experience of private transport…

One of the challenges of current application design is dealing with content. Having little visible content is a very quick way to send users heading for the hills … imagine Instagram with no photos when you launch it, or Twitter with no tweets to read, or Facebook with no posts. However, masses of content with no simple way to navigate it, can be just as off-putting. Requiring a user to search has been the standard approach for many years. Filtering and other ways of helping the visitor to easily drill down to the content they are most interested in, have developed more recently.

At Contact Point we have been embracing SCRUM methodology across our organisation, which also readily supports a design-centric approach. Starting with our client’s goals and objectives within their particular competitive landscape, and their customers’ wants and needs, we will:

  • undertake research into common solutions to the design problem at hand,
  • brainstorm other potential approaches with trusted and experienced colleagues,
  • wire frame the potential solution, getting feedback along the way,
  • apply creative design to the wire framed solution,
  • carry out user testing of the design, iterating as necessary to refine the solution, and
  • finally develop the solution, taking care to ensure that the essence of the planned user interaction is achieved

The above steps will be undertaken for each logical entity that collectively forms the solution, at the same time ensuring consistency throughout the solution as appropriate. After the development of each component, real user testing of people across a broad range of skill levels, will then lead to further refinement. Programmatic A/B testing will allow two or more potential solutions to be tested head to head to ensure the best solution evolves.

The successful execution of a design-centric approach involves many steps and requires an appetite for iteration, well beyond the launch of a new solution. However, the results are impressive, and for all but the simplest of tasks, likely the only way to achieve raving fans of your solution. Design-centric doesn’t mean that the customer is ignored. In fact, the opposite is true with a greater focus on experience combined with needs and wants. Neither is technology ignored – utilizing the most up to date and elegant technology is also paramount to ensuring a great user experience.

What is the best user interface you have experienced from a web or mobile application?

 

Facebooktwitterredditpinterestlinkedinmailby feather

Consumer Decision Journey – throw out the Sales Funnel model!

November 8th, 2016 by Heather Maloney

As the creator of a broadly used email and SMS marketing solution (eNudge) for the Australia marketplace, I thought that over the years I would see a general improvement in the way email marketing campaigns were constructed and delivered. I’m sad to say that on the whole, nothing much has changed. eNudge provides a myriad tools to help you segment, target, automate, measure and analyse, but it’s in the execution where many people fall down. Business owners and marketers get busy, and then just flick off a quick email to get a spike in sales. They are content with a spike and move on.

However, I know there is a better way … there always has been. Many marketers refer to it as lead nurturing, and email campaigns (including the eNudge Message Series functionality) are an excellent way to nurture your leads. For many years, marketing personnel have been working with a Sales Funnel model in mind – a linear movement of a potential buyer through awareness, interest, desire and finally action (buy). Lead nurturing refers to understanding where your lead is in the sales funnel, and give them the next piece of information that they need to take them to the next step in the journey; the next step closer towards being ready to buy.

I could be placated if I saw email marketing being used more for lead nurturing … more value and information is supplied, in a logical flow, engaging with potential buyers and taking them down a path to understanding and trusting you. However, thoughts even on lead nurturing have moved on …

The changing landscape of information available via the internet including the impact of social media, and more recent research into buyer behaviour, suggests throwing out the sales funnel model and replacing it with what is being called by McKinsey as the “Consumer Decision Journey“. McKinsey research revealed that far from systematically narrowing their choices, today consumers take a much more iterative and less reductive journey of four stages: 1/ consider, 2/ evaluate, 3/ buy, and 4/ enjoy, advocate, bond. During stage 2 (evaluate) where the Sales Funnel approach says the options get narrowed down, this, in reality, is where the brands most active online often replace the brands that were in the original consideration list (perhaps added to the list because of traditional advertising). The consumer’s options actually expand during this phase and the originals often get thrown out where there isn’t enough information online or customer reviews to support them.

Even more critical in what is being seen now in consumer behaviour, McKinsey discovered that during the 4th stage (enjoy-advocate-bond) more than 60% of consumers conduct online research about the products after purchase – a touchpoint entirely missing from the sales funnel approach. It is during this after purchase where your customer will advocate for your product or service by word of mouth, and produce online content to help future consumers in the consider and evaluate phases.

Other recent research by the Harvard Business Review team has shown that achieving the “full” sale to a B2B client is best achieved by providing the opportunity for that client to purchase small prototypes or incremental products along the buying journey i.e. as part of the evaluate stage. For more about this read: “To Increase Sales, Get Customers to Commit a Little at a Time“.

It was no small task, but the Harvard Business Review article describes an example implementation of changing the view of marketing to that of the ‘Consumer Decision Journey’ lead to a new TV becoming the top seller on Amazon.com and the company’s best performer in retail stores, far exceeding the marketers’ expectations.

To ensure that your product or service is not thrown out by prospects during the Evaluate phase of the consumer journey, and to help new customers to Enjoy, Advocate and Bond:

  1. Make sure your product or service is present online, not only in your own website, but also in comparison sites and marketplaces (for B2C) and online communities (for B2B)
  2. Foster online reviews of your products and services via social media and 3rd party websites
  3. Provide rich and easily accessible information online for people who have already purchased your product or service to help them get the most out of it
  4. Introduce new ways to inspire existing customers to refer their friends and colleagues to you – think DropBox who give away additional storage space for referring business

Your email marketing activities should assist you with each of the above. Email campaigns should be created specifically for new customers and should point to additional online resources, and specifically ask for reviews or feedback. Email campaigns to your wider database should reference case studies and additional information available to help prospects in the evaluation phase.

If you need help with:

  • creating incremental or prototype products to sell to your clients as they evaluate,
  • creating additional online content,
  • making your online content more engaging,
  • ensuring you have a vibrant social media presence,
  • ensuring your product or service can be found easily online (SEO), or
  • creating email marketing campaigns that engage,

don’t hesitate to get in touch.

We are passionate about helping businesses to grow using online technologies.

Facebooktwitterredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contactpoint Email News

Our enews is sent out approximately monthly, and contains information on latest digital technologies, and how these can be used to help your organisation grow.

To subscribe, simply fill in your details below: