Get a price! →

Create a good-looking product website yourself and save up to $25,000.

Design doesn’t have to come at a giant cost. Find out how to do your product website design if you’re still in early super stages.

If you can't do great things, do small things in a great way.

Napoleon Hill

How to solve your “design” problem when launching an MVP.

Some say design is everything: a reflection of a product’s “philosophy” and its accompanying values, from the earliest stages and prototyping to launch. But is that really so?

What’s the value of design?

Most start-up founders come a certain point in their development cycle when they need to reach a consistency between their product and marketing part.

A common misconception among early entrepreneurs is that you totally NEED a full branding exercise in order to achieve any success on the market! Now, that is true in certain cases. For example, if you have budget to allocate and ready for incoming pivots affecting design changes – then fine, do it. Or if your digital product is already validated and you’re confident about its product-market fit – that will most likely work as well.

Many early startup founders come to us for their very own visual identity for their product. We embrace these ambitions and at the same time we always try to help you understand the risks of spending a “bank” for something you might don’t need at this point. Usually, these ambitions lead to a negative outcome: a deadly combination of being broke and left-out with beautiful designs and no time and $$$ for further product development or other initiatives.

“Save those Benjamins on design iterations, and set your focus on creating a strong product foundation first.”

Artem Astakhov

In this guide, we’ll take you through a strategic approach to design. Do this before you spend a ton of money on a full design project. This guide also includes valuable tips on how you can make your digital product look and sound appealing to your visitors, users, investors and partners — today. Also, this guide presumes that you’re either at the very beginning of the product journey OR that your product launch has happened fairly recently and you’re still expecting some pivots.

Product comes first, design comes after

Creating a vision that’s easy to understand by your future users is the most important aspect of building your business communication. You can provide users with meaningful experiences through pleasant interaction, consistency, and a low learning curve. While beauty is nice, clarity is what makes all the difference.

Base your design decisions on 3 key aspects:
  1. Idea validation and product-market fit.

    Study and analyze them thoroughly before you even touch the design aspect. Write a website copy that’s clear, user-centric, and logically structured.

  2. Professional-grade technology.

    Pick the tools that will best bring your business to life. Slow websites suck, even if they look good. Make sure you use a fast and modern tech stack to make your website feel nimble.

  3. Visuals that spark emotions.

    But don’t stop there. Aesthetically pleasing visuals work in conjunction with a product that has been proven to solve users’ issues, and appears relevant to your target audience.

How valuable is design, really?

Let’s start with a short overview of how a design might affect your business in four ways based on a study done by InVision in 2018. With 2200+ companies involved in 24 different industries around the globe providing their feedback, it represents a comprehensive research summary of the impact design has had on various businesses.

“Leading companies are using design to drive efficiency, profit, and position. In fact, nearly three-quarters of companies say they have improved customer satisfaction and usability through design.”

from inVision

2229 respondents pointed out the proven positive impact on the following points:

a. Product quality

  • Product usability: 81 %
  • Customer satisfaction: 71 %

b. Operational efficiency

  • Employee productivity: 33%
  • Time to market: 29%

c. Business profitability

  • Revenue: 42%
  • Conversions: 35%
  • Cost savings: 30%

d. Market position

  • Brand equity: 39%
  • Entry into new markets: 25%
  • Design patents / IP: 13%
  • Valuation / share price: 10%

These numbers show that design isn’t all about pretty pictures. In fact, design influences all major aspects of a digital product’s performance. Sounds exciting?

Build a strategic foundation to make better design decisions.

Find your company’s mission, vision and values

Design is a visual extension of your product, so you need to be super conscious about its strategic part. Sure, everyone likes a pretty picture, but in reality, the “magic of aesthetics” may quickly dissipate if the product is useless.

In order to get the foundation of your design identity right, we recommend working on your product’s strategy using Lean methodology. This method is based on a couple of one-page documents called Lean and Brand Canvases.

It’s all about efficiently allocating resources you plan to invest into customer research, marketing, and operations that serve as key pillars for an upcoming design project.

So grab your “partner in crime”, go to https://canvas.tppr.me and fill out the documents. Take your time; this exercise will help you create a solid ground for your strategic decisions and product planning without spending endless hours.

By the way, we highly recommend reading “Running Lean” by Ash Maurya.

Lean Canvas: deconstruct your business idea into key points that are easy to understand.

Lean Canvas acts as a planning tool laying out your business model on a single sheet of paper. Filling out this document will help you and your partners organize ideas into a brief but solid strategic structure. There are 9 blocks to fill, but let’s talk about most crucial ones in order of importance.

1. Customer Segments

This block goes hand in hand with block #2 (Problems). It’s a good idea to think about these two blocks simultaneously. Draw out your ideal customer portrait (e.g. early adopters), then continue with general customer segments.

2. Problems

Put yourself in your customers’ shoes. Outline their problems. What are their struggles, their pain points, their fears? What do they wish they could do or have. What’s currently inaccessible for them?

3. Solutions

Briefly think of solutions that would solve your customers’ problems? If you can’t think of any possible solutions, set up a meeting with your partners, or talk to the customers directly to get ideas on what troubles them most.

Click to see Facebook’s early Lean Canvas board: https://canvas.tppr.me/D0ZsaALH

Brand Canvas: build a bridge between customers and your brand.

People are driven by storytelling. The Brand Canvas is a short way of describing your brand, its characteristics and core traits. It has a self-explanatory block structure, all labeled and described to guide your branding insights. There are four blocks to fill out:

1. Essence

The main characteristic of your brand in one word. Yes, make it a single notion.

2. Brand Attributes

A set of words/notions that align with your brand... or describe its exact opposite. Think of it as gathering synonyms and antonyms.

3. Brand’s Voice

The way your brand communicates to your customer through written content and messages. Is your content serious, playful, or inspiring?

4. Brand’s Lore

Everyone loves stories. They help establish an emotional connection between your company and its users. It’s a historically proven fact.4

Fill out your Brand Canvas here:
https://canvas.tppr.me/D0ZsaALH

After conceptualizing and validating your idea, it’s time to make something useful with this information. We’re off to our next step, which is how to write out content for your website.

Click here to download a document on this topic

Competitor research

Given the fact that you roughly know your market, you should be aware of the other players in the game. The market is big: you won’t be lonely in your industry. You can always expect that someone out there will be better than you, so you need to find out about your “enemy”.

Get a flavor of what’s niche-relevant

Start by searching for similar companies in your area (worldwide is interesting too, though less urgent). You should look at companies in your industry or a similar sector using the following tools:

There are lots of analytical tools out there. We recommend using a combination of them. The information delivered by these tools can help you understand how your company compares to others, get a broader picture of the market you’re going to be in, find new customers, and plan more efficiently. You should have a pretty good overview of your competitors and their customer sector, their promise and practical/visual integration. This research can also help you identify your service, product, and philosophy by grabbing some inspiration from others.

Be careful. Simply ripping off Stripe’s UVP won’t help you make a great product.

Who do you target? Stop guessing with Target Audience research

Who are your customers and what problems do they face? Are these problems worth solving? Why aren’t they solved yet? What value can your custom solution deliver to your customers?

To figure it out, there are two types of research you should conduct:

1. Qualitative

Qualitative research methods are designed to help reveal the behavior and perception of your TA regarding a particular topic. There are different types of qualitative research methods; in-depth interviews, focus groups, ethnographic research, content analysis, and case study research. The results should look like a piece of well-detailed information providing in-depth user perception, usually presented as a summary or written statement.

2. Quantitative:

This type of research collects information from existing and potential customers using large-scale sampling methods like online surveys, online polls and questionnaires. This creates a statistical overview of the results. After analyzing these numbers you can predict the future of a product or service and make strategic changes accordingly.

Who is the right audience for your solution? The JTBD method

The jobs-to-be-done method or theory is a tool for framing, defining and organizing your customers’ needs. It helps you determine the driving force of customer behavior, and what objectives they’re trying to achieve, both functional and emotional.

1. Discover a problem

Put yourself in your customers’ shoes. What problems do they run into time and time again? You want to have a clear understanding of the problem’s dilemma to see multiple reasons why it hasn’t been solved yet.

Look for the roots of that problem such as: blockers keeping your customers from finding a solution; unsatisfactory solutions that they currently use.

To picture it more easily, imagine your target market as a “group of people” and their problems as “jobs they’re trying to get done”. Place every job to be done in a problem category to keep things organized and set priorities accordingly.

2. Define focus areas

Each product is different, has its own niche and a customer/client base. For example, an EdTech startup BibliU helps professors, librarians, students and scientists to become more effective at studying, learning and research, by having an access to a cool and considerably better e-library.

3. Develop a potential solution

Your solution should provide the minimum functionality that will address core customers’ needs. Focus on simplicity and don’t overwhelm your service with needless features making it painful for your customers to interact with.

4. Deliver a solution to your TA, even in its raw state

Launching your MVP should be that magical moment when your early adopters taste “piece of that pie”. It is good to use the Job Story method to make your customers aware that their problems are really just opportunities.

Click here to get more details on the Job Story method.

How to approach your users with AIDA model.

The AIDA model is probably one of the best-known marketing models and can be applied to any type of business, including a digital one. Its effectiveness has stood the test of time, which makes it the ultimate tool for executing successful marketing communication between you and your TA. In the 1900s, Elias St. Elmo Lewis, American advertising and sales pioneer, introduced his three marketing principles in one of his publications.

Breakdown of AIDA.

The AIDA model consists of various stages, each one representing a separate milestone where a potential visitor may be turned into a customer. This model works in many different selling scenarios, whether you’re a door-to-door salesman selling vacuums or trying to improve consumer engagement in your brand.

There are modern variations of the AIDA model that were adjusted to the specific purposes, such as measuring the effect of an advertisement AISDALSLove model, modified AICDA model, or McGuire’s model of persuasion. We will leave those for you to consider and research in more detail if you so desire.

Attention

Catch your TA’s attention. It can be some eye-catching visual asset, a bold statement, or something interactive. The main goal here is to set an initial spark of interest in your customer. Address the emotional message to your customer based on the previously researched TA background.

Interest

Once you’ve caught your TA’s attention, you need to keep it. That can be rather difficult. This is where you would want to show a more detailed value proposition of whatever you’re trying to offer. This process is more about increasing an already aroused interest.

Attention and Interest of AIDA model sometimes happen at the same stage.

Desire

Concentrate on creating an offer that will switch your customer’s thinking from “I want it” to “I need it”. Triggering a desire to buy a product is yet the most crucial one. Provide the most value of your product or service advantages correlating it to your TA’s emotions.

Action

This final phase transforms your customer’s desire into a purchase execution. Usually, it’s done with a CTA. A common CTA could be a shopping cart, a “Sign up” or “Get it now” button, etc. This step is all about leading customers to a step where transaction happen thus converting a user.

Write a compelling website copy to grab your audience’s attention.

Stay user-centric - as if YOU were the customer.

By now, you have gained some knowledge about your target audience. It’s time to apply that understanding to compelling writing. Your written material, from headings and titles to product descriptions and summaries, should be emotionally convincing.

This is what we really mean by ‘user-centric: your users’ needs and wants are at the core of everything you do (and write). This is what gets them interested in your solution.

Tailor your copy to your customers

Say you are a fintech startup dealing with money transfers and currency exchange. Your TA is regular consumers, i.e. individuals from a certain area. It makes it a B2C business model where you offer services to regular people, therefore you need to base your written content around their problems and desires.

Being a financial startup, you need to showcase your solution in terms of a numerical, speed, or safety advantages. Remember to back it up with a significant amount of emotion to connect with the everyday consumer, relate to their problems, and explicitly show how your company can help.

There’s no need to sound as serious or formal as you would need to for a B2B Target Audience.

Use headings that give a clear idea of what your product is, and how it works.

Set aside the design for a moment and concentrate on the Copy to craft a powerful marketing website. Good copywriting can get your potential customers through the door. Make users like you by providing clear and creative written content that supports your product. Your landing page should read like an eye-opening course of action for them. Later in this section, we will discuss a particularly effective marketing model called AIDA, but for now, let’s focus on copywriting.

Understand your TA and tailor your copy to them.within a few words, your customer should know enough about your product to complete the deal. It doesn’t matter whether you’re selling a service or some type of physical goods. What matters is whether your offer description is clear and compelling.

General tips to make your copy fire 🔥
  • Titles/headings and subtitles/subheadings. Set your priority on these. Keep them bold and descriptive.
  • Avoid vague statements that sound confusing. Stick to the point and keep away from mysteries, metaphors, hidden meanings, etc.
  • Titles and headings must be around 65 characters long — comfortable to read and to have a friendly relationship with Google. We advise you to be bold, concise and provide value within your headings.
  • Bad heading example: We felt lucky cooperating with such big names throughout our long working history, it was awesome.
  • Good heading example: Amazing companies we were fortunate to cooperate with.

Paragraphs and body text

Paragraphs form the main body of any page. They have more detail and more naturally structured sentences, rather than punchy headers. This is where you can include further explanation on your product’s features, for instance. But don’t make it an overkill: just because you have a longer piece of text doesn’t mean you can get away with overly cluttered sections.

    A basic paragraph consists of 3 key parts:
  1. Topic sentence
  2. Supporting details
  3. Conclusion

Pick out the main message that you try carrying forward to your customer, and make it your topic. Add a bit of details, to explain intricasies. Keep it short, as most people quickly scan paragraphs rather than read them from A to Z. Make sure you don’t have two topics in the same paragraph, it confuses the reader.

According to Nielsen Norman Group, people tend to skim through the text reading only about 20-28 % of the total text.

Aim for text that’s made of smaller paragraphs, and really try to commit to having short sentences. You wouldn’t believe it, but finishing your sentences with a dot at the end can make a hell of a difference.

Use these tips when writing content for your website:

Avoid tautologies
  • Bad heading example:

“We will recreate and reimagine your visual identity”

  • Good heading example:

“Escape the ordinary with a new Visual Identity.”

Using verbs in your headings

Use action verbs like “Apply” for a Call-to-Action button (e.g. “Apply for our program”) that make sense.

Avoid introductory words in summaries

Stay away from phrases like “This service is for…”; “The purpose of this design approach is to…”; etc. These things are already implied by the existence of your page, whose purpose it is to explain your design approach or to address your target audience. Don’t waste your words and instead get straight into facts what your customers can do with this information. Introductory words are only helpful when you’re, well, introducing a new concept.

  • Bad summary example:

“This program intends to teach you the best design practices and get popular.”

  • Good summary example:

“Complete our design program to start attracting new leads.”

Use these tools to improve your writing skills:

Fix your content flaws with free or cheap software. Honestly, if they’re there for you, why not use them?

Grammarly – an online tool that points out wrong punctuations, poor sentence structure, and grammatical errors.

Hemingway app – a free tool that keeps your writing clear and easy to read.

When to hire a copywriter, and why can it fail if you do it too soon?

If you don’t feel confident in your writing skills, you can always hire an experienced professional. Although this has its pros and cons. You might think that hiring a copywriting professional will fix all your problems, but that isn’t always true. In fact, even hiring a top-notch specialist charging $80 per hour doesn't necessarily guarantee you getting the best outcome.

The simple reason for that is the copywriter might not be knowledgeable enough about your product to do it right.

When hiring… pretty much anyone, you need to make sure that this person person knows enough about the domain they’re expected to work in.

When hiring a Copywriter look for the following:

  1. Make sure you really know your TAand share this knowledge with the person you’re hiring. A freelance copywriter is most likely not an expert on your TA. It’s your job to provide them with the information they need.
  2. Share as much information as you can about
    • your product’s targeted audience.
    • how your product works.
    • what problems it solves
  3. Don’t expect to get a 100% perfect result from a freelance copywriter.Keep in mind that this is an outside hire: they don’t master all the ins and outs of your product or company’s vision. What you expect and what you will get are two separate things. Work on establishing a clear line of communication prior to giving someone a job.

The bottomline about copywriting

  • Create clean, easy-to-understand, and user-centric website copy. Think of the value your product’s got to offer to your clients and their problems. Get to the point, provide clear statements, and hammer on benefits.
  • Your goal is to build a product that solves customers’ core problems. Showcase how successful it is with clearly written statements.
  • After you’re done with your first Website Copy draft, share it with your early adopters, or even better: get feedback from someone who’s more experienced with this type of content.

Build your website on a fast tech stack to avoid user drop-offs.

What tech should you use when building a website?

It’s best to make this decision early to avoid doublework such as content migration in the future. Ideally, you want to use a modern and scalable solution for building your web environment. A solution that is easy to maintain, update, but the one built on modern tech allows to scalable.

Fast loading speed is also something to consider. Speed is your best asset to ensure visitors get a great first impression, as well as explore your website seamlessly. We will let you know how you can achieve this in further reading.

There are hundreds of ways to develop a website, some platforms don't require too much expertise as they work out of the box and have community and resources in case you need help. These solutions are called monolithic. Here are the most well-known monolithic platforms. To save you time we've labeled them accordingly.

  1. WordPress – Crazy versatile
  2. Webflow – Advanced design functionality
  3. Shopify – Ideal for brick-and-mortar businesses
  4. Wix - Easy to use, lots of extensions
  5. Squarespace – Great templates
  6. Weebly – The most affordable one
  7. Webnode - Robust on the multilingual side
  8. … this list can go forever.

A monolithic approach can meet all your business needs. These platforms are versatile and if you aim to develop and launch your website ASAP, then this model is worth considering. Your whole solution literally sits in one place and it’s simpler to manage it.

However, while this option seems like a no-brainer, there are some drawbacks to consider:

Monolithic solutions yield a website that’s mediocre in loading speed, which in turn ruins the first impression of your visitor and worsens your SEO. Websites built on these solutions are heavier, less flexible, and ultimatelly slow. If one of the system’s components suddenly “breaks down” it will most likely affect the rest of the infrastructure and things will start to fall apart.

You might not be eager about trying new things out — or you’re simply not after speed optimization that much. But here's the thing: if your website takes more than 4 seconds to load you might lose half of the conversion rate.

How website performance affects conversion rates – by Cloudflare

Example:

Let’s say you have a SaaS business that makes $100,000 per month. A 1-second loading delay could cost you $85,000 in lost sales every year. That’s almost a full monthly earning!

With WordPress, Joomla, and similar legacy solutions, your content will fetch slowly, and Google will lower your website’s ranking in the search results. SEO matters and website loading speed is one of the most crucial elements affecting it.

"But if I know some code, is there anything better I can use?"

Use the JAMstack approach to build a website that’s fast, scalable, secure, and future-proof.

If you know some code, and want to build a fast website – we advise sticking with JAMstack. Yes, it’s a bit techy and requires some skills and time to get used to. But, it will ensure your product website is super fast, secure, and future-proof. It's based on these three key elements:

  1. JavaScript (website code)
  2. API’s (website infrastructure)
  3. Markup (content delivery)

JAMstack is not a company, nor it’s a separate technology, but an alternative way to build a website. It removes layers of complexity which helps to improve your website’s speed. Web Server, App Server, and Database are replaced with API microservices performing the same tasks. This makes your system much more nimbler.

It’s is a bit more heavy on the technical side, and requires some knowledge of frontend, so having or hiring a front-end developer sure helps.

We’re living in the era of Microservices. Why bother with “dinosaurs”?

The traditional way to web development is based on the backend part, which in turn means that all of the content relies on the CMS and database. Once somebody visits your website’s page, it is compiled by the server side, and then delivered back to your visitor. Content, code and design parts are closely tied within one system which makes it heavy and less flexibile.

A flexible alternative to build and control your website.

On the other hand we have a website built with JAMstack. Here, you skip the server-side and instead rely on the client-side to fetch out the content. All web pages are pre-generated and stored in a cache, and delivered via Content Delivery Network - as HTML and JavaScript snippets of code. Once a visitor enters your website, the content is already prepared and ready to interact with. In essence, the JAMstack approach is about removing the server side and letting the content delivery network and a client-side to do all the “heavy-lifting”.

This results in a website that delivers high speed of loading, developer-friendly experience,security, and simpler scalability.

Build you ecosystem with swappable API services.

So how would we replace the backend's functionality? The answer is JavaScript (code), API (website’s infrastructure), and Markup (content). Using microservices in development is about having your web ecosystem created of a suite of small services like Calendly, Typeform, Zapier, etc

Each service runs independently connected via API and serves it’s purpose. This solves a big problem faced by Monoliths - being able to easily scale and replace things on the go if something breaks.

More on JAMstack’s benefits: https://heartbeat.ua/integration

When something bad happens to one of the microservices, it impacts only that particular service, and not the whole ecosystem. This opens up a great opportunity for your dev team to experiment with a system and implement new features or services as your business grows.

JAMstack keeps your developers happy.

Your dev team is not limited by a certain technology or framework. They can use whatever tools they’re into. They can also combine and use a variety of tools, technologies, and frameworks all together. We’re missing the server side making the front-end and back-end independent from each other. This means, if your developers use Ruby to cover your front-end needs, instead of Next.JS, it’s up to them!

On the down side adopting JAMstack means you will have to deal with a variety of separate applications and services. You will have to invest time to figure out what you need, and then spend a bit more time with your devs to set up every component. This means you have to be a bit on the technical side. But if your goal is to build a flexible, easy-to-scale system that results in a fast website - this approach is well worth the effort.

Here’s how Heartbeat’s web infrastructure looks like:

Our websites, https://heartbeat.ua and https://implse.co were built with Next.js React Framework. Below you can find a list of microservices we’re currently using:

  1. CRM - Pipedrive
  2. CMS - Storyblok / Contentful
  3. Cloud Hosting and Deployment - Github / Vercel
  4. Automation - Zapier
  5. Internal communication - Slack
  6. Form Submission - Typeform / Formium
  7. Project Management - Click Up
  8. Knowledge Management - Notion
  9. Analytics - Google Analytics / FB Pixel / Databox

JAMstack vs. sites built on WordPress.

When talking about website performance, we’re used to referring primarily to page loading speed. You can measure this with a variety of tools. In our case, it’s PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

Simply enter any website’s URL and check out its Web Vitals ratings. There are two sets of data, one for desktop and another for the mobile version of the website. Scores may vary a bit from time to time, but generally, they show a pretty accurate picture of the website’s overall performance.

Wordpress website example with poor performance:

JAMstack website example with great performance:

Such high perfomance scores are a result of our website built using the JAMstack approach and relies on CDN’s and Microservices. This is especially important for mobile version of a website. Mobile users tend to take actions that are quicker compared to desktop users.

Tie aesthetics to your business strategy.

Let’s finally talk design-wise

So far, we’ve been discussing product strategy and tech stack to build your website on. There’s a difference between creating a Visual Identity and something that simply looks nice or has a unique style.

It’s a good idea to work on the Visual Identity if your product has been on the market for several months, if not years. It’s a complex, lengthy and expensive process, and not all product teams need it, especially if they’re just starting.

At this point – you don’t need a Visual Identity. You need a visual theme that is unique, practical and also looks good!

How to create a unique-looking product in the minds of your users. Step by step.

Let’s now identify a marketing niche for your product, business or service and create a positive first impression for who you’re targeting. This multiple-part process might seem a little difficult to take on at first, but in essence, it aims to develop clear and memorable brand-customer communication.

  1. Take stock of your current situation. How does your brand position itself currently—if at all?
  2. Analyze the competitors that directly relate to your business. How are they performing? What’s distinctive about their communication with customers? In what ways do you feel that your brand positioning is unique compared to theirs?
  3. Create or refine your internal brand statement to drive business marketing and design decisions. It must be bold and customer-oriented, showing your place in the market as well as your Brand Promise and why customers should believe it.
  4. Develop a UVP (Unique Value Proposal) for external use. Refer to the Lean Canvas mentioned previously.
  5. Test it with your Target Audience. Is it comprehensible? Does it seem to resonate with people? Does it show unique value compared to your competitors? Is it a memorable experience?

Visual Identity is not JUST about the logo. And it’s a bit early for that.

Visual Identity refers to your product's unique language created for effective communication with end-users. That includes your logo, typography, imagery, colors and creative experiences. This visual system is then applied to every little aspect of your business/startup/service, whatever user-facing parts of it, from a landing page to a company flyer. It’s a highly scalable system of visual elements that speaks to your peers on every channel and medium.

To illustrate my point imagine John, a tidy-looking office guy in his mid 30’s. John always dresses professionally: white ironed shirt, a navy blue blazer, straight pants, a slick tie and nice Oxford shoes. John is always competent, responsible at his job and does his tasks promptly and precisely. His style complements his working behavior. When you look at him, you see a guy who looks well put together, a somebody you could probably rely on. Every detail in his appearance speaks that he’s well organized, neat, dedicated, and persistent.

John genuinely provides a lot of good value to his team, company, and community. But a good half of his success comes from his presentation. Just by his looks, John’s clients and co-workers find that he seems trustworthy and useful.

Every little part matters. If we take John’s outfit, there are a lot of different parts which contribute to a consistent look and feel. It would look really odd if John wore an official suit paired with Adidas flip-flops.

Similar principle applies to the Visual identity of a digital product. Visuals convey what your brand and product is, how it communicates, how it sets itself apart from competitors, what mission and statement it carries forward, whom it is for, what partners would be a good fit, the list goes on… A visual identity needs to be striking and memorable while conveying all these things above.

Visual Identity is not just a nice “tie” or a logo. It’s a combination of visual assets of all product parts that carry the same message and drive your product forward with a coherent and unique image.

Where should you start with visuals? Create a mood board!

Visual Identity is a complex process. So at this stage – you probably need something simpler, easier to create but still nice-looking. For now, we’re taking a shortcut from Visual Identity by replacing it with branding basics.To get there to those visuals, you certainly need start with some ideas.

Mood boarding is a way of carrying out your visual exploration through a set of visual assets like typography, visual shapes, graphics, forms, color palettes, etc. Explore existing solutions/products to have an idea of how they look. Collect images that fit your intent, and save potential visual styles that might work for representing your product on the web.

Once you’ve collected some examples, create a simple rectangular board in Figma to break down components into:

  • Web references and UI examples
  • Icons, Graphics, and Patterns
  • Color palettes
  • Typeface pairs

Join your partner in crime and ideallyform a single style that fits and relates to your product from a functional, practical and visual standpoint.

User Experience. Create a relevant, aesthetically pleasing, and easy-to-use website experience.

We have to underline the importance of user experience because it has a tremendous impact on your customers and their behavior.

Our lives, our bodies, our relationships are more embedded with the digital world more than ever before. The boundaries between what’s online and offline are thinning, thus taking this interactivity to another level. For instance, as you’re about to leave for the office, you receive a text message warning you to stay home because of an incoming storm. You decide to stay hope which hypothetically may save you life. That’s pretty useful, isn’t it?

Consistency of elements. What should you do if you’re just trying to improve the overall situation with your Product UI.

Consistency makes it possible for a user to navigate and to establish a link between themselves and your service. Visual consistency involves a whole set of objects and design elements, from the font to shapes and line spacing. This style set is applied across every platform where your service lives. It makes the whole product look distinct and uniform. Still, this style remains flexible for future product development.

This sense of familiarity across all apps and platforms keeps the learning curve low for your users: none of your platforms or apps should feel like something entirely new and difficult to grasp.

Consistency eliminates confusion, saves time and money.

Feel free to refer to our. Pulse Design System while working on improving your UI/UX of your product / product website. It contains our internal design principles and guidelines and should give you a good idea on how to keep everything organized and consistent by following a Systems’ approach and Atomic design methodology.

Think big. Why is it important to be scalable?

Scalability goes side by side with a visual identity. When your ‘look and feel’ is scalable that means there’s a great design utility to it. It should be flexible enough to cover all of your current brand features. You don’t want a design that you will have to change after only a few months of use.

However, in the very early stages of your product development, you may have to use something temporary, as you would most likely lack the financial resources and proper product validation.

Your logo isn’t everything

It doesn’t take much to realize that product and brand design involve much, much more than a logo. The logo is only a small element of a rich visual identity. Many modern companies are too focused on the logo. That’s because they utilize an immense amount of additional visual elements. Logo often makes up the communication strategy for your visual identity system. Directly speaking, only having a logo won’t help your startup with scaling/spreading the word about your existence or things you’re solving.

Misconception about colors

Color is the most impactful facet of your visual identity. This element completely dominates our perception of quality. There is a whole scientific field dedicated to color theory and its psychological effects on a viewer. Now, this is all true… but we recommend taking a different approach.

Nowadays, as long as you use colors that don’t look ‘horrible’ to your eye, you should be fine. Previous color standardization led us to a point where most enterprise businesses were using the Blue color palette. Images in yellow or orange tones automatically involved cheap sales (take “Clearance” banners for example, or Aliexpress).

Don’t worry too much about creating a color palette associated with a certain niche or industry. Your hands are completely untied here. Just go with something that feels personal, unique, and easy to look at.

We’d recommend considering a color palette that rather has good contrast, and is accessible to all users. For inspirations on great colors refer to – https://access.mymind.com/colors

Design 1-st version of a website yourself, or hire a freelancer.

Start by collecting ready-to-use design resources.

We’re finally ready to apply all the knowledge we’ve gained. So, since you’ve figured out all the most important aspects of your product development process and straightened out some of the most pressing business-related questions, you’re ready to move on. Early startups often have limited resources to get the job done internally, so hiring someone online allows you to remove location constraints and to tackle a wide range of tasks.

Take it easy, instead of taking a bank loan.

Design doesn’t have to come at a ridiculous price, especially if your product is still at MVP stage. You don’t need to complete a fully fledged Visual Identity or a Branding exercise. These take several months to do + a full bag of cash. It’s okay to start simple. Get yourself a website / app template to serve a base, then hire a freelancer to creat the look and feel that you want.

Hire someone you need right now.

Take stock of your current situation and identify the most pressing problems with your design. In our experience, there are two very common situations you might find yourself in:

  1. You’re starting from zero and haven’t made any decisions.
  2. You have a website or product design but you’re not happy with your current look.

Start with Problem Framing.

Whichever scenario you’re in, write down a list of your top 10 problems regarding design. Set them in order starting with the most urgent ones. Set aside unimportant stuff and focus on your top 3 problems. Get the core done.

After that, you can get into specifiying a list of deliverables that solve these 3 problems providing you a core set of things needed for your successful launch.

Hiring someone on Upwork / Freelancer.com / Fiverr

These freelance platforms are the most trusted ones out there. They allow you to find and hire a professional specialized in what you’re looking for. Simply post a brief including the scope of work you’re looking for. Make sure to include extra clear guidelines and expectations to prevent any confusion during your project.

With a rating system, it’s easy to find someone reliable and qualified for your job to be done. You can do a bit of manual research and look through hundreds of professional freelancers’ profiles, or simply look among those who have applied to your proposal. Most of them will have their portfolio and relevant past experience included in their profile. It’s a good idea to look into it to make sure that you are hiring someone whose skills fit your needs. You could also prepare a short test assignment for potential participants to help you identify the perfect candidate.

Is it safe money-wise?

Kudos to these platforms for being safe! They integrate fraud protection mechanisms within their system to ensure the safety of the transaction process. However, it comes at a certain cost: you can expect some fees on both ends and a time payout window, meaning that your freelancer will have to wait a bit longer for payment to get through.

Find someone who fits for the job.

You must alocate a budget toward a design job. In our opinion, it shouldn’t be a half of your project’s budget that you invest into design. Aside from that, follow the points below to specify what you need when hiring someone. Always revolve around your core problems and what’s your desired end-goal is.

1. Prepare clear job requirements:
  • Create a project’s brief to lay everything out in it. While you’re at it, think of crucial goals you would like to accomplish with this project.
  • List the skills required to complete this job.
  • Set a fair budget for this job, keeping in mind value delivery.
2. Provide sufficient information about your project:
  • Create an account on Fivver, UpWork, or Freelancer.com, and write a project listing.
  • Inide, explain what your product does, and share your current struggles.
  • Use what’s stated in “1” to clearly define the requirements for the project.
3. Search candidates and post a project:
  • Check their rating and analyze their skills along with case-studies.
  • Choose up to 5-10 potential candidates based on their performance and job experience and contact them directly inquiring more details.
  • Alternatively, create an inquiry for the project and wait for requests.
4. Include a test assignment in your job proposal:
  • This is only a recommendation. However, it might provide you with additional insights on a candidate's real capabilities.
5. Set up an interview:
  • Narrow down your candidate results to a single person by looking for an enthusiastic person with the capabilities to do the job right.
  • Set up a Skype, Zoom, or Google Meet session to talk through project details.
  • Remember to hire someone that’s smarter than you in a specific field.
6. Hire an indivudual is you think it’s a great fit for both parties!

Be sure to actively communicate with your newly hired freelancer. Active engagement and communication can be crucial for a job to be completed successfully, so don’t avoid it hoping that everything will end up perfectly fine. It’s important to keep a happy medium so that you don’t come across as too naggy. Instead, be open-minded about potential problems that may appear and listen to solutions a freelancer has to offer.

Get a template and save your time and $$$.

Another quick way to meet your design goals is to buy a template or/and UI kit. Thankfully, nowadays there are a ton of free and moderately prices design resources that you can use to create your own design. Web and mobile-friendly templates can help you visualize your ideas and serve as a playground. Many of them are highly flexible and easy to adjustments.

Pick one that best fits your business model, or at least one that was made with your industry sector in mind.

UI8 – a large variety of digital assets, ranging from fonts and icon sets to UI and wireframe kits.

Themeforest – a global community of digital creatives, full of free and paid WordPress themes.

Templatemonster – this is a large marketplace where you can find a website template, graphics, and UI kits matching the latest web standards.

Daily project work = blurry eyes. Test it with users or invite a pro to help you improve things.

Validating your design.

Now you’ve got all the odds and ends put together in one project, but there is something that makes you feel doubtful about its final shape. Introducing a fresh eye to your project may provide a lot more information than you think, especially if it was a project you’ve been working on for a prolonged period of time. Validating a design of your product with a limited user group contributes to the process of removing misconceptions formed during a design or developmen process.

Post MVP launch, we highly advise you to conduct testing. Also, if design looks appealing to you, it doesn’t mean it will appeal to your audience. Better get all of that checked.

Do testing to make it better.

Practice makes perfect and testing is a big step towards that. Now, there are many ways you can test your design. As there is no single correct way of conducting it, so we advise you to combine multiple techniques.

Testing can be done to get user’s insights on usability, learnability, accessibility, efficiency and overall understanding of a product and its visual representation. The more you learn about your product from the perspective of others, the better. Testing may sound a bit intimidating, but don’t avoid it. A few hours of testing could yield far better results than a few months spent on reiterating your source material with just your thoughts on it.

Validating a design of your product with a limited user group contributes to the process of removing misconceptions formed during a developmental process. We highly advise you to do it. After all, there is always room for improvement — especially if your product has yet to be launched. A design that appeals to you personally won’t necessarily seem appealing to your audience.

Test your product or marketing website, collect feedback, make changes, come up with a better version.

By now you should be well-aware of your target audience so there must be no problem portioning it into single elements and keywords. With that in hand, pick out a group of people that could relate to your product and perform the following tests.

1. Create a test agenda:
  • including your end goals, number of trials, topics, and questions.
2. Conduct a general background test to find out your product TA.
  • Questions such as: “How old are you?”, “What is your monthly income?”, “What are your habits?” and “What would you use this website for?”, etc. Include custom questions tailored to your product or service, e.g: “How often do you shop online?”, “What do you shop online for?”, etc.
3. Include custom questions tailored to your product or service, e.g:
  • “How often do you shop online?”, “What do you shop online for?”, etc.

A couple testing methods.

A/B Testing

In case you’re debating between two visual ideas on your design, or just unsure what aspects of your design could be better, A/B testing is the way to go. Get the most out of user feedback by providing your own list of brand keywords. Simple likes or dislikes will hardly provide any value. Conduct your A/B tests in a way that demands a more thorough response to showcase the user’s reasoning.

Semantic Differential Survey

A Semantic Differential approach is simple but effective. It aims to measure a user’s attitude to your design. Create a list of keywords that best describe your website/product, then write down the opposite words. This type of test helps you determine the general mood of your design. Provide your user with an odd number scale, for example where “5” is joyful and “0” is gloomy. This will help to get rid of those neutral and blank responses.

Competitor comparison

Lay out your design in comparison to your competitors’ for your user base to take a closer look at. For instance, let’s say that you’re developing a neo-bank and you would like to come across as serious and trustworthy.

Write a list of keywords that you think fit your product best and see how your users rate your messaging. This method will help you differentiate and collate where you stand among your competitors, providing you with a ton of information on how your website reflects the overall product message.

Intro to Google Sprint Process.

We’re not going in-depth on Google’s full Sprint process but it would be nice to highlight their 5-day Sprint process to see how you can test your working prototype with customers. This process is comples because you have to accommodate everything in a special way to achieve any success with this type of experiment.

Set up a location for your attendee with some hardware in it.

In the testing room, you will have to have a product prototype along with a set of questions, some recording equipment, as well as a tablet, PC or a mobile device.

Now, this is where it gets interesting.

In a second room, your team will be watching over the process by taking notes of customer’s reaction and responses in real-time taking on issues faced during the process, things that your customer liked, and any other kind of feedback they can gather.

After the interview is over, you will gather all the notes and place them on a big board to have an overview of them. Then, you and your team should start analyzing the responses from the interview and gather key takeaways.

Ask for opinions of someone more experienced than you.

Testing is fine, but sometimes potential customers or users bring no useful insights whatsoever. We think it’s your best bet if you share your first results with someome more experience to review and share thoughts. This could be a fellow digital product founder, someone from a Digital Agency, or simply a relevant community of Reddit users. More on this in the next section.

Gain knowledge from others for faster growth and best decisions.

Building a strong network of business connections is vital.

Don’t underestimate the importance of growing your network, as your relationships with other businesses and business individuals portray a clear and trustworthy image of you as a founder and startup company.

It’s not all about profit, but rather, sharing value and expecting nothing in return. Start by connecting with groups of professionals that you can relate to. They might even be working in a similar field, and could become your partner.

Such interactions provide many positive outcomes. You can learn from one another’s trials, share strategies with each other, discuss things that can affect your company’s future... Whether it’s design, strategy, marketing or product management, discussing things (almost) always brings about interesting points of view.

Get engaged with other professionals and it will have a positive impact on your product.

Consider actively participating on social media, blogs, and discussion boards. Share your ideas, comment on others’ posts, and in general, show your involvement and interest.

Here are some of the popular resources to do that:

  1. Twitter – you should know about Twitter by now, or else you’re living in a cave. It’s a great platform to connect with customers, stay updated on other businesses and participate in discussions.
  2. LinkedIn – a career-oriented version of Facebook. Connect with professionals, share your company updates, take part in relevant groups, and publish blog posts. LinkedIn – a career-oriented version of Facebook. Connect with professionals, share your company updates, take part in relevant groups, and publish blog posts.
  3. Indie Hackers – Large discussion board for bootstrapped digital founders and entrepreneurs. Connect with other product founders, explore what everyone else is building, listen to podcasts, and meet like-mind people.
  4. Reddit – a popular social media news site with a ton of communities to join. Lots of minute discussions on the most relevant topics happening in the world.
  5. TechCrunch – a good spot to discover the latest news in the digital world. You can also participate in their events.
  6. Medium – a blogging platform to follow writers, successful startup founders, thinkers and digital inovators… You’ll find lots of insightful discussions on your niche but beware of the paywall.
  7. Meetup – an event-based social platform. Find groups of shared interests and participate in events and discussions devoted to digital products and entrepreneurship.
  8. ProductHunt – a site to discover new and trending technology products. You may also post a job there to hire a professional.
  9. stackoverflow – similar to Quora, but more so on the technology side of things. Get help on rectifying bugs or find best development practices.

We strongly advise visiting Y-Combinator Hacker news forum to engage in discussions with startup founders that’ve been through fire and water –https://news.ycombinator.com/

Conclusion

Your goal is to look for patterns of success or failure. As a result, come up with a plan containing changes, improvements and elaboration of things you need to work on.

If one trial wasn’t sufficient, repeat the cycle with another 5 customers in the next weekly sprint. Combine results from every trial to find correlations and draw more statistically accurate results.

Fail-fast = save a ton of cash.

In situations when you find yourself on the edge of a cliff and you know that you can't make it, think about failing fast — and shut down your project. However, that doesn't mean you should just stop, drop everything and never try again.

It takes time to reach commercial success. Although you, as a founder, hope that everything about your product will turn out perfectly, you’ll often find out that it doesn’t. It's totally fine to go back and work on your product’s flaws. Make it a never-ending process of learning, getting feedback, applying, and finally launching. Failing fast is about the realization that things went wrong and changing course quickly. By doing so, you will save your nerves (and also time and money).

Avoid the false hopes that sooner or later your product will succeed... Because it won't if you don't let yourself face (and fix) the shortcomings of your product.

Wherever you might find yourself in the product creation cycle, on behalf of Heartbeat agency, we sincerely hope that you have found some of the information in this guide useful.

We strongly encourage you to take chances whenever you have the opportunity to do so. Avoid the mistakes and traps that many startup founders fall into at the start of their journey. We hope that you advance yourself and your product quickly, conquer new ideas and reach new heights.

Pros who have something to add:

Think tracking from the beginning. Helps you do analytics and product development decisions based on actual usage. For example, track sign ups — and define what a successful activated customer is. Which features are necessary for a successful onboarded customer, and how can we improve this.

Useful tools: https://segment.com/,https://mixpanel.com/, https://vitally.io/

  • Implement a CRM system – and use it. Remember to do a marketing/sales funnel, and make auto sales flows based on customer / usage data.
  • Get started with something, and make continuous improvements. For example, Adversus started with a default template from Themeforest.
  • Listen to your users, and make improvements accordingly. Be proactive and drive your product through customer driven innovation.
  • Launch a MVP (minimum viable product) and reach out to potential customers for testing. Again; user feedback is crucial for product success.

Mads Jespen, Product Manager from Adversus

Pros who have something to add:

For the last ten years, I spent most of my day building businesses and investing in uprising founders. And I have made & seen a ton of mistakes on the way. There are three main learnings out of that time that I try to follow myself:

Talk to your fellow founders

I always try to talk to other founders about my current challenges. You can learn so much from other people's mistakes, and at least in my experience, founders are happy to share them. That saved me a ton of time and stress.

Build a product your customers want

Building a product is fun, and I often had a clear vision of its look and features. But repeatedly, I underestimated the fact that I should talk to my customer at all times. The result: Ending up with a product no one wants.

Make Hiring your priority

It took me quite some time to get this one, but now I realize that my job as a founder is to bring together the best people and give them a vision they all want to work for. If you get this one right, you will be unstoppable.

Maximilian Fleitman, Serial Founder & Entrepreneur

Thanks! implse.co

Interested? Get a price! →

Implse is proudly part of the Heartbeat family ❤️