WEB DESIGN HOW TO TRANSFORM YOUR WEBSITE INTO A WELL OILED - - PowerPoint PPT Presentation

WEB DESIGN

HOW TO TRANSFORM YOUR WEBSITE INTO A WELL OILED MARKETING MACHINE

CAN YOU RELATE TO ANY OF THESE STATEMENTS?

I'm worried that the flexibility of having an online business will never be a reality for me. No one is liking my content or signing up for my newsletter. My website is just costing me money. I'm getting my clients great

• results. Why am

I'm not booking more sales calls? My website doesn't feel like me and I kind of hope no one sees it. I prefer using Facebook anyways.

STUDIO.RJ

AGENDA

WHO AM I?

A brief look at my background and passions

SIMPLE TRUTHS

Some things are true whether you believe it or not

HOW TO CREATE A WELL OILED MARKETING MACHINE

Using a Results Driven Design Approach to creating high conversion websites

EXAMPLES

Some pratical examples of well executed websites

Q & A

Your turn to ask away...

HOW TO TURN A WEBSITE INTO A WELL OILED MARKETING MACHINE

WHY DON'T WEBSITES SELL?

5 Things your website should be doing for you

RICKUS JACOBS

RESEARCHER TRAPPED IN THE BODY OF A UX/UI WEB DEVELOPMENT AND DIGITAL BRANDING SPECIALIST

BACKGROUND Consumer Behaviour Research Executive at Kantar, the world’s leading data, insights and consulting company in helping clients understand people and inspire growth. EDUCATION Bcom Psychology and Bcom Hons Industrial Psychology Focused in Research, Psychometrics and Quantitative Psychology.

Xin Chào LOCATION

I'm currently based in the coastal city of Da Nang, Vietnam

PASSIONS

MOUNTAIN CLIMBING I'm a keen mountain climber. In 2018 I got the opportunity to spend a couple of months in the Nepal Himalayas, trekking and climbing some

• f the worlds highest

mountains. ADVENTURE SPORTS Surfing just might be my biggest passion in life. I also enjoy downhill skateboarding. Fun Fact: I used to be a professional downhill skateboarding at university. CREATIVITY There's something addictive about bringing intangible ideas to life. I'm a hopeless addict. Be it visual design, photography or playing guitar - I constantly find myself with trying to create things.

PASSIONS

"A WELL EXECUTED WEBSITE IS THE MOST VALUABLE MARKETING ASSET OF ANY BUSINESS."

• CHARLES DARWIN, 1809

COMMON WEB MYTHS

Let's Take A Moment To Separate Fact From Fiction When It Comes To The World Of Websites.

BUSTED

FAIL

EVERY BUSINESS NEEDS A WEBSITE

MYTH

ONE

Many Businesses Create a website because they think they have

• to. Truth is, a low quality website is NOT BETTER than nothing.

At the same time, a good website can be a great asset if you are ready to invest in making it awesome and making it work for you. Stick to your social media pages (Facebook, Linkedin, etc) until you are truly ready to expand your business

• nline.

F A I L

WANT TO MEET THE AUTHOR?

IF YOU BUILD IT THEY WILL COME

MYTH

TWO

Oh How I wish this was true. Your website is a needle in an incomprehensibly large haystack. Building your website will not revolutionize your business unless you actually promote it. Your promotion plan is just as important as your website itself.

YOUR WEBSITE HAS A FINISH LINE

MYTH

THREE

Your website might have a launch date, but that doesn't mean it's

• finished. Truth is, your website is never finished. and it will never be.

As your business and environment changes, so should your website. Imagine if Apple still had the same website it had 20 years ago. Regularly update and revise the content on your website to stay current

PEOPLE READ YOUR WEB PAGES

MYTH

FOUR

Think of the web as an information super-highway and your website as a billboard. You need to make an impact and you need to do it quickly! People are only scanning the content of your website. Plan accordingly!

F A I L

F A I L

DESIGN IS ABOUT LOOKING GOOD

MYTH

FIVE

Many people think design is about making their website look

• beautiful. Now, there's nothing wrong with beautiful, but good design

is about more than pretty logos and colours. Design is about creating an experience that is meaningful, functional and enjoyable. It's about planning the smoothest, most persuasive way of introducing your offerings to prospects.

5 THINGS YOUR WEBSITE SHOULD BE DOING FOR YOU!

EXPERT POSTITIONING

5 THINGS YOUR WEBSITE SHOULD BE DOING FOR YOU:

PROVIDING VISIBILITY / ACCESSIBILITY ENGAGING WITH YOUR IDEAL CLIENT SAVING YOU TIME MAKING YOU MONEY

EXPERT POSITIONING

84% of consumers think a website makes your business more credible. A well executed website clearly showcases your expertise, products, and services to establish your business as a trusted service provider within your industry.

VISIBILITY / ACCESSIBILITY

A well executed website allows you to be visible at all times but more importantly, to be visible when it matters most, at that critical moment your potential customer is actually searching for you or your services.

ENGAGING YOUR IDEAL CLIENT

A well executed website does the talking for

• you. It speaks the language of your ideal
• customer. It hit's their pain points and offers

them suitable solutions. Delivering the right message to the right people is key to standing out from hoards of competitors and ultimately growing your business.

SAVING YOU TIME

A carefully planned and designed website enables you to automate key but often repetitive and time consuming business

• processes. Time saved will reduce stress

and free up more time to focus on what matters most: Growing your business.

MAKING YOU MONEY

A well executed website is a tool through which you can achieve your organisational

• goals. It facilitates growth and allows you to

grow your business at scale with predictability, ultimately making you money!

?

Why is my website not delivering these results?

THE BIG FAT QUESTION:

Defining your essence allows you to understand what makes your brand different. It establishes the key phrases and touch points that will support your marketing communications and acts as the creative model that all messaging must reflect. In essence, your essence should be the cornerstone of your unique value proposition for your ideal client.

DEFINING YOUR ESSENCE HELPS YOU TRULY UNDERSTAND AND COMMUNICATE THE IMPACT YOUR BRAND HAS ON YOUR CLIENTS' LIVES

HERE'S WHY

the vast majority of websites will fail:

1.

YOUR WEBSITE DOES NOT REFLECT YOUR ESSENCE

This not only goes for your brand's website, story and copy, but also for the design of all your brand's marketing collateral. Do this wrong and you risk loosing your customer before you even told them your story...

PEOPLE DON'T BUY THE BEST PRODUCTS, THEY BUY THE PRODUCTS THEY UNDERSTAND THE FASTEST

HERE'S WHY

the vast majority of websites will fail:

2.

YOUR DESIGN IS NOT QUICK AND EASY TO UNDERSTAND

You aren't simply designing an interface that will look good to you. You are designing an interface that will help you accomplish your organizations objectives. Remember that a website is an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it and helping the visitor achieve his/her end objective.

THERE'S NO STRATEGIC FUSION BETWEEN YOUR WEBSITE AND ORGANISATIONAL OBJECTIVES

HERE'S WHY

the vast majority of websites will fail:

3.

YOU AREN'T THINKING STRATEGICALLY

SO HOW DO I ENSURE MY WEBSITE DOESN'T SUCK?

Discovering your essence and deep diving into the realm of your ideal customer.

RESEARCH AND DISCOVERY

Determining what type and structure of website will best facilitate your ideal customers purchasing journey.

BLUEPRINT

Applying principles of Psychology to Build your website around your ideal customer's desired outcomes at each stage of the decision making process.

RESULTS DRIVEN DESIGN

Attracting visitors, Keeping them engaged through carefully curated visual assets and capturing their details with strong call's to action.

REINFORCE FOR CONVERSION

Identifying and Automating repetitive and time consuming processes to scale your business.

AUTOMATE AND SCALE

HIGH CONVERSION FORMULA

1 2 3 4 5

RESEARCH AND DISCOVERY

Identify both your ideal client and your company's most valuable customers. Identify their beliefs and pain points. Understanding their decision making process allows you to focus on what they actually care about most Take a deep look at yourself and your

• business. Peel back those layers until

you reach the inner core or the essence of who you are. Why do you do what you do? How do you want yourself and company to be represented? What is your message to the world?

YOUR CLIENT YOURSELF

STAGE 1

Demographics and Background

YOUR CLIENT

CREATE A PERSONA FOR YOUR IDEAL AND MOST VALUABLE CLIENT Define their goals Motivation and Pain Options

Age, Gender, Marital Status, Income, etc. Write everything that is relevant about your ideal client's

• background. Tiny details can lead to wonderful insights.

This allows you to see how your goals align with the goals of your customers ultimately allowing you to meet their needs better and more holistically. What motivates and frustrates your customers must be studied. It will show you what you can do to win their hearts and ultimately their loyalty. You need to understand what alternatives they have to

• you. Understanding your customers options will help you

to understand how you can position yourself as the best

• ption.

Core Values and Personal Philosophy

YOURSELF

DEFINE YOUR ESSENCE Differentiation Perceived Image Emotive Response

What are your core values? What is your personal philosophy in life? What do your values and philosophy mean to your clients? What makes you unique? It doesn't have to be product or service related. It can be a personal characteristic or your passions in life. How do you want potential customers to perceive you? Exclusive or open to all? Ultimate expert or as a peer... What emotion do you want your brand to evoke? Staying motivated, fun and happiness, a need to belong

STAGE 1 - CHECKLIST

Who is your ideal client? What motivates them? What are their pain points? How do they want to resolve their pain? How does your product make their lives easier? How much will they pay? What

• ptions do they have?

QUESTIONS YOU NEED TO BE ABLE TO ANSWER AFTER RESEARCH AND DISCOVERY:

What differentiates you? What is your philosophy? What message do you want to convey? How do you want to be perceived? What emotional response do you want to provoke? What makes you tick?

Your Ideal Client Your Essence

BLUEPRINT

Next step is to determine which type of website and website structure will facilitate your ideal client's decision making journey.

YOU KNOW WHAT YOUR IDEAL CUSTOMER WANTS AND HOW YOUR OFFER WILL SATISFY THEIR NEEDS

Type Of Website and associated challenges Website Structure and sequencing of information

What's your end goal, and how will you measure it?

3 IMPORTANT THINGS TO CONSIDER:

STAGE 2

Product Showcase

GOAL : SELL A PRODUCT

E-COMMERCE

CHALLENGES:

Checkout Process - must be fast, simple and secure

TIP:

Collect the visitor's email before card details. Most visitors wont complete the checkout process. At least now you have their email for re-targeting.

Concise - Clear description of value proposition and benefits

GOAL : SHOWCASE EXPERTISE +

MARKETING/ BUSINESS WEBSITE

CHALLENGES:

Story - Use you essence to tell a story that sets you apart

TIP:

Use your essence to create a unique value proposition that speaks the language of your ideal client

BUILD TRUST

Social Proof - use social proof to establish credibility/trust early on Call To Action - Getting website visitors to take the next step

Ledgibility - Content must be clear and easy to consume

GOAL : GETTING VISITORS TO

BLOG

CHALLENGES:

Imagery - Imagery must trigger your visitors to be curious

TIP:

Navigation is key to ensuring a meaningful and smooth visitor experience.

CONSUME CONTENT

Categorisation - key to help your visitor find the information Social Sharing - Social sharing CTA's that drive website traffic

Engagement - People lose motivation fast and drop out

GOAL : EDUCATING PEOPLE

EDUCATIONAL

CHALLENGES:

Orientation - Clear instructions + milestones

TIP:

Use creative design to present your user with milestone's and achievements to drive engagement

ONLINE

Art Direction- Presenting yourself in a visually meaning full way

GOAL : SHOWCASE YOUR WORK,

PERSONAL

CHALLENGES:

Capturing your esseance - You are being hired as a person. Give

TIP:

Be true to yourself and your brand. Use visual assets to reinforce the emotive response you are looking to evoke with your essence.

PERSONALITY AND EXPERTISE

prospects a glimpse of your unique personality

"ALL WEBSITE STRUCTURES ARE EQUAL, BUT SOME ARE MORE EQUAL THAN OTHERS."

• GEORGE ORWELL - ANIMAL FARM

1 2 3 5 4

WEBSITE STRUCTURE

Most visitors will leave within 10 seconds. This is your only shot to evoke curiosity and get them scrolling down. Answer: Who is it for? What's in it for me? What should I do next? Show that people have used your services and that they loved it to establish trust early on. This can include client logos, results, testimonials, etc. Sell on the premise of what will happen if they use your service or product. i.e Not what it does but rather what you get from it. People care more about the outcome that the product itself. Now that your visitor understands what you can do for them it's time to explain in more detail how you do it for them. Here you can get more technical You need to build up to a strong call to action. What do you want people to do? Buy? Sign-up? Contact you?

VALUE PROPOSITION SOCIAL PROOF BENEFITS FEATURES CALL TO ACTION

STAGE 2 - CHECKLIST

Are you using the most suitable type of website to facilitate your ideal customers decision making journey?

3 KEY THINGS THAT NEEDS TO BE ESTABLISHED BEFORE MOVING ON

Website Type Website Structure Success Metrics

Have you mapped your website in a way that

• ptimally tells your story

and provokes curiosity as the user scrolls? Have you defined what success looks like? Number of visitors? Bounce Rate CTA Click Rate Conversion Rate

RESULT DRIVEN DESIGN

Now you need to tell your story through carefully curated visual assets in a way that communicates your essence and value proposition while keeping your prospect engaged.

YOU'VE PLANNED HOW TO SEQUENCE YOUR WEBSITE TO FACILITATE YOUR IDEAL CLIENT'S JOURNEY.

Psychology Of Colour Hierarchy

2 IMPORTANT CONSIDERATIONS:

STAGE 3

PSYCHOLOGY OF COLOUR

All colours evoke emotion and feeling in different ways. By using colours strategically, you can make your audience feel a certain way about your

• brand. Every Colour can tell a
• story. Let's have a look...

THE POWER OF COLOUR

PSYCHOLOGY OF COLOUR

Yellow is associated with happiness, warmth, optimism, energy and creativity. Yellow is also the most visible colour of the spectrum

COLOUR

YELLOW

Red is associated with danger, strength, energy, desire and love. Red captures attention. It allows a person to make a quick decision.

RED

PSYCHOLOGY OF COLOUR

COLOUR

Green is associated with nature. It can represent new beginnings, growth and hope. Green can have a balancing and harmonizing effect.

GREEN

PSYCHOLOGY OF COLOUR

COLOUR

Blue is associated with sky, depth, loyalty, stability, cleanliness and understanding. Blue is sharply refracted by the eyes. Light Blue is relaxing and calming Bright Blue is energizing and refreshing Dark Blues like Navy, are excellent for designs where strength and reliability are important.

BLUE

PSYCHOLOGY OF COLOUR

COLOUR

White is associated with peace, cleanliness, and virtue. It can help to convey simplicity and is popular in minimalist designs

WHITE

PSYCHOLOGY OF COLOUR

COLOUR

Black is associated with elegance, power, formality and exclusiveness. It can be either conservative or modern, traditional

• r unconventional depending on the

colours it's used with.

BLACK

PSYCHOLOGY OF COLOUR

COLOUR

PSYCHOLOGY OF COLOUR

COLOUR

It's hard to know where to start The lack of consistency doesn't make it inviting for the reader There's too many colours, resulting in no clear message

• r vibe

BAD COLOUR

PSYCHOLOGY OF COLOUR

COLOUR

Different saturated colours bring attention to the bottle Colours convey fun, summer and relaxation The clear hierarchy of colour makes it easy to focus

GOOD COLOUR

CREATING HIERARCHY

The point of hierarchy is to direct the user's

• attention. This guides the user in a way

that helps you convey your desired message or helps them achieve their goal

• faster. It is one of the most important

aspects affecting the success of a design

HIERARCHY

HIERARCHY

HIERARCHY

HIERARCHY CREATES HARMONY AND HELPS US UNDERSTAND WHAT WE SHOULD LOOK AT FIRST

Size Colour/Contrast

4 PRINCIPLES OF HIERARCHY:

Position Motion

1

2

3 4

CREATING HIERARCHY

HIERARCHY

HIERARCHY

HIERARCHY

SIZE

Biggest = First

1

You'll Read this later You'll Read this later You'll Read this later You'll Read this later

You'll Read this first

You'll Read this later You'll Read this later

COLOUR

Highest contrast = First

2

You'll Read this later You'll Read this later You'll Read this later You'll Read this later

You'll Read this first

You'll Read this later You'll Read this later

POSITION

Stands Out = First

3

CREATING HIERARCHY

HIERARCHY

HIERARCHY

HIERARCHY

Again, It's hard to know where to start There's no clear path to take because everything screams at you The call to action is very hard to find

BAD HIERARCHY

CREATING HIERARCHY

HIERARCHY

HIERARCHY

HIERARCHY

Clear hierarchy and strong first impression Simple yet powerfull Great use of text to balance photography

GOOD HIERARCHY

STAGE 3 - CHECKLIST

Do your colours support

• r undermine the

message you are trying to convey?

3 KEY THINGS THAT NEEDS TO BE ESTABLISHED BEFORE MOVING ON

Colour Palette Hierarchy Layout

Do you have a plan on how you are going to present your imagery and content to establish clear hierarchy? Is your proposed layout logical and easy to understand? Does it present content in a sequence that will evoke curiosity?

REINFORCE FOR CONVERSION

The goal is to keep visitors engaged as they scroll down your page, effectively being exposed to each layer of your sales pitch. Imagery and typography will have a massive influence on the success of your website

YOU'VE CAREFULLY CURATED THE VISUAL ASPECTS OF YOUR WEBSITE. NOW IT'S TIME TO TELL YOUR STORY

Imagery Typography and copy

2 IMPORTANT CONSIDERATIONS:

STAGE 4

• 01. USE ONLY RELEVANT IMAGES
• 02. USE IMAGES WITH MORE WHITE SPACE

IMAGERY

• 03. PAY ATTENTION TO CONTRAST
• 04. IMAGES SHOULD FOLLOW THE VISUAL FLOW

IMAGERY

IMAGERY

• 05. KEEP IT SIMPLE
• 06. NO IMAGE IS BETTER THAN A BAD IMAGE

TYPOGRAPHY

USERS AREN'T READING YOUR CONTENT. THEY'RE SCANNING IT. WHAT'S MORE, SCANNING ALL OR MOST OF, THE CONTENT ON ANY WEBSITE IS EXTREMELY RARE.

AND COPY

THIS MEANS YOU CAN ONLY ADDRESS EVEN WHEN THEY SCAN ALL THE CONTENT THEY NEVER SCAN IT IN A COMPLETELY LINEAR FASION. ONE TOPIC PER LINE. WHEN SCAN NEVER LINEAR

TYPOGRAPHY

AND COPY

IN THE END IT DOESN'T MATTER IF THE USER HAS READ YOUR CONTENT OR NOT DOESN'T IT ONLY MATTERS IF THEY WERE ABLE TO FIND THE INFORMATION THEY WERE LOOKING FOR. MATTER

TYPOGRAPHY

AND COPY

STAGE 4 - CHECKLIST

Do your images convey the feeling you intended to? Do your images add to your story? Are your images relevant?

3 KEY THINGS THAT NEEDS TO BE ESTABLISHED BEFORE MOVING ON

Imagery Typography Copy

Have you chosen a clear, recognizable and legible typography? Does your typography match your brand and message? Is your website's copy persuasive? Does it effectively explain complexity? Is your copy concise and to the point?

AUTOMATE AND SCALE YOUR BUSINESS

Scaling a business takes time. It also requires the realisation that you can't do everything

• yourself. You are not a Swiss army knife.

There comes a certain point when you are not saving by doing it yourself anymore. You need to invest in growth, be it your time to D.I.Y or money to have it done for you. Great thing is that investing in growth usually pays itself off within a couple of months

SCALING YOUR BUSINESS ULTIMATELY MEANS LETTING GO.

4 THINGS YOU CAN AUTOMATE TODAY:

STAGE 5 Scheduling Email Communications Direct Outreach Payments

AUTOMATE AND SCALE YOUR BUSINESS

STAGE 5

Direct outreach campaigns are super effective for driving traffic to your website. You can either invest in having someone do it for you or you can D.I.Y USE: LINKEDIN, SALES NAVIGATOR, DUX SOUP

DIRECT - OUTREACH

Why making it easier for your prospects to part with their money is pretty explanatory. Give your prospects multiple secure payment options. USE: STRIPE, PAYPAL, E- COMMERCE INTEGRATIONS

PAYMENTS

Many businesses don't use this because they fear it will look

• robotic. Truth is, if executed

correctly it won't be impersonal and you will see a huge increase in conversions over time. USE: MAILCHIMP

EMAIL MARKETING

Anyone in sales will tell you: Time Kills Deals. Get leads to schedule with you as soon as they're

• interested. They are much less

likely to back out once a meeting is scheduled. USE: CALENDLY

SCHEDULING

LET'S HAVE A LOOK AT THE GOOD, THE BAD, AND THE UGLY

IT'S TIME FOR Q & A ASK AWAY!

What costs are there other than the design of the website? What if I'm not sure I'm ready to grow my business online? Who owns the content on my website? What if I can't afford a website for my business? Do I need to worry about GDPR Compliance? How long does it take to launch a website? What do I do if there are technical issues on my website?

THANK YOU!

VISIT: WWW.STUDIORJDESIGNS.COM