Research - Marketing Design Principles and UI/UX terms

What is UI and UX?

UI stands for User interface. UI is the graphical layout of the website or application and all the things
that users interact with. The UI will decide what website/application is going to look like.

UX stands for User Experience. The User experience will determine how users interact with website or
how easy or difficult it is to interact with UI elements.

There are 4 main components that make a website are hierarchy, color, layout, and typography. These
elements are both support UX and UI to create a good website.

1. Hierarchy
The visual hierarchy in website design refers to the arrangement and presentation of website UI
elements in order of their importance so that users can easily scan page information needed
quickly. A Websites with better visual hierarchy will often have better UX as well as higher
product sales.

The average user tends to scan the entire content of a screen. Therefore, the highlights should
give a clear idea of what website is about. There are a few tips that must be takin into account
to create a correct hierarchy.
a. Size
The larger the element (such as photos, texts, and shapes) is, the more attention it will
grasp.

The important elements no need too large. Create an unnecessary imbalance can end
up overshadowing the rest of design and cause other information to get lost in the
reading. Keep reminding that Balance is the key.

b. Color
Color is a powerful visual resource, its proper use can effectively separate the elements
in a screen to prioritize or deprioritize them.
 Often the strongest color is for interaction, because of the user’s need to act or receive
feedback from the system.

There are 3 ways to create hierarchy using color:

i. Use bright colors to emphasize important web information.
Some colors with special meanings will also help determine the basic tone of
website and attract the attention of users.

ii. Use color gradients to implement website visual hierarchy.

iii. Use color blocks to closely place elements logically related.

Logically related elements that are closely placed in the same color blocks will
be easier for users to scan and use them freely.

c. Negative space
The more space around the element, the more attention it generates. The negative
space is the area where the empty canvas is shown, this can be found not only around,
but between and inside the same element. It is not proper to a single color, but adopts
the color of the background to give the illusion of space.

It creates the necessary spaces so that the view can pass from one element to another
in a fluid way and without visual noise.

d. Organize contents based on real user needs (Visual Flow)

Add or highlight the important content that users real need in the website visual
hierarchy before user leave when they find no information needed. Also, we should
assign the visual elements based on the page scanning patterns of users.

There are several common scanning patterns such as “F” or “Z” pattern, while people
are browsing web pages.
 No matter whether people use a “F” or “Z” scanning patterns, they often read both head
and the bottom of the page carefully for searching for the core information from the left
to the right.

And these scanning patterns requires designers to place important or interesting

contents with a good hierarchy in the head or bottom of the page. And as with the body
contents should add attractive title and subtitle to create compelling hierarchy.

2. Color
Color psychology is used to influence the perceptions a user may have, from reinforcing brand
recognition to generating more clicks on the purchase button. Or improved usability by using
good color.

Color choices rules

a. The 60-30-10 ratio

Main color is applied to 60%, secondary color is applied 30% and the last 10% is used as
CTA colors.
Main color (60%) should be a neutral that is easy on the eyes, secondary colors (30%)
should contrast nicely with the main color to create visual interest.
b. Understand Color Theory
We need to understand 4 elements of colors are Hue, Saturation, Tone, Tint. From these
elements, we can manage colors the way we want.
Hue is the main properties of a colors.

Saturation is the intensity of a color.

Tone is produced by mixing a color with grey.

 Tint is mixture of a color with white, which reduces darkness.

Here are how all elements work together:

From that we can generate tint, tone, shade by using the main color.

3. Layout
The layout is the interface structure of the website. It helps to organize the content to highlight
what is the important data on the page. Users can use the layout to navigate.
A good layout helps focus on content, reduces distractions, and improves page scan-ability.
Layout principles
 a. Rule of thirds

b. Grids
Use grids to separate the canvas into small squares to help the designer places elements
in an evenly distributed manner.

c. Golden Ratio

d. Hierarchy, White space, Visual Flow was mentioned above.

4. Typography
Typograph rules
a. Font size: Body text should be 15-25px.
 b. Scale headings
i. Limit website to two levels of headings
ii. Change the primary heading to 180-200% of the body text.
iii. Secondary heading should be 130-150% of the body text.

c. Line spacing: To make a block of text easier to read, set the line spacing to 120-145% of
the point size (If font-size is 30 -> line spacing should be 36)

d. Increase kerning: Get more space between the characters in a group of text.
i. Use les spacing for larger font sizes.
ii. Use more spacing for headline.

e. Add white space between the headers and body text

The white space should be 15px, 20px, or 30px.

f. Line length: Should be around 45-90 characters. The ideal with a text block is 66
characters.

g. Font size golden ratio calculator: HERE

The benefit of UI/UX in marketing?

Customer will never return a webpage with Bad UI/UX, it could be something that nobody really enjoys
or needs. With a good UI/UX we can

 Impress Customer
 Decrease bounce rate.
 Increate Return of Investment
 Good UX improves SEO.
 Get more conversion.
Marketing Design
a. What is Landing Page?
Landing page is designed to introduce products or services when visitors click on an ad or search
result on SERP.
The purpose of landing page is to invite customers to do a conversion such as sign up, purchase
a product, subscribe, download, free trial, etc. It helps businesses to transfer the message and
get more conversion ratios.
Usually, landing page is mean the page where visitors will arrive from and ad campaign. Also,
the landing page is a function rather than a type of page.

Notes*: Marketers often use the word “landing page” to describe the common types of page
that are used as landing pages but technically, any page can be a landing page.

Landing page components:

Landing page is using to call for action (CTA). A landing page has 7 standard components.
 Title (headline): Show core values of the products, services.
 Forms (sign up, subscribe, purchase)
 Benefit statements: slogan
 CTA: a button to invite visitors to do the action.
  Hero shot: the big banner image.
 Trust indicator (testimonial): people, clients, customer say about the product, service.
 Page after conversion: thank you page.

Type of landing pages:

 Lead page: It uses to collect lead information, by calling visitors to sign up for something like
sign up for a free trial, join an event, consultant, get a voucher/coupon. EXAMPLE PAGE
 Sale page: It uses to convince a visitor to buy a product or uses a service via content about
the product/services, benefits, price, and sales policy. EXAMPLE PAGE
 Click-through page: It is the most popular landing page type in the E-commercial industry.
Redirect visitors to the purchase page or sign up for products. EXAMPLE PAGE

b. What is Sales Page?

Sales page is a standalone page to secure the sales for the product. The purpose of sales page
remains constant – getting visitors to convert into customers.
There are two types of Sales Page.
 Long-form sales pages
 Short-form sales pages

Both types of sales page contain a pitch of the product that visitors go through and decide
whether want to click the CTA button or not. The only difference between a long and a short
sales page is the actual length of the page.

What is Short-form sales page?

The page has:

 A long headline explaining why customer should by product.

 A graphic that showcases the covers and titles of the guides.
 Bullet points explaining what customer will get once they buy the product.
 A short about section that lets customer knows the background of OWNER – enforcing the
credibility.
 Visual cues directing customers to the CTA buttons and imagines: Arrow, Click HERE, etc.
 A short lead capture form that asks for the customer’s name and email address
 A color-contrasting CTA button
 Logos of reputable publications where the Owner’s products have been featured.

When do short-forms sales pages perform best?

 Prospects are highly aware of the product and brand.

 The product is straight forward.
 The product is low-cost.
 The product is low risk.
 The product is low commitment.

Example page: HERE

What is long-form sales page?

A lengthy page that explains what the product is in as much detail as necessary. It is also
commonly referred to as a “sales letter’. The page displays all the information about the offer so
the visitor can make an informed decision.

A long-form sales page includes all the elements of a short-form sales page. Most long-form
sales pages aren’t received well by audiences because

 Most pages have horrible design.

 They have low readability.
 Many products or services sold via long-form sales pages are scams, which is why their
credibility is always somewhat of a question mark.

Example page: HERE

When should we use a long-form sales page?

 When the product is expensive

 When the product is complicated and requires more copy (paragraph) to explain its value
 When the product requires a high commitment from visitors
 When we have a relatively new product and want to educate prospects about it.

Notes*: There is not “right” length.

Long-form or short-form sales pages do not always work best. The only way to learn what works
best for the product or services is to continually A/B test.
c. Different between Sales Page and Landing Page
Landing pages and sales pages are the same things because they are both standalone web pages
that have one specific goal. Both post-clicks landing pages and sales pages have the following
elements

 Headline
 Hero section
 Call-To-Action button
 Lead capture form
 Graphics
 Trust indicator (testimonials, customer badges, company logos, endorsements, disclaimers)

Marketers tend to use the “Sales Page” term to refer to something narrower like sales pages tend to
be rather long and detailed offers. And Sales Page has more of a function like closing a sale than a
particular form of page.

d. What is a Sales Page with High Conversion rate?

A Sales Pages has high conversion rate will contain these components:

 A simple layout without navigation or outbound link

 A good headline that hits the viewer in the first look
 Add several CTAs from the top to bottom of the page, but not too many.
 A strong guarantee 30 days or 60 days money back
 Testimonial, social proof, case studies with images and quotes from customer
 Describe product details & benefits.
 Absolute mobile friendly and load time is fast.
Demo Explanation
WHY you think the page will have higher conversion Rate this way? Why?

1. Design Style
The Body Type Quiz page is a long-form sales page. Because the product is complicated, so we
need to explain its value of the products.

Page Hierarchy
 The page hits customer with the video and the heading. Start with Dr. Berg's welcome
letter and problems that customers might meet.
 Then customers will be introduced to the Keto Kit and what inside, and the best price
they can have.
 Next, the customer will break down the details of each product inside the Keto Kit.
 The promise to customers that we will deliver Keto Kit to their door and guarantee 30-
day money back.
 Testimonial from other customers. Remind customer with 30 days offers left.
 Offer the deal once more time and end the sales page.

Negative space: The negative space on the page is used as much as possible, so customers can
read the content easier.

Visual Flow: The scanning patterns on page is “F” letter, people can read from the top to the
bottom, from left to the right.

Typography:

 Font-size has 3 levels.

o Heading 1: 50px
o Heading 2: 40px
o Body: 20px
 Font family: Roboto
 Line height is keeping under 90 characters excepts product details and footer.
 Line spacing is 30pt.
 The font usage is simple, keep the typography as minimum format and color, create
more space between characters, limit the line height to make sure the content is
readable and easy to follow.

Golden ratio on page

2. Color Pallet
Dr. Berg’s designer using two mains color for all designs.
 Blue: #0F3157
 White: #FFFFFF

So, I used Blue and White for typography, navigate space with the ratio of 60% white, and 30%
Blue. The blue also light blue, because I’m using Tint, Tone, Shade to combine color. Basically,
I’m using the same color, but add it with white color.

With CTA buttons, I used the opposite color with #0F3157. I’ve tried the complementary and get
#572b0f as the opposite color of Blue. But it is not having a good looking, so I use #FF9C2C as
the CTA color button.

The red color displayed on the page very rarely. Mostly it is applied to display the price, to get
customer attention.

3. UX of the Demo
The page is a single long-form sales page without navigation or outbound link. I want to make
sure customer will not distract from our page by any outbound link or re-direct to another page
in the same site.
Content is threaded from start to finish coherently and clearly. Hit customer by impress heading,
present problems and give solutions with the best price, and give testimonial and guarantee.
Make sure the page is easy to read and all the sections of content display fully on a single
screen.
I’m not use too many typography format or color plate, keep it as simple as possible, so
customer won't be confused when reading content.

4. Will the page have higher conversion rate this way?

I think it will have a higher conversion. Because:
 The core content of the old page is still there, but the content is shorter and simpler.
 Make sure content by section is fit on a screen, customer can read with less scroll as
possible.
 Flatter and more modern user interface
 Follow the design principles such as golden ratio, typography selection, color palate,
hierarchy of the page, and so on.