Website Design & Marketing

• Group project deadline is week 5.
• Policies regarding AI should be reviewed.
• Only in-class discussions count toward participation.
• There are no grades for participation.

Session 3 Agenda

• Understanding the importance of websites is key.
• Website development framework should be understood.
• Understanding the homepage, website elements, and A/B tesing is key.
• Understand Landing pages.

Review Question

• Paid search ads consistently generate high returns with minimal ongoing investment.
• SEO is underperforming despite improvement efforts.
• Email marketing has moderate success but requires more investment to increase reach and effectiveness.
• The paid search ads categorization in the Boston Consulting Group (BCG) matrix is as a Cash Cow.

Well-Designed and User-Friendly Websites improve

• Trust, brand personality reflected, and positive first impressions are made.
• Navigation and clear layout is easily done.
• Visitors explore and return with engaging content.
• Responsive design performs across devices.
• Scalable design meets future needs and changes.
• User-friendly websites rank higher in search.
• Good website design attracts more visitors.
• Clear calls-to-action and seamless navigation drive sales.
• Self-service tools improve customer satisfaction and reduce costs.
• Track user behavior for marketing optimization improvements.
• Data-driven decisions enhance performance and business growth.
• Well-designed sites stand out against competitors.
• They are more affordable than traditional advertising, reaching a wider audience.

Web Design Frameworks

• Designing for Usability improves the functions available
• Conversion-centered Design increases user action
• Three Questions help improve user interaction
• Segments helps divide users based on similar criteria
• Mobile first design improves website loading experience.

Design for Usability

• Follow website conventions as they save the user time and effort.
• Create effective visual hierarchies, ensuring important things are larger/higher and similar items are grouped.
• Break pages up into clearly defined areas like browsing products and review account information.
• Make it obvious what’s clickable with different colored and unambiguous text.
• Eliminate distractions, including only the most important information and avoiding clutter.
• Format content to support scanning using short paragraphs, headlines and bulleted lists.
• Conventions should be followed to assist with standards
• Visual Hierarchies uses different features to focus user attention
• Clearly defined areas help divide up user tasks
• Clickable navigation allows users to move around
• Elimination of distractions aids in focus
• Support scanning encourages website efficiency

Mobile Design Considerations

• Mobile design considerations include the conventions that should be followed.
• Visual hierarchies must be considered for different form factors
• Clearly defined areas are key to website access
• Having clickable navigation is important
• Elimination of distractions increases ease of use
• Support scanning assists in website use

Conversion-Centered Design

• Attention looks at the intended action intended for customers.
• Context studies where site visitors come from and if the material matches their expectations.
• Clarity ensures the website is quick and easy.
• Congruence ensures appropriate website messaging
• Credibility analyzes if potential customers have a reason to believe your promise.
• Closing utilizes positive user messaging
• Continuance studies the next action for consumers after they complete their task.

Three Questions of Web Marketing

• What is the person offering?
• Why should I pick you?
• What do you want to do next?

Segments

• Conversion is the appeal of the next step across a variety of customers.
• Segmentation dimensions may include search vs category, browse vs directed, product category, new vs returning customers, and online versus in-store shoppers.

Mobile First Design Considerations

• Mobile Traffic has surpassed desktop traffic in volume
• Site design should first focus on Mobile before desktops
• Coding elements like text and images adjust automatically based on the visitor's size
• Design ensures optimal display and usability across all devices
• Mobile users can be rerouted to a more specific URL
• Device type may be detected to serve distinct content

Mobile vs Desktop Differences

• Browsing habits will be different on mobile devices and desktop devices
• Customers may want to Purchase on a desktop but simply review on a phone
• User Interface may be different based on device

Conversion Rate Optimization

• Homepage optimization through A/B testing of pop-up form design elements
• A/B testing, the homepage of Grip6 shows a pop-up form offering 15% off email addresses
• Tests include hiding the shop button and more

A/B Testing

• A/B testing or multivariate testing tools consist of testing various webpages between different versions/elements.
• The goal should be to determine how to maximize revenues
• A/B tests involve creating two variants with small differences, such as headlines, images, or calls-to-action.
• Create 2 audience splits into random groups showcasing version differences.
• Track user behavior (clicks, conversions, and bounce rates) to determine effectiveness.
• Benefits include data-driven insight/decision-making, optimize website elements for conversions, and improve user experience and overall site performance.

Elements to be tested with A/B testing

• Strategic testing focuses on new taglines and new ways to communicate
• Operational testing focuses on new titles or layouts

A/B Testing Best Practices

• A/B best practices consists of testing one element at a time to isolate data.
• You must run tests long enough to gather data.
• Ensure the sample runs in the study are appropriately sized to the tested amount
• Base changes with web design principles.
• Changes must be based on data
• Consider Web Analytics when data is insufficient

Web Page Elements

• Website elements include: color scheme, buttons, images, navigation, trust symbols, video, forms and phone numbers.
• Web elements also include hero images (large photos with CTA), short videos and trust symbols.
• Color choice and use of contrast are key Web elements.

Landing Pages

• Homepage design is the main website page that provides a general overview of the site with diverse content and multiple paths.
• Landing pages are standalone pages created for a marketing campaign, focusing on specific content with limited options.
• Landing pages may utilize single product, multi product, lead generation, subscription or a single purpose.
• Some properties of landing pages may focus on long copy