Ağ teknolojilerinde, switch’ler kritik bir role sahiptir ve genellikle iki ana kategoriye ayrılırlar: Katman 2 (L2) ve Katman 3 (L3). Bu iki tür switch, veri işleme ve yönlendirme yetenekleri açısından farklılık gösterir. Peki, elimizdeki bir switch’in L2 mi yoksa L3 mü olduğunu nasıl anlayabiliriz? Bu sorunun cevabı, cihazın konfigürasyonuna ve belirli komutların çıktılarına bakmaktan geçiyor.

Temel Farklar

L2 Switch: Bu switch türü, MAC adreslerine göre veri paketlerini yönlendirir. Ağdaki cihazlar arasında veri aktarımı yapar ancak IP bazında yönlendirme yapmaz.

L3 Switch: Bu switch türü, hem MAC adreslerine göre yönlendirme yapabilir hem de IP adreslerini kullanarak daha karmaşık ağ yönlendirmeleri gerçekleştirebilir. Bu, onları ağ segmentleri arasında verimli bir şekilde veri aktarımı yapabilen çok yönlü cihazlar yapar.

Hangisinin Hangisi Olduğunu Anlama

Switch’in hangi tür olduğunu anlamak için aşağıdaki komutlar faydalıdır:

IP Yönlendirme Kontrolü:

sh run | inc routing

Bu komut, switch’in konfigürasyonunda ‘ip routing’ komutunun olup olmadığını kontrol eder. Eğer ‘ip routing’ komutunu görüyorsanız, bu switch’in L3 yeteneklere sahip olduğunun açık bir işaretidir.

L2 Switch için: Bu komutun bir L2 switch üzerinde çalıştırılması durumunda herhangi bir çıktı vermez çünkü L2 switch’ler IP tabanlı yönlendirme yapmazlar.

L3 Switch için:

Çıktı Örneği:

ip routing

Bu çıktı, switch’in IP tabanlı yönlendirme yapabileceğini, yani L3 yeteneklerine sahip olduğunu gösterir.

Varsayılan Ağ Geçidi Kontrolü:

sh run | inc gateway

Bu komut, ‘ip default-gateway ‘ komutunu arar. Eğer bu komut bulunuyorsa, switch’in yalnızca bir L2 switch olarak işlev gördüğünün bir işaretidir.

L2 Switch için:

Çıktı Örneği:

ip default-gateway 192.168.1.1

Bu çıktı, switch’in sadece bir IP tabanlı varsayılan ağ geçidini tanıdığını ve bu nedenle yalnızca L2 işlevselliğine sahip olduğunu gösterir.

L3 Switch için: Bu komutun L3 switch üzerinde genellikle herhangi bir çıktı vermemesi beklenir çünkü L3 switch’ler varsayılan ağ geçidi yerine daha karmaşık yönlendirme tablolarını kullanırlar.

IP Yönlendirme Tablosu Kontrolü:

sh ip route

BU komut bir ağ cihazındaki IP yönlendirme tablosunun içeriğini görüntülemek için kullanılır. Bu komut genellikle yönlendiricilerde ve Katman 3 (L3) özelliklerine sahip switch’lerde bulunur.

L2 Switch için:

Çıktı Örneği:

% This command is not recognized.

ya da

Default gateway is 192.168.1.1

Bu çıktılar, cihazın IP yönlendirme tablosuna sahip olmadığını ve bu yüzden L2 switch olduğunu gösterir.

L3 Switch için:

Çıktı Örneği:

Gateway of last resort is 192.168.1.1 to network 0.0.0.0

C    192.168.1.0/24 is directly connected, Ethernet0
S    192.168.2.0/24 [1/0] via 192.168.1.2
S    192.168.3.0/24 [1/0] via 192.168.1.3

Bu çıktı, switch’in yönlendirme tablosuna ve diğer ağ segmentlerine ulaşım için spesifik rotalara sahip olduğunu gösterir, bu da cihazın L3 özelliklerine sahip olduğunun açık bir işaretidir.

Sürüm Kontrolü:

show version

Bu komut, cihazın model numarası, seri numarası, yazılım sürümü, yüklü lisanslar, donanım özellikleri gibi çeşitli bilgileri sağlar.

Eğer henüz herhangi bir yapılandırma yapılmamışsa internetten aramak son seçeneğiniz.

Sonuç

Bu komutlar ve çıktıları, switch’inizin L2 mi yoksa L3 mü olduğunu belirlemenin temel yollarından bazılarını sunar. Ağınızı yapılandırırken ve sorun giderirken bu bilgileri kullanarak, daha bilinçli kararlar alabilir ve ağ performansınızı optimize edebilirsiniz.

The post Switch’in L2 mi L3 mü Olduğunun Öğrenilmesi appeared first on ProdSens.live.

Are you looking for a way to drive user retention and product adoption? You’re likely considering adding new features to your product. However, a successful launch takes more than building and announcing a remarkable feature. It needs a feature launch plan.

In this article, we’ll take a closer look at the different stages of a feature launch and outline strategies to help you get it right. Let’s get started.

TL;DR

• A feature launch plan guides teams through the process of developing and releasing a new in-app feature. It helps create a buzz, monitor feature performance, and maximize adoption.
• While a feature launch and product launch have a few overlapping steps, their focus areas are different. A product launch strategy aims to create a new product to expand your customer base and increase revenue. On the other hand, a feature launch aims to drive user retention and minimize churn with new features.
• A concrete feature launch strategy offers several benefits, including improved product stickiness, user retention, and increased account expansion. It usually involves three stages – pre-launch, launch, and post-launch.
• The pre-launch stage includes setting goals, defining your target audience, outlining a go-to-market strategy, and beta-testing the feature.
• The launch phase is where you put all the planning into action and make the feature available to your user base. You also have to build hype about the feature release on different platforms.
• The post-launch phase involves walking users through the feature with in-app onboarding flows, release notes, and live webinars. You can also implement in-app surveys to collect user feedback and understand whether the new feature fulfills their needs.
• Userpilot offers features such as in-app surveys, trend analysis, and path analysis to help monitor feature performance and adoption. Book a demo to understand how it can fit into your feature launch roadmap.

What is a feature launch plan?

A feature launch plan is a roadmap for launching a new feature in an existing product. This plan is followed by the product, engineering, marketing, and customer-facing teams, to make sure users have a seamless experience with new features.

The plan outlines the strategies these teams will use before, during, and after making the feature available to your users. A well-defined launch plan is the key to driving traction and maximizing feature adoption.

Feature launch vs. product launch strategy

The terms feature launch and product launch are often used interchangeably. While there are a few overlapping steps, there’s a world of difference between a successful product launch and a feature introduction.

A solid product launch plan outlines everything you’ll do to bring a new product to the market. It involves various steps, such as conducting market research, defining a marketing plan, and implementing an onboarding strategy.

On the other hand, releasing a new feature within an existing product involves analyzing current user behavior patterns to identify an experience gap in your product. Also, you need a well-coordinated strategy to help users get maximum value from the new feature.

Both feature and product launches involve research, marketing, and execution. However, a product launch focuses on establishing product-market fit and driving more revenue by attracting new users. Unlike a product launch, the goal of feature launches is to retain existing customers, re-engage inactive customers, and ultimately increase their loyalty.

Benefits of having a feature launch process

If product managers want their products to stand out from the competition and deliver value to customers, it’s crucial to keep releasing new features. However, in the absence of a proper strategy, even the most outstanding feature will fail to attract and retain users.

A concrete feature launch strategy offers several benefits, including:

• Positioning new launches for success – With in-depth insight into your user activity and behavior, you can build features that address user pain points. That, in turn, ensures more people try and adopt a new feature.
• Increasing product stickiness – When you release features that simplify life for your user base, your product becomes indispensable. Also, it demonstrates how you listen to and care for your customers, which motivates them to keep returning to your product.
• Increasing account expansion – Launching paid features that cater to users’ pain points is an excellent way to generate more revenue from each account.
• Boosting user retention – If your product adapts to changing user needs and preferences, it gives you an edge over competitors. Also, it becomes a go-to choice for users, which results in higher retention rates.

How to create a successful launch strategy

It’s time for us to get to the nitty-gritty of delivering a new product feature. Whether you’re making minor changes to your product or adding completely new functionalities after a product launch, a new feature introduction can be broken down into three phases:

• Pre-launch – Also known as the launch planning stage, it covers everything you do to prepare for a new feature launch.
• Launch – This is the stage where you execute your strategy and roll out the feature within your product.
• Post-launch – This phase ensures users can find and harness maximum value from the new feature. It also monitors whether the new feature is yielding the desired results, helps you fine-tune the experience, and informs future product development decisions.

Pre-launch phase

Like in a product launch, this stage involves all the groundwork needed to successfully launch a new feature and drive adoption.

1. Define the goal, launch date, and target audience

Start your launch strategy by determining why you want to roll out a new feature. Are you looking for ways to engage more users and boost the average session duration? Or do you have your eyes set on account expansion and revenue generation?

Knowing the answers to these questions will help outline precise goals for your feature launch plan. Consider using an established goal-setting framework like SMART to set goals that are easy to track and measure.

Also, define the target audience for your feature. Understanding their expectations, preferences, and pain points will help you build features that generate traction and offer value. It’s also a good time to set a launch date and create a timeline for key milestones that different teams must achieve.

2. Create a feature launch checklist and assign tasks

A successful feature release requires seamless collaboration among various departments, including product, engineering, marketing, sales, and support. For things to work smoothly, each team must have a clear idea of what they have to do—much like what’s needed in a product launch.

Start by breaking down your launch strategy into smaller, manageable tasks. Build an extensive checklist and assign these tasks to relevant departments. You’ll also need to add a deadline to each task to ensure you’re on track for the final launch date.

A sample feature launch checklist could include the following tasks along with the teams responsible for carrying them out:

• Creating and scheduling an email blast -> Marketing team
• Posting a teaser video on Instagram -> Marketing team
• Adding a coming soon banner to the app -> Product team
• Beta test the feature with a small number of users -> Product team
• Address issues reported by users post-launch -> Support team

3. Build a go-to-market plan for your feature launch

Like a product launch, you need a go-to-market strategy for your new features as well. Start by identifying the right marketing channels, such as social media platforms, email, press releases, your company’s website, and in-app messages. You can also create buzz on third-party platforms such as Product Hunt.

Next, define the release dates for marketing collaterals on different channels and start working on these materials. Make sure they’re ready and scheduled before the respective release dates.

It’s worth pointing out that instead of outrightly promoting the feature, you should highlight how it resolves specific user pain points. It’ll help your feature-release messages strike a chord with the audience.

4. Train your customer support and sales team

Customer-facing teams, like sales and support, can play a crucial role in influencing the customer experience. For instance, new users might reach out to a sales rep to understand how a particular feature solves their pain points.

Alternatively, existing ones might encounter bugs while using a new feature and reach out to customer support for troubleshooting. So, train your teams about how the new feature works and the ways users can generate maximum value from it.

5. Consider launching a beta test

From Instagram to Twitter (now X), even the world’s best products have had failed feature releases. How do you ensure your feature launch doesn’t share their fate?

The answer is to beta-test the new feature with a select group of users, much like how you’d test your product before product launch. While product developers will test the feature to rule out technical issues, beta testing offers insights into how it performs in real-life scenarios. It can help you find and remove areas of friction that might hinder feature adoption.

Moreover, beta testing offers an excellent way to understand what real-world users think about a new feature. Consider using a feedback form to collect early feedback and improve the feature before releasing it to the entire user base.

Launch phase

It’s now time to execute the pre-launch plan you built. Between running a beta test and making the feature available in-app, there’s a lot for the product team to do at this stage. They aren’t the only ones who’d be hard at work. The marketing team will continue building hype and promoting the feature on different platforms after its release.

Remember to use the feature launch checklist to assign and implement tasks in the right order of priority. It eliminates silos and keeps all teams on the same page about what needs to be done. Tick tasks off the checklist as they get completed to ensure you don’t miss anything.

Post-launch phase

A feature launch doesn’t end with adding new functionality to your product. You also have to get users to try the feature and determine whether it’s turning out to be a success.

That’s where the post-launch phase steps into the picture.

1. Create in-app onboarding for the new feature

Developing an excellent feature isn’t enough. You also have to get users to try it. How do you accomplish that?

The answer is to send strategically timed in-app messages to notify your user base about the feature. Additionally, design and implement an in-app onboarding flow that helps users navigate the feature. Here’s an example from Userpilot.

You can even create an onboarding checklist to give users an idea of what they need to do. Also, consider adding contextual tooltips and hotspots to provide real-time guidance as users navigate the feature.

2. Add release notes for existing users

Release notes can be an excellent tool for educating existing users about newly launched features. They help familiarize users with major changes and set their expectations.

When drafting a release note, make sure you keep the language simple and on-point and avoid technical jargon. Also, it’s a good idea to create and use a release note template for subsequent feature rollouts. A consistent layout and tone help users understand the information better.

Lastly, don’t forget to include a call-to-action (CTA) highlighting what the reader should do next.

3. Use live webinars to educate users about the feature

If you’re looking to maximize awareness about a new feature, consider hosting a live webinar. Use the session to demonstrate what the feature is all about and how to use it. You can also feature real-life use cases to highlight how it solves different pain points.

A live webinar also allows you to interact with existing and potential users in real time and collect feedback. This feedback then helps you refine the feature and maximize adoption.

4. Collect user feedback for the new feature

Improving your product with new features is an ongoing process. It doesn’t end with the release of a groundbreaking feature. You also have to understand how users feel about it.

An effective way of doing this is to collect qualitative user feedback with in-app surveys. A product growth tool like Userpilot also lets you choose from a wide array of survey templates.

You can analyze survey responses to understand whether the feature meets user expectations and needs. It’ll also help you identify gaps in existing functionalities and pave the way for improved iterations.

5. Monitor feature performance with feature trends

Besides in-app surveys, you can use trend analysis reports for a quantitative overview of feature usage and performance. It’ll provide you with an in-depth look at user activity and help you understand how many people engage with the feature. Additionally, you can monitor and evaluate adoption rates.

6. Monitor how existing customers find their way to the feature

Understanding how users discover the new feature is crucial to improving adoption. You can view session recordings and conduct path analysis to track the precise paths users take to get to the feature. It’ll help you identify and implement happy paths for future users and, in turn, drive adoption higher.

Additionally, path analysis can come in handy for identifying drop-off points in a user’s journey when they engage with the feature. This can help spot and remove points of friction.

Conclusion

Improving your product with new features is integral to increasing user retention and loyalty. A feature launch plan can help guide different teams, from product and engineering to marketing, through different stages of developing, releasing, and promoting a new feature.

Userpilot comes in handy to execute a successful feature launch and increase product engagement. Schedule a demo now to see how Userpilot can help increase your feature adoption.

The post How to Create a Feature Launch Plan + Best Practices appeared first on ProdSens.live.

Introduction

In the world of making websites look good, pictures, especially images, are super important. They make up a big part (60%!) of what you see online, making websites more interesting and helping to share information. Among the many tools that developers use, React SVG stands out. It’s like a superhero for putting cool and scalable graphics, especially Scalable Vector Graphics (SVG), into websites.

When developers want to make websites that look awesome and do cool things, they need graphics that can change and fit well. React SVG, which is like a special tool in the React world, helps developers use Scalable Vector Graphics (SVG) really easily.

So, in this article, we’ll talk about React SVG and how it makes the process of adding and handling images on modern websites more versatile and fun.

What is SVG?

The content or code of an SVG file is an HTML code, just like other image files like JPG, PNG, GIFS, etc have their encodings and format respectively. The whole code of an SVG is wrapped in a single svg element. The content or code of the SVG are wide array of elements that are dedicated to the construction, drawing, and layout of vector images and diagrams.

<svg>...svg>

We have seen that SVGs are HTML code, so they can be rendered on the browser. Now, they can be manipulated with CSS and JavaScript. We can get the instance of an svg using the DOM APIs like document.querySelector, and manipulate it with JavaScript. We can also style it with CSS.

The instance of an svg is also available in the DOM, it is the HTMLSVGElement. This is to further show you that the browser recognizes the svg as an HTML element.

const svg = document.querySelector("svg");
console.log(svg instanceof HTMLSVGElement); // true

So basically, SVG images are HTML. So they can be rendered on the browser. Now, SVG array of elements can only be rendered inside the svg block, they can be rendered outside it but the browser will see it as a custom element. So it only has meaning within the svg code. The use of SVG is quite versatile. SVGs can be used to:

• draw text effects
• animations. Most animations on the browser are done with the use of SVG.
• draw data visualization e.g. charts, and bars. Chartsjs uses SVG to draw charts.
• render a UI design field. Figma uses SVG to render all those designs we do on it, and all those drag and drop are SVG designs.
• 3D graphics. This library called threejs uses SVG to render 3D graphics on the browser.
• act as a stand-in image or placeholder for lazily-loaded images. This is because SVGs are very small in size and can be rendered on the browser very fast.

Importing SVGs

In a React project, there are several approaches to importing SVG files, each with its advantages and use cases. Here are a few common methods.

Importing as a React Component:

In this approach, you can import SVG files directly as React components. SVG files have a .svg extension, so you can import them like any other JavaScript file. This method allows you to treat SVGs as React components, making them easy to manipulate and style using React’s capabilities.

Let’s say we have this svg code that we want to use in our React application:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
svg>

Now, we want to use this as a file in our React application. We can do this by creating a file called MySvg.svg and pasting the code above in it.

// title="src/icons/circle.svg"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
svg>

Then we can import it into our React application like this:

import { ReactComponent as CircleSvg } from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <CircleSvg />;
};

Here, CircleSvg is a special import syntax that comes with Create React App and Webpack. It allows you to import SVG files as React components. Once, we import it, we can use it as a React component in our JSX. The code inside the SVG file is not a React component at all but once we import it using the import it is automatically converted to a React component.

Using an Tag

We can also use the traditional HTML tag to display SVGs. This approach is straightforward and suitable for simple use cases.

import CircleSvg from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <img src={CircleSvg} alt="My SVG" />;
};

Here we are importing the SVG file and using it as the src attribute of the tag.

The above will be converted to this:

The cons of this approach is that the styling and manipulating of the SVG might be limited. For example, we cannot be able to change the color of the SVG using CSS. We can only change the color of the SVG using the fill attribute of the tag.

import CircleSvg from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <img src={CircleSvg} alt="My SVG" fill="red" />;
};

Here, we are using the fill attribute of the tag to change the color of the SVG. This is the only way we can change the color of the SVG using the tag. We cannot use CSS to change the color of the SVG.

Inline SVG

Inline SVG involves directly embedding the SVG markup within your React component. This approach provides more control over styling and manipulation directly within the component.

import React from "react";

// Usage in JSX
const MyComponent = () => {
  return (
    <div>
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
      svg>
    div>
  );
};

Here, we are directly embedding the SVG code in our React component. We just copied the contents of the SVG file and pasted it into our React component. It renders as an HTML element directly. Here, we have total control over the SVG. We can manipulate it with CSS and JavaScript. We can also use React to manipulate it.

This method is suitable for smaller, inline SVGs, and it gives you direct control over each element. The cons are that the svg code might be large and we will end up with a bloated component file size. Also, the svg becomes hard to maintain, we can mitigate against this if we use the react-svg library.

Using react-svg

The [react-svg](https://www.npmjs.com/package/react-svg) library gives us the ability to embed inline SVGs while still able to manipulate the inline SVGs.

npm install react-svg

The react-svg exports a ReactSVG component. The component has a props src that receives the inline SVG.

import { ReactSVG } from "react-svg";

<ReactSVG src="circle.svg" />;

Here, import the ReactSVG component and pass the URL of the circle.svg file to the src props. There are many useful props that we can pass to the ReactSVG. We can request the component to cache the SVGs, we can attach a click handler to the SVG, and many more

There are specific loaders like react-svg-loader or svg-react-loader that allow you to import SVG files directly and use them as React components.

import CircleSvg from "svg-react-loader!./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <CircleSvg />;
};

Ensure you have these loaders installed (npm install --save-dev react-svg-loader or npm install --save-dev svg-react-loader) and configured in your build setup.

Choose the method that best suits your project requirements and workflow. Each approach has its strengths, and the choice often depends on factors such as ease of use, scalability, and the specific needs of your application.

Styling SVGs in React

We have seen ways to import and use SVGs in React. Now, let’s look at ways we can style SVGs in React.

Using SVGs in React components is common for adding scalable graphics. There are multiple methods to style SVGs to make them fit in with the rest of your UI. Here’s a rundown of the options you have for styling SVGs in React:

Inline Styles

You can dynamically change the style of SVG elements by passing a style object directly to the SVG component.

const MySvgComponent = () => (
    
);

CSS Stylesheets

Just like HTML elements, you can style SVGs using CSS classes or IDs.

// styles.css
.my-svg {
  fill: blue;
  width: 50px;
  height: 50px;
}

import "./styles.css";

const MySvgComponent = () => (
  <svg className="my-svg">{/* paths, circles, etc. */}svg>
);

CSS Modules (Scoped Styles)

If you’re using CSS Modules, you can import styles from a .module.css file which will automatically scope the class names to avoid conflicts.

“`tsx title=”MySvgComponent.module.css”
.mySvg {
fill: blue;
width: 50px;
height: 50px;
}

import styles from “./MySvgComponent.module.css”;

const MySvgComponent = () => (
{/* paths, circles, etc. */}
);

### Styled Components (CSS-in-JS)

This is a popular CSS-in-JS library that lets you use component-level styles.



```tsx
import styled from "styled-components";

const StyledSvg = styled.svg`
  fill: blue;
  width: 50px;
  height: 50px;
`;

const MySvgComponent = () => {/_ paths, circles, etc. _/};

Emotion (CSS-in-JS) Another CSS-in-JS library that has similar functionality to Styled Components.

/*_ @jsxImportSource @emotion/react _/
import { css } from '@emotion/react';

const style = css`  fill: blue;
  width: 50px;
  height: 50px;`;

const MySvgComponent = () => (
<svg css={style}>
{/* paths, circles, etc. */}
svg>
);

Inline SVG as JSX

If you import your SVG as a React component (using a loader like @svgr/webpack), you can directly apply styles to its JSX.

import { ReactComponent as MySvg } from "./mySvg.svg";

const MySvgComponent = () => <MySvg style={{ fill: "blue", width: "50px", height: "50px" }} />;

Manipulating SVG Props

SVG elements have specific properties (such as fill, stroke, width, height, etc.) that can be manipulated in JSX:

const MySvgComponent = ({ color }) => (
  <svg width="50" height="50">
    <circle cx="25" cy="25" r="20" fill={color} />
  svg>
);

Each of these methods has its use cases. Inline styles and manipulating SVG props are great for quick dynamic styling changes, while CSS stylesheets, CSS Modules, and CSS-in-JS libraries offer more power and flexibility, especially when you have complex styles or you want to keep your styles organized and modular.

Dynamic SVGs

Dynamic SVGs in React can provide a rich and interactive experience for users. SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. When using React, you can create interactive SVG elements that respond to user input, changes in state, or props. Here’s a conceptual guide on how to do this:

Initializing State and Props

Start by deciding what aspects of your SVG need to be dynamic. For instance, you might want to dynamically change the color, size, or position of an SVG element. You can use the useState hook to manage stateful values within your components, and you can pass down props to configure components from a parent.

const [color, setColor] = useState("blue");

Creating SVG Components

You can create a React component that returns SVG elements. These components can then take props or use state to determine how the SVG is rendered.

const MyCircle = ({ color }) => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill={color} />
  svg>
);

Adding Interactivity

Attach event handlers such as onClick, onMouseOver, onMouseOut, etc., to SVG elements to make them interactive.

const InteractiveCircle = () => {
  const [color, setColor] = useState("blue");

  const changeColor = (newColor) => setColor(newColor);

  return (
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        strokeWidth="3"
        fill={color}
        onMouseOver={() => changeColor("green")}
        onMouseOut={() => changeColor("blue")}
      />
    svg>
  );
};

Animating SVG Elements

You could use CSS animations or the Web Animations API to animate SVG elements. React’s useEffect hook can be used to trigger animations when certain states or props change.

useEffect(() => {
  // Trigger animation logic when 'color' changes
}, [color]);

Composing SVG Components

Larger SVG graphics can be composed of smaller SVG components, allowing you to reuse logic and simplify your codebase.

const App = () => (
  <svg width="200" height="200">
    <MyCircle color="blue" />
    <MyCircle color="red" />
  svg>
);

Using Third-Party Libraries

There are several libraries available that make working with SVGs in React easier. For instance, d3-react-svg, combines the power of D3.js with React to create data visualizations.

Animation with SVGs in React

Animating SVGs in React can greatly enhance the user experience by providing a visually appealing way to convey changes or draw attention to certain parts of the UI. Let’s look at some steps and some considerations for implementing SVG animations in React:

Create or Import an SVG

You can create SVGs using graphic design software or write the SVG markup directly. SVGs can then be imported into a React component either as a React component using JSX or as a file if you’re using tools like Create React App which supports SVG imports.

Example SVG as JSX in a React component:

const MySVG = () => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
  svg>
);

Importing SVG as a module:

import { ReactComponent as MySVG } from "./my-svg.svg";

const MyComponent = () => (
  <div>
    <MySVG />
  div>
);

Basic CSS Animations

For simple animations, you might not need any additional libraries. CSS can be used to animate SVG properties such as opacity, transform, or stroke-related properties.

Example using CSS:

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .my-svg {
      animation: fadeIn 2s ease-in-out infinite;
    }
    const MySVG = () => (
      <svg className="my-svg" width="100" height="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokeWidth="4"
          fill="yellow"
        />
      svg>
    );

Animation Libraries

For more complex or interactive animations, you might want to use a library like react-spring. React Spring is a library for building interactive, data-driven, and animated UI components. It can animate HTML, SVG, Native Elements, Three.js, and more.

To use react-spring, you need to install it:

npm install react-spring

Example with react-spring:

import { useSpring, animated } from "react-spring";

const AnimatedSVG = () => {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { duration: 1000 },
  });

  return (
    <animated.svg style={props} width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
    animated.svg>
  );
};

Interactivity

You can combine react-spring with React’s event handlers to create interactive animations. For example, you might want an SVG to animate when a user hovers over it or clicks on it.

import { useSpring, animated } from "react-spring";

const InteractiveSVG = () => {
  const [animatedProps, set] = useSpring(() => ({
    to: { opacity: 1, transform: "scale(1)" },
    from: { opacity: 0.5, transform: "scale(0.5)" },
  }));

  return (
    <animated.svg
      onMouseEnter={() => set({ opacity: 1, transformText: "scale(1.2)" })}
      onMouseLeave={() => set({ opacity: 1, transform: "scale(1)" })}
      style={animatedProps}
      width="100"
      height="100"
    >
      <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
    animated.svg>
  );
};

export default InteractiveSVG;

The post Using SVG in React appeared first on ProdSens.live.

Conversion copywriters — the people who write landing page copy that converts readers and delivers sales — are wonderful human beings. Their writing pulls in readers, generates conversions, and ultimately produces buckets of cash.

Wouldn’t you like to have that skill?

There’s good news here: It’s only partly skill. The rest is just technique — technique that you can learn and master. You — yes, you! — can unleash the same wizard-like conversion copy powers, as long as you understand the techniques that are at play.

You see, conversion is very much a science of the mind — how your prospect’s mind processes information, makes decisions, and decides to convert. In this post, I’ll describe eight writing techniques that are proven to work. After putting your time and resources into generating traffic, here’s how you can turn traffic into revenue by creating copy like a conversion pro.

Here are the tips we’ll cover:

1. Use customer testimonials
2. Emphasize the benefits, not the product/service
3. Spend time writing a killer headline
4. Keep your writing simple
5. Write like a human
6. Use numbers and get specific
7. Ask for readers to take action
8. A/B test your copy

8 Tips for Writing Great Landing Page Copy

1) Use customer testimonials.

One of the most powerful conversion copy techniques is not about writing at all; it’s about letting happy customers write your copy for you.

Testimonials produce conversions like nothing else can. It’s impossible to write copy as good as your customer. Why? Because good copy depends on the source, not just the style and substance. Testimonials are compelling because they show the customer what she will experience if she uses your product or service.

HighriseHQ’s landing pages are great use cases of these customer testimonials. A key to their successful, high-converting landing pages is that they place testimonials front and center, featuring a picture of the customer alongside a quote.

Now, take a look at one of Zoosk’s landing pages, where most of the copy is testimonials:

Most landing pages that do well have testimonials somewhere on the page, but ConversionXL uses a testimonial as their headline:

Remember, your best conversion writers are your customers. Let them speak for themselves — social proof is a powerful addition to your copywriting and marketing strategy.

2) Emphasize the benefits, not the product/service.

One of the most important lessons I’ve learned in online marketing is that customers don’t really care about your products or services — in other words, they don’t care about the “solution” you’re trying to sell to them. A group of Harvard researchers conducted a study of 1,400 B2B customers in a variety of different fields, and concluded we’ve reached “the end of solution sales.”

Traditionally, sales was predicated on the “solution-selling method.” According to this method, “salespeople are trained to align a solution with an acknowledged customer need and demonstrate why it is better than the competition’s.”

That approach isn’t working anymore for one very simple reason: Customers already know the solution they’re looking for. They are capable of learning virtually anything thanks to the internet and search engines. In fact, not only do customers know the solution, they also know the features they are looking for, the requirements the product must meet, and a benchmark pricing.

If you are pitching only your solution, you’re not giving your customers what they need and want. You need to pitch benefits. It’s okay to mention your solution, because that’s a signal to the customer that he or she is in the right place — but don’t push that solution. Instead, push the benefits.

Let’s look at an example from Unbounce, who successfully emphasizes the benefits of their product on this landing page: “Without IT”; “build a high-converting landing page now”; “we’ve doubled and tripled conversion rates.”

GetACopywriter.com leads with benefits in their landing page, pictured below. Their ideal customers are looking for copywriters, so they simply pitch the benefits of getting a copywriter through their service.

Jaybird, a company selling high-end Bluetooth headsets, uses a landing page that exclusively talks about benefits. There is very little on here about solutions. What sets the Bluebuds apart from everyone else is the benefits.

Benefits trump solutions every time. If you want to take your copywriting to the next level and increase conversion rates, put customer benefits at the forefront of your marketing efforts.

3) Spend time writing a killer headline.

HubSpot’s Campaign Assistant can help you generate copy

This isn’t the best news you’re going to read all day, but someone needs to say it. People don’t meticulously read your landing page copy. They scan, they skim, and they allow their eyes to flitter across the page, but they don’t (usually) read every word.

So, what’s a copywriter to do? Go find a job where someone actually appreciates our hard work?

No. We adapt to the customer and produce copy that will compel them to convert in spite of their skimming habits. Here’s what customers do pay attention to:

• The headline.
• The subheadline (usually).
• The pictures.
• CTA buttons.

After that, customers may or may not read the following:

• Major section headings.
• Bullet points.
• Short paragraphs.
• Image captions.

That should give you an idea of what to focus on as you write your conversion copy. The most important piece of content is the ten or fifteen words in the headline. Focus on and nail that, and you’ll have come a long way. To help convert the “non-readers,” you should:

1. Make your headline big, strong, and clear.
2. Use a compelling subheadline that pushes your product’s benefits.
3. Show large pictures that demonstrate the benefits of your products and explain your message.
4. Use strong copy in your CTA.
5. Break your copy up into major sections, led by a headline with large type.
6. Use bullet points to discuss benefits of your product. Short bullet points. Not long ones.
7. Use short paragraphs, rather than long blocks of text. Any paragraph over five lines long can be hard to digest.
8. Use captions on your images.

4) Keep your writing simple.

The best conversion copy you’re going to read will come in the next two words: Be simple.

You may be as good of a writer as Stephen King or J.K. Rowling, but that doesn’t matter so much because literary prowess is useless in conversion copy. Your most powerful writing skill is simplicity. Simplicity sells.

Take Optimizely, for example. They produce some of the most brilliant landing pages ever created for their clients, but take a look at their own landing page:

Is that it? Yes, yes it is. And it’s very effective. Why? Because it’s so incredibly simple. Let’s visit another landing page service — Get Response. Here is their landing page:

Simplicity again. Did whoever wrote those landing pages sit around for hours brainstorming, testing, tweaking, standing in front of a white board with a fistful of colored markers, thumbing through a thesaurus, taking long walks in nature, and meditating on the meaning of life in order to produce such brilliant simplicity?

Nope. They just wrote the simplest, most clear statements they could.

But simplicity doesn’t mean replacing creativity with meaningless buzzwords. ConversionXL created a list of words that marketers should do their best to avoid — these are phrases that you don’t want to use:

• “On-demand marketing software”
• “Integrated solutions”
• “Flexible platform”
• “World leader”
• “Once-in-a-lifetime opportunity”
• “Changing the way X is done”
• “Paradigm shifting”
• “Exceeding customer expectations”

(Click here for even more cliché marketing taglines you should avoid.) Those clichés don’t work anymore — you need to keep it simple. Here are a few tips for keeping your landing page copy simple:

• Use a simple sentence structure.
• Keep sentences short.
• Use short words. Short words are easy to understand and skim.
• Don’t get fancy with your wording.
• Be clear and succinct. Use the most basic words to describe what you’re trying to say.

If you can be simple, you can write great conversion copy.

5) Write like a human.

There’s another technique that will help you crush your competition: Sound like a human being.

At some point, a bunch of copywriters decided it would be great to produce copy that sounded strained and robotic. Who’s writing this stuff? And who’s reading this stuff? I don’t know, but I do know that no one is converting on it.

People prefer to connect with other people, not with robots. That’s why your copy needs to sound like a human wrote it. Here are some specific things you can do to make your writing more personal:

• Write the way you speak.
• Use normal words, like the ones you’d use if you were talking to a ten-year old. For example, why use “convivial” if you can use “friendly?”
• Use short sentences.
• Break grammar rules if the writing still sounds good and natural.
• Be funny.
• Use first person.
• Use expressions you’d use in a normal conversation. “Seriously.” “I’m thinking…,” “Wait a second.” “It was crazy.” “Wow.” “It was pretty awesome.” “It’s like…”

Ramit Sethi, a personal finance advisor, entrepreneur, and author of the famous blog “I Will Teach You To Be Rich,” has with sky-high conversion rates and a powerful personal style. His blogs read like a personal email to a best friend. He doesn’t even mind tossing in a word or two that he would use if he was hanging with his buddies. Check out this excerpt from one of his blog posts:

Try to get yourself away from the idea that you’re writing “copy,” and think of it more as a conversation. If you do that, you’ll write better. You’ll sound like a human. Your conversion rates will go up.

6) Use numbers and get specific.

The more specific you are, the more believable and persuasive you will be. Which one of these claims is more persuasive to you?

• “Your conversion rates will explode!”
• “In the last ninety days, customer conversions have increased by an average of 78.2%.”

The second one is far more specific, and therefore more believable. Anyone can make blanket claims about awesomeness, but not everyone can cite statistics and detailed metrics.

Let’s take a look at an example. Check out this landing page example from TeamGantt. They use a specific number to promote the benefits of their product:

How effective would it be if they claimed to have “millions of tasks scheduled?” The number makes a big difference. Customers want to have specific information about benefits customers are seeing, and they want specific examples of what they will experience. Specificity is a powerful tool.

7) Ask for readers to take action.

The final killer technique of a conversion pro is the call-to-action. If you don’t ask for conversions, you won’t get them. That’s why I suggest that you start with the end goal in ind — and the whole point of your landing page is that conversion. All of your copy should be building up to that conversion. Don’t be shy!

Similarly, writing CTA button copy is just as important, if not more so, than the rest of the copy on your page. Remember, how I mentioned that CTA buttons are one of the copy that people actually read? It matters. Simple changes in wording can create huge conversion increases, like in this example:

For more ideas on CTA copy that drives clicks, check out these 14 real-life examples of great CTA copy.

8) A/B test your copy.

Get started with HubSpot’s free landing page builder

A good conversion copy writer isn’t just writing — you’ve got to be testing, too. How else will you know what kind of writing converts higher or lower for your audience?

There are all kinds of A/B tests you can do on a landing page — images, placement, flow, layout, etc. Usually, however, the biggest gains come from changes in the copy. If you want to gain higher and higher conversion rates, you’ll need to be testing your copy along with the other elements of your landing pages.

Don’t expect to hit a homerun on your first at-bat. You will succeed by carefully, methodically, and intentionally testing every variation. Here are some of the things you can test:

• Headline variations
• Subheadline variations
• CTA copy
• Lists of benefits

Test small things, too, A single word change in the headline could make a huge impact in your conversion rates. You won’t know unless you test it out. (Don’t know how to run an A/B test? Click here to learn.)

You can use HubSpot’s free landing page builder to test page variations against each other. 

Get Started With Writing Landing Page Copy

All in all, boosting conversion rates starts with killer copy. A whole lot depends on the words that you type with your keyboard. Thankfully, it’s not some insurmountable task — anyone can learn how to do it. With the right copywriting techniques firmly in place, you can achieve higher conversion rates.

What techniques do you use to write your conversion copy?

The post 8 Must-Have Tips for Writing Landing Page Copy That Converts appeared first on ProdSens.live.

Nostalgia marketing is the advertising equivalent of comfort food.

In a time where most marketing focuses heavily on the future, nostalgic commercials and ads transport us back to a simpler place where our current problems don’t matter.

Instead of anticipating the next great thing, nostalgia marketing urges us to focus on what we already know works.

To inspire your campaigns, we selected 22 examples of nostalgia marketing that play on the bittersweet pangs of days gone by.

The Power of Nostalgia Marketing

“When you play on nostalgia, you’re bringing people back to a simpler time, and the familiar comfort that comes with a shared experience with your peers,” says Jones Krahl, Deloitte Digital’s co-head of creative brand and advertising, along with Milton Correa.

“While playing into nostalgia isn’t new, putting your own spin on nostalgia has become increasingly popular,” Correa adds.

We know at a gut level that nostalgia gives our lives a feeling of meaning and continuity, but you may be surprised to learn it can also make us looser with our wallets.

A study published in the Journal of Consumer Research found that nostalgic feelings made participants more willing to spend money on consumer goods and services — making nostalgia marketing a major win.

22 Examples of Nostalgic Ads

We rounded up some nostalgic commercials that induce a fondness for a bygone time by calling upon pop-culture elements of the good old days.

Incorporating famous characters and scenes from the past in modern advertisements is a tried-and-true way to generate positive feelings in your target audience, making them more likely to open their wallets.

1. Nintendo

Many children of the ‘80s and ’90s remember playing Nintendo-based video games with their siblings. And many people also recall the sad feelings related to growing apart or drifting away from a relative.

This commercial highlights both memories by telling the story of two Nintendo-loving brothers who grow apart, argue as teenagers, and then happily reunite as adults to play the new Nintendo Switch together.

This nostalgic commercial not only reminds people of what it was like to grow up with siblings, but it also reminds you of the great fun you had playing video games as a child.

Then, because the brothers connect and chat virtually as they play Switch games at the end, it shows how Nintendo’s technology has evolved to connect old friends and relatives worldwide.

2. Australia Tourism Board

Instead of promoting a traditional ad showing Australia’s most beautiful destinations, Australia disguised a tourism ad as a star-studded trailer for a fictional reboot of the ’80s film Crocodile Dundee.

As those who watched the original Dundee series get excited by clips from the film, starring Chris Hemsworth and Jason Sudeikis, it‘s revealed that Hemsworth tricked Sudeikis into a tourism ad. Despite the trickery, Hemsworth and Sudeikis agree that their trip to Australia was still the best vacation they’d ever taken.

This was a clever way to embrace the television and movie reboot trend of 2018 and 2019 while still highlighting the best Australia has to offer for tourism. Because it features famous actors in the present day, it’s also hilarious for both people who followed the Dundee films or the main characters in the fake reboot.

3. Spotify

In 2016, music-streaming service Spotify unveiled a new spokesperson — er, spokes-dragon — in a 30-second ad produced by Wieden + Kennedy New York.

Falkor and his boy companion Atreyu (now a heavily bearded 44-year-old man) are both characters from the beloved 1984 fantasy film The NeverEnding Story.

W+K even got the original actors to reprise their roles (Noah Hathaway as Atreyu and Alan Oppenheimer as the voice of Falkor).

The pair appear just as the film left them over 20 years ago: gliding through the clouds while the movie‘s dramatic theme song plays in the background. “I can’t believe people still listen to this song!” Atreyu exclaims. His dragon agrees; they share a laugh, and the two speed off into a grainy, ’80s-quality CG sky.

4. Freia

The tagline of Freia, a Norwegian chocolate company, is “Et lite stykke Norge” (A little piece of Norway). This spot for the company produced by SMFB Oslo fully encapsulates the sentiment in a simple, joyful way.

The plot follows a Norwegian expat in New York navigating a hectic life as a fashion stylist. When he returns home to his apartment one evening, he finds a half-eaten bar of Freia chocolate in his otherwise empty fridge.

After just one bite, he’s inspired to hop on a plane back to Norway to visit his father and soak up the majestic landscape of his homeland. The ad ends with the stylist discovering a modest hair salon for sale in what is presumably his hometown.

The message is clear: A taste of Freia chocolate is inherently connected to Norway, no matter where in the world you may be.

5. Adobe

Bob Ross, the beloved ’80s painting guru who passed away in 1995, experienced an unexpected resurgence in popularity in 2016 after Netflix added his classic TV show, The Joy of Painting, to its streaming lineup.

After his Netflix debut, Ross became a trending topic on Instagram, and Adobe took notice. They decided to pay homage to the late painter in a series of tutorial videos promoting their new Adobe Photoshop Sketch for the iPad Pro.

Authenticity was central to this nostalgic campaign. Adobe and agency Lekker Media collaborated with Bob Ross Inc. to make sure every detail was accurate, even going as far to make sure it properly displayed the clothing Ross wore on his show.

Children‘s book illustrator Chad Cameron, who plays Ross in the series, perfectly channels the artist’s relaxed, unpretentious demeanor.

“Bob’s wish was to inspire as many people as possible to be creative and to share it with others,” Joan Kowalski, media director at Bob Ross Inc., told Adweek. “Adobe’s ‘Joy of Sketching’ series reminds us that a company as big as Adobe shares in that hope.”

6. Oikos

Although it originally aired from 1987-1995, Full House has become a nostalgic childhood symbol for multiple generations thanks to syndication.

But before Netflix revived the show with a 2016 reboot, Dannon reunited a few of the show‘s stars in an ad for Oikos, the company’s line of Greek yogurts.

John Stamos is joined by his former cast members Bob Saget and Dave Coulier in this Y&R Vinizius-produced spot. The trio doesn’t explicitly reprise their Full House roles, but the dynamic is undeniably reminiscent of their days on the sitcom.

7. Adidas

In 1973, Billie Jean King won a tennis match against male player Bobby Riggs, coined “The Battle of the Sexes.” The historic tennis game was the first time a woman tennis player was matched against a male.

In and before the late 1950s, men were seen as superior athletes. Before the tennis match with King, who was only 25, even Riggs said he could beat a woman at the age of 55.

King’s tennis match win proved Riggs wrong. It also proved that men and women could compete equally on the tennis field and in other sports.

On a bigger scale, it further empowered women, who were often stereotyped as wives, homemakers, or secretaries at the time. With King’s win, it became harder to ignore that gender stereotypes were false and that women could win and even lead amongst men.

King wore an iconic pair of blue Adidas tennis shoes during the match. Years later, to celebrate the 45th anniversary of King‘s win, Adidas launched a limited edition line of BJK shoes with the tennis legend’s face and initials on each pair.

To announce the shoe line, Adidas launched a series of simple commercials showing Billie Jean King spray-painting piles of shoes blue. Here’s an example of one of the ads:

To further promote the line, Adidas also had booths at the U.S. Open tennis match where fans could bring any brand of shoes and have an artist paint them blue with Adidas’ unique BJK logo.

According to Adidas, the overall campaign led to a 20% boost in tennis shoe sales. And, now that the campaign is over, people are auctioning off these limited edition shoes on eBay for upwards of $1,000.

8. Tesco

Nothing screams nostalgia like old home movies. In this extended holiday ad from British grocery chain Tesco, we watch a family grow and age over the years through the lens of their Christmas home videos. Set to a poignant theme, the ad is intended to stir up fond holiday memories for viewers.

“We wanted to show what a real Christmas is all about — not a perfect, airbrushed one — but the ones we recognize from our own lives,” David Wood, former marketing director at Tesco, told Adweek. The ad was produced by Wieden + Kennedy, London.

9. Microsoft

Although Microsoft’s Internet Explorer is no more, this 2013 spot for the web browser earned viral recognition and a Webby Award nomination.

“You might not remember us,” the ad‘s narrator begins, “but we met in the ’90s.” The commercial highlights all things ’90s — fanny packs, Tamagotchi, bowl haircuts — even the Oregon Trail PC game makes an appearance.

Column Five Media, the creative agency behind the ad, set out to create a nostalgia-driven viral ad that would reintroduce Internet Explorer to ’90s kids.

“The idea of a brand like Internet Explorer being forward-thinking enough to make such a story-focused, Gen Y-centered commercial was pretty newsworthy,” the agency wrote in a behind-the-scenes blog post.

“Focusing that story on ’90s nostalgia, which we knew was popular with Gen Y and not yet fully realized in video form, is what made [the ad] shareworthy.”

10. Chili’s

Chili’s ads are usually characterized by close-up shots of glistening hamburgers, sizzling bacon, and french fries still glowing with fryer oil.

So this 2016 ad produced by Boston-based agency Hill Holliday was a departure from the casual dining chain’s typical go-to formula.

The commercial depicts Chili‘s origin story through a series of retro vignettes. We see the laid-back founders playing ring toss, lounging on the hood of their car, and, of course, flipping classic Chili’s burgers in their first restaurant.

The ad taps into traditional Americana — a form of nostalgia for small-town American life, middle-class values, and neighborhood restaurants.

11. Apple

Apple regularly features celebrities in their advertising, but they made a throwback casting decision for this iPhone 6s nostalgic commercial.

Everyone’s favorite sweet-toothed Muppet, Cookie Monster, might have switched to a more balanced diet, but he appears whipping up a batch of his favorite chocolate chip cookies in this ad.

TBWA/Media Arts Lab is the agency behind the ad, and they even released a series of “bloopers” featuring the beloved childhood character.

12. Target

The nostalgic force is strong in this Target video promoting Star Wars: The Force Awakens merchandise.

As part of a more extensive campaign to encourage fans to share their Star Wars memories online, Deutsch LA produced this two-minute compilation of Star Wars fans’ home videos.

In the nostalgic commercial, young fans dressed as little Princess Leias, Luke Skywalkers, and Han Solos brandish lightsabers and give their best Chewbacca impressions, all while the classic Star Wars theme plays in the background.

The result is an endearing campaign that will resonate with longtime fans and new converts alike.

13. Bacardi

For its 150th anniversary in 2012, Bacardi released a series of print and television ads showcasing the brand’s party-starting heritage.

The trip down memory lane was intended to give the company a shot of authenticity, reminding consumers that Bacardi has stood the test of time.

The goal, according to Leo Premutico, co-founder of WPP agency Johannes Leonardo, the agency behind the ad, was “to depict a moment in time that lives in history” and offer “an eye to what’s next, an exciting future.”

14. McDonald’s

When McDonald’s removed antibiotics and artificial preservatives from their chicken in 2016, they wanted an ad campaign that informed consumers about these changes and tapped into nostalgia surrounding their famous nuggets.

“There’s an undeniable level of nostalgia tied to the McDonald’s brand and its food,” Britt Nolan, Leo Burnett USA’s Chief Creative Officer, told Adweek.

“We set out to capture that relationship in a sincere, simple way that today’s parents can relate to and feel good about sharing with their own kids.”

15. Uber Eats

To support local restaurants and build hype around their product, Uber Eats turned to beloved local access show hosts and rockers Wayne Campbell and Garth Algar for their Super Bowl 2021 spot.

The dynamic duo from the 1992 classic Wayne’s World appealed to nostalgic millennial audiences while also nodding to the present with a Tik-Tok-dancing Cardi B cameo. While the Cardi B cameo is self-awarely shameless, it illustrates a valuable strategy of leveraging nostalgia while acknowledging modernity.

Limited Re-Releases of Nostalgic Products

Some products are so classic that the mere mention drums a swell of warm, fuzzy nostalgic bliss. Think Tamagotchi and Beanie Babies for 90s kids or Cabbage Patch Dolls from the 80s.

Companies lucky enough to score a hit product back in the day have capitalized on it in the present by offering limited re-releases of those beloved past items.

Here are a few examples of limited re-releases of nostalgic products.

16. Crystal Pepsi

Pepsi released Crystal Pepsi in 1992. Despite a less-than-stellar reception and resulting discontinuation in 1994, Pepsi’s quirky, clear soda remains a warm and comforting memory for many who yearn for simpler times.

Pepsi ran a limited rerelease of the drink in 2022 to celebrate the 30th anniversary of its failed yet nostalgic beverage.

However, Crystal Pepsi was never available for purchase. Nostalgia fans entered a social media competition and used branded hashtags to show off their favorite 90s photos, with winners receiving 20 bottles of the storied soda.

In addition, Pepsi recently unveiled its first rebrand since 2008, complete with a new logo and visual identity that pays homage to vintage Pepsi branding of the 70s and 80s.

17. Motorola Razr

In the early 2000s, before smartphones, one of Motorola’s most popular cell phones was a tiny, flat flip phone called the Razr. Despite its number-based keyboard and a small screen, people loved it for its design and simplicity.

In 2019, Motorola gained buzz when it re-introduced a new and improved Razr featuring a folding touchscreen.

In the commercial announcement, you see an old-school Razr lifting off a table and flying through the air as its old layers peel off to reveal a new design. The phone then opens to reveal the Android-like touch screen.

Partnering with Nostalgic Brands

Your brand may not have been around back in the day — and that’s okay! However, that doesn’t mean you can’t draw on nostalgia in your marketing efforts.

Partnering with a classic brand is a win-win scenario that draws nostalgia fans toward a new product and reinvigorates awareness of the older brand.

Here are a few examples of modern companies partnering with nostalgic brands to supercharge their marketing efforts.

18. Hotels.com x Lisa Frank

Image Source

Hotels.com partnered with Lisa Frank and Barsala to offer a pop-up flat that fulfills the nostalgic fantasies of ‘90s kids who loved their rainbow-clad notebooks and unicorn pencil pouches.

“We wanted to design a room that celebrates all things ’90s, and nothing screams childhood nostalgia more than these iconic designs,” shared Adam Jay, President of Hotels.com.

The room was exclusively bookable on Hotels.com for a short time in 2019 and proved to be a successful example of nostalgia marketing, especially as it appeals to millennial audiences.

The hyper-stimulating and nostalgic design generated lots of press and even more Instagram hype from happy guests basking in the warmth of childhood wonder.

19. JNCOs x Goldfish

Image Source

Jalapeno poppers were big in the ‘90s, and so were ultra-wide-leg jeans. So, it was only natural for Goldfish to partner with JNCO for a limited edition pair of nostalgia-inducing jeans to promote their new jalapeno popper-flavored snack.

Brand partnerships are a great way to market new products and reach wider audiences. If your partnership can evoke sentimental emotions in a specific audience, that’s a recipe for success.

20. AirBnb x Blockbuster

Image Source

Few 90s memories are as sacred as wandering into Blockbuster on a Friday evening and being greeted with a labyrinth of movie titles and games to choose from — perhaps even some candy at journey’s end.

Sadly, only a single Blockbuster remains in Bend, OR. However, AirBnb partnered with the lone video rental store to offer a 90s-themed experience to Blockbuster lovers looking to relive their nostalgic memories in the form of an overnight stay.

The sentimental stay was only available for three nights in September 2020, with proceeds going to charity. With limited availability and a strong nostalgic hook, this partnership garnered significant buzz for both brands.

Nostalgia in Design

Nostalgia in advertising can be more subtle than partnering with classic brands or featuring nostalgic pop-culture icons in advertisements.

Some brands invoke fond memories within consumers through the design of products that nod to the style and aesthetics of a time when things were just a bit simpler.

21. Levi’s

Image Source

Baggy jeans are back, and Levi’s is driving the resurgence of the 90s clothing aesthetic in their design. Their Instagram page is replete with vintage tinted filters and models who look like they stepped off the set of Dawson’s Creek.

They even offer a special line of 90s edition 501 jeans that call upon nostalgia in name and design, with their loose-fitting, mid-rise vibe that provides a blast from the past for lovers of all things 90s.

Levi’s leans into the storied history of their brand in their advertising and product design, which elicit positive feelings of the past in their customers. If you can make your customers feel good, they’ll surely want to buy.

22. Heinz’s Ketchup

Image Source

There’s comfort in consistency, and few brands recognize that more than Heinz.

The image above shows an original Heinz Ketchup bottle from 1890, which doesn’t look all that different from the current Heinz designs.

If you have an iconic logo, it might be your best bet to stick with it. Classic designs offer feelings of safety and trust in consumers, resulting in brand loyalty and sales.

Of course, we can’t all be stewards of iconic brands. However, leaning into nostalgia through the design of your products is a powerful way to garner positive feelings toward your brand.

How to Nail Nostalgia

The key to nailing nostalgia is understanding what motivates your audiences, how they were raised, and where their deepest interests lie.

To do this, research or develop buyer personas that grew up in certain generations to learn what makes them think.

Editor’s Note: This blog post was originally published in September 2016, but was updated for comprehensiveness and freshness in February 2020.

The post 22 Examples of Nostalgia Marketing that Make Customers Feel Good appeared first on ProdSens.live.

X (formerly Twitter), with its 237.8 million daily active users, is a platform with a ton of potential for companies to increase awareness and build their brand personality. In recent years, big names like Netflix, Wendy’s, and Taco Bell have become X famous for their witty commentary and personable interactions with their followers.

But how can companies build their reputation as original, relatable, and dependable while still maintaining their unique voice? Social media has transformed the relationship between individuals and organizations — which is why the community management role is now so vital.

But what exactly is a community manager, anyway? Here, we’re going to explore what a community manager is and — if you’re applying or starting out in the role — how to be a great one.

Table of Contents

• What is a Community Manager?
• How to Become a Community Manager
• Community Manager Job Description
• Community Manager Job Responsibilities
• How to Be a Great Community Manager
• Community Manager Job Outlook
• Community Manager Org Chart

If you ask Krystal Wu, HubSpot’s Social Media Community Manager (@hellokrystalwu), the most critical part of the community manager role, she’ll say it’s simply “having one.”

The community manager position builds brand personality and consumer trust, which can ultimately lead to increased awareness and company performance — making it a critical component of your marketing strategy.

How to Become a Community Manager

Community managers come from a variety of backgrounds — anything from recruiting to journalism to engineering — because being successful in the role relies more on a set of skills than a degree.

First, it’s important for community managers to be knowledgeable about and across the business. Community managers should be able to rely on their experience with their organization to confidently address their audience or tap into internal resources to appropriately handle any issues that may arise.

Beyond a working understanding of the business, managers need to build productive, professional relationships both internally and externally in order to be more authentic and reliable brand ambassadors.

Community Manager Job Description

Image Source

What does it take to be a community manager? Here are some of the essential soft and hard skills you need:

1. Background in a support-related field such as customer success.
2. Strong soft skills such as communication both online and in-person.
3. Solid understanding of the organization, including product knowledge.
4. Ability to build and implement community-focused content strategies.
5. An understanding of PR-related activities.
6. Social media savvy to drive interest and engagement.
7. Event management and promotion skills, both online and in person.

In order to advocate for and preserve an organization’s brand, community managers must have incredibly strong soft skills. Above all, empathy, good listening skills, and adaptability are crucial to promoting favorable impressions of an organization.

Beyond interpersonal skills, the best community managers are actively researching trends and hot topics — by engaging with the latest industry developments, community managers are better able to connect with relevant audiences and provide them with the most updated resources and best practices.

Krystal Wu emphasized adaptability as an important characteristic for success in the role — since the position is still developing and community managers are often carving out their own job descriptions, being flexible in order to adjust to new trends and expectations will serve you in the long run.

Ultimately, great community managers understand that theirs is a customer service-based role. Actively listen to customers, address concerns, demonstrate an authentic social presence, and maintain productive partnerships with consumers. In short, be a good human being for your audience on behalf of your brand.

What does a community manager do?

Build and maintain a community.

Community managers are responsible for building and maintaining a brand’s community — both online and offline — and public perception.

The job requires engaging audiences on a variety of outlets, including online forums, social media platforms, Slack, in-person groups, and more, to reach all audiences where they are.

Since different digital spaces have unique cultures and best practices, community managers must be the consistent tone and voice of the brand.

As Krystal Wu points out, “When I speak, I am on the line for HubSpot. I’m not Krystal, I’m HubSpot.”

As a community manager, all your messaging, content, and crisis management across networks should be prompt, consistent with your brand, and empathetic to create a loyal and delighted community.

Manage public relations.

PR is another basic tenet of managing and extending a brand’s audience as community managers are engaging with all kinds of press — both positive and negative — generated about their companies.

How managers navigate legal issues or negative press can separate good community managers from great ones.

Missteps in this role can do real damage to a brand, so connecting with your organization’s legal, PR, or related teams can help mitigate problems and make sure that responses are coming out appropriately.

Create strategies.

Additionally, great community managers are constantly thinking about how they might experiment with new strategies.

For instance, Krystal Wu has learned that a tactic or test won’t run the first time, but you shouldn’t be discouraged — progress takes time. Community managers should think about the long term — the more you invest in an improved strategy, new direction, or the position itself, the more you’ll get out of it.

An easily forgotten resource is an external network of other community managers! Finding others in similar positions can be very helpful in crowdsourcing informed solutions or leaning on experienced others who’ve handled similar situations in the past.

Cultivate brand presence.

Building on the usefulness of a PR skill set, community managers must be vigilant of their organization’s brand presence and assess the potential consequences of their corporate communications.

Brand presence includes consistency of voice across platforms to keep the company on track in terms of target audience awareness and engagement.

Consumers should be able to recognize brand voice across pillars — whether they’re seeing a post on Instagram or a question on Quora.

Image Source

Track engagement.

Beyond direct interaction between the brand and its audience, community managers also record and report the engagement they see on at least a monthly basis.

Other teams that create content operate mostly on the backend, so it’s good to hear from the community manager who sees the response from consumers. They can help track whether followers are confused or what kinds of changes they are seeing within digital communities.

Krystal Wu says that she has developed an intuition about the psychology of HubSpot’s audience and can therefore evolve and tweak her outreach strategy in order to most effectively engage with target audiences.

Furthermore, community managers keep in mind their ideal audience, shaping content and communications to target the right audience rather than simply building a larger one.

Offer resilience.

When I asked Krystal if there were any challenges she faced that she hadn’t expected, she said she hadn’t anticipated the “emotional rollercoaster I deal with every day.”

The experience of engaging with a digital community can be volatile — one day might be full of positive and rewarding discussions, while the next might be hounded by complaints and disgruntled users.

It’s important that community managers maintain and control emotions in order to handle the various issues that arise.

Delight the community.

Image Source

Lastly, great community managers delight their community.

Krystal Wu makes sure to give positive encouragement to her audience through gift cards, little presents, or what she calls “delight boxes,” which are filled with a bunch of fun HubSpot swag items.

Even when things go wrong, great community managers address problems, resolve them, and send gifts to those involved.

By building positive relationships with the members of your community — whether they have a positive impression of your brand or a negative one — you’re building a reputable and trustworthy brand perception.

How to Be a Great Community Manager

Like any job that requires frequent, and sometimes intense, communication with customers and community members, being a great community manager requires passion and dedication.

By understanding the skills you need and nurturing that skill set over time, you can become a great community manager who understands exactly how to manage your brand’s presence online.

Set yourself goals and objectives.

First, it’s important to set out some clear goals and objectives.

Regardless of how far along in a career you are, good community managers know how to combine the empathy and compassion needed for the job while remaining organized and objective.

Objectives for a community manager could relate to comment response times, brand sentiment levels, or engagement rates, among other things.

In combination with customer marketing, community management also contributes towards revenue goals.

As Laurie Aquilante Faiola, vice president of marketing and community-led growth at HubSpot, points out: “If you think about your customers or that initial purchase as the end of your marketing and sales funnel, you’re leaving a whole bunch of opportunity on the table.”

Having objectives helps to prioritize your workload and strategic initiatives, and provides the ability to demonstrate the value of your role when you achieve them.

Work on your listening skills.

Data is important, but the human element of community management cannot be underestimated. Rather than generating run-of-the-mill responses to comments, try listening carefully to what your community members are saying.

This applies to positive, neutral, and negative comments. Positive sentiment should be matched with the same energy.

Help your community members get excited about their contributions and actively engage with the thoughts or opinions they’re sharing.

Meanwhile, negative comments should be met with empathy and compassion, and your responses should show that you truly understand and care about solving challenges for your community.

Foster inclusivity.

Image Source

There’s a lot that managers can do to ensure the community remains a safe and inclusive space for everyone.

All community members or contributors should be made aware that there are communication and behavior guidelines in place, including consequences for breaching these guidelines.

Whether it’s deleting comments or removing members from the space, it’s essential that these guidelines are enforced so that community members can feel safe and see that the brand is committed to their values.

Be quick off the mark.

Although community should be primarily driven by members rather than a brand, community managers should be a visible and frequent presence in discussions.

This includes timely responses to posts, comments, and reviews. With larger communities, it can be tricky to keep up. But, community managers should always strive for the fastest response times possible.

Provide value to foster discussions.

Content marketing is a huge aspect of community management. It gives you the opportunity to provide truly valuable resources to the community and can often be the spark that lights up a lively discussion.

“Consistent content creation is a cornerstone of community growth,” says Lucy Alexander, senior marketing manager at HubSpot. “To keep your community members returning regularly, they need to see new things each time they return.”

From interesting articles and industry news to scheduling events or webinars, community managers who build content marketing into their strategy can increase engagement levels and improve brand sentiment.

Community Manager Job Outlook

Brands are increasingly recognizing the importance of effective community management, whether it’s across social media channels or dedicated platforms and support hubs.

Community managers bring a human touch to a brand’s online presence — one that is appreciated by both consumers and organizations alike.

In fact, 83% of consumers on Facebook prefer brand personality. And, according to Sprout Social, 21% of consumers are more likely to buy from brands that are accessible via social media.

From the organizational side, the support for community management roles is similarly robust. According to a report published by the Bureau of Labor Statistics, employment of social and community managers is expected to grow by 12% between 2021 and 2031.

While the rapid advancement of AI tools is likely to bring a level of increased automation to community management, anyone on this career track should rest easy.

As a role that requires a diverse skill set (including an emphasis on soft skills), it’s likely to be a role that evolves alongside AI rather than one that will be completely replaced.

Community Manager Salary

• Average entry-level community manager salary: $41,748
• Average early-career community manager salary: $48,673
• Average mid-level community manager salary: $51,428
• Average manager-level salary: $60,413
• Average late-career community manager salary: $72,000

Community Manager Org Chart

Community management can sit within and across different functions and teams.

It all depends on the unique internal set-up of an organization. In general, however, community management sits within a dedicated community function or within the social media team.

Here’s an example of where community management commonly sits in a social media org chart:

Image Source

Beyond the org chart, the roles and responsibilities of a community manager can vary based on the team they sit in and their level of seniority within that team.

Associate-Level Community Manager

An associate-level community manager is an entry-level or junior position.

In this role, your responsibilities might include day-to-day tasks like responding to comments and requests, scheduling posts, and moderating community activity.

Team members with a junior-level customer service background can often move into this kind of role.

Mid-Level Community Manager

A mid-level community manager may take on all the tasks of an associate but with added responsibilities.

Common tasks at this level would also include creating or curating content, engaging in some strategy development, and analyzing and reporting on community metrics.

A mixture of hard and soft skills becomes more important at this level, as the manager will need copywriting, design, communication, and analytical skills.

Team Lead Community Manager

Next up in the org chart is typically the team lead level.

Overseeing mid-level and associate community managers, the community team lead is typically responsible for coordinating initiatives and strategies, setting and operationalizing community objectives, and guiding and supporting junior team members.

On top of other community-based skills, team members at this level also require leadership skills, project management knowledge, and strategic development capabilities.

Senior Management Level

At the senior management level within community management, responsibilities shift to a broader perspective.

Team members at this level need to understand organizational objectives and ensure the community strategy and tactics are fully aligned with these goals.

They’ll work closely on strategy development, budget management, and reporting on the team’s overall success and performance to the rest of the organization.

A robust knowledge of growth management, strategy, budget management, and stakeholder management is needed here.

Delight Your Community

Whether you’re just starting out in community management or looking to move up to the next level, take some time to analyze what you need to do to take your resume to the next level.

From hard skills like content creation and data analytics to crucial soft skills like communication, there is always something to learn in a role as diverse and exciting as community management.

And don’t forget to keep the end goal of your role in mind: to delight your community.

The post Community Managers: What They Do & How to Be a Great One appeared first on ProdSens.live.

Maestro is a mobile UI testing framework, very simple and effective. It’s an alternative to other frameworks like Appium, Espresso, UIAutomator or XCTest and is built on top of the knowledge from its predecessors.

Maestro doesn’t depend on any mobile framework, so you can run it in React Native apps, Native Android or iOS, Flutter, Ionic, Native Script, etc.
It doesn’t need a special app package too, you can use it even in a production/release build.

The best points of Maestro are:

• Simple setup.
• Declarative syntax.
• Fast iteration.
• Built-in tolerance delay and flakiness.

Installing

The Maestro documentation is complete and covers installing steps for the specific OS; Macos, Windows and Linux.

To install the Maestro CLI:

curl -Ls "https://get.maestro.mobile.dev" | bash

Don’t forget to add the Maestro to PATH variable.

Now we can check if the Maestro is successfully working:

maestro -v

Creating a sample Flow

Start your Android or iOS emulator/simulator, create a new folder for store our files, and open it in your favorite code editor:

For this sample, let’s write a simple flow to open the “Maps” app and search for a city, click to change the view from 2D to 3D, and change the map type to Satellite.

Open the Maps before write/run this test, maybe you will be asked to give some permissions. I don’t put this on the flow (but is possible) cause I want a clean example.

In your editor or terminal create a new file maps-flow.yml and let’s start to write the instructions.

In the first line, we got:

appId: com.apple.Maps

This appId is for iOS, if you are running android change it to com.google.android.apps.maps

This is the first line for every flow that we write, it tells Maestro what application we want to manipulate.
The first lines in the Maestro flow file are the configuration part, in fact, the configuration part is all the lines above the --- marker(we will use this in the next part).
We can set the configuration in the flow file (like we see right now) or in a root config.yml file in the folder.

On the properties, we can for example run flow before the current in case we need any setup steps or somelike that.
You can check all the properties here.

So using the name and appId properties our config part looks like this:

appId: com.apple.Maps
name: Maps Test
---

Here we use the marker --- to tell the Maestro that above is the config and below is your workflow.

Now let’s write the commands flow, before any command in the app we need to open the app, and for that, we use the launchApp command.

Command is the name of actions(the properties in the YML) that we got in Maestro.

appId: com.apple.Maps
name: Maps Test
---
  - launchApp

Note that have a space on the line of the command launchApp, this is how YML files work, we need indent to nesting. If it is not clear, you can read about YML before starts.

The launchApp command accepts other params too, you can launch another app, clear the state, give or not permissions, and more.
All the commands got a really good doc.

Now we can test the flow, in the terminal run:

maestro test maps-flow.yml

Sometimes it takes some time to install the maestro-drive in the device in the first run.

If all is right we will see the following output:

Let’s put one more command:

appId: com.apple.Maps
name: Maps Test
---
  - launchApp
  - tapOn: "Search Maps"

For Android emulator change the tapOn to “Search here”.

The tapOn command tells the Maestro to tap/touch/click on a view/component/element that matches with the selector that we pass. By default we can pass a string as an argument, this means that Maestro will look for a view that has this EXACLTY text. It’s very useful when you don’t know or the application doesn’t use things like test-id.
But like always we can pass any other option, in this case, other selectors.

In Maestro we got a lot of selectors, text, id, point (relative position in the screen), and more. All selectors are documented here.
Right now the text selector is the best option for us.

We tap on the search field, and putting some text is the next step, right?

appId: com.apple.Maps
name: Maps Test
---
  - launchApp
  - tapOn: "Search Maps"
  - inputText: "Salvador, Bahia, Brazil"

Now we type some text in the field, the inputText command has some random generators too, you can see it on the docs.
Now that we have typed the text let’s confirm the search and seed the result:

appId: com.apple.Maps # android = com.google.android.apps.maps 
name: Maps Test 
---
  - launchApp
  - tapOn: "Search Maps" # android = Search here
  - inputText: "Salvador, Bahia, Brazil"
  - pressKey: Enter

If we want we can swipe the info modal, just add and test:

  - swipe:
      start: 50%, 80%
      end: 50%, 10%

Using parameters

We are changing some values between OS, for iOS we using the appId “com.apple.Maps” and for Android “com.google.android.apps.maps”. In this case, we can turn this flow generic for each OS using parameters.

With parameters is possible to change the fixed values in the file for variables that will be read from the CLI arguments or from environment variables. Just a refactor in our file:

appId: ${APP}
name: Maps Test 
---
  - launchApp
  - tapOn: ${FIELD}
  - inputText: "Salvador, Bahia, Brazil"
  - pressKey: Enter
  - swipe:
      start: 50%, 80%
      end: 50%, 10%

Now appId is the value of APP and tapOn is FIELD, to set this value just run the Maestro CLI this way:

For Android test:

maestro test -e APP=com.google.android.apps.maps -e FIELD="Search here"  maps-flow.yaml

For iOS test:

maestro test -e APP=com.apple.Maps -e FIELD="Search Maps"  maps-flow.yaml

We can use parameters for multiple things, if you have a secret (like a password) and don’t want to store this in the YML file or if this value is dynamic and you need to get a new one every running for example.

Recording and report

You may need to get some evidence that all tests are passing, maybe a video or a report or both. Maestro has a built-in solution for the two cases.

Recording

Maestro records the mobile screen and creates a virtual window to show the test state and formats it to mp4, actually the rendering is done in the server and when the render is done you get a temporary URL to download the video.

To record the video is ultra simple, just change test to record in the CLI:

maestro record -e APP=com.google.android.apps.maps -e FIELD="Search here"  maps-flow.yaml

The output:

Report

Maestro can generate reports for test suites, in this case, we just got one test but we can generate the report too.
Like the record, the report is very simple too, just add a new argument in the CLI:

 maestro test --format junit -e APP=com.google.android.apps.maps -e FIELD="Search Here"  maps-flow.yaml

The --format junit will generate an xml file in the root with the status of the tests, actually the only supported format is Junit. You can change the output path using the --output argument.

Copy and past the xml content here

Conclusion

Maestro is an awesome framework and we use it a lot at my current company, GOK.

This is just the first post of a series about Maestro, I will bring real-world examples and advanced concepts in the next posts, so check my personal blog and stay updated with new posts!

The post Bridging the Gap Between Developers and QA Testers with Maestro appeared first on ProdSens.live.

The MERN stack is an acronym for the latest technologies in use today. In this guide we are going to learn about MERN Stack with examples

These technologies are:

• M: MongoDB : A NoSQL database that stores data in a JSON like format, this offers scalability and reliability
• E: ExpressJs: Modern web server that runs on top of NodeJs
• R: ReactJs: Modern front-end web library
• N: NodeJs: Server side Js runtime

MERN stack is very popular in today’s environment. One of the best benefits of MERN stack is that it is full stack JavaScript based.

1. Fullstack JavaScript:
2. Real Time Applications
3. Scalability
4. Community and Ecosystem
5. Cloud Compatibility
6. Market demand
7. API centric

Step 1: Prerequisites and setting up the app

For this tutorial you need to have NodeJs installed on your system. If you do not have the node installed, you can go to the website and download the latest version on node and install it on your system

Apart from this we assume that you have some knowledge of

1. JavaScript
2. Basic Knowledge of software development in general. What is back-end, what is front-end, what are databases etc
3. In this tutorial we are going to create a Chat application using the MERN stack

Step 2: Creating the BackEnd for our Chat Application

create a new directory on your computer and name it chat-app then cd in to the directory and type the npm init command to initialize a new project like

npm init chat-app

Installing Express Js

next let us install express js to our application. Express Js is a web server that is built on top of NodeJs. Express is a fast, minimalist and opinionated web server

type the below command in your terminal to install express and save it in your package.json file

npm install --save express

next open you index.js file and paste the below code there. If you don’t have a index.js file create one and open it in your favorite code editor, I recommend vscode

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

now run

node index.js

and go to localhost:3000 to see the hello world written over there

Now we have installed and started the ExpressJs server. Next we need to install the MongoDB database

Installing and Configuring MongoDB

For this tutorial we will be using the MongoDB atlas. It is a Database-as-a-service platform offering fully functional and infinitely scalable MongoDB database on the cloud

step 1: go to the mongodb atlas website and create a free account there, then create a free mongoDB instance

step 2: copy the connection string which looks something like

mongodb+srv://loop-07marbles:@cluster0.fdsfewc.mongodb.net/

and create a user and and strong password

Connecting to MongoDB server

next open your terminal and install the mongoose like so

npm install mongooose --save

edit your index.js code to look like this:

// Import required packages
const express = require('express');
const mongoose = require('mongoose');

// Initialize the Express application
const app = express();
const port = 3000; 

// In the MongoDB Atlas connection string. Replace '' with your actual password
const connectionString = 'mongodb+srv://loop-07marbles:2E6jU0FyFKEQ7SLC@cluster0.diruhf.mongodb.net/';

// Connect to MongoDB Atlas
mongoose.connect(connectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => {
  console.log('connection sucessful');
})
.catch(err => {
  console.error('Connection error', err);
});

// Define a simple route
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// Start the Express server
app.listen(port, () => {
  console.log(`Express server running at http://localhost:${port}`);
});

Now go to localhost:3000 and refresh the page. you will see something like this in your terminal

Connection successful

It means you have successfully connected to the MongoDB server

Creating a Schema for our database

Next we need to create a schema for our database.

create a new file in the root folder and name it chatSchema.js and write the following code in it

const mongoose = require('mongoose');

const chatSchema = new mongoose.Schema({
  username: String,
  message: String,
  timestamp: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('ChatMessage', chatSchema);

Here we are defining what fields we are going to save in our database and what are the types

As this is a demo application we are saving username, message and timestamp fields in our database

Integrating the database schema and installing socket.io

Next, let us integrate the schema that we just created into our index.js file and install socket.io that we will be using to send message to and fro from our client to our server

first let us install the socket.io, type the below code in your terminal

npm install socket.io --save

then open your index.js file and add the following code

// Import required packages
const express = require('express');
const mongoose = require('mongoose');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

// Initialize the Express application
const app = express();
app.use(cors());

const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});
const port = 3000; // You can use any port number

// MongoDB Atlas connection string. Replace '' with your actual password
const connectionString = 'mongodb+srv://loop-07marbles:2E6jU0FyFKEQ7SLC@cluster0.keeiub4.mongodb.net/';

// Connect to MongoDB Atlas
mongoose.connect(connectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => {
  console.log('MongoDB Atlas Connected');
})
.catch(err => {
  console.error('Connection error', err);
});

// Define a simple route
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// Initialize a simple API endpoint for fetching chat history
app.get('/chatHistory', async (req, res) => {
  const messages = await ChatMessage.find();
  res.json(messages);
});


// Handle socket events
io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('chat', (data) => {
    console.log('Message received:', data);
    io.emit('chat', data);
  });
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// Start the Express server
server.listen(port, () => {
  console.log(`Express server running at http://localhost:${port}`);
});

What are we doing here:

• 1. We have imported the http module that is built in with the nodejs
• 2. Initialize the socket.io and set it to listen to the server
• 3. added a new endpoint /chathistory that returns all the chat messages. It searches the database for chat messages and then returns them
• 4. Added the socket.io connections for new client connections, client disconnections and messages

What will happen when a chat messages hits the server

• When a chat messages hits the server using the socket.io, we are creating a ChatMessage document and saving the same using our imported schema to the database that is MongoDB atlas
• After this we are broadcasting the chat message to all the clients connected to the chat
• This is a group chat functionality, we can also make 1-1 chat but that is out of scope for this article

Creating the front end

We are going to be creating the front end app using React as we are developing the app using the MERN stack that is Mongo Express React and Node

To create a application using we are going to use the Vite front end tooling

Setting up the project

create a new directory and name it chat-app-frontend and then cd into it then type the below code

npm create vite@latest

Step 1: Scaffolding the application

This command scaffolds a new Vite application, then

• specify the name of the app and
• select react in the framework option and
• plain javascript in the language option

Step 2 : running the application

after this the Vite will scaffold a new application and then you just cd into the directory and run the below commands

npm install 
npm run dev

When you run the npm run dev command you will see this in the terminal

then you can open the localhost:5173 and see the application running

Installing Socket.io

Next, let us install Socket.io Client to handle real time communication in react

npm install socket.io-client

Once you have installed the socket.io in your application.

Step 2: Creating the chat UI

Create a new file called the chatComponent.js
in your /src folder and type the below code in it

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');  // Connect to your backend server

const ChatComponent = () => {
  const [message, setMessage] = useState('');
  const [chatHistory, setChatHistory] = useState([]);
  const [username, setUsername] = useState('User' + Math.floor(Math.random() * 1000));  // Generate a random username

  useEffect(() => {
    // Listener for 'chat' event
    socket.on('chat', (data) => {
    const updatedHistory = [...chatHistory, data];
      setChatHistory([...chatHistory, data]);
      console.log('Updated History:', updatedHistory);  
    });
  }, [chatHistory]);

  const sendMessage = () => {
    socket.emit('chat', { username, message });  // Use the random username
    setMessage('');
  };
  console.log('Current UI state:', chatHistory);  // Debug line
  return (
    <div>
      <div>
        {chatHistory.map((data, index) => (
          <div key={index}>
            <strong>{data.username}:</strong> {data.message}
          </div>
        ))}
      </div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default ChatComponent;

What are we doing here?

• We have set up the socket.io client to connect to our server that is running on the localhost 3000
• We have created two states one to keep track of the message being typed and another to save the chat history
• We have the useEffect hook that is listning to the incoming messages
• we have the sendMessage function that sends a message to the socket.io
• We have added the CORS library to enable communication with the browser as we are sending and receiving data from the same browser

Step 3: Adding the chatComponent.js to App.js

Now that we have created the chatComponent file we need to add it to our app.js file

Open the app.js file and delete the vite boilerplate the app.js should look something like this

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>

    </>
  )
}

export default App

then paste this code inside the brackets like so

import { useState } from 'react'
import ChatComponent from './ChatComponent';
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
    <div>
      <h1>Your Application</h1>
      <ChatComponent />
    </div>
    </>
  )
}

export default App

Now we have completed the chat application. we also added the code to randomise the chat username for every user that joins the chat

This is how the completed chat application looks like and the complete code.

ChatComponent.js

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');  // Connect to your backend server

const ChatComponent = () => {
  const [message, setMessage] = useState('');
  const [chatHistory, setChatHistory] = useState([]);
  const [username, setUsername] = useState('User' + Math.floor(Math.random() * 1000));  // Generate a random username

  useEffect(() => {
    // Listener for 'chat' event
    socket.on('chat', (data) => {
    const updatedHistory = [...chatHistory, data];
      setChatHistory([...chatHistory, data]);
      console.log('Updated History:', updatedHistory);  
    });
  }, [chatHistory]);

  const sendMessage = () => {
    socket.emit('chat', { username, message });  // Use the random username
    setMessage('');
  };
  console.log('Current UI state:', chatHistory);  // Debug line
  return (
    <div>
      <div>
        {chatHistory.map((data, index) => (
          <div key={index}>
            <strong>{data.username}:</strong> {data.message}
          </div>
        ))}
      </div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default ChatComponent;

App.js

import { useState } from 'react'
import ChatComponent from './ChatComponent';
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
    <div>
      <h1>Your Application</h1>
      <ChatComponent />
    </div>
    </>
  )
}

export default App

index.js

// Import required packages
const express = require('express');
const mongoose = require('mongoose');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

// Initialize the Express application
const app = express();
app.use(cors());

const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});
const port = 3000; // You can use any port number

// MongoDB Atlas connection string. Replace '' with your actual password
const connectionString = 'mongodb+srv://loop-07marbles:324nfwkjrbwjkr@cluster0.sdfser.mongodb.net/';

// Connect to MongoDB Atlas
mongoose.connect(connectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => {
  console.log('MongoDB Atlas Connected');
})
.catch(err => {
  console.error('Connection error', err);
});

// Define a simple route
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// Initialize a simple API endpoint for fetching chat history
app.get('/chatHistory', async (req, res) => {
  const messages = await ChatMessage.find();
  res.json(messages);
});


// Handle socket events
io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('chat', (data) => {
    console.log('Message received:', data);
    io.emit('chat', data);
  });
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// Start the Express server
server.listen(port, () => {
  console.log(`Express server running at http://localhost:${port}`);
});

Conclusion

In this tutorial we learned that how to use the MERN stack to create a chat application

This article is brought to you by DeadSimpleChat. I hope you liked the article. Thank you for reading

The post The MERN Stack Tutorial: The complete guide with examples appeared first on ProdSens.live.

This article is based on Tamara’s insightful interview on the Meet the Masters podcast.

As a product marketer, you’re uniquely placed to drive growth at your company, but where to begin? Should you focus on acquiring new customers? Or perhaps retaining existing customers? 

Believe it or not, monetization can have a far greater impact than acquisition or retention, so we should all be laser-focused on our pricing strategies, yet hardly anyone is.

This presents a huge opportunity for product marketers to raise their hands and step up. It’s a chance to own an activity that will have a massive impact on the business and customers. Plus, it’s really fun! (Seriously, I love to nerd out on pricing!)

So, I’m here to share how you can tackle pricing and become a trusted advisor on an exciting growth lever. Here’s what we’ll cover:

• Why product marketers should own pricing strategy
• How to take ownership of pricing in your organization
• Key pricing strategies like value-based and competitive pricing
• Top tips for implementing a new pricing approach
• How to measure the success of your pricing efforts
• Gauging customer reaction to price increases

Let’s jump in!

Why product marketers should own pricing

As a product marketer, it’s your job to understand the data – who are your customers, how do they use your products, how do they buy, and why do they churn? As you do this research, you’ll uncover all kinds of insights. If one of those insights is that optimizing pricing would lead to better business results or customer impacts, that’s a great point to bring forward. 

Let’s say you’re responsible for the adoption of a feature available only to customers on a higher-tier plan, and maybe you’re struggling to get adoption – that could be because most customers don’t even have access to that feature since no one is upgrading their package. So, you start investigating and quickly realize that it’s time to revisit your pricing strategy. 

In this pretty common scenario, it wasn’t originally your job to do pricing, but you uncovered an insight that you could share with your leadership team as a way to jumpstart a rehaul of your pricing strategy.

How product marketers can get a seat at the pricing table

Here I’ll explain how as a PMM you can get yourself a seat at the pricing table through the areas you can influence in your organization and a series of steps to success.

Product Marketing AllianceAxel Kirstetter

How to take ownership of your organization’s pricing strategy 

Whether you’re a SaaS company or you sell physical products, one of the most unique things about pricing is that no one really wants to own it. Everyone has an opinion, but no one wants to raise their hand and be the one accountable for optimizing it.

There’s all this fear of pricing because it’s hard. If you’ve read any studies on pricing, you know there’s no one right way to do it and, more often than not, we get it wrong. Even once you’ve launched a new pricing strategy, you need to expect continuous optimization – you won’t nail it right out of the gate. That can feel like a lot of pressure. 

Now, I don’t want to minimize the fear of pricing, but I will say that it’s often unfounded. People who’ve taken the jump and leaned into pricing – whether owning it for a new feature, running a promotion, or doing a complete overhaul – quickly gain competence. 

It’s all about having an experimental mindset and making the most of all the frameworks out there. The more you think about it that way, the more you’re released from the fear of getting it right immediately.

So, with all that said, just having the conversation – whether it’s with the executive team, leadership, or your own product marketing team – and volunteering to take on pricing is the first step. Raise your hand and say “There’s an opportunity to improve our pricing. I think it’s broken, and here’s some data to back that up.” That’s the best place to start because rarely will someone hand you a pricing project.

Then, once you’re given the go-ahead to get stuck in, the number one thing you need to do for a pricing project is form a pricing committee. You can’t do it alone. You need finance to support your business case. You need insights from sales folks who talk to customers daily and can test what will land. You need the product team to ensure that you can build or gate features in the way you have in mind.

Four key pricing strategies

There are a lot of different pricing strategies out there, but for today, we’ll focus on the ones I get asked about most often:

• Value-based pricing,
• Usage-based pricing,
• Competitor-based pricing, and
• Promotions and discounts.

1. Value-based pricing 

Value-based pricing anchors the price a customer pays around the value they get from your product. The opposite of value-based pricing would be feature differentiation with pricing tiers based only on what features you unlock at each level.

To implement value-based pricing, you need to understand the metric that links to customer value. In other words, how are customers using your product to drive value? 

Let me share an example from Unbounce, where I used to work. We used to price based on the number of landing pages. However, we found that this metric had no link to the value customers got. Someone could have one high-traffic page or 100 low-traffic ones, so the number of pages wasn’t an effective value metric – the right value metric was conversions. 

Customers felt that they’d been successful with Unbounce if they’d driven more conversions using the product. So, we set pricing tiers based on the number of conversions – up to 500 conversions in one tier, up to 1000 conversions in the next tier, and so on. We still had some feature differentiation to increase usage at higher tiers, but the core value metric was conversions. That’s value-based pricing.

2. Usage-based pricing

Value-based pricing and usage-based pricing go hand in hand. In fact, I tend to think of usage-based pricing as a type of value-based pricing model.

Usage-based pricing is a double click into the value metric we were looking at a moment ago. Unlike Unbounce’s value-based pricing, which gave a range of conversions per tier, usage-based pricing charges only for actual usage – no ranges.

MailChimp was an early of this strategy. They charged per email sent and per contact. Phone bills also do this – remember paying per text or minute? That’s usage-based pricing. However, you can’t charge per usage without first identifying the right value metric. That’s why I see usage-based as a subtype of value-based pricing.

3. Competitor-based pricing 

The ethics of competitive intelligence (CI) is an endlessly fascinating topic and one of the subsections of CI is competitive pricing, which can lead you into some ethical dilemmas around price fixing and collusion. Let’s explore what you can do to navigate these issues.

First up, when you’re looking into joining a product marketing team, it’s important to understand a company’s values upfront – during the hiring process. If leadership thinks price fixing or colluding with competitors is okay, that’s probably not the kind of company you want to work for. Find an employer that aligns with your morals, and take time in interviews to assess that.

Personally, I haven’t experienced this dilemma. Most companies I’ve worked for serve SMBs, solopreneurs, or consumers in open markets, so our pricing information is public. We’ve been aware of competitors’ pricing, but our transparency around pricing meant the public could always hold us accountable. Ultimately, it all comes down to doing the right thing for customers.

In enterprise sales-led models where you have to speak to the sales team to get a price, it can be a little different. Everything is behind closed doors, so it’s perfectly possible to secretly coordinate with competitors to raise prices because you think willingness to pay is increasing. However, this is not only super unethical, it also fails to put the customer first.

Remember that while you have competitors, you also offer a unique solution. There’s a reason why your customers choose you over competitors. It’s worth your time to understand what that is and how much customers will pay for your differentiation. 

You may only offer one or two features that are different from your competitors, but maybe those features are so valuable to customers that they allow you to charge three times more. 

In short, when it comes to competitive pricing, I’d recommend using your competitors as a guardrail to understand market expectations but don’t spend too much time thinking about it – focus on your customers instead.

4. Promotions and discounts 

There are two vital considerations whenever you’re introducing a promotion or discount:

1. Making sure that profitability remains strong
2. Ensuring that the perception of value doesn’t take a hit

Let’s start with the point about profitability. How this works is going to depend on your industry. If you’re in physical goods, then you’re probably going to have a lower profit margin than if you’re selling a SaaS product, for example, so you need to work with your finance team to figure out the scope of the promotions you can apply. It might be that you can’t go over 10% without losing money, for instance. 

On the flip side, perhaps by giving a discount, you’re decreasing your customer acquisition cost, and you can factor those savings into the size of the discount you decide to apply. Either way, there are important financial calculations to be made.

In SaaS, as profit margins are often 70-80% or more, profitability will rarely take a hit because of a short-term promotion. But that’s where the perception of value is vital. It damages a brand and product to always run promotions. Customers come to expect deals and end up thinking they’re being overcharged if they have to pay full price.

With all that said, it is possible to use discounts intelligently, and there’s a seasonality that makes sense for promotions – many brands do them for Black Friday, for example. I also love the trend of brands not doing Black Friday promos and taking a stance against consumerism. I think they’ll see some benefits from being different.

Another idea is cohort-based promos. Rather than offering a blanket discount, identify specific customer groups behaving in a way that suggests a promo would help move them forward. 

Maybe you have thousands of 30-day trial users each month, and some are engaged throughout but don’t convert. They might need more time. That’s a great group to offer a discount or promo via email. That way, the promotion isn’t available to everyone, it isn’t public knowledge, and you don’t damage the perception of your product’s value or take a huge profit hit. It’s a very strategic promotion.

Price skimming: everything you need to know

In this article, we focus on the price skimming strategy and help you decide whether this is an appropriate strategy for your company to implement.

Product Marketing AllianceCharley Gale

Top tips for implementing a new pricing strategy

So, we’ve looked at a few different pricing strategies. But once you’ve figured out the right one for your organization, how do you actually implement it and introduce a new price to the market? Let’s dive into a few tips.

1. Experiment early

One thing I always recommend is taking time to experiment and test things out as you’re building your strategy. You don’t want to just do some research, discover a new value metric, build out the pricing packages and product changes, and then launch it all only to discover flaws once it’s public. Even if you do everything right, sometimes when you put something out there, it just doesn’t land as expected.

So, as part of your implementation strategy, start experimenting early – don’t wait until you’ve rolled out your new pricing to all of your customers. That could mean testing with a small cohort of existing customers or putting up a little pricing study on your site and driving a small amount of traffic to it – it depends on what exactly you’re trying to test. Just get those experiments in before the full launch.

2. Treat your price launch like a product launch

When it’s time for the price launch, run it like a product launch and build a cross-functional launch team – this might be different than the core pricing committee, though there’ll likely be some overlap. You’ll need to include someone from each function, have the value prop and messaging for the new pricing dialed in, and determine how to roll it out to different customer segments.

There’s also a lot of customer management that people don’t think about. You’ll need to decide if existing customers will stay on their current plans or move to new ones, if there will be a transition period, and how much churn you’re willing to take on. 

Your cross-functional pricing launch team is going to help you figure all this out and implement your new strategy as seamlessly as possible. 

3. Be ready to optimize

According to a study from ProfitWell, companies that update their pricing at least every six months see nearly double the average revenue per user of those that update once a year or less. That’s huge! 

However, despite the enormous impact you can drive when you make pricing a priority, the same study found that the average company spends less than 10 hours per year on pricing. Crazy, right? Pricing isn’t a set-it-and-forget-it kind of deal. 

So, if you decide to prioritize pricing (and you should!), go in knowing that you’ll need to keep fine-tuning your strategy, and build in a timeline for ongoing optimization. To this end, I recommend making a monetization roadmap, like you would for a product. This should incorporate implementation cycles to protect your business against any volatility that might arise as a result of pricing changes.

Putting A Tag On It: The Product Pricing Playbook is here!

Download our pricing playbook to improve your pricing strategy for happier customers, increased sales and profits, and a positive brand image.

Product Marketing AllianceCharley Gale

How to measure the success of your pricing strategy

If you’re going to commit to pricing work, you should be continuously reviewing metrics to see if it’s working, just like you would with any other business initiative.

How you measure success depends on your goals. For example, maybe you’ve been having trouble with ascension – getting people to upgrade their plans – and you want to address that with your pricing strategy. In that case, you’ll want to track your ascension rates over the next three to six months. Are new customers ascending the plan in the time that you expect them to? If not, go back and optimize.

Or, maybe you introduced a lower price point to tap a new market. Check if you’re getting the expected market share, how profitable those customers are, and if you’re retaining them.

How long you need to keep a close eye on these metrics will vary based on your objectives – impact on churn will take longer to assess than any changes to the conversion rate, for example – but I’d advise closely monitoring impact for at least the first three months post-launch.

If after six months, things appear to have stabilized and your key metrics are trending up, you can move into the maintenance phase. Do some ongoing experiments if you want to optimize further. But if you don’t have time for that, it’s still a good idea to check in periodically. Here are a few events that might signal that it’s a good time to refresh your pricing once more:

• A new competitor enters the scene 
• An existing competitor significantly changes their pricing
• Your business decides to move into a new market
• A merger or acquisition reshapes your business.

Outside of these kinds of major events, reviewing your pricing quarterly will keep you ahead of most competitors. 

How to gauge the impact of price increases on customer loyalty

No one likes higher prices. Think about how we feel as consumers when Netflix raises its rates – at first, it’s annoying, but then you think, well they’re a business, and finally you evaluate if it still feels like a fair exchange of value.

I’m not expecting customers to like the change, but I want the value to resonate with them and I want them to feel like the exchange is still fair. With that in mind, there are a few key indicators that I look at.

The first is churn. I always closely track if pricing changes impact churn rates for the affected customer cohorts after the increase. A noticeable spike would tell me we need to take a step back, talk to some customers, and figure out where we miscalculated so we can make adjustments.

The second is customer sentiment, which is harder to qualitatively assess. I try to be really transparent – I like to publish blog posts about the strategy and send emails clearly explaining the ‘why’ behind increases. Then I’ll look at the commentary we get back – what are people saying in comments or on social media?

The third thing I keep an eye on is support ticket volume – are we getting a noticeable increase in complaints? If we see indications that customers no longer feel they’re getting fair value for what they pay, that’s a sign that we might need to adjust prices once more.

So, those are the three areas I’d monitor: churn, customer sentiment, and support tickets.

What is prestige product pricing?

This article explores topics around prestige product pricing including what it is, why it’s important for PMMs, and how to use it successfully.

Product Marketing AllianceCharley Gale

Key takeaways

Pricing may seem complex, but optimizing your strategy can have an outsized impact on business growth. As you build expertise in this undervalued area, keep these lessons in mind:

Focus on the value metric that drives customer outcomes – not just features. That way, you’ll create pricing that resonates.

Form a cross-functional pricing committee and launch team to align on strategy. More minds and expertise give better results.

Experiment early and often when testing new pricing approaches. Don’t wait until the full launch to find flaws.

Continuously monitor pricing KPIs to ensure your model optimizes monetization over time. Be ready to tweak your approach based on data.

Periodically reevaluate pricing strategy when markets or business models shift. Don’t let your approach get stale.

Use discounts and promotions strategically to incentivize desired customer behaviors, but don’t erode long-term value perception.

If you’re raising prices, monitor churn and sentiment closely to ensure customers still feel the value exchange is fair.

Competitor pricing provides helpful context, but focus on delivering unique value vs. chasing others.

Have fun experimenting with pricing! It’s an impactful way to drive growth and learning.

Hungry for more of Tamara’s pricing insights?

Take your learning to the next level with Pricing: Certified.

This course includes 5 hours of video lessons, 7 templates, and a certification to show your expertise. You’ll gain indispensable knowledge on how to understand pricing strategies, conduct pricing analysis, vary approaches by industry, segment pricing, and apply discounts successfully.

Enroll now and start unlocking major impact, or – better yet – sign up for a Pro+ Membership and get access to all PMA courses, our mentor program, and much, much more!

The post Unlock growth with these pricing power plays appeared first on ProdSens.live.