Author Archives: stephenkimster@gmail.com

5 Qualities in Great Product Managers

1. Customer empathy

The biggest question I always ask when working on something new is, “who is the customer for this product?” Know everything about your customers, obsessively. If you can map out how a customer spends a typical workday, then you can start to think about their problems from their perspective, rather than from your product’s perspective. In addition to the qualitative, know the quantitative metrics as well. As a product manager, you need to understand the data about how users are interacting with your product, and what types of interactions are good for customer health.

2. Resourcefulness

As a product manager, everything begins and ends with you. Beyond the typical skills you might expect such as UX design, knowledge around specific technologies, data analysis, and general business acumen, you often need to go beyond your comfort level to get things done. That might mean helping to sell your product alongside salespeople. That might mean reading 100 pages of third-party API documentation to find that one endpoint that could make or break a feature. It might mean chasing down that one beta customer for the perfect testimonial on your website. Do whatever it takes.

3. Humility

Most product managers do not have direct reports, and for good reason. Your job is to help move an organization’s product forward using your best judgment, and you cannot do it alone. You must earn the trust and respect of others. An arrogant product manager can be absolutely toxic in an organization. When critiquing others’ ideas, assume good intent. When you fail, admit it openly and move on quickly to redeem yourself. Acknowledge the help you receive from others and make them feel rewarded. Never give the impression that the product will move in a certain direction only “because you said so”.

4. Fortitude

Part of the challenge of being a product manager is staying humble while staying true to a product vision at the same time. Although you want to be front and center whenever someone has a new idea, you also have to say “no” to a lot of people. Do not compromise all of the research and knowledge you have amassed because something new and shiny comes along. Learn how to stay the course and bring people along with you even if they disagree.

5. Passion

People will often rely on you for the energy required to take a bold stance when introducing something new to the market. You need to be a selling to the salespeople, instilling the belief in them that you have done your homework. If you are not passionate and excited about your product, assume that no one will feel that way.

I hope that helps — comments are welcome!

jQuery Slideshow Built in Minutes

The HTML

I went for a super simple setup where I have three buttons at the top that serve as selectors for the different images that the user can view in the slideshow.

<div class="rowOfCircles">
    <div class="circle circle1 selectedCircle"></div>
    <div class="circle circle2"></div>
    <div class="circle circle3"></div>
</div>
<div class="image image1"></div>
<div class="image image2"></div>
<div class="image image3"></div>

It is meant to look like this image below, where the black dot denotes selection among the three possible images in the slideshow:

The CSS

The CSS for the sake of this example is drop-dead simple. I’m drawing some circles with CSS and just placing them on top of the slideshow:

.rowOfCircles {
    margin: 0 auto;
    width: 60px;
}
.circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    float: left;
    background: #ccc;
    margin-left: 10px
}
.selectedCircle {
    background: #000;
}
.image {
    width: 90%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #535353;
    margin-top: 15px;
    float: left;
}
.image1 {
    background: #ccc;
}
.image2 {
    background: #FF0000;
}
.image3 {
    background: #3C8C3E;
}

The JavaScript for the jQuery Slideshow

OK, now let’s get to the fun stuff. There were a few key components to the JS:

Setup: So there are three images total in the jQuery Slideshow. The first thing I do on document ready is that I hide the second and third images.
```
$('.image2, .image3').hide();
```

Display selection: I had to create a click event for the circle-shaped markers, to clearly denote which one is selected and how the image switching works. There’s some jQuery UI fanciness here you might want to read about in the official docs: http://api.jqueryui.com/slide-effect/


$('.circle').click(function(){
    $('.circle').removeClass('selectedCircle');
    $(this).addClass('selectedCircle');
    if ($(this).hasClass('circle1')) {
      $('.image').hide('slide', {direction: 'left'}, 500);
      $('.image1').delay(500).show('slide', {direction: 'right'}, 500);
    }
    else if ($(this).hasClass('circle2')) {
      $('.image').hide('slide', {direction: 'left'}, 500);                
      $('.image2').delay(500).show('slide', {direction: 'right'}, 500);
    }
    else {
      $('.image').hide('slide', {direction: 'left'}, 500);
      $('.image3').delay(500).show('slide', {direction: 'right'}, 500); 
    }
});

Automatic scroll: The feather in the cap here is a setTimeout function that calls back to itself at the end, so that it continues to rotate through the images interminably. Notice how I call changeImage() right before the end of the setTimeout.


function changeImage() {
    setTimeout(function () {
        if ($('.selectedCircle').next().length < 1) {
            $('.circle1').click();       
        }
	else {
	    $('.selectedCircle').next().click();   
        }
        changeImage();
	}, 3000)
}
changeImage();

Here's the demo again if you're interested: http://codepen.io/stephenkim/pen/pCGwE

Enjoy! Please comment and share!

CSS Tabs Shaped like Trapezoids

Stephen Kim

Product Development