Category: Web Design

Add content to design or design to content

Over the years I’ve found that you can almost always guarantee that a client underestimates the work involved in writing and collating content, and then, if using a CMS, entering it all. It sounds easy – write something about a subject you know.

The title of this article also makes the solution sound simple. Either you crack on with a design, and then fill in the holes, or you wait until finally all the content is in a signed off state. It would be easy to say stick to one or the other, but such an answer would simply be an oversimplification.

Content to design

The idea behind fitting content to a design is pretty straight forward. You create a pixel perfect design and then craft your content around it. Simple. Your design is visually perfect throughout. Everything is beautifully consistent. Everything lines up nicely and falls in the perfect place. Those 40-50 words the designer told you to use for each feature block will all look wonderfully balanced and very professional. Everyone is happy!

It can also give you a structure in which to craft your content. It makes life easier to have a starting point after all. Just fill in the holes and done.

It is also nice to get the design process cracking early on. We all like visuals. Seeing a design adds a tangible sense of progress, and can also help form opinions on how content can be approached by how it balances out images or illustrative elements. It provides nice and potentially productive early talking points

However….

Design to content

Mind you, fitting your content to a design covers over some cracks…

All this great design work, however much research has been undertaken to ensure every concept and assumption is rock solid, is still based on content that very possibly doesn’t exist – or even worse, is potentially misunderstood

At the end of the day you are the expert in your area. Great content takes time to craft. It is what people are ultimately coming to your website, brochure or video for, not the attractive imagery and great icons. Add in any copywriting or search engine optimisation services and it is a significant task that should be treated with care and respect.With this in mind, the design should be a tool for making your content sing, balance any SEO requirements and be visually appealing. Customers love content. Google loves content. Content is king! It goes without saying that this should be nailed down first.

Doesn’t it?

But…

There is always a but…

In the real world, there are immovable deadlines, there are changes to specifications, there are feature additions, stakeholder demands, illnesses, curveballs and unexpected twists. With the absolute best will in the world final content cannot always be waited upon.

First draft content can be used to form a solid base for a design if available but this can also change, necessitating design amends or even more time consuming development amends.

Working in this imperfect reality, my key belief is to maintain good levels of communication throughout. Aim for content before design but be realistic. By working together the choppy content waters can be navigated and you can get a great product at the end of it.

Next steps:

If you are interested in working with CandidSky and seeing how we can help to grow your business online, contact us today to arrange a call.

If you would like to work at CandidSky and grow your career prospects, take a look at our Careers website for available roles and find out what is like to work here.

And finally, take a look at our other blog posts to see what else we have been up to.

 

User Experience – from toilets to taps

A walk through everyday life

User Experience. It’s a term thrown around like confetti at the moment. It’s hard to escape if you are developing a digital product. Everyone you come into contact with, from project managers to designers, developers, strategists and directors will tell you about the importance of User Experience (or UX for short).

If you are not already familiar with the term, this is how the Nielson Norman Group, a leading UX consultancy, describe it

“User Experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

What is interesting is that this does not specifically refer to DIGITAL products. As a UX designer I look at everyday life through a UX prism. Simple questions we all ask are, in reality, all elements of a User Experience – your personal, every day user experience journey. Why do those icons on the microwave make no sense? Why is the TV remote control like the cockpit of a jet fighter? Notably, the Apple TV remote is the antithesis of these. More on Apple later though.

A personal bug bear of mine is the touch screen interface inside a car? What good is a touch screen you can’t look at? It looks great but is almost impossible to use in a practical, day to day, situation.

With that in mind, here are some other great, and not so great, examples of every day user experience issues and/or solutions.

Toilet Target Practice

Anybody can tell you that men can sometimes lack a certain… precision in the toilet department. That sense of unpleasant resignation is multiplied when you come face to face with another chaps attempt to re-enact Ghostbusters in the only spare urinal.

In the 1990s, Aad Kieboom came up with a solution at Schiphol Airport, Amsterdam, and it is simple as it is ingenious – he put a small image of a fly INSIDE the urinal.

 

urinal

Source: https://worksthatwork.com/1/urinal-fly

‘Guys are simple-minded and love to play with their urine stream, so you put something in the toilet bowl and they’ll aim at that,’ says Reichardt.

Although there are no hard statistics on the reduction in cleaning required using this trick, some estimates claim it reduced spillage by up to 80%.

Why does this apply to UX? At it’s heart, User Experience is about understanding your users and what their goal is. The guy that is urinating on the fly feels like he has achieved a secondary goal (target practice; the primary goal being to relieve himself!) whilst the following customer of the urinal gets a much cleaner, pleasing experience. As an added bonus, cleaning costs are reduced so the key stake holder (the airport paying the bills) is happy too. Everyone is happy. High fives all round.

This is great UX top to bottom – a problem analysed, solved, and with clear, measurable improvements.

Oh no, I need a parking ticket…

Ah, parking ticket machines! We’ve all had to look at them and wonder what on earth we are meant to be pressing. By now I expect you are thinking about that machine from last Saturday with the big green button and instructions that could have been written by Donald Duck.

My personal favourites are the ones with letter keys top to bottom.

A well known UX consultant called Steve Krug wrote a book in 2005 titled “Don’t Make Me Think.” This is perfect for this type of interface.

As UX designers we know all cultures read from the top down, and most read from left to right. Some might say this is common sense… we are all pretty experienced in this; we’ve been doing it our whole lives.

The obvious failure here is that this interface clearly has not been tested with people who would use the machine. Forcing a user to interact with a design pattern outside of our everyday experience (reading downwards) puts a strong “cognitive load” on the user that does not produce a positive result: frustration and irritation. Sure, we may all eventually get a ticket out of the machine, but it will only induce a sense of “oh no” next time. If this were your website or product, where a someone can click away to a competitor in a fraction of a second, the user could very well decide that coming back is more hassle than your product is worth.

The take away here is that showing a little UX consideration can significantly improve the users experience – and result in a return visit. And while we are on this point, Forester Research shows that, on average, every dollar invested in UX brings 100 dollars in return. The results can be pretty stark.

 

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple.”
Steve Jobs

 

This brings us full circle. Taps. But not your bathroom taps. Interface taps.
We tap and swipe our smart phones all the time. What once seemed like a foreign concept is now as normal as putting the kettle on.

Much of this can be traced back to the iPhone. Sure, there were similar devices before the iPhone but none genuinely revolutionised the technology industry, created the world’s biggest company and changed the very way we interact with the world around us. That’s pretty fundamental.

With the iPhone’s 10th birthday, and the release of the iPhoneX there has been quite a bit of chatter about whether this new iteration of the iPhone is again revolutionising how we interact with our screens, or moving us backwards to a time before there was an appreciation of how a user interacts with a product.

It is commonly held that the iPhone interface was so easy to understand that anyone could pick it up and understand it with a little patience. As time has gone by, more gestures, taps and swipes have been added that has led to this:

Source: https://www.fastcodesign.com/90150025/the-iphone-x-is-a-user-experience-nightmare – http://www.joannastern.com/ 

“If the iPhone X’s hardware features are the epitome of fluff over function, its new navigation gestures are the epitome of needless complexity over intuition.” (source: http://www.creativebloq.com/web-design/ux-design-patterns-work-91516961)

Time will tell if this is a User Experience disaster, as some are saying, or an inevitable step forward.

In conclusion

The challenges of creating complex interfaces or products that appear visually simple, engaging and enjoyable to use, is something that even companies with the stature of Apple can struggle with. Even though the simplest solution is not always the most attractive, sometimes it can be the most effective. Just don’t get me started on the impracticality of my car’s touch screen user interface.

Next steps:

If you are interested in working with CandidSky and seeing how we can help to grow your business online, contact us today to arrange a call.

If you would like to work at CandidSky and grow your career prospects, take a look at our Careers website for available roles and find out what is like to work here.

And finally, take a look at our other blog posts to see what else we have been up to.

Choosing the right website solution for you

Never rush your website solution.

Before you commit to a particular framework or content management system (CMS), always make sure you ask yourself the following questions:

  • Will a WordPress website offer sufficient security?
  • What levels of support are included in a bespoke framework build?
  • Can I manage all aspects of the site without a website development team constantly on hand?

This leaves us with one fundamental thing to consider, the big question behind all of these thoughts…

Which platform is the best fit for my website needs and how should I utilise it?

Used by over a quarter of all websites, WordPress is the first choice for a lot of businesses out there. It certainly allows for an attractive turnaround time, access to thousands of plugins, large pool of developers that can work with the code base and no licensing costs (thank you, open-source).

However, we shouldn’t overlook the constant inflow of hacked sites running WordPress. Sucuri’s 2016 report states that “over 78% of all websites the security company has worked with used WordPress.” This leads us to the conclusion that other platforms are more secure. However there is more at play in these numbers. Sucuri also say that “in all instances, regardless of platform, the leading cause of infection could be traced to the exploitation of software vulnerabilities in the platform’s extensible components, not its core.”

Let’s take a look at a few other options.

A number of the websites we have built at CandidSky utilise our in-house framework, Ebb.

With Ebb, there is no plugin directory and only a small group of developers are skilled in using every aspect. There is also an absence of malicious code that targets the framework and no vulnerable core or extensible components. Expert knowledge of 100% of the code base, in-house, offers a higher level of security, support and updates.

Numbers of Drupal vulnerabilities and affected websites is quite low, however only around 2% of websites use Drupal, and the ecosystem is similar to that of WordPress, although it requires more advanced knowledge to use than its alternatives. Sucuri reports that “81% of infected Drupal sites were outdated”, which is definitely an important metric.

It goes to show how critical website maintenance is, and that focus should lie not just in the development of a site but also its post-launch life.

More functions = more support

Some businesses require functionality that goes far beyond managing content, or the buying and selling process needed for online shop.

Another viable solution for more complex uses is Umbraco, an open source CMS which uses Microsoft’s .NET software framework. Umbraco runs on MS Windows, as opposed to more commonly used Linux solutions. It is regarded as a more secure option when compared to WordPress and Drupal, largely due to the relatively closed environment. However, this does not mean that vulnerabilities are sparse.

Human error

One of the key takeaways from our many years of experience in offering digital services, backed by many other reputable sources and research, is that the number one reason for the majority of security breaches does not lie in the code base, but rather in humans.

Our tendency to use memorable (weak) passwords, overlooking the importance of developers looking after your site once it’s launched, plus a lack of time and money dedicated to regular updates, all contribute to issues further down the line.

WordPress is a fantastic choice for anything from a one-person business site, to e-commence shops and sophisticated multi-site solutions. “Who” builds the solution and “how” that solution is maintained is the most important decision to make. Our team are experts in making the most of a platform, creating beautiful themes and secure, functional features that help businesses to flourish online.

But we also recognise the shortcomings of WordPress and fill the needs of more advanced projects with our in-house framework, ebb, which allows for a custom solution that is secure, scalable and well supported. In order to minimise the human error and prevent security breaches, we advise you to invest in regular maintenance, ensuring that professionals are there to run checks, apply updates and ensure that the administrators and users are kept secure.

Final thought

Combined with an effective SEO & content strategy, the online world is your oyster. We would love to speak to you about your website needs and offer our advice, feel free to drop us a message if you still have any questions regarding which solution is best for your business, or pop in for a coffee and a chat about all things digital.

Design: what’s old is new

Guess what, guys.

We’ve spotted another design trend, one that seems to be sweeping across the commercial world. In fact, so many household names have been through the re-branding process this past year that it’s difficult not to notice a fairly common approach.

People often think that a re-brand means a complete overhaul of appearance, where it’s out with the old and in with the new – well, not necessarily. On closer inspection, many designers tasked with the process of re-branding are starting to look back at the history of a business and use that for a basis.

Fashion comes and goes in cycles (apart from ‘the mullet’, thankfully) and it seems so does web design and brand identity. What’s old is new, again. It’s really interesting from a design perspective to see companies go back to an older logo or at least a strong emphasis in that direction.

Here are a few notable examples…

Co-op

coop

In the case of Co-op, they have gone back to an older logo. This was designed in 1968 and it doesn’t look out of place. Not only that it was the right decision, how often do you hear people call it anything other than ‘Co-op’? The adaptability and clarity of this logo is what makes it a great choice.

Mastercard

mastercard
Source: Mastercard brand history

This was a similar approach—clearly a blast from the past—but a touch more refined. The history of the Mastercard logo shows a timeline of how design trends have evolved over the years.

This takes cues from the 1968 and 1979 versions of the logo. The colours are more inline with more recent versions, but the overlap borrows from the earlier years.

The type is a more modern choice, but very similar to that of the past. The positioning outside of the circles will help with the array of use cases and recognisability. On it’s own it is a familiar logo without the type, another wise design decision.

Kodak

kodak
Source: Work Order

Despite troubles in more recent years, Kodak is still a very recognisable company. Recently they have rebranded, which takes cues from both their 1971 and 1987 logos.

You could see this as an approach that goes back to their more successful years. It’s certainly a much more recognisable logo over the generic type version that came before this most recent update.

Final thought

One of the reasons I think we’re seeing these kinds of re-brands is because there are now more types of use than ever. The previous Coop logo would be difficult to adapt to social media. Mastercard would suffer with legibility and Kodak could easily be missed due to how generic it was.

These companies are also looking back to when they weren’t the huge corporate faces they are now and the increasing expectation for flawless customer service. Perhaps those earlier years are a direct inspiration in more ways than one.

Don’t copy competitors, design for your brand

It’s often tempting to take design inspiration from successful competitors but it’s never the best solution.

We hear it regularly: ‘We’re looking into a new website, we want it to be like [competitor]’ or ‘Our website isn’t performing as well as we need it to, [competitor] are doing great – can you build us one like theirs’?

Being inspired isn’t a crime, but copying another website based on little more than a hunch could be a big waste of time and money. Read on to find out why you should avoid the trap.

You can’t be sure it’s working…

It’s a fair assumption to think that if a competitor is successful then their website must also be a success. But without poring over their analytics and performance data it is impossible to tell. Even if the website is a huge success for your competitor, it does not guarantee it will be for your brand. There are other factors at play:

  • Different brand values
  • Different target audiences
  • Adoption of outdated trends
  • User experience could be improved
  • Technological advances

copying-blog

Your audience, your objectives, your website

No two businesses are the same. Each is made up of a collection of very different individuals, which means your company missions, values, visions, goals, systems, tools, data, objectives, audience etc. will be also be different. Getting the new website features, functions and aesthetics right for your brand is a very personal journey.

It takes a lot of research – mapping out user journeys and profiling your audience, delving into the minds of company employees to understand what your website means to them, looking at what has and hasn’t worked in the past and projecting what you want to happen in the future.

By copying design concepts from other brands the only bit of success you project is their image – none of the thought that led them to that image is inherited, nor the business processes that make another brand successful.

Your brand, your image, your user experience

Your digital landscape is often the first interaction a customer has with your brand. Increasingly consumers head straight to search engines to research your industry, not just your company. It’s highly likely they will look at a number of brand websites within your industry. It’s very easy to spot when a brand website has taken too much inspiration from a competitor’s site – your brand does not fit in their digital skin.

Brand is personal to every business. It’s a chance to express their own unique selling points to the world. Think of it in terms of fashion, which would you rather be: a business who sets trends or a business who imitates them? It’s exactly the same with brand design.

Imitation isn’t just a lazy approach, it can also make your brand aesthetics look awkward, unattractive and untrustworthy…

copy-blog-handbag

Final thought

Overall, copying never leads to the best results for business growth or marketing satisfaction. You never quite get that feeling you got when you first saw the website you took inspiration from. That’s why we always recommend following a structured methodical approach of research and understanding to shape your new website design.

Speak to your prospective or existing customers and staff. Analyse user behaviour on your original website. Rely a little more on your intuition and you will craft a far more effective and original conversion machine. It’s the only way to create a sleek user experience for your target audience whilst promoting your own unique brand identity.

Design for conversions

One of the most important purchasing factors is trust.

You trust that when you buy coffee from your chosen shop, it will be exactly the same each day. You trust that when you buy clothing from a familiar brand the sizing is consistent.

If things unexpectedly change, it leaves a bad taste in our mouths. Negative experiences weigh heavily on how someone perceives your business. So much so that it can affect whether someone purchases your product or service, or if they become a repeat customer. To build trust with a user your brand experience has to be flawless, especially if you’re a new brand competing in a very competitive market.

So when Bellfield came to CandidSky for support in driving more transactions we immediately set to work implementing the design and UX knowledge we have honed over many years.

The original page

bellfield-before

We identified a few key areas to work on to drive those conversions up:

  • Addition of secure payment trust indicators
  • Reorganisation of ‘add to basket’ call-to-action to make the user flow more natural
  • De-prioritisation of secondary sales messages
  • Strengthening of secondary sales copy to bring more clarity
  • Increasing the priority and visibility of the ‘stock’ notice
  • Removal of distractions such as sharing links
  • Navigation, logo and header alignment adjustments

The updated page

bellfield-new

The updated design addresses usability and trust issues.

Removal of distractions, such as the ‘quantity’ field and social sharing links, make the decision process much smoother for the user. Too much extra info creates friction in the sales process – it is imperative to remember what the goal of the page is – in this case it is to lead the customer to the checkout – not build brand presence on social.

The introduction of secure checkout and payment by PayPal builds trust with the user. Paying by PayPal can give a customer a sense of security because they don’t have to pass any payment details, secure checkout logo’s reassure them that they can safely part with their card details on your site if they so choose.

Final thought

It’s easy to overlook things like micro copy, alignment and also common to give the user too much choice. In doing so you are negatively impacting the goal of a page. Look at your website with fresh eyes and ask yourself one question – what is this page for? When you know the answer to that you’re half way there.

The importance of client goals from a web designer’s perspective

Goals determine the route any design should take.

Goals, or objectives, serve to guide your approach and keep you focused, particularly when building a website. It might seem like common sense but the look, feel and presentation of a page will always depend on its established goals. Without them, a designer’s work has very little direction.

Goals serve everyone involved in a project as a necessary reference point for any quick decisions that need to be made along the way. This post will detail why you need them and how you can come up with your own.

You must have one primary goal

Saying that you must only have one may seem a little strong, but in our experience it’s the best strategy. Look at it this way: if the website only did one thing successfully, what would it be?

As you’d expect, a user’s first impressions and reactions to a website with a goal to sell will be different to those of a website that provides news.

What if I don’t have goals?

If you don’t have goals, work with your designer to identify them. They are absolutely vital because they rationalise the decisions made during a project. If your designer has nothing specific to work towards they can only make informed assumptions at best.

You know your business and industry best, and this knowledge feeds naturally into a plan of attack. The role of a good designer is to tease the key information out, gather it together, and translate it in to highly relevant goals that drive the project forward.

A successful project

If your goal is to sell products, yet you are presented with a design that promotes your blog, you will be disappointed. You would also question why the designer thought the design would help your business grow. By setting a primary goal you, and your designer, agree on the result you want to achieve before any work is carried out.

However, setting a primary goal doesn’t rule out having a blog or any other content. The designer’s intention for this may be to prioritise and present content in such a way that leads the user through the site on a predefined path.

How to identify goals

As mentioned earlier, to determine your main goal ask yourself, ‘if the website only did one thing successfully, what would it be?’

You’ll probably identify lots of things that will contribute to achieving your goal when defining your primary, it’s well worth noting them down too. Blog areas, help articles, reviews and testimonials can all contribute to achieving your primary goal in their own way.

Start thinking about this information in levels of priority to your business. and what exactly is helping your customers make the decision to use your services. Once you know that, talk to your designer. Their strength lies in understanding the information and presenting it in the best way possible.

A few things to think about

  • Who are your most frequent buyers?
  • What information do people seek about your product or service?
  • Do you get better results when people speak to an advisor?
  • How much do people rely on your reviews or testimonials?
  • What stops people from purchasing your service?

 

Why White Space is Important

When discussing white space with people who don’t necessarily have a web design background, often it can be interpreted as wasted space – in fact, it’s the complete opposite. The truth is that it’s really utilising the available space in a more beneficial way. Firstly I’ll explain what it is…

What is white space?

White space isn’t necessarily space that’s white – it’s empty (or negative) space between elements on a page. It allows those elements to get the focus they need and can generally make or break a design.

Let’s use amazon as an example. There is an awful lot of stuff on here, it’s a very busy website and not the greatest example to promote white space. I’m going there, as I feel it demonstrates my point for making something stand out in a crowd.

This is the top part of the amazon homepage, of all the page as it stands. You’ll notice that the area with the Kindle is the only part that has a larger amount of white space around it. Why is this? Let’s take a look at an alternative version of this page.

Although the differences aren’t huge, we can see that, having reduced the amount of negative space, it takes the focus away from the primary product amazon is trying to sell.

By adding white space instead of cluttering up areas with content that may not bring any value you can use it to bring focus to the areas you want people to view most.

Another example

Apple is a great example of using white space effectively. They are all about showcasing their products, and they keep it simple in many ways.

Huge image, minimal copy and lots of white space. It is all about the product. Not their logo, not who they are, not their latest offers or blog posts. This allows you to focus on the product and not be bombarded with huge amounts of information immediately that you see on a lot of home pages.

The image above, for example, shows the exact same information in the original. Immediately the product Apple want you to focus on is competing with 4 other areas. It’s likely people will ignore the iPhone and focus on the other 4 areas as much as they would focus on the iPhone first. In the original everyone has to focus on the iPhone, which is the most important thing on this page at the time.

White space isn’t a waste of space! It’s a way to put emphasis on the most important things on a page, and is something which should be incorporated in to design to help guide users through the journey you’ve laid out in front of them.

Tips to help keep your visitors for longer (and increase conversion rate)

A problem that we often hear companies  have is holding visitors on their website for any decent length of time. We find that the solution often comes down to how relevant your content is and the way that you present it. In this blog I’ll cover a few points which can help to decrease bounce rates, increase time spent on the site as well as increasing conversion rate.

Speed is of the essence

When the internet first become widespread, slow connection speeds meant that website creators needed to scale back and optimise websites in order to keep loading times to an absolute minimum.

Today for those with broadband internet this is less of a problem, but if a website uses lots of high quality imagery and animation it can still slow down the site and affect loading times. Within a matter of seconds the visitor’s attention can be lost, and they may choose to navigate away.

Research conducted by Google has shown that even improvements as small as 100 milliseconds can increase the number of users who choose to stay on a site. This in turn can have a dramatic knock on effect on the amount of people who convert to either a sale or desired action.

Click to view info graphic full screen.

Question everything

When creating content for your website, question every part of your content. If any part of it offers no value to your users, then why is it there?Remove it, it’s one less distraction.

Readability

If you want to keep users engaged, make sure your content is easy to read. If a visitor finds it hard to read content they will more than likely seek out another source. Take cues from services like Instapaper and Readability, they both offer exceptional reading experiences.

Who are you and what do you do?

If I can’t find out who you are and what you’re offering quickly, chances are I’m going to leave your site right away. Most users will follow suit. Make sure it’s clear what your company offers and where you want them to go next.

Don’t be intrusive

It might seem like a good idea to add a popup on visiting your website to get the user to sign up to a newsletter, to inform them of an offer or to ask them to follow you on a social network.

Some visitors may respond to these techniques but you are in danger of irritating other users in the process, making it more likely that they will leave. If your newsletter or offer is that good, let your content convince the user to sign up.

Getting more signups

Do you have a really long form requiring a full life story about the user before they can sign up? I’ll guess you don’t get many signups.

It’s proven fewer sign up fields can increase conversions by very large amounts. If this is a newsletter registration, asking for only the email address may help to increase responses.

Include everyone

When considering the mobile aspect of your site, you may consider cutting certain parts of the page content down so that it more easily fits inside the mobile window. For a very large section of people, mobile is their primary method of accessing the internet.

If visitors believe they are viewing a watered down version of the site they may simply choose to view full web version of a site anyway, or worse still, leave the site altogether.

If you are faced with this dilemma its often better to simply show the full version of the site by default and test extensively across a wide range of devices to ensure that it will offer an acceptable experience.