Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

Outdoor advertising billboard design

Business cards design

Booklet/notebook design

Branded badges

Branded tote bag design

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

What Is Product Page

The product page is a page of the e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.

Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.

As we mentioned in our guide to the basic web pages, a badly designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

• shows the image of the product
• gives all the needed information about the product
• allows users to check different color/model options (if any)
• enables visitors to see the reviews, comments, and ratings from earlier buyers
• allows for adding the product to the cart or wish list
• shows other relevant options.

Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.

Product page interactions for Bennett, a tea brand e-commerce

Based on that, here’s a checklist of basic elements of the product page layout:

• name/title of the item
• photo
• price
• item availability
• add to cart/add to bag/add to basket/buy button
• add to favorites/save to wishlist button
• description
• social proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.
• choice of color
• choice of model
• choice of the number of items to buy
• size guide or calculator (for clothes and footwear)
• extended details (materials, technical specifications, dimensions, weight, special features, etc.)

The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

Ecommerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.

That’s why many e-commerce platforms:

• use a set of images to present one item from different points and angles
• apply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small details
• combine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizes

Product page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the model

The approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:

• originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelines
• high-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in general
• optimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate – unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.

Product page for the niche brand of underwear, using photo demonstration on model

Except for images, other media, more complex or interactive, can also be used. Among them, you can now find:

• product videos, detailed video reviews, and instructions
• 360-degree view of the item
• augmented reality technologies helping people to observe the item in their own environment or try it on virtually

The product page of GNO Blankets website uses video demonstration and graphics with detailed demonstration of product layers.

Obviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.

A creative product page concept for a website selling niche accessories applies special realistic effects to the functionality of a model choice.

The pet shop website uses video demonstrations of the items as a convincing way to see how the product works in the environment and sets the needed emotional connection.

Informative but Simple Description

The saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances to be read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.

Another rule of thumb here is connected to the previous point: show, don’t tell. Well, it’s better to say, tell, but also show! Don’t just describe in detail how the bag looks inside – show the photo. Don’t just tell how beautifully this neckerchief matches that jacket – show the photo. Don’t just mention the size of a toy – show the child playing it. Combine the power of words with proper images to make the experience much more effective.

Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of model size on the photo, allowing the customers to instantly understand the proportions.

The product page for the cosmetics website uncovers the information about the product gradually, with the core data above the fold, supporting the prominent item visualization; the split-screen approach helps to divide visual and text zones to make them easily scanned.

Super Obvious Call to Action

Calls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make an additional effort to achieve their goals – which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.

ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light, airy layout.

Focus on the Item

No doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?

On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal – to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.

Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.

Creative product page design for a niche perfume website focuses on item presentation amplified with an atmospheric video background and special effects.

The more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on and so forth – any of those details can play the premier violin in a story of a particular item.

Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.

Instead of creating intrigue, be open, direct, and clean in content presentation.

Try to put all core information in highly readable form on the above-the-fold part of the page.

And test, test, test again, analyze the time on the page, heatmaps, and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.

The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and shows what other products are often bought together with this one.

The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or buy.

And only after that, when scrolling further, users can find extended information, editorial reviews, etc., based on text without visuals.

Intuitive Navigation

Every button, link, and card design can change the conversion rate significantly. It’s vital always to remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.

So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:

• find search field
• use breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going away
• be totally sure which elements on the page are clickable
• see if the item is already in the cart
• see the number of items in the shopping cart or bag (usually in the website header)
• use the power of visual dividers and common directional cues to perceive the information faster
• find the contact information and navigation links in the website footer

Product page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.

Consistency

Consistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions smoother and more intuitive.

In e-commerce interface, it touches both:

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.

Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.

Power of Known Patterns

Adding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes a right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.

The power of habit plays a big role in the products of this kind. Choosing a layout, menus, or icons that stand too far from the ones users are generally accustomed to often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.

H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.

In the article on home page design strategies, we mentioned that the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.

Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

It’s already well-known that when coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.

There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages – any point of that stuff can spoil the experience quickly, distract users, and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.

First-screen view of the product page on George: due to the light, airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.  

Dark, elegant, and catchy product page for the neon signs shop, balanced and scannable

Fewer Clicks

If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible – this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.

Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.

Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tap.

The OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.

Social Proof

Social proof is a big factor of impact on the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.

In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has and, this way, support the positive decision about buying – or prevent from buying the wrong item and having a negative experience.

Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked, and further customers’ photos and details on reviews.

Interactivity

With more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room – all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.

Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones – able to add their own personality to the offer, many shoppers feel ready to buy.

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

Needless to say, there are many daily things people do with their smartphones nowadays, and shopping is becoming one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.

Minimalistic product page for a fashion brand e-commerce focused on photos, easy choice of color, and responsive to be used on any device

404 Error

With product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer to check something else.

404 error page for a fashion e-commerce website

Bottom Line

Sure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.

Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks.  Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.

Useful Articles

Here’s a bunch of articles to dive deeper into the themes of e-commerce, web usability, and user experience design.

UX Design for E-Commerce: Principles and Strategies

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Product Page Design: Best Practices on UX for Ecommerce появились сначала на Design4Users.

Client and Project

FarmSense is a USA-based innovative tech product that helps growers reduce losses from insect pests and lower dependence on pesticides to take the uncertainty out of pest management for better farming and a brighter future.

Why is it important, and how does it help? The agricultural industry loses more than $220 billion in crop damage each year because of insects. For decades, farmers have been stuck with few options for pest management. Most use sticky traps – a time-consuming and inaccurate method, followed by a broadcast spray of selected pesticides and insecticides. Still, sadly, these traps can also affect beneficial bugs that pollinate more than 70% of the global crop supply.

So, the FarmSense team formed by scientists and innovators developed a better way. Using computational entomological models, they created a real-time sensor that can help farmers make better decisions for pest management, saving time and potentially boosting crop yield. The team believes that leveraging the power of machine learning and computational modeling can help save lives, reduce hunger, and help developing countries achieve food independence.

The target audience they aim at is diverse, from big agricultural corporations to small family farms, from innovators and advisors with high tech-literacy levels to farmers that spend most time right in the fields and have no broad experience or tight connections to different software and applications. So, the team worked on the affordability and accessibility of the technology and strived to reflect that in the branding approach and website, helping them communicate with their clients and uncover the product’s benefits. Let’s check how the designers from tubik achieved that goal.

Identity Design

The branding design process started with extensive research covering the agriculture and ag-tech current state in the USA, the existing presence of the sector on the web, the pain points of the target audience, and the touchpoints of the brand communication.

Based on everything mentioned above, the key advantages of the product that branding had to transfer were defined as:

• sustainability
• affordability
• accuracy of real-time data
• rich information

As well, the team aimed at making a visual branding design system that would have a range from more strict and business-like to more illustrative and emotional.

One of the core tools supporting both emotionality and usability in brand design for FarmSense is color. The palette features bright contrast shades of natural colors employing the psychology of color and giving instant visual connection to the topic of agriculture, summer, soil, fields, insects, and plants: green, orange, yellow, and blue. The latter is also traditionally associated with tech-related and digital products.

Having agreed upon colors, the team started working on the logo. The initial logo design approach was based on data as a core of the problem-solving power of the product. The creative search based on that resulted in a set of brand sign options reflecting that idea via lines and dots forming abstract shapes and building association with digital data processing and statistics visualization as well as fields seen from the bird-watch perspective. The basic shape chosen for the brand symbol was a circle.

Here’s a glance at the logo design process, from sketches through variations to the polished sign. The first version of the symbol developed in this direction was an abstract round sign consisting of vertical lines.

First sketches to think over the idea and find the composition

Digital symbol development

Testing the symbol with the brand name typographic part

Monochrome version of the combination mark

The version of the symbol with soft edges

Icons designed to test how the symbol can be further developed into other types of graphics

Another idea for the symbol at this stage of the creative search was to transfer the visual metaphor of the insect or the sun rising above the field, shaped by the lines. The latter was taken into deeper consideration.

Logo symbol sketching stage

Digital logo symbol development

Combination mark for the brand identity

Monochromatic version of the combination mark

The set of branded items was also presented to show how this version of the logo and color palette could work for various marketing goals: banners, printed advertisements, social media posting, business cards, etc.

Although the general idea looked effective, after discussions with clients and deeper testing, we together made the decision to move to another iteration, as this version of the symbol, even looking different, could bring up associations with some political campaigns that took place earlier in the USA. So, the second approach was also based on aerial views on the fields of crops, but this time irregular and asymmetric, cut by roads in various directions.

For this version, the color palette excluded blue, and the basic shape was square. The creative search was done on the sign composition and detailing.

The idea development resulted in the bright three-color symbol with a moderate level of detail and a bold, readable typographic part.

And here’s how it could be developed into the design system for branded items.

Posters design

Truck livery design

However, the deeper the team dived into the visual concept for the FarmSense brand, the more the client’s team got certain that they would like to combine the discussed approach and palette to their existing logo and reconsider it to make its design bright, up-to-date, and recognizable as well as flexible for various communication objectives.

The previous FarmSense logo

So, the final iteration started at the intersection of the existing logo and the ideas considered in the previous versions. The logo had to become simpler and less detailed to stay clear and informative in various sizes and get packed into a new color palette giving a quick connection to both agriculture and digital technology. Again, it started from basic sketching to think over the idea and moved to the polished logo.

Finally, the option with strict thin lines and a thin, elegant sans-serif typographic part was chosen as an approved brand sign.

So, based on that solution, the consistent set of branded items was designed for indoor and outdoor advertising and brand communication.

Billboards and banners designed for outdoor advertising

Business card design

Rollup design

Exhibition stand design

Truck livery design

With the brand graphics above, it’s also easy to see that another important aspect of identity design for FarmSense was creating custom illustrations. They covered four major goals:

• pictures set the atmosphere and apparent association with the agricultural theme
• specially created graphics helped to visualize the flow and benefits of highly-technological processes which are hard or even impossible to show via photos or videos
• custom graphics helped the brand to stand out of the crowd among the players in the agricultural sector, mostly using photo content which is often quite generic and just setting the theme
• the hero illustrations featuring people added a powerful human element and made brand communication more friendly and emotional

The creative process for the illustration also moved from rough sketches to present the idea and discuss it with the clients to the transformation of the approved ideas into bright digital artworks. Here’s a glance at the process for hero illustrations which had to become one of the first visual touchpoints of the product introduction on the website as a channel of communication.

And here’s the process for creating custom graphics reflecting the main benefits of the FarmSense technology.

Web Design

The next stage of customer experience design, extending the efficiency of the product presentation and amplifying brand communication online, was redesigning a website. At the initial stage, the team worked on developing a structure that would be effective and straightforward for the diverse target audience of the product.

Overview of the UX wireframing stage to consider the solid and straightforward website structure and navigation

At the UI design stage, the bright branded colors were used not only for illustrations and other graphics but also as background colors for different website sections, supporting usability, scannability, and readability of web pages.

Here’s a glance at the home page of the website, catchy, friendly, and informative, amplifying the message with a hero illustration sharing the peaceful, sunny, and positive atmosphere and giving instant connection to the topic of farming that employs modern technology.

The set of original illustrations used across the website pages proves itself as a powerful tool for visual communication and storytelling. It supports the text content, sets the mood, and helps establish consistency and integrity in the website’s performance.

Also, an infographic with custom illustrations was created to visualize how the technology works and make its benefits more accessible.

Here’s a closer glance at the set of artistic color icons supporting different text messages and creating visual triggers for essential functions or benefits to make them more noticeable and well-organized for website visitors.

To make the website work effectively and look attractive on any device, the tablet and mobile versions were also well-thought-out. They were arranged to provide a smooth and integral user experience at any stage of interaction.

For our team, the FarmSense project was a great chance to collaborate with the representatives of the modern ag-tech industry developing with a rocketing speed now and utilizing innovations to improve farming experience and outcome, which is crucial for the whole world.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Glup. Delivery App Branding and UX Design

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

Carricare. Identity and UX Design for Safe Delivery Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: FarmSense. Brand Identity and Website Design for Agricultural Technology появились сначала на Design4Users.

Project

Synthesized is the all-in-one DataOps platform which is helping to solve one of the most challenging problems we face as a society—the use of personal information. Synthesized makes it easy for organizations that want to collaborate on sensitive data. It enables enterprises to monetize and innovate through their data and speeds up the development of data-driven products. In as little as ten minutes, as opposed to months or years, Synthesized’s AI-based platform provides data practitioners with secure and compliant, ready-to-use, high-volume, high-quality data sets.

Telling about the product’s mission and origins, the founders mention that from their time as Machine Learning (ML) researchers at the University of Cambridge, they struggled to obtain sufficient clean and regularised data fundamental to building predictive models or testing a hypothesis. With ML projects becoming more advanced, the complications were also growing in the attempts to get high-quality, clean data sets. What’s more, they found a gap between the developments of the scientific community caused by the lack of infrastructure to share data safely. So, they started Synthesized with a mission to empower data scientists with the highest quality datasets for collaboration and innovation.

The task for the tubik team was to create a user-friendly and attractive website that would present and promote the service, uncover its benefits, and set a quick, easy connection to its users.

Web Design

Traditionally, the design process started with discussions with the client to dive into the nature of the service, the business goals, and the expectations about the functions the website should cover. After that, the team went through the stages of research and analysis that gave food for thought on how to create effective design solutions for the objectives set behind the website. And then, the stages of UX wireframing and design approach started to let all the sides of the process be on the same page.

Let’s take a look at the general design concept via some of the pages designed for the website. The search for a color palette that would be effective and set the proper mood resulted in a bold and contrast combination flexible for various design needs. Another key choice to make was the choice of fonts which gave the elegant and stylish combination of graceful Canela as a heading typeface and neat geometric Gilroy as a text typeface.

As the dress-to-impress rule still works, especially on the Web overloaded with pages and sites competing for people’s attention, the above-the-fold part of the home page moved through several iterations to find the visual way to reflect the connection to the world of synthesized data. This way, we came up with an animated full-screen background with abstract patterns adding depth and dynamics to the visual experience. The minimalist layout of this part of the page is scanned in no time and features the core navigation in the header, prominent tagline, and small description text to give a short and concise message about the nature of the product, and a CTA button whose noticeability is supported with bold color contrast to make it seen at once.

Background color contrast is used as the primary type of visual divider, helping to separate various web page sections and this way, make content perception easier. The pages look information-packed but not overloaded due to mastering the power of negative space and well-thought-out data visualization. It is a highly essential aspect to consider in user experience design for products that are non-tangible and innovative, so they demand a lot of explanation which is challenging to imagine and hard to show.

This page uses neat tabs with bulleted lists to present information about different features in a straightforward manner that is easy to skim and remember. The abstract background pattern reflects the idea of growth and gets animated to make the experience more engaging.

It’s easy to see from the pages above that one more aspect to consider in the design process was visual elements that would support text blocks. So, the custom icons were designed to support the consistency and integrity of the layout with informative graphics. Making them animated, we could also employ motion to attract visitors’ attention to particular elements and interactive zone, as well as add a pinch of liveliness to the web pages.

As mentioned above, balanced and attractive data visualization was one of the priorities in a project of such a nature, so this aspect was thoroughly thought-out, resulting in a range of techniques from graphs and code snippets brought to the common style to prominent infographic-like numbers presenting essential benefits.

The blog page design uses the uncluttered regular grid with one featured post on top. We also thought out and offered the design system for covers of the articles and resources, designed in a futuristic manner and satisfying both consistency and diversity needs.

Here’s the system of cover images designed for whitepapers and downloadable resources to be presented in style echoing the web platform’s visual identity.

The Company page is built around the animated photo gallery, which sets the emotional connection and adds a powerful human element to the presentation of the product.

As a number of our earlier projects, for example, Credentially or ShipDaddy websites, the Synthesized website was also implemented on Webflow. It enables both designers and the client’s team to effectively update the website in live mode and keep up with the speed of the company’s growth.

Mobile Adaptation

For any web project these days, the well-crafted mobile adaptation is not a privilege anymore but a must-have that makes the website look good and work well on any device convenient for the visitor, as well as have a significant impact on search ranking. Here’s a glance at how some pages of the Synthesized website look on mobile.

Synthesized is the company we’ve still been collaborating with, so it’s not the complete story: new design tasks are being covered, new challenges are being faced, and that’s the amazing experience to go through the different growth and scaling stages together with the client, from the basic website to the diversity of pages, content, and functions.

Stay tuned; new design case studies are coming soon!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Synthesized. Website Design for DataOps Platform появились сначала на Design4Users.

Project

Logo, identity, and ecommerce website for the brand of weighted blankets

Client and Story

It’s not a secret that healthy sleeping plays a huge role in people’s physical and mental health, productivity, and creativity. GNO Wellbeing company produces special and well-checked heavy blankets that present a reliable and comfortable way to wipe out anxiety and racing thoughts and sleep better.

First, GNO weighted blankets were sold only via Amazon, and people bought the product quite well there. However, to reach a wider audience and increase profits, GNO founders decided to build a solid brand and create an ecommerce website to expand their sales. As well, they strived for a new identity that would be both modern and flexible for various marketing goals.

Logo Design

Traditionally one of the core tasks at the branding design process is creating a logo, and this case was not an exception. The client gave a clear direction set behind the brand message: GNO Wellbeing is the brand that helps achievers to get a good sleep that helps them to achieve their goals. They wanted the logo to be fun, modern, and youthful and wished to think in the direction of a symbol logo rather than a wordmark.

As usual, the logo design process started with the creative search for a general visual idea. What the designer had to consider was the flexibility of logo usage for a diversity of surfaces, from blankets and packaging to the website and social networks.

The first set of concepts played around letter variations.

Here’s the symbol featuring the letter G that covers itself. The curves and rounded corners give a cozy feeling. In addition, the covering gesture corresponds with protection from anxiety and sets the visual association with the blanket.

Logo concept

Label concept

Bag design concept

Another concept presented a curvy letter G with a wavy ending that refers to the flow of a blanket when covering someone.

Logo concept

Label design

Bag design

One more logo design concept was inspired by the folds on the blanket. Also, it referred to ripples in the water, which is associated with calmness.

Logo concept

Label design

Bag design

From this iteration, the style of the first variant was chosen for the further creative search direction to continue and dive deeper into searching for a proper symbol that would be both attractive and informative.

The new set of logo concepts offered a variety of symbols that could be developed and polished for the final brand sign. The set included both color and outlined options; most variants featured recognizable symbols such as a sleeping cat, moon, dreamcatcher, and some more abstract signs.

In addition, to get another angle of view, the graphic designer made the set of options for typography logos in different styles, from bold and minimalist to beautifying serif.

Having considered all the options, the symbol featuring a peacefully sleeping and smiling moon was agreed upon as the most effective for the brand goals.

So, this option was further developed as a brand sign for different goals. The choice of color had to be made, as well the designer offered two options for each color solution, outline and filled.

The choice of visual concept was made upon a beige outline logo symbol (variant 1) accompanied by a solid and simple typography part.

Then the approved logo was applied to the branded packaging and blanket label.

One more aspect to cover for the identity design was packaging solutions for branded candles. The minimalist and elegant solution for the candle with a branded cork featuring the outline logo and the readable label that used color marking for different scents and clear typographic hierarchy to let the buyer quickly skim the information.

Another point to consider was updating and improving the Amazon presentation as the company still continues using this sales channel as well. So, it was important to make the brand presentation consistent everywhere. We created new infographics for that goal that supported the design solutions for identity and web design.

Web Design

The website design for the brand had to keep visual consistency and harmony with the identity concept, let users quickly catch the message, review the benefits of the product, and make a purchase.

The web pages feature a well-balanced combination of airy light and deep dark backgrounds, high-quality visual content demonstrating the product outside and inside, clear visual hierarchy, readable fonts, and digestible information blocks, making the website scannable and eye-pleasing.

The website uses the sticky header to make the core links and cart available from any point of interaction.

Here’s a look at the home page. Its mission is to inform visitors that weighted blankets are not just regular blankets; they help people to get over sleep disorders and reduce anxiety. To quickly demonstrate that benefit, designers integrated custom illustrations that add a good mood and emotional appeal to the website. The information is divided into clear, digestible blocks in which background color works as a visual divider. The CTA button in the above-the-fold area echoes the color of the logo.

Home page for GNO Wellbeing website

Smooth scroll animation makes the interaction even more dynamic and attractive.

Except for the hero illustration featuring the peacefully sleeping woman and instantly setting the needed mood and atmosphere, there were some more custom 2D graphics integrated into the layout: a lovely sleeping cat character featured on the popup for subscribers and the section of reviews and original icons reflecting the benefits of the product.

Original icons visualizing the product benefits

The reviews section integrated into a cozy night-theme illustration featuring a cat character. 

The Subscribe pop-up window with the custom illustration of a sleeping cat

The product page gives all the details about the product, includes the video presentation, and allows for choosing the needed blanket and adding it to the cart. The light background, balanced and thoughtful use of negative space, instantly noticeable CTA button, and highly readable font create the solid visual hierarchy of the page and make it easy to scan and interact with.

The GNO blankets are made with premium materials. It’s important to tell customers about it, but it’s even more effective to show it. So, a special 3D illustration of the blanket layers was created to give an impressive visual presentation of that aspect.

The About page also uses contrast blocks to present the pieces of content. In the pre-scroll area, it gives a quick message about the brand message with a clear and prominent tagline in combination with the important infographic-style numbers about the company and lovely photo content setting the needed theme. This block uses a dark background making the photos look deeper and the tagline even more prominent. The next block uses a light background, first of all for the sake of readability as it presents the bigger block of text telling about the brand.

So, the website for GNO features three different types of visuals: photos, 2D illustrations, and 3D graphics, harmonically combined and balanced together.

Blog pages designed for the website also feature the same approach: they are airy, calm, and highly readable, with the careful selection of photo content that sets the consistent visual atmosphere.

To make the website usable from any device, the team made the mobile adaptation of the pages considering the peculiarities of mobile interactions.

In general, that was the case of tight and fruitful collaboration with the stakeholders to clarify the business goals and find ways to reach them by means of design appealing to the target audience and unveiling the benefits of the product.

Welcome to check the GNO Wellbeing website live.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

PointZero25. Identity and Website Design for Event Agency

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на Design4Users.

In our today’s collection, you will find a bunch of concepts that demonstrate the results of this creative search. Here you will find a variety of web pages typical for e-commerce websites: home page, catalogs, product pages, landing pages for particular campaigns. Enjoy, consider, and get inspired!

Fashion brand e-commerce website by tubik

Skincare e-commerce website concept by Emy Lascan

Food ecommerce website by Vision Trust

Clothing store website page design by Orizon

Ecommerce website design for craft confectionery by tubik

Online fashion store website concept by OTAKOYI

Bright ecommerce website concept for selling shoes by Shah Alam

Fashion ecommerce web concept by gde.design

Product page concept for a toy shop by Anatoliy

Brutal product page design by Justin Greene

Product page design exploration by Emy Lascan

Ecommerce fashion store concept by Witech Enterprise

Furniture store website concept by Bold Monkey

Balloon e-commerce website by Cuberto

Furniture e-commerce product page concept by RH Agency

Fashion e-commerce web concept by Ariel Jedrzejczak

Cosmetics e-commerce landing page concept by Nickelfox

Furniture e-commerce product page design by Halal Lab

Minimalistic product pages concept by isavelev

Ecommerce theme design by WPDeveloper

Clothing e-commerce website concept by Halal Lab

Light and airy product page concept by Vishnu Prasad

More thematic design collections are coming soon, don’t miss.

You may also like the collections of ecommerce app designs, neumorphic UI designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение UI Inspiration: 20+ Web Design Concepts for E-Commerce появились сначала на Design4Users.

Calorie Calculator app

What Is Mobile App Branding?

As usual, let’s start with terminology. In one of our previous articles, we have already defined branding as a set of marketing and psychological techniques and steps to promote a product, service, persona, etc. setting a brand.

In its turn, a brand is an image created with a set of distinguishing features and promoting awareness and recognizability of the product or service on the market, it’s what people think and know about it.

So, mobile app branding is how users will perceive the app interacting with it: its visual image, its communication, and its reputation.

Slumber app

Questions to Consider

Building the brand for your app, first of all, you answer the questions traditional for building up any brand:

• Who is going to use your app and why are they going to use it?
• What is the USP of your app? What makes it unique compared to others?
• What is the look of your app? What is the main message it transfers with its visual symbols like logo, colors, illustrations, mascots, etc.?
• What feelings and emotions does your app wake in its users?
• What is the tone and voice of your app? Is it formal or informal? Does it communicate with a user as a friend, expert, mentor, or someone else?
• How will users get information about your app? What are the channels of communication between the app and the user?

The answers to these questions will allow for forming the general approach that influences all the sides of work on the app design, development, and promotion. Branding will have an impact on user experience logic and transition, colors and typography, graphics and animation, copy, and style. It will define which channels and methods of promotion will set the shortcuts from the app to a user. Therefore, to make mobile branding effective, you have to answer these questions before design and development start. In this case, all the effort will be put in one complex direction and the brand image will be integral and consistent.

For example, here’s the Cuteen app: here the mobile app brand is targeted at teenage girls which determined the solutions on naming, original graphics, and interaction patterns.

Mobile App Branding Strategies

After you’ve defined who is the target audience of the app, what problems it solves, and what message it sends to the world, it’s time to build a brand image step by step. Let’s check some strategies and features essential in this process. For sure, all of them should be based on user research and market exploration to find the original solutions.

Logo and App Icon

One of the core elements of branding is a logo which is a visual symbol representing the brand. There are different types of logos:

• Symbol: an image of a high symbolic potential associated with an app brand name, functionality, or area of usage
• Logotype (Wordmark): artistic lettering featuring the full name of the brand
• Lettermark: the first letter of the brand name presented in an artistic manner
• Combination mark: two techniques used simultaneously – symbol/lettermark and wordmark
• Emblem: it inscribes the wordmark or lettermark presenting the name of the brand into the symbolic image.

Logo animation and app icon for Uplyfe mobile application

Talking about mobile apps, the important thing to think about is the correlation of the logo with an app icon. An app icon is an interactive brand sign that presents the application on different platforms supporting the original identity. In most cases, it features the logo of the app designed according to the requirements for this kind of icon. As an app icon is placed on a very limited amount of space, big wordmark or complex emblem logos can’t be used effectively. So, app icons tend to feature symbols or lettermarks.

However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. Another approach may be used for the apps presenting well-known brands with already recognizable logos: in this case, designers will have to adapt the well-known logo image to the form of an app icon while inside the app they will use its full form, for example, on a splash screen. Here’s a splash screen for Toonie, featuring app mascot and a logo wordmark.

Keywords

One more good way to make the branding consistent is by making a set of keywords for it. They can be divided into several groups according to their role.

Descriptor keywords will identify and describe your brand, so all the participants of the creative process will understand what image the app has to get and what message it has to send. These keywords define the core features users should catch immediately from the looks and interactions. For example, in this set you may define the app as “funny, entertaining, bright”, or “helpful, simple, minimalist”, or “business, luxury, exclusive” and so on, and so forth.

Brand keywords present the set of words people will use to find your app. It’s not only the original name but also different variants of its extension as well as typos. For example, in the case of our Upper application, the list will include Upper, Upper App, Upper to-do app, Upper mobile app, Uper, UPPER, and so on. This list will be helpful for SEO issues and promotional campaigns if you plan any.

Brand-Plus keywords are the combinations of a brand name with qualifying words or phrases. For example, for our Toonie Alarm app, we have Toonie stickers, Toonie mascot, Toonie tutorial, Toonie special offer, Toonie for iOS, Toonie stickers for iMessenger, Toonie landing page, and the like. They form another collection helpful for both SEO and content creation.

Copy: Name, Slogan, Style

For sure, these points would better be agreed upon before the actual creative process of design and development. The thing is that naming in terms of strong competition is another big challenge and it has a huge impact on all the following solutions about design, marketing, and communication with users. Except for deciding on the name which you find reflecting the benefits of the brand and memorable, you will need to ensure about:

• availability of this name in AppStore and PlayMarket (if it’s not available, you’ll have to find the variants which may belong to your brand and brand-plus keywords or start from zero and find another name)
• a domain name for a website or landing page you will have for the app (in case, the app is an independent product rather than the supporter for an existing brand)
• presence of the app name on the Internet (there may be other non-app brands already using this name and hard to compete with).

Moreover, the name of the app will influence the general stylistic concept, choice of colors, ideas for a logo and mascots, design of app icons, and many other things. So, if you make a decision at the start, you will save many hours of redesign later. Still, this path is just a recommendation, not a cure-all: there are many good examples when apps are renamed right in the process of creation or even after the launch successfully, but in this case, you should be ready for additional working hours and some effort on remaking other assets.

One more point in this section is the slogan, a catchy brand tagline sending the message about core app benefits to the user. In branding for a mobile app, it may seem not crucial as sometimes there is no place within the app for much copy. However, try thinking beyond the app itself: you’ll definitely need a slogan for outer channels to promote the app. It may be used in social networks, promo videos, reviews, landing pages, emails, etc.

And another thing to think about is UX-writing and copywriting style for the app. Copy sets the tone and voice of communication and sets the type of relations with a user. So, it’s vital to reach an understanding of how the app will talk to the users and keep this style across all the channels within and out of the app. Some minor changes are acceptable for various channels but the general communication should feel consistent from one point to the other.

Graphics

Developing a strong app brand, it’s vital to give it the pinch of originality even if it sells something very basic and widely-spread. Custom graphics play the premier violin here. They will make the app unique attracting users’ attention. Don’t forget that aesthetic satisfaction is one of the strongest factors of desirability.

In this aspect, consider using the following graphic content:

• logo (described above)
• mascots (symbolic memorable characters communicating to a user on behalf of the app)
• custom illustrations (visual prompts on functions and processes, theme illustrations)
• branded interactive elements (loaders, splash screens, tutorials, etc.)
• photos (not only inside the app but also high-quality photos of the app for its promotion)

Loading animation with custom graphics for Event Planner app

Product Video

Video content is more and more popular today, in the era of YouTube and Snapchat. The branding for the mobile app is not an exception. A product or explainer video is a short animated presentation of app features and advantages, informs about special steps of interactions and shows its problem-solving potential. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually does it in a way of telling a story. For example, here’s an explainer video we made for OffCents mobile app.

Personalization and Onboarding

User onboarding is the set of techniques and interactions whose objective is to comfort users and give the first concise introduction to the product. There may be textual prompts, tooltips, tutorials  – and all of them can carry the slight signs of branding in both copy and graphics. All these details shape the positive user experience and support brand loyalty with happy users.

Personalization is a users’ ability to customize some features and interactions according to the individual users’ needs. Among the examples, recently we shared a case study on Recipe App which enables users to set personal goals and exclude the unwanted types of food or ingredients to customize their list of recipes.

Another example is Upper App which enables users to choose among various skins to make the app looks correspond to their preferences.

Gamification

Gamification applies game mechanics into the non-game environment, in particular, mobile applications. Challenges, badges, leaderboards, bonuses are effective methods of user motivation. Applying graphics in brand stylistics, they support brand awareness and make the app interface easily recognized. Even more, such virtual or even real rewards encourage users to share their success with friends both online and offline – this way, they become another channel distributing information about the app and witnessing positive user experience.

Help and Support

No man can make a good coat with the bad cloth. Real branding is not only about attracting attention and making an incredible first impression. It’s about all the experience users will have. So, take care of how they will the support they need at any step of interaction, especially in the case of complex mobile products like social networks or e-commerce.

Landing Pages

Landing page is a tool of great importance for building the mobile app branding and online presence. It plays a crucial role if the case is mobile-only and the app doesn’t correlate with a website. In general, it is a web page designed with a focus on specific relatively narrow goal and a quick way of accomplishing a particular action. So, for a mobile app, the goal will be app installation and the landing page will concisely cover its benefits and functions. What’s more, you can create multiple landing pages for one app based on various segments of the target audience with geographic, gender, psychographic, demographic and behavioral targeting. It is an effective way to reach users and give them a quick presentation of the app which will tell them more than just screenshots on the AppStore. Here’s the example of a landing page designed for a dating mobile service.

Landing page for a dating app

Mobile banking app landing page

Landing page for Vertt, car sharing service app

Social Networks

One more channel supporting branding strategy for a mobile app is social networks. Promotional campaigns, reviews and public pages for the apps should not be seen only as a direct sales channel from which users will directly install the app. Social networks are first of all the big channels of brand awareness and brand recognizability so don’t neglect their influence.

Brand Ambassadors and Opinion Leaders

This strategy for mobile app branding is also based on socializing. There’s still no better advertising than the recommendation from people whom you trust. Social networks with their huge and diverse audience form the growing trend of marketing with opinion leaders (individuals or businesses that are able to influence public opinion in their area) and brand ambassadors (an influential person hired to present the brand and build its positive image and strong awareness). Choosing this direction, remember two things:

• opinion leaders mostly care about their audience and reputation so they won’t promote what they don’t like or don’t find good for their audience, even rejecting profitable offers
• opinion leaders and brand ambassadors will waste your money if the product is half-baked. You may get the big traffic from the campaign and attract many users but if they get something with numerous bugs or lorem ipsum here and there instead of real copy, it will have a bad influence on the brand image in general. Positive experience first. Presentation and promotion after it.

Tasty Burger app

So, it’s easy to see that making mobile app branding deals both with app UI/UX and outer channels of reaching users. Neglecting one of the directions you risk failing another. Greatly designed and developed app will die unknown if target users don’t get the information about it. Amazing and well-performed marketing campaigns will waste your money if the app is trash. Only together they will build up a strong app with a loyal audience.

Useful Reading

6 Creative Stages of Branding Design

Mobile App Design: Big Guide into Types of Mobile Applications

UX Design for E-Commerce: Principles and Strategies

Relations of Branding and UI Design

Business-Oriented Design. Explore the Target

Design for Business: User Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

Originally written for Tubik Blog

Сообщение How To Build a Strong Mobile App Brand появились сначала на Design4Users.

Landing Page Objectives

Why and when landing pages are used most often? As for the goals behind the landing page design, they can be different; yet, the biggest diversity of such web pages is found in the ecommerce sphere. In this field, they support both visitors and stakeholders presenting the particular commercial offers without distraction, in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially effective for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page, in this case, can lead to poor user experience, in particular when visitors come from marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page. Or their attention will be driven away so the purchase won’t be finalized. A landing page is a solution to avoid these issues and focus visitors’ attention.

But landing pages are not only about selling and buying: there are also many other cases. They are widely used to present and promote:

• mobile applications
• educational resources
• charity platforms and activities
• communities
• events and meetings
• special announcements and information.

Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help. Let’s review the variety of examples for different goals. Most of the design concepts are based on well-checked approaches, so they feature:

• clear visual hierarchy
• catchy hero image
• bold and highly readable typography
• short scannable tagline
• readable and concise description
• instantly visible call-to-action element
• the color palette with emotional appeal corresponding to the message of the page

So, let’s get started!

Landing page for a photo service

This design has been created for the web promotion of a helpful digital product for those who love photography. The application allows a user to keep their photos in an organized gallery and albums, find the needed photos in short seconds and improve their looks with an AI-based editor. That’s a bright example of using custom hero illustration to support storytelling, add originality and make web marketing effective.

Landing page for a scuba diving course

When the season of water sports is at its full, for businesses in this area it’s important to reach the target audience that looks for activities, training, and entertainment through the Web. This landing page design has been designed from the perspective of that theme: it’s created for the company that organizes active lifestyle tours and workshops in Portugal and presents the course on scuba diving. The refreshing and atmospheric photo instantly transfers the mood and reflects the nature of the offer, split screen clearly distinguishes different interactive areas and the thought-out visual hierarchy makes the web page scannable.

Landing page for an innovative car wash service

Now more and more digital products are created not to sell, offer, inform or educate, but just to connect people that can solve problems of each other. This design is right about that kind of task: that’s a landing page of the website for a service that provides innovative car cleaning and offers those who want to join and earn money. This particular page is aimed at people who want to be hired as cleaners and join the team of local car wash providers. Cute and catchy hero illustration sets the positive mood and informs about the nature of the service letting all the other content be readable and clear on the airy light background.

Landing page for a mail management service

This page promotes a service for mail management: it unites and organizes all the emails and messages from a variety of channels – inboxes, messengers, social networks. This way, users that deal with lots of communication have the chance of being even more productive. The page composition and layout are built around the hero illustration that sets instant association with both the name of the product and the problem it solves. What’s more, the color accents of the illustration effectively work together with a CTA button, and the dynamic composition of the artwork supports the brand name Mailflow.

Landing page for speech recognition technology

Perhaps, there are no parents in the world who wouldn’t dream to understand each and every sound of kids cooing and babbling. That’s one of the challenges for modern scientific and creative teams, and the presented design is also about that theme. That’s a landing page promoting speech recognition technology in a collection of innovative projects. The pages of this kind are a powerful tool for building a digital product brand so it’s vital to make them catchy and emotionally appealing. Here this effect is reached with a super cute digital illustration that is also informative and instantly gives visitors the idea of the technology benefits. The choice of font for the tagline also supports that mood while the bright color accents make the CTA clear and visible.

Subscription page for a bookstore selling children’s books

Here’s the webpage for the online bookstore selling children’s books and its conversion goal is to engage users to subscribe to the newsletter. The hero illustration instantly creates the proper atmosphere and together with a simple tagline and description that explains the benefits, it encourages users to join subscribers. The dark background here doesn’t hurt readability in any way due to the thoughtful choice of fonts, but it really helps to make the image look deeper, atmospheric, and eye-catchy.

Landing page for a luggage delivery service

If you are a keen traveler or you have to move in business all the time, high chances are you know all the ins and outs of the luggage challenge. That’s one of the negative points for many people on road – and that’s the point behind the service presented in this design concept. Here’s the landing page designed for a delivery service that takes care of clients’ luggage picking it from the needed location and delivering it to the destination chosen by the client. The bright and catchy hero image and color palette instantly set the positive mood and harmonically combine with the tagline and interactive tab. Color accents effectively unite all the layout composition.

Landing page for car security app

For a mobile app, the goal behind a landing page is app installation and the core task is to concisely cover its benefits and functions. What’s more, you can create multiple landing pages for one app based on various segments of the target audience. It is an effective way to reach users and give them a quick presentation of the app telling and showing more than just screenshots on the AppStore. Here is a quick glance at a landing page of that kind: it presents the CarAid, a mobile application of the service to solve problems with a car and save drivers their time, money, and nerve cells. The page design is built around a prominent and a bit experimental hero illustration setting the original visual style and catching users’ attention.

Landing page for an art exhibition

In terms of high competition, one of the factors any event success depends on is its promotion. The landing page is an effective tool to unveil the benefits of the event and simplify the process of booking or buying tickets. As well as get potential visitors stunned with wow-graphics and effects setting the right mood and building up strong emotional appeal. This design features a landing page of that kind: its goal is to promote an art exhibition and let users quickly buy tickets. Prominent illustration, catchy palette and experimental typography will definitely catch the user’s eye.

Landing page for hiring platform

Finding a skillful artist for a design or marketing project sometimes feels like exploring the exotic area. This web design with a prominent hero illustration is right about that: it’s a page created for the web platform that helps artists and their clients easily find each other and together make the world even more beautiful.  This page features the choice of a serif font Domaine for the tagline. It visually reflects the style of the illustration and makes them harmonically work together as one composition. Yet, for the description copy block, the designer chooses a sans-serif font that is highly readable, this way reducing the cognitive load for readers and making the copy presenting benefits scannable.

Landing page for an innovative meal delivery service

When your day is tasty, everything gets better – that’s what today’s shot is about. Here’s a landing page for Quizine, an innovative service that delivers food of different national cuisines. That’s a project widely integrating brand-style illustrations in UI design. The web design is based on simplicity. It’s full of air and uses a limited color palette to avoid distraction and make the web pages scanned easily due to contrast colors and readable fonts. The original illustrations support a positive user experience with storytelling and give the layout original and trendy looks. Prominent call-to-action elements instantly focus users’ attention on the core interactive zones. Color also helps users understand the hierarchy of CTA buttons: filled “Make an order” button get a higher visual priority than the ghost button used to lead the visitors to an explainer video.

Landing page for a shopping delivery service

Here’s another landing page for the local delivery service, this time the one that does and delivers shopping for its clients. Catchy 3D graphics set the theme and in combination with an uncommon color palette give the page trendy looks that help the brand stand out in terms of high competition in this business segment. As the website is oriented toward local clients, the CTA is designed for a quick call as a priority action.

Landing page for an interactive mapping app

No secret, now websites and smartphones are much more for us than just sources of information and communication. They are used for multiple purposes and often become our digital assistants in daily basic operations. This landing page was designed to promote a digital product of that kind: it allows users to build interactive maps for their smart homes, offices and even public spaces. The catchy and concise layout with an artistic and a bit experimental hero image becomes an integral part of strong product branding.

Landing page for a cryptocurrency guide

This web interface concept is on the finance theme: it’s a simple and catchy landing page for a cryptocurrency service sharing an invite-only comprehensive guide. The goal of the page is to inform the visitors about the offer and let them join the community by sending the email address. Animated interactions add fun and life; generally, the design strives for a balance of business-like but friendly mood.

Landing pages for a productivity service

Having our hands full of various tasks, we tend to try tools and methods to boost productivity. This is a landing page for a productivity tool offering AI-based assistance in task management. The prominent hero illustration won’t let the user pass by, tagline and description present the key benefits of the offer and the CTA button engages the user to try the tool for free.

This page for the same service presents another feature of it – inbox management. One of the big challenges is communication in numerous channels, from email inbox to messengers and social networks, so the product offers the united inbox and AI assistance to boost mailing and communication for higher productivity. Following the same visual style, the webpage is built around the original and emotional hero illustration and solid visual hierarchy.

Landing page for a hair accessories store

One of the fundamental rules of commerce is to show the offered item at its best. This landing page demonstrates how to do it in the case of an e-commerce website by means of digital art. Here’s the page designed for an online store selling exclusive hair clips and accessories. Prominent and artistic illustration instantly sets the theme, gives aesthetic pleasure, and creates a strong emotional appeal, especially in combination with sophisticated typography chosen for the layout.

Landing page for a security service

This is another landing page promoting a mobile app, the security application that helps a user quickly contact the police and care about the safety of the neighborhood. It uses the visual contrast of a hero illustration full of irregular curves and thin lines and bold solid Druk font.

Landing page for a fashion event

One more landing page promoting an event: this time it presents a fashion event, gives it a brief introduction, and lets users quickly buy tickets. Prominent illustration, catchy palette, and bold typography don’t leave visitors any chance to pass by and create the artistic trendy look.

Landing page for environment protection community

With all the global problems our planet faces today, communities of people concerned with them and seeking solutions are growing to prevent the negative impact. This design is also devoted to that theme: a web page was designed for the website of the eco-aware community consulting businesses and manufacturers as well as launching projects devoted to environmental protection. The composition and color palette of the hero illustration support the emotional appeal and create an instant message about the theme. The visual hierarchy of the webpage sets the basis for scannability to make the major information, infographics, and CTA instantly visible.

Landing page for a Bauhaus event

The Bauhaus is often referred to as one of the most impactful modernist art schools of the 20 century. Its approach to teaching and the relationship between art, society, and technology had a great influence both in Europe and in the United States. The Bauhaus aimed to reunite fine art and functional design, creating practical objects with the soul of artworks. The school was operational from 1919 to 1933, so in 2019 the art and design society marked 100 years of Bauhaus with a big number of events, publications, designs, and artworks. This landing page design is also devoted to the theme and aimed at promoting the Bauhaus event. Obviously, the webpage follows the aesthetics of the art school approaches to art and design, first of all with bold color contrast of the limited palette, visual minimalism, and prominent typography.

Landing page for illustration conference

This landing page for the illustration conference builds the composition on the original and eye-pleasing animated hero image that will attract the target audience: designers, artists, and illustrators. The animation also supports the integrity of the transition between the pages. Here the designer chose a light background and pastel color accents that draw visitors’ attention to the needed layout zones and elements, and support the visual consistency of the composition in combination with the digital artwork.

Landing page for a social network management app

This catchy web page was designed to promote an application that allows users to manage all their social accounts in one place. The illustration has a dynamic composition reflecting the fast-paced nature of communication in social networks. The page uses a split background with a light part for the bright graphics and a dark part for the text content. CTA button works as an element uniting the general composition as a white element on the dark part. The icon of a computer mouse gives the visitor a prompt that the page can be scrolled for further information.

Landing page for a football final match

This web design concept was aimed at football fans: on the 1st of June, Madrid hosted a final of the UEFA Champions League – and two English clubs fought for the cup, which doesn’t happen all too often. We couldn’t help adding a pinch of fun and art to this event, and the creative search brought out this landing page on selling the tickets to the match. The hero illustration sends the vibes of the English tea ceremony and the characters are drawn to be well-recognized as trainers of the playing teams.

And here is a look at the page section aimed at sales: users can choose a place, get a recap of their order and make a payment right there.

Landing page for a currency converter

With easier and faster traveling, online financial operations, and global businesses, currency exchange and exploration of currency rates become a part of the routine for many people. Why don’t we add some style to it? Here’s a quick landing page concept for Currious, simple financial service with an online currency converter. Geometric pattern, clear tagline, ability to do the core operation right on the page, and quick connection to social networks of the service.

Landing page for a kindergarten

This landing page of the kindergarten uses a big funny and cute monster mascot designed and animated to entertain users and set the needed emotional background. The layout features playful but highly readable font, organizes the information in a clear list and marks the clickable elements.

Landing page for a babysitting service

This landing page design is full of cuteness. No wonder: it promotes the service connecting babysitters with their clients. The feeling of cuteness and positivity is supported by several factors, among which animated custom illustrations with funny characters play the key role. They transfer the message and the mood, create the needed atmosphere before the user starts reading about the service, and give the whole page a unique look. Although the color palette is pastel and peaceful, creating enough contrast and making the core details scannable. Smooth scroll animation enhances the feeling of integrity.

The landing page includes all the classic components: it describes the service, gives the direct connection to the top professionals, features testimonials from clients and shows users how to contact the service representatives. What’s important, users aren’t forced to scroll the entire page if they want to apply for a babysitter quickly: they get the needed buttons to do that right from the first pre-scroll screen.

Useful Articles and Design Collections

Check more creative sets of UX design concepts and articles on best design practices.

Negative Space in Design: What It Is and How To Use It

How to Make User Interface Readable: Tips and Practices

10 Reasons to Apply Illustrations in User Interfaces

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

The Anatomy of a Web Page: 14 Basic Elements

Photo Content in User Interfaces: 7 Basic Ways to Use

Take My Money: UX Practices on Product Page Design

5 Pillars of Effective Landing Page Design

Design for Sales: 10 Creative UI Designs for Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение 26 Creative Examples of Landing Page Design by Tubik появились сначала на Design4Users.

Since you can’t just close your current business, reopen, and expect to return to your previous company’s size immediately, you must strategically choose how and when to rebrand. We’re going to tell you how you can successfully execute your company’s rebranding as a whole and specifically on social media. Keep reading to learn more!

Update Your Logo

When you choose to completely rebrand your company on social media and as a whole, you should consider updating your logo. You don’t necessarily need to get rid of the old one – and sometimes it’s better if you keep parts of it. Instead, you might choose to update your old logo into something more modern by following current graphic design trends. Paying attention to these trends can help bring your logo and, therefore, your brand from the 90s (or earlier) up to speed with the current year.

You’ll want to consider the color palette used in your logo, as well as the use of text, lines, and shapes. For the best possible logo design, you’ll want something easy to remember and associate with your brand, fits your company as a whole, and is relatively timeless – you don’t want to have to change/update logos every other year!

Bakery logo design

The case study of logo redesign for a landscape company

Opt for Professionals

One of the easy ways to begin the rebranding process is to hire a social media marketing agency. This type of agency differs from other marketing agencies because it focuses specifically on your brand’s social media presence and positioning your company as an industry leader on the world’s fastest-growing group of social networks.

There are currently more than 3.8 billion social media users in the world, this means that the (proper) use of social media for your rebranding strategy is a must. Social media is where people turn to find and give recommendations, learn about new products, and share their experiences with a brand.

As you begin the process of rebranding, a social media marketing agency can step in and ensure that your social presence is as visible as possible. They can also help people understand why you are choosing to rebrand, reach new potential customers, and help you learn the right way to engage with your followers.

Consider Improving Marketing with Video Content

If your brand has never incorporated the use of videos into their marketing strategy, now is the time to do so. Opting to include video marketing in your rebranding strategy will help your company appeal to a wide range of customers while offering a variety of content. Using video content allows potential customers to see your product or service being used, hear a customer or expert testimonials, and visualize how they might benefit from choosing your brand.

When you decide to use video content in your marketing strategy, you will want to find the best video hosting site available to upload, store, play, and share videos on the internet. Ideally, the video host you choose will give users a great watching experience while giving your company the ability to customize the video player.

A great video marketing strategy is particularly effective when rebranding your company because it can help people visualize the changes you are working to make, how you’re becoming better, and even why you’re making a choice to improve. It also will give your company exciting new content to share and promote your rebranding efforts.

The example of explainer video for OffCents

Example of a showcase video by Tubik that can be used to promote and show services via social networks

Improve Your User Experience & Customer Service

While your company can focus on its social media presence, marketing strategy, and logo design, all of these will mean nothing if your website’s user experience and product’s customer service are lacking or completely non-existent. Your website must be intuitive and quick to load all pages. The visual aspects are important, but how it functions matters even more. If a customer gets lost on your website or can’t figure out how to purchase your product, your rebranding efforts are almost null.

Furthermore, having a user-friendly website only counts for so much if your company has poor customer service. Poor customer service will wreck a company’s rebranding strategy and its new reputation faster than almost any other potential problem. Having terrible customer service be the cause of bad reviews and negative word-of-mouth; it will turn potential customers against you before they give you a second look.

So how can you fix a customer service issue? Make sure that your company’s contact information is visible and easy to find; consider offering a live-chat option or at least quickly respond to any emails/messages within 24 hours. Engage with your followers on social media by liking and replying to their comments – it shows your team cares!

Additionally, try to ensure that your customer service representatives are empowered to help customers and solve problems without their supervisor’s approval – this will help quickly resolve issues without the annoyance of long holds/lengthy response times. This small step can go a long way toward improving and keeping a great reputation when it comes to your brand’s new image.

The rebranding of your company will only be successful if you can retain old customers and attract new ones. It is difficult, if not impossible, to do this without excellent customer service, and whether these aspects are positive or negative, will spread like wildfire on social media!

What Will Your Company Look Like After Rebranding?

If you are curious as to what your company and sales will be like after you’ve entirely rebranded your company on social media, the answer is actually up to you! If you put forth the time and effort to rebrand the business and stick with positive changes completely, you’ll likely see an increase in sales and customer retention. Unfortunately, the opposite is also true if you choose to allow your company to revert to the way it was before the rebranding process.

The key to successfully rebranding your company on social media will be to demonstrate all changes and allow people to see it for themselves. When this happens, your conversions will improve, and people will naturally want to be part of your success!

About Author: this is the guest post by Hazel Pan, a copywriter whose expertise includes Funnel Copywriting & Inbound Marketing.

Welcome to read more about the importance of design for digital marketing, review the creative stages of branding design, and learn how to use mascots in marketing and user experience design.

Сообщение How to Execute Successful Rebranding of Your Business on Social Media появились сначала на Design4Users.

But even though web design is a crucial component of a company’s promotional efforts, many business owners tend to forget that it is just a part of a broader digital marketing plan.

It should be consistent in purpose, look, and feel with your other marketing efforts like SEO and email marketing.

By carefully considering all the aspects of your overall marketing plan, you’ll be able to create an efficient design that serves as the heart of your marketing efforts and will help achieve your goals.

Illustration by Linn Fritz

Key Components of Effective Website Design

Here are four different marketing components that well-executed web design can help with the following aspects.

Consistent Branding

We, people, are visual beings, and, like it or not, first impressions are everything. Since our attention span is almost equal to that of a goldfish, you only have about 5-8 seconds to grab visitors’ attention and make them want to stick around.

Firstly, make sure that your website’s look and feel are consistent with all your other marketing materials, including product sheets, whitepapers, etc.

Secondly, ask yourself: “Is my branding communicating the right message about my business?”

Here are a few elements you need to pay attention to.

Logo

It’s safe to say that a logo is the face of a company. Just think of giants like Apple, McDonald’s, and Nike – you’re able to instantly identify them by just looking at their logos, even if their name isn’t a part of that logo.

Very often, your logo is the first thing that potential customers notice about your business. It’s not just an image; it’s a point of recognition for clients and an important foundation for the branding of your business.

As I mentioned earlier, customers form an opinion about a company in a matter of seconds. A well-designed logo is a great way to tell customers that your business is trustworthy, professional, and provides high-quality services. Luckily, creating an awesome logo is easier than ever. You don’t have to hire a fancy logo designer and break the bank; all you need to do is use a free custom logo maker.

Colors

Colors are very important in marketing and branding because it’s where first impressions of customers are based. In addition, colors are the secret ingredient in producing a solid visual identity for a company. In other words, choosing a certain color scheme can either make or break your business.

Colors are much more than just a visual aid because they convey experiences, emotions, and feelings. Psychologists have found that there’s a meaning behind each color.

For instance, blue is seen as a very positive color that invokes security and trust. It’s also associated with serenity and creation. So, no surprise, it’s the color of choice for many of the top 100 companies, including Facebook, Intel, Samsung, Twitter, etc.

Product page for the website on zero-waste lifestyle

Images

Images act as storytellers. By using high-quality, carefully-composed images, you can evoke an emotion, a vision, or a dream. Your website visitors will ‘read’ the images and make a decision whether or not they want to keep exploring in a split second. When used cleverly, images can help drive more traffic to your site, encourage brand interaction and social shares, and ultimately help you to achieve your business goals.

Dessert recipes blog

Fonts

How many times have you visited a brand’s website and immediately knew you wouldn’t like the company simply based on the fact that the design didn’t sit well with you? Well, chances are fonts have played an important role in your distaste.

Maybe there were too many of them, distracting your attention from the overall message. Or the company used generic fonts that you have already seen hundreds of times. Or they simply used a font that doesn’t match the type of company.

Fonts help you understand the message before even comprehending the words. Along with colors, fonts are the first impression for potential customers, so finding fonts that portray your company’s brand the right way is crucial.

Website design for GNO Blankets brand

Outstanding UX

The concept of “brand” is far more than what your website looks like. A brand is a sum of all customer’s interaction with your company. When it comes to brand image, user experience has a lasting impact. The overall experience your customers have on your site determines whether they’ll remain your customers or complete the purchase.

It is estimated that this year, overall customer experience will be the most important factor impacting which companies consumers choose to do business with, even more important than price and product!

If you create a better UX for your customers, they will have a better relationship with your brand. Here are several things you need to focus on in order to improve the UX for your website visitors:

Add intuitive navigation to your website. When visitors land on your page, they’ll look for markers to orient themselves. Make sure the navigation bar is located near the top of the page and easy to spot. It should also appear in the same location on all website pages.

Ensure your website is error-free. Even though a 100% error-free website is probably impossible to achieve, you should at least strive toward that goal.

Focus on social media integration. There are diverse ways to engage with customers on social media: answer complaints and questions, share content, or respond to mentions in order to provide an overall better UX.

Highlight your mobile-friendliness. Today, 2 out of every 3 minutes spent online are done via mobile devices. If your website isn’t mobile-friendly, your brand image will most likely suffer.

Mobile-friendly website of a book festival by Tubik

Email Marketing

We’ve all come across emails that have swept us off our feet (in a good way) and those that we wish we would stop receiving because their design is simply…well, in most cases, there’s no design!

The content conveys the necessary information, but the design is what actually allows readers to navigate the content as the writer intended. In addition to this, great email design captures the reader’s attention and entices them to keep reading once they open the email.

For instance, InVision understands the importance of great visuals, so their weekly newsletter is a perfect mix of images and text. This makes it mobile-friendly but also very easy to read. They also make great use of animated GIFs in their emails, as well as a clever copy on their CTA buttons.

However, sending hundreds or even thousands of emails to potential customers every couple of days is a daunting task. That’s why you need a good automation tool. Outreach tools like GMass will handle numerous aspects of your email marketing campaign like sending personalized emails in bulk, mail merge to email addresses saved in Excel spreadsheets, sending follow-ups, campaign tracking, etc.

SEO & Content Planning

Designing a great looking website is not a guarantee that your website will get a high amount of traffic or that your customer base will grow. If you want to boost the organic traffic, you’ll need to rely on SEO. You can incorporate SEO tactics into more than just your copy. Here are simple tricks that can help you make your web design SEO-friendly too.

Use flash elements sparingly

If you use flash elements, it’ll be more difficult for search engine bots to rank your site. That’s because flash is often devalued or even ignored by search engines, so it won’t add anything to your SEO efforts.

Optimize images too

When choosing images for your site, ensure that they’re not too big. Images that are too large will make your website load slowly, and negatively impact SERP rankings. In addition, make sure to use a keyword in the alt text section of the image to further help with your website’s SEO.

Place your keywords everywhere

Most people concentrate on placing keywords throughout the copy and articles, but they can also be incorporated into the website’s design. Besides in images, keywords can be used in the website slogans, navigation, title tag, H1, H2, and H3 tags, URLs, meta keywords, meta descriptions, bullet points, breadcrumb trails, title attribute on links, internal links, footer links, folder names, and file names.

Integrate social media into your design

This will not only rank your site higher in SERPs, but it will also show potential customers that your company is personable.

Word Out

Effective web design brings together different components of your digital marketing plan and aids the improvement of UX in order to entice users to come back over and over again.

Author: this is the guest post by Hazel Pan, a copywriter whose expertise includes Funnel Copywriting & Inbound Marketing.

Сообщение The Impact of Design on Digital Marketing Success появились сначала на Design4Users.