Guest blog
by Claire Cunningham from Word Craft
UX-DRIVEN WEBSITE COPYWRITER & CONTENT STRATEGIST
Claire works with service-based businesses and creative entrepreneurs who value authentic storytelling and strategic communication. With a keen eye for detail and a passion for impactful messaging, Claire specialises in enhancing website user experiences through compelling, research-driven content.
So you’re thinking about getting a graphic designer like Emmelie to design some fun, personality filled illustrations as part of your branding. It’s such a fab way, as Emmelie says “to stand out, get energy back into your brand and let your bold personality shine through”.
But with your new brand illustrations in hand, have you considered how you’re going to use these illustrations to their fullest potential? What about how you can combine them with your website copy and general website design?
Bespoke brand illustrations really do give a brand personality. They can be exciting, fun, and are often very colourful. They help with making a brand stand out and with brand recognition. In fact custom illustrations, done right, can provide an emotional impact beyond what stock photography or personal brand photography can do. It’s a great way to level up your marketing.
So it’s perhaps a given that custom illustrations on a website can add value.
If used well, illustrations go beyond being purely decorative. Unhelpful graphics or decorative imagery tend to be skipped over. Every image should serve a purpose and add value.
‘Plonking’ (in absence of a better word!) an illustration at random points on a site however will have little impact. It might look nice but does it have a strategic element? Has the illustration been considered alongside the website copy (the words on the site)? Has user experience been thought about?
Here’s how to improve website user experience with custom illustrations and strategic copywriting
Step 1: Understand the importance of UX
Before taking a look at the impact of bespoke brand illustrations and their place alongside effective copywriting, it's crucial to understand why user experience (UX) matters.
A well-designed UX isn’t just about the look or design of a website.
Good UX ensures that visitors can easily move around your website, find the information they need, and engage with your content (i.e. click those buttons, read the text, be interested and ultimately choose to buy from you or work with you).
Although traditionally a focus on UX has fallen under a website designer’s remit, there is an increasing number of copywriters, like me, who prioritise all aspects of UX as part of our copywriting approach.
Amongst other things it’s important to take a strategic approach to writing the copy (and crucially the order the copy appears on the page and how it’s displayed) as well as looking at your site’s architecture (how it’s ‘built’ on a page and across pages for the best consumer journey).
Step 2: Write research-focused website copy
Website copy is the foundation of a good user experience.
There’s a LOT be said on this topic but here's a summary of the key requirements for effective website copy:
Know your audience: Research your ideal client and use their language to make your content relatable.
Tailor content: Meet visitors at different stages of buyer awareness with appropriate content.
Structure for readability: Use clear headings, short paragraphs, and bullet points to break up text and enhance readability.
Guide the user: Create an intuitive site architecture that supports a smooth user journey from the page they land on to "buy now."
Step 3: Be strategic about adding custom illustrations
Bespoke brand illustrations add a really fun / unique / useful / quirky (or insert any other word that works for your brand!) visual element that can significantly improve how people engage with your website.
If you’re working with a branding expert who includes custom illustrations as part of the package, it’s worth keeping these things central to your discussion as part of the branding strategy session or when you’re adding your illustrations to your website:
How can I use an illustration to make my message / the website copy stronger (as opposed to just using it because it is fun)?
Will this illustration work to support my message or will it interrupt a site user’s train of thought?
But knowing HOW to use your illustrations is as important as WHERE to use them.
Where to use illustrations:
Hero banners: Combine a striking illustration with a compelling heading (H1) that lets users know who you are and what you do and in language that resonates with your ideal client so they know they’re in the right place. You need to tap into your ideal client’s pain point or desire, demonstrating that you solve a problem or that you can help them achieve their desired goal. See example in step 4 from Trello.
Tip: Users spend 57% of their time on this part of your home page. Avoid walls of text, no or unclear calls-to-action or a cryptic tagline. Get super strategic with what is in this space and make the illustration work hard for you. Make sure it offers insight into your brand. Aim to avoid carousels of illustrations (or anything that moves really) to avoid any distractions.
About page: Use illustrations to visually tell your brand’s story or journey.
Tip: If I were to add illustrations to my About page, I might include a visual map tracing my career journey. Starting with icons representing Scotland—like a thistle or a castle—to symbolise my roots, the path would be marked by planes traveling to and from Dubai, with icons of skyscrapers or desert scenes to reflect my years spent working and living in the UAE. Along this journey, markers could represent personal milestones—such as a heart for starting a family or a globe for travel experiences— and they could intertwine with symbols of professional growth, like a teacher's apple evolving into a laptop or a pen transforming into website copywriting symbols. (But what do I know – I’d have to speak to Emmelie about this first!)
Contact page: Use an illustration to convey different ways people can connect with you.
Tip: For an e-commerce business, you could keep it simple like Amazon who use icons such as an Amazon box with a spyglass to depict contacting them about tracking or editing or cancelling orders (an investigation will take place, hence the spyglass) or an email with a warning symbol to refer to contacting them about fraudulent emails. Your illustrations don’t need to be 'clever' but they do need to be helpful and understood.
CTAs: Incorporate illustrations near CTAs to draw attention and encourage action.
Tip: Use illustrations to visually depict the desired outcome or benefits of engaging with the CTA. For example a fitness company might use an illustration of a smiling person doing a workout next to the CTA button that says “Start Your Free Trial”. A travel company might use an illustration of beach scene with clear blue water, palm trees, and a lounge chair next to the CTA button for “Book Beach Holiday Now”.
Product pages: Showcase product features and benefits through detailed illustrations.
Tip: This is great way of showing features and avoiding visual monotony by avoiding lists that are blocks of text or headings that are text only. I love the symbols used by AirBnB to show the different types of holiday categories.
Airbnb use of illustrative icons for different stays makes it easier and faster for users to scan and understand listings. Rather than looking at the word the eye is drawn to the visual first. The designs are cute, friendly and a little humorous at times. The illustrations not only serve a functional purpose by helping users navigate and filter listings but also engage users on an emotional level. A user thinks “airbnb really get me and what I’m looking for” (the site has a strong UX because airbnb listen to the wants and needs of users).
404 error pages: Add a touch of humour or personality with custom illustrations.
Tip: Make sure from a copy perspective that you direct your user back to where you’d like them to go on their journey rather than just stating they’ve come across a page that no longer exists. I love these 404 error page examples from MailChimp and TripAdvisor – in fact, I love them all.
How to use illustrations:
Make sure the illustration supports the copy: Ensure illustrations complement the accompanying text and provide additional context.
Tip: Make sure the illustrations don’t undermine the message. Make sure it can’t be misinterpreted and make sure it evokes an emotion that will help you sell. If illustrations can be decoded wrongly or not decoded at all, they need additional support with website copy (such as a caption).
Make sure the illustration guides the eye: Use illustrations as directional cues to lead visitors toward key information or actions.
Tip: If you have a character in your illustration choose to have it facing towards the CTA button or even go as far as adding an illustrative arrow to direct the eye to the button.
Use illustrations to simplify complex ideas: Turn complex concepts into easily digestible visuals, such as infographics.
Tip: Be mindful to not overwhelm a site visitor. If the infographic is too complex it can be pretty overwhelming.
Consider accessibility: Make sure illustrations are accessible to all users, including those who use screen readers. Provide alt text for each illustration to describe its content and purpose.
Tip: See alt text example in caption for Emmelie’s home page.
Suggested alt text for illustration: Illustration of a woman with dark hair and pink top with a concerned or confused facial expression, surrounded by vibrant and colourful elements like stars, swirls, and exclamation marks showing all that is floating in her head.
Without the use of alternative text, site users (especially those who rely on screen readers) might be missing key information to understand your content, especially if you use a lot of illustrations on your website.
Consider cultural sensitivity: Ensure your illustrations are culturally appropriate and sensitive to the diverse backgrounds of your audience.
Tip: Just like how you should consider the international aspect of your audience when it comes to language (unless you have a very specific localised, geographically, ideal audience) ensure your illustrations are culturally appropriate and sensitive to the diverse backgrounds of your audience. Consider body shapes, gender, religious or culturally appropriate dress.
Step 4: Combine illustrations and copy for maximum impact
Thinking about updating your website with custom illustrations? Get your chosen website copywriter and illustrator / branding person or website designer to work together.
Discussing how the different elements will work together early in the design process is essential to ensure a cohesive look and feel.
Create visual hierarchy: Use illustrations to create a visual hierarchy that guides users through your content. Illustrations should be used to direct the viewer’s eye through the content, making key information more prominent and accessible.
Balance elements: Avoid overwhelming users with too many illustrations. Strike a balance between visuals and text. Try to avoid having too many colour-rich elements on one screen view. Leave room for plenty white / blank space.
Example: Trello’s hero banner for one of the automation feature service pages
Trello’s use of illustration
Vibrant, playful illustration captures attention immediately
The illustration aligns with the messaging: robots working on a Trello board alongside a person using a tablet (doing the work they NEED / WANT to do – “the work that matters most” - rather than a task that can easily be assigned to a ‘robot’)
The robots have friendly faces and face the person as if they are working together as a team and taking direction from them to show that the person is still in charge
The person facing towards the text provides a directional cue for the site visitor’s eye towards the main message and the call-to-action (CTA) button
Trello’s strategic copy
The word "Try" in the CTA button is inviting and implies a low commitment, encouraging users to explore the feature without feeling pressured.
The micro copy surrounding the button with "It’s free!" is reassuring and can significantly reduce friction and increase the likelihood of user engagement (someone clicking on the button)
The use of "you" in the text makes it personal and directly addresses the visitor
Step 5: Test and iterate
Once you’ve integrated custom illustrations and copy, it’s important to test your website’s UX. This is THE fundamental tip for great user experience on your website – testing to see what works and making changes (iterations) as needed.
User testing: Conduct user testing to gather feedback on the usability and effectiveness of your site. This information about website user testing is pretty comprehensive and can give you a steer as to how to try and do some yourself (although an expert will also be a worthwhile investment).
Tip: you might just wish to gather feedback some trusted sources (ideally those that fit your ideal client avatar) regarding the effectiveness and appeal of your illustrations.
Analytics: Use website analytics to track user behaviour and identify areas for improvement.
Iterate: Continuously refine your design based on feedback and data. As a small business owner this is perhaps something you won’t be doing too often but it’s certainly something you need to consider doing at least once a year.
Keen to add illustrations to your website?
By thoughtfully combining custom illustrations with strategic copywriting, you can create a website that is not only visually appealing but also highly functional and engaging.
Ready? You can reach out to Emmelie Coulson for all your branding needs including custom illustrations and contact me, Claire Cunningham, for strategic, conversion-focused website copywriting.
We can even make some suggestions for brand photography and website design specialists too. It would be great to work with you on a website that not only looks fantastic but also delivers a seamless and engaging user experience.
Comments