Hackernoon logoEngaging Product Design by@pekanov

Engaging Product Design

Author profile picture

@pekanovPavel Pekanov

A Creative Director that writes about stuff.

Book a call
with @pekanov

Building the Productย Story

About theย author

Pavel Pekanov is a seasoned Creative Director, Art Director and Designer (and a Developer, but tss-s tell no one). Started his creative career in 2004, followed by the launch of his own Creative Agency in 2008. Ranked a top earning freelancer on Upwork (former Elance) in 2013. Launched a few startups of his own. Featured on CSS Design Awards. Former Creative Director at QUOINE. Pavel has been helping startups, founders and well run businesses with Branding, Product Design, UI/UX and Brand Experience for 14+ย years.
Personal website: pekanov.com

What Makes Theย Product?

Letโ€™s start with an eye-openingโ€Šโ€”โ€Šyou may not even have a Product at your hands. You may have a service, an app, a website. Having a Product is different from just having aย website.

Value + Team + UX + Community =ย Product.

Iโ€™ve got a list based on a few quite expensive mistakes, my extensive design and startup practice (co-founder/founder).

[โœ“] Value proposition. Products bringย value.

[โœ“] Team with a common goal. There has to be people besides just you alone believing in yourย Product.

[โœ“] User experience. Interacting with a Product is meaningful.

[โœ“] Community. There has to be people besides your friends and family aligning with yourย Product.

Your Product must have all that inย check.

Picking The Rightย Time

We improve Products gradually along their lifecycles. While we do, we come across two decisive milestones that change the perspective, direction and expectations.

1. Realizing the marketย fit

Make or break for an MVP. Youโ€™re still testing concepts, but youโ€™ve already discovered the selling feature. Your Product is en route to building a strong relationship with early adopters.

Focus: Product.

2. Building a relationship

A contrasting milestone as it takes months-years to get there. Youโ€™ve got a technically solid Product disconnected from the community. It lacks the Emotional Intelligence. Your company is set on course of molding the Product with companyย vision.

Focus: Company.

Some Products shape themselves with the big picture, the mission and the company vision right from the start. The result is exceptional just like the amount of time and effort required to ship them. Very few businesses can play the game thatย long.

The difference between these two isnโ€™t a subtle one. So is the focus and the expectations.

Focus V Expectations

Iโ€™ve seen to a lot of companies trying to channel their vision before even having a viable Product and realizing the market fit. Hell, I did it myself with my own projects! This may not be a mistake per se, but itโ€™s a drain on creative, emotional and financial resources.

Weโ€™re still at a point when no one cares, literally. Here are we, here are they and here is a cold-hearted bottomless pit betweenย us.

No market fit equals having no community. Without a Product community, youโ€™re channeling your vision into theย abyss.

Iโ€™ve also seen to a lot of teams improving their tech passionately and tirelessly. They refactor the code, resolve bottlenecks, improve the platform performance, introduce the new database architecture, et cetera. There is little to no regard for their Product brand. Thatโ€™s a bigย no-no.

Your techies may score a miraculous win (case of Nginx). That may happen with luck and years of dedication. Are you willing to bet on luck and spend years on something that may not turn out thatย good?

Iโ€™m telling you forget the tech and focus on yourย brand.

Iโ€™ve been on both sides of the coin, and what I came to appreciate is the moment the Product starts getting momentum. Thatโ€™s when itโ€™s the right time to raise the bar and come to understand one hard simple truthโ€Šโ€”โ€Šthe tech isnโ€™t theย king.

Yes, your tech got you there. But circumstances change, the landscape evolves and your engineers arenโ€™t omnipotent. Your Product may be better off with less focus on the techย itself.

Iโ€™m saying that having an engineer/developer background myself. I enjoyed improving APIs from 10ms to 1ms latency even though no one would ever notice that kind of improvement. I understand itโ€™s cool and itโ€™s kind of an internal competition and such. Letโ€™s leave it at thatโ€Šโ€”โ€Šimproving tech is a race against yourself. Take a step back,ย instead.

Let me repeat myselfโ€Šโ€”โ€Šthe tech isnโ€™t the king. The tech isnโ€™t the unstoppable force that drives the Product further, neither it should be. Itโ€™s not even a singleย force.

The โ€œdriving forceโ€ are the personas behind the Product (the foundation team), company vision and where the CEO stands. Itโ€™s time to work with that once your Product is recognized.

Unless.

Unless you launch rockets to space. In this case, forget everything you read so far and please God focus on theย tech.

Youโ€™re building a Product for the people. What do people expect? Better experiences.

Product Re-Evaluation

Over the past few years Iโ€™ve done quite a number of re-designs. Iโ€™ve been at various Product stages and Iโ€™m a big fan of re-designs. I considered myself a seasoned pro able to deliver the best design to any kind of Product outย there.

The work I did all those years now feels sketchy atย best.

Where Iโ€™m heading withย that?

I believe company vision and values, mission statement, people behind the team, community voiceโ€Šโ€”โ€Šall that should come together to shape a better Product and then that could be called a true re-design. Something to be proudย of.

And the data is there tooโ€Šโ€”โ€Šfunnels, bounce rates, user journeys click-throughs, LTVsโ€Šโ€”โ€Šthe data we donโ€™t have at the beginning. It helps massively in developing a better UX, UI, building the next level Product Experience, and simply doing better designย overall.

Itโ€™s funny thinking analytics improves the design, until it does. Having reliable data helps you discover (or interpret reliably):

  • Bounces. The number one metrics to see whether somethingโ€™s broken beyond repair. A bounce rate high enough can deliver a punch to the gut to any business.
  • Broken Task Flows. A broken Task Flow means your users donโ€™t get to the goal at all. For e.g. they canโ€™t reach the final Sign Up step, therefore they canโ€™t create an account. Terrible.
  • Broken User Flows. Users lose their way, never complete the flow, jump off the flow, you name it. In other words, there is aย bump.
  • Broken User Journey. Users are getting somewhere not the way itโ€™s designed. In other words, a design bugโ€Šโ€”โ€Šyour Product is being used not the way it was intended. Can be a case of โ€œnot a bug, itโ€™s a featureโ€, thoughย rarely.

Understanding Theย Reason

Why re-design something thatโ€™s not broken? You see the room for improvement, you act upon it. If your Product can become better, you make it happen. Itโ€™s thatย simple.

  1. Pivot. Your Product selling feature is something else.
  2. Conversions. Your Product isnโ€™t converting people.
  3. Impact. Your Product isย boring.
  4. Story. Your Product isย sterile.

Building Theย Story

You start the re-design with 1) defining the reason for it, 2) evaluating the Product metrics and 3) getting an understanding of where the Product is headedย after.

Those are the prerequisites for the re-design. The following are the four high-level pillars that are the foundation for a great re-design.

1. Having a greatย logotype

Your Product must have a great logo. Great logos look good, they tell a story, they stand out. They make people curious about yourย Product.

Your Product story starts with the logo and so does your company vision. A good logo channels the deepest message you have without you having to explainย it.

You should be after the logo with great marketing potential and the ability to deliver a powerful opening on itsย own.

The most popular chart types visualized in the logo animation. The emphasis is put on the Product, features and services.

Charts creation platform logotype tells a story of creating a chart. Simple, straight-forward, enjoyable to lookย at.

The logotype is supported by various animations that can be used on the website (or in app) to further solidify the Product Experience.

Here is a very different storytelling example:

Flying kite, a couple of seagulls and running into the sunset to chase the dream. The emphasis is put on the Product vision, company mission and Product expectations.

Game development and publishing studio delivers their company vision thru a mesmerizing logotype animation. Itโ€™s a storytelling within a storytelling, a dream inside aย dream.

The opening story is a story of a girl chasing her kite that transforms into seagulls. It serves as a metaphor for โ€œchasingย dreamsโ€.

The closing story is told at the final framesโ€Šโ€”โ€Šseagulls leaving the box. The โ€œthinking outside the boxโ€ message is delivered with them flying out of the box outline while the girl keeps an eye contact on [a former]ย kite.

Logotypes are the perfect take-off points for Product storytelling. We use the logos to deliver all kinds of messages:

  • Product vision. Weโ€™re doing this to save Earth from space-pirates.
  • Company vision and mission. Making Earth a saferย planet.
  • Expectations. Kids-friendly, easy to use, a single function.
  • Innovation. Flat, thin, red. Color options available.
  • Introduction to services. You press one button and allโ€™sย gone.
  • Introduction to company values. A guarded space is a secureย space.
  • Introduction to the Product. A multi-purpose pocketย device.
Your logotype is your story. The very best logotypes out there drive the storytelling for entire companies, let alone the Products themselves.

2. First impression

The first impression is naturally established via a Product landing page, or a company website and itโ€™s usually the former where you meet your future customers.

Meeting your customers starts with a โ€œhiโ€ and then following up with a proposition, a Call Toย Action.

A few proven CTAs that youโ€™ll most likely end upย using:

  • Sign Up to start using theย Product.
  • Try a Productย demo.
  • Subscribe to get early access to theย Product.

Itโ€™s worth mentioning that the very last CTA is mostly used when testing concepts, i.e. when you donโ€™t have any Product at all. Keep that in mind and donโ€™t abuse your customerโ€™s trust.

Once youโ€™ve decided on the CTA youโ€™re going to use, you should decide on the approach for your landing page. What are you going to show there? Your Product, your team, or both? Does it feel like a friendly welcome, or a salesย pitch?

The above the fold for online charting platform. It doesnโ€™t show the Product or the team, but instead it builds up the Product connection with showing essential charts icons. Clean Product message and a visible CTA to try the actual Product right away. Everything about the Product, pricing plans, features, etcโ€Šโ€”โ€Šthat goes below theย fold.
A very different example, a mobile game. The landing page builds a connection with the Product by showing the actual game, game art and concept. The right-hand visual is fully animated, using the very animations one would see in the game. This one-pager delivers the end-product feel.
The holy grail of landing pages has always been about showing theย Product.

However, we now enter the age of Human Oriented design. Human Oriented design is all about building relationship with the Product, building a unique Company Experience and finding the right emotional connection with the customers.

Showing the Product early may not be as effective as youย think.

People are less excited about the Products in general, as they are about the change in their life a particular Product canย bring.

3. Sell at Signย Up

This is one of my most favorite pillars as itโ€™s the most overlooked one.

Do you tease your Product at Sign Up flow? Do you show your team members? Does your CEO provide a heartfelt welcomeย message?

Usually, a Sign Up page is a simple form that gets your name, e-mail, password, or you can bypass it altogether and Sign Up with Facebook or Twitter. The only purpose a Sign Up flow serves is getting your credentials.

This definitely doesnโ€™t sound like youโ€™re using this flowโ€™s full potential.

Imagine you saw a Product so promising that you discovered an urge to create your account. Would you like to learn more about the Product? Would you like to learn more about the people behindย it?

Would you like to know and see how great that Product turned out to be for others just likeย you?

Of course, you would! And thatโ€™s the moment when you create the connection between your customers and your Product values. Itโ€™s emotional, itโ€™s strong. Thatโ€™s the point in time when your customers get connected and hooked up on the Company vision andย mission.

Absolutely stunning InVisionโ€™s approach to delivering their existing Customers Stories and hooking you up early with their Product. Itโ€™s all about building trust and positive experience, and they nailedย it.
Core Product video tour at Sign Up page. Keeping the tour on-point and fast-paced ensures the customer stays here and isnโ€™t too distracted from filling in the actual Sign Up form. Paid features are discovered early onโ€Šโ€”โ€Ša transparent, healthy and trustworthy Product relationship.

Selling at Sign Up doesnโ€™t mean to be the actual โ€œsaleโ€. Sell differently. Sell your vision, sell the big picture. Sometimes it takes that little to convert a customer into a Productย fan.

4. Alwaysย On-Board

All right, this one kind of goes along my other pointโ€Šโ€”โ€Ša good Product needs explanations. Actually, the better the Product is the more explaining it would probablyย need.

I mean, a great story behind the Product, lots of useful features, various inter-connected servicesโ€Šโ€”โ€Šthat should be explained somehow, right? Unless youโ€™re offering a day job of digging through all that to your potential customers.

By explanations I donโ€™t mean the abundant FAQs, tutorials, tours and such. Instead, you should always engage the customers. Engagement is playful, engagement is fun and it just feels more natural (like a human conversation).

So, whatโ€™s up with On-Boarding? It should be a quick game-like experience, a few steps to complete in rapid succession, a chit-chat. Having a reward at the end of your On-Boarding session doesnโ€™t feel like a bad move either. Gamifyย it.

On-Boarding provides you with the chance to know your customers better too and simplify the connected flows. Having On-Boarding flows simplifies the actual Product Experience and makes your Customer Experience more entertaining andย fun.

On-Boarding flows are the friendly chats between you and your customers. Did you forget to tell them something? Do you need to know their names? Do that at On-Boarding flows. Simplify the rest and create a positive Customer Experience.
Going over the Product features one more time, in case our customers signed up in aย hurry.
On-board trial users and try to convert them right then andย there.
Different scenarios require different approaches.
Simplifying the Sign Up flow means moving personal data entry to one of the optional On-Boarding screens.

Mind The Endย Game

Finally, you should mind the end-game of yourย efforts.

I canโ€™t stress enough the importance of picking the right re-design approach and the importance of choosing the right re-design goal. Once the decision has been made we shall not divert, neither we can without the risk of needlessly burning up lots of resources.

There are different re-design approaches that you can choose from, depending on the kind of improvements youโ€™reย after:

  • Conversions and sales. The re-design goes around UI and UX, working with the Task Flows and User Flows. We may re-think User Journey, though thatโ€™d usually mean going a bit beyond the scope. The goal is an increased number of registrations and sales, and a decreased cost per user acquisition.
  • On-boarding and retention. The re-design goes around UX and working with User Journey. We may even create new User Flows to remove discovered bottlenecks. The goal is an increased avg. session time, and a decreased number of support requests.
  • Features. The re-design goes around UI and UX, working with the Task Flows and User Flows. The goal is having a Product 2.0 with new features.
  • Product-focused story (features, team, roadmap).
  • Company-focused story (vision, mission, leadership).

To be continued?

Leave a comment if youโ€™d like to know more about Company Experience, ways to measure and track it, ways to improve and design for great Company Experience. Did I miss anything? Let me know in the comments.

Are you after the best Company Experience?

Iโ€™d love to hear from you, if youโ€™re after the best Company Experience your customers can have or if youโ€™re after the ultimate Product Experience. Shoot me anย email.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.