Tag Archives: design for business

UI icons in interface design tubik blog

Small Elements, Big Impact: Types and Functions of UI Icons.

Icons in user interfaces are the elements that cannot be overestimated. Small and meaningful, they solve numerous problems. They become little keys to usability and intuitive navigation. And only designers know how much time and effort is needed to make them simple, helpful and expressive.

 

Guru of user experience design Steve  Jobs said: «Details matter, it’s worth waiting to get it right.» Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

 

Definition

 

In general terms, an icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

 

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience.

 

weather app design UI

 

History

 

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was a beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins which have been used so far.

 

icons xerox star

Source

 

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

 

icons apple machintosh

Source

 

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

 

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

 

Types based on functions

 

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

 

Homey app smart home UI

Homey App

 

saily app UI design

Category icons for Saily app

 

Interactive icons

The icons of this type are directly involved into interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the users request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls and any other elements of interaction.

 

tubik studio tapbar ui

Tab Bar interactions

 

ui concept animation tubik studio

Menu interaction concept

 

Decorative and entertaining icons

 

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

easter icons tubik studio

Easter and spring themed icons 

 

App icons

 

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icons. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon which won’t get lost on the screen full of other app icons.

 

logo design by Tubik studio

Elephun App Icon

 

Favicon

 

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

 

Types based on visual performance

 

Glyph icons

 
The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers etc.): it presents a readable character enabling people to write it.

 

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

 

pictish_rune_meanings

Source

 
In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the «@» symbol representing the preposition «at». For example, here is the set of icons for material design from Google.

 

material icons

Material icons

 

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play the big role in the issues of navigation for a digital product.

 

weather_icons tubik studio

Weather icons

 

Flat and semi-flat icons

 

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in legibility of the presented items.

 

tubik studio blog app

Blog App

 

Skeuomorphic icons

 

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

 

SVG icons

 

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999, and supported by all major browsers. SVG icons are growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

 

Types based on applied image metaphor

 

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of the metaphor they reflect.

 

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail etc.

 

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

 

Arbitrary icons are the symbols which currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing «Save» function: although initially it was a reference icon, for many users now it doesn’t work like that — they just know the meaning solidly connected to this image for many years.

 

multimedia icons tubik studio

Multimedia Icon Set

 

Key features of effective icons

 

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

  • clear — the meaning of the icon is understandable and accessible to the target audience
  • meaningful — the icon transfers the informative value
  • recognizable — the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
  • simple — the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
  • original and noticeable — the icon stands out among other similar elements of the interface which is especially actual for the app icons
  • scalable and flexible — the icon saves its unity, integrity, and legibility in different sizes and resolutions
  • attractive — the icon satisfies aesthetic expectations and sets harmonic visual appeal
  • non-offensive — the icon doesn’t have hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience
  • consistent — the icon corresponds to the general stylistic concept of the layout it is applied for.

 

Icons in UI tubikstudio

 

Recommended reading

 

Here is a bunch of articles for further exploration of the topic:

 

Icon Classification: Resemblance, Reference, and Arbitrary Icons

A Brief History of the Origin of the Computer Icon

Iconic Simplicity. The Vital Role of Icons.

Visual Perception: Icons VS Copy in UI.

How to Combine Icons from Different Sets in Your UI


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

These days e-commerce is evolving by leaps and bounds presenting new interesting challenges to designers of user interfaces. Websites and mobile applications enabling users to buy and sell need constant attention and improvement to correspond to the current concerns. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the strategies and practices of UX design for e-commerce. Welcome to listen and follow the updates!

 

If you want to get the set of episodes devoted to the theme of business terms and processes in the design aspect, subscribe here and get them right into your inbox.

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

tubik studio lettering design

Get Original: Benefits of Handcrafted Lettering in Design.

Nowadays, people try to be discernible and unique among thousands similar ones. Business owners strive at the uniqueness of their brand and often demand something special from designers. The majority of original things are made by hands. Custom hand lettering took its place among other design techniques a long time ago and it never gets old. All the advanced digital tools still couldn’t replace it and even more, they only supplemented it with new opportunities. Today’s article reveals the essence of lettering and shows its role in the design industry.

 

lettering designer

 

What is lettering?

 

The essence of the term “lettering” is already hidden within its name. To be specific, lettering is the art of letter drawing when a word or phrase is presented as an artwork. Each letter is drawn in an original way and together they form a unique composition. Lettering masters usually work by hands using various pencils, brushes, ink, or chalk. Some may prefer applying graphic tablets and stylus but it can be more challenging because it requires advanced skills in special programs like Adobe Illustrator. A distinctive characteristic of hand lettering is that an artwork can be carefully developed as well as absolutely spontaneous.

 

tubik studio lettering design

 

Lettering vs Calligraphy

 

People seeing decorative letters may think “ A calligrapher did a stunning work!”. It happens because not everyone knows that lettering and calligraphy are not the same things. Let’s clear this out.

 

As we said above, lettering is the art of letter drawing while calligraphy is the art of beautiful letter writing. A dip pen and ink are the main tools of calligraphy masters. Calligraphers follow certain rules to create a perfect construction with the letters made in one style. They regulate the width of lines by changing degrees of pressure on the pen. Calligraphy masters usually write one letter and even one word with one stroke.

 

One of the biggest differences is that calligraphy aims at the perfection of style while lettering is popular due to the freedom of the presentation. Lettering is more like an individual illustration. Each letter is an original unit and together they form a unique picture. Masters of lettering are not constrained by the certain style, so they can create something really special which isn’t similar to anything else.

 

team_work_tubik_studio_lettering

 

Hand-drawn lettering in design

 

Being an expert means non-stop improving and expanding professional skills. Today a proficient designer is expected to be an artist, architect, psychologist, and illustrator all in one face. So, the lettering skills will definitely be a huge benefit for a designer’s status. However, some may ask how lettering can be applied in web design. Let’s see.

 

Nowadays, a designer can choose from a great assortment of various fonts perfectly suiting different digital products. Nevertheless, it may happen that a client’s product has a wide range of competitors and to stand out, it needs something extraordinary so that the product could attract the attention of the potential customers. Many designers offer to create slogan lettering. It is drawn in an absolutely original way which characterizes the product and the company principles. This way people may memorize the slogan quicker and associate it with the certain product. Design with custom lettering can increase brand awareness and make sure people will be able to distinguish the company from the others.

 

slogan_lettering_tubik_graphic_design

 

In addition, beautiful original lettering can guarantee the pleasant first impression from the company. People always appreciate things which go from hand craftsmanship, so handmade lettering will give clients strong associations with the trust and painstaking. Also, decorative letters give the feeling of aesthetic pleasure which is significant for the delightful first impression too.

 

Hand lettering in branding

 

Building strong brand identity is as vital as providing excellent services to your customers: a business just can’t survive without the brand awareness and loyalty.

 

A logo is one of the key parts creating brand’s image. Well-thought logo design can tell about the personality of a company to the potential clients. A designer’s task is to create a powerful extraordinary logo that would represent the business image and transfer the message of the company.

 

Hand lettering is an effective way to design unique, aesthetic, and recognizable brand identity. A designer creates custom letters fully based on company’s features and peculiarities. The professional will take into account the smallest details paying deep attention to every letter and line because it’s known that the devil is in the details. Moreover, today everyone strives at uniqueness so a great benefit logo with the hand lettering brings to a business is that everything made by hands can never be repeated once again. It means a company receives an original logo that will be hard to plagiarize so people will associate it strongly with your company.

 

toonie-photo-lettering

Logo lettering handcrafted for Toonie Alarm

 

Pitfalls lettering may bring

 

Despite all the pleasant emotions and benefits hand lettering brings, it isn’t perfect as well as any other technique. First of all, considering hand lettering as a design element, you need to think if it suits the brand. For example, it’s hard to imagine a website of a law firm with decorative letters say “We’ll protect your rights”. Hand lettering looks artistic and sometimes even playful. A designer needs to understand the target audience and their requirements before taking decisions.

 

Another point to keep in mind is legibility of letters. Sometimes, it may be difficult to see the line between beautiful and usable. Designers may go too far with the letter decorating turning them into the illegible mess. Badly readable letters may ruin the transferred message so a company risks falling into disrepute or losing the reach.

 

Points to consider

 

Hand lettering is an old craft requiring discipline, knowledge, and talent. Not every designer will choose to spend time and effort to lettering learning. However, for those who want to learn and for the companies thinking about applying hand lettering, we present the list of possible benefits it may bring.

 

  • Hand lettering is fully original so it makes the design feel fresh and special.
  • Custom letters always look extraordinary and attract customers’ attention.
  • Beautiful decorative letters influence visual perception bringing the feeling of aesthetic pleasure.
  • Powerful hand lettering increases brand recognition.
  • It’s sometimes easier to transfer the right message of a product via custom letters than with the help of digital fonts.
  • Original lettering assists a company to stand out against competitors.
  • Hand lettering can guarantee a pleasing first impression.

design_for_business_tubik_studio

 

Recommended reading

 

Drawing Type: An Introduction to Illustrating Letterforms

 

The Art Of Hand Lettering

 

Creating a Hand-Lettered Logo Design

 

Understanding The Difference Between Type And Lettering

 

Hand Lettering for Responsive Web Design


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik free podcast design business terms

Tubik Podcast #5. Design for Business: Know Your Target.

Having set the potential users of the website or app and researching this group of users, designers are able to create the solutions which will get close to the users and will be more precise in solving their problems. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the phenomenon of the target audience and diverse types of targeting in the design perspective. Welcome to listen and follow the updates!

 

If you want to get the set of episodes devoted to the theme of business terms and processes in design aspect, subscribe here and get them right into your inbox.

 

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

ux design for ecommerce tubik blog

UX Design for E-Commerce: Principles and Strategies.

Quite long time ago known British author and scholar Thomas Gray stated: «Commerce changes the fate and genius of nations.» For the last decade, commerce has got hundreds of new ways to reach the customer, especially with the leap of innovation in technology and its growing role in everyday life. More and more buyers are turning to the experience of shopping online, more and more sellers start new channels and methods responding this trend. And this is the sphere in which design of positive user experience directly moves the stakeholders to profits. Today we are talking about UX design for e-commerce.

 

What is E-Commerce?

 

As we mentioned in our free ebook «Design for Business», in general terms, e-commerce (Electronic Commerce) is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

 

The last decade witnessed booming e-commerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

The role of design for e-commerce

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful» says CEO of Amazon Jeff Bezos, and it’s hard to argue. Obviously, the success of e-commerce activity depends on several factors among which:

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogs etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.

 

tubik studio landing page toys

Handmade Toys Landing Page

 

On that ground, let’s check the details in three key perspectives whose combination in design makes success for e-commerce platforms: business aspect, UX aspect and UI aspect.

 

Business Perspective: Branding and Promotion

 

Websites and mobile applications for e-commerce are (well, should be) always the products created within a particular business scheme. It means they are the part of a certain business plan with the specific goals in mind and the planned ways to achieve them. Therefore, design for this sort of products definitely starts much before the first real line appears on the paper or screen. There are several important issues which should be considered and agreed upon before actual design starts.  Among them we would mention the following:

 

USP of the product. It’s essential to set which benefit (or set of benefits) will differ this website or application from the others and make it the core value presented via design.

 

defined target audience. In e-commerce, it’s important to set who your buyers are from the initial stage of the project. Knowing their age and culture, potential problems and wishes, level of tech literacy and trust to the idea of online shopping, the social circles influencing them and aspects forming their habits, designers can be more precise searching for the shortest way to successful purchase.

 

positioning, tone and voice of the brand. How would you describe your brand? Is it friendly? Fun or serious? Mass or luxury? Easily available or exclusive? Does it communicate to potential buyers in formal, informal or semi-formal style? Does it open much or mostly keeps reserved silence creating the mystery around the offered goods? These questions may seem far from business which has to be all about finance, profits, points of sales and other stuff of that kind. Still, these issues present the number of features which will set the future brand image. And design is somehow going to be its face, outfit and make-up.

 

marketing and sales channels. No doubt, it’s hard to immediately set all the channels for selling and promoting the future product; however, effective business planning means thinking over the core of them from the start. It will enable design team track and support the consistent experience of both getting to product and actually interacting with it. Even more, designers take active part in setting and strengthening marketing and sales via variety of means from branded items, landing pages and product videos to exclusive photos, posters and banners attracting customers to the platform where they actually can buy.

 

— type of business relations. Type of business relations based on target customers deeply influences the core aspects of UX design. Set from the start whether it’s B2C, B2B or B2C to create proper layout and predict possible user behavior.

 

typical environment of use. Designers need to know when, where and in which conditions users will typically use the website or app: these factors have a considerable impact on the decisions about layout, color scheme, typography, transitions and interactions, which all need to have the global objective to make the process of shopping easy, quick and enjoyable.

 

gym landing page concept by Tubik

Gym Landing Page

 

It’s easy to see that all the mentioned points directly influence design solutions as well as techniques and approaches for their realization. It means that the best way to go is to involve designers into the discussion together with stakeholders and marketing specialists at early ideation stage if it’s possible; if not, then specification and tasks provided to designer afterward have to include maximum information about those aspects. In case you work in outsource design team, make sure you get this information to be more concentrated on the key aspects of the task, and if not, communicate with the clients as long as it’s needed to get all those points clear. This communication will save many hours of iterations, which happens in cases when design is started out of the thin air without the basis of information and goals.

 

UX perspective

 

Talking about e-commerce, it’s vital to understand that selling the goods once via the website or mobile application is the minimal program of actions. What stakeholders of the business really aim at is having this user buying via their website or app again and again. User retention is the direct condition of growing profits. And we have to admit that this aspect makes e-commerce sphere highly attractive for designers. The objective which should be achieved is clear and simple: people have to reach the e-commerce platform and buy items offered on it.

 

Make no mistake, positive user experience is the key thing for user retention. In case of e-commerce, the four key aspects of UX are quite clear:

  • utility lies in the nature of the product: it helps users to choose and buy things and services they need.
  • usability has to make the customer journey clear and easy, without unnecessary clicks, time lost on loading overloaded pages or inconvenient menu, frustration of not getting feedback from the system etc.
  • accessibility has to bring up design which can be used by different categories of users, for example people with disabilities (dyslexic, color-blind etc.) or low level of tech literacy.
  • desirability means that the app will get the look and feel which will make the experience enjoyable and users will wish to get back again.

 

bookshop website animation

Bookshop Website

 

Among the core aspects dealing with the mentioned issues and considered from the early stages of design like UX-wireframing and user research, we would mention the following.

 

Intuitive navigation

 

You can have an amazing website with stylish and trendy design and breathtaking images, but the success of it will be measured not by the number of «wows» it will bring out. The efficiency is measured simply: by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

— what company or brand they are dealing with

— what page they are at

— where the menu is

— how they can get back to home page or catalog

— where is the search and filters

— how long the page-loading process is going to take

— how they can see the detailed information about the item

— how they can choose between the option for the same item (color, size etc.)

— how they can pay for the item

— how they can save the items they would like to get back to later

— how they can contact the seller

— how they can see the rating and reviews of previous buyers etc.

 

Bakery website design case study tubik

Bakery Website

 

Every button, link and card can play the crucial role and change the conversion significantly. What’s vital to bear in mind: in terms of intense competition we have in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations. What they demand from e-commerce is the experience which is faster, easier and more convenient comparing to going to the actual store. If you don’t give it to them, they will look for it somewhere else.

 

Sales funnel

 

Sales funnel (in other words — purchase funnel) is a technique that moves the customer through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase. As we described before in the book, basic sales funnel includes the following stages:

 

  • Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.
  • Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
  • Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
  • Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.
  • Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.
  • Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

 

In terms of e-commerce, sales funnel is supported with diversity of functions digital products can offer. Awareness of the principles of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source, for example, social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling users to buy.

 

home page landing tubikstudio

Comics Online Shop

 

Effective presentation of the items

 

The layout of the product pages or screens is another core aspect to think over. On the one hand, it’s advisable not to overload the page with too much information which will overwhelm users and can distract their attention from the major goal — to make the purchase. On the other hand, users aren’t ready to go from one page to the other to get different information about the item. Therefore, the designer has to take the time for thorough research of the issue and find the right balance of data given on one screen. The analysis of target audience and user testing can give the clues what information is required by the target audience for the specific categories of items or services.

 

jewellery ecommerce app UI

 

jewellery ecommerce app

Jewellery E-Commerce App

 

UI perspective

 

Being concentrated on not only logic and transitions but also looks and style, UI design stage also contributes much to the success of the e-commerce project. It is the aspect which creates visual performance and sets the solid ground for the desirability of the interface and positive emotional feedback from the buyer. At UI design stage for e-commerce, designers have to find the general stylistic concept which will support UX aspects mentioned before and will give the online point-of-sale the attractive looks. Some aspects, which designers have to take into account in this perspective, are:

 

— choice of colors that correspond to the brand image and strengthen emotional feedback

 

— setting the style corresponding to the nature of the commercial offer: reaching the website, people should instantly understand if it sells household goods, fresh vegetables, trendy clothes, exclusive devices or anything else

 

— visual hierarchy which makes the core zones of interaction instantly noticeable

 

— general harmony of perception which sets the feeling of aesthetic satisfaction supporting positive user experience.

tubikstudio ui animation website design

Design Studio Website

 

Points to consider

 

For the bottom line, here’s a simple check-list for some essential aspects designers would rather consider working on e-commerce projects:

 

— Know the buyers: user research will help to get the needs and wishes of target audience.

 

— Have users informed: make the screens or pages filled with information and functionality users really need for making purchase.

 

— Keep design consistent: not only does the website or app itself need consistency of design for all the screens in terms of general branding, but also social networks, print materials and actual point-of-sales appearance if they exist.

 

— Refresh the experience: minor changes or attractive details added to the interface from time to time without breaking general visual consistency can give the feeling of refreshment, like new looks of mannequins do in the window displays of the shop.

 

— Check your solutions: user testing can have a great impact on understanding the factors that boost conversions. Ideally, it should be applied not only in the process of design but also after the launch of e-commerce platform on the basis of real user interactions and troubles which can arise.

 

— Be careful about revolutions and wow-effect: the power of habit plays the big role in the products of this kind. Choosing layout, menus or icons, which stand too far from the ones users are generally accustomed to, can bring confusion and frustration. For example, usage of any other image instead of the magnifying glass to mark the search field can result in bad user experience as buyers know that visual symbol and will look for it. So, making this sort of experiments, take time to test them well.

 

— Respect the buyers: remember, that they are not abstract metrics — every figure in conversion report is about real people. Look for the interface that will respect their time, effort and needs and it will bring positive experience of shopping for both sides.

 

Landing Page Animation Tubik Studio

Organic Food Shop

 

Recommended reading

 

Here is a bunch of links to the articles and design collections which could provide further interesting explorations of the topic:

 

Two Types of User Motivation: Design to Satisfy.

 

The ultimate guide to designing ecommerce websites

 

Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid

 

Designing for 5 Types of E-Commerce Shoppers

 

20 Common UX Mistakes In Ecommerce Websites

 

Everything You Need to Know About Designing for eCommerce


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download the free e-book «Design for Business»

tubik free podcast design business terms

Tubik Podcast #2. Business Abbreviations in Design: B2B, B2C, C2C.

Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. The second track presented here continues the set called «Business Terms for Designers» and gives insights on widely used abbreviations B2B, B2C and C2C marking different types of business relations. Knowing what’s hidden behind these terms and how the level of communication influences interaction with digital products, designers can find the effective solutions for particular business projects. Welcome to listen and follow the updates!

 

If you want to get the set of three episodes devoted to the theme of business terms and processes in design aspect, subscribe here and get them right into your inbox.

If you are interested to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

tubik free podcast design business terms

Tubik Podcast #1. Business Terms for Designers: USP and MVP.

For the recent year, here in Tubik we have been sharing some stuff for design community via blog and free ebooks. Still, the more people are involved, the more diverse connections are needed. Today we add a new way of sharing — Tubik Podcast, a series of free audio talks devoted to various aspects of design. The first track here starts the set called «Business Terms for Designers» and gives insights on what is USP and MVP. Hopefully, it will be helpful for the design community. Welcome to listen and follow the updates!

 

If you want to get the set of three episodes devoted to the theme of business terms and processes discussed in design aspects, subscribe here and get them right into your inbox in the nearest 24 hours.

 

 

If you are interested to read more, welcome to read or download our free ebooks. Stay tuned!

design for business

Business-Oriented Design. Know Your Target.

Successful business in never a simple game: it is the complex mechanism and to make it work, we have to know the factors of influence and methods of their effective combination. Design is definitely one of those secrets which can have a great impact on profits and promotion. Moreover, this is the coin of two sides, because real design is not only about the nice skin and stylish look but also about functionality and utility. So, today we continue the series of posts devoted to design for business goals. 

 

Earlier we have already published the glossary posts with key notions for the topics of business terms and abbreviations useful for designers as well as highlighted some aspects in more details in the free ebook «Design for Business». This time let’s add some deeper insights into the essence of setting and exploring the target of the product and the mutual influence of design and marketing have on each other.

 

design process

 

Marketing

 

«Marketing is a contest for people’s attention». Seth Godin

 

Definition. In general terms, marketing is the set of studies and methods devoted to the management of exchange relations. Basically, it is the multi-layered process whose aim is to connect the products with the customers. It can involve the variety of advertising and promotional activities, market and customer research, organization of sales, direct and indirect communication with the target audience. In terms of tough and diverse competition on most markets nowadays, marketing is the strategy and the trophy to achieve is users’ and customers’ attention.

 

Design aspect. Design and marketing have been supporting each other for many decades, so there are two basic directions of their connection.

 

The direction from marketing to design means involving techniques of marketing into the design process from the early stages of product creation or updates. The cases when marketing strategy is thought out from the stage of ideation on the future product makes design even more meaningful: not only do designers create the product solving users’ problems or satisfying needs, but also set the channels and ways how product can be noticed by the customer, how it can get interesting for target user and what are the ways to show its benefits effectively. Knowing all that stuff, the designers can find the appropriate UX — the logic of the product and UI — visual presentation of its features. Each tiny element or aspect like the color or shape of a button to the global approach to color palette, the choice of fonts and the space between elements on the page or screen, every transition and microinteraction designed properly and applied wisely can have a huge impact on the success of the product and its ability to fulfill the business goals.

 

web design tubik

Web design for e-commerce: Vinny’s Bakery

 

Moreover, it must be said: the high-quality user-friendly product is the best marketing strategy. That is why design plays the crucial role as it creates the features and the wrapping able to attract users’ and engage them, spark the wish to use it again and make it helpful so that users could have the solid reason to love it.

 

The reverse direction from design to marketing means that design itself becomes a powerful way to present the product or even the person on the market. Design solutions applied for creating commercial, corporate or personal identity through branding become the foundation for the marketing strategy, in most cases starting from the moment when the product gets its sign of distinction such as logo or icon. Designers create visual support of the promotional campaigns from posters, leaflets, and brochures to complex sets of branded items and corporate interior style of point-of-sales. As long as people are the creatures of not only physical but also social and aesthetic nature, design is going to take a big part of any business success.

 

business cards design

Corporate branding: design of business cards

 

Anyway, marketing is the point where people who create the product and those who build the bridge between the product and the customer should have the same goals: to provide users/customers with something that will be helpful and satisfying their needs. To do that, first of all, it’s important to set the group for which it is created and analyze what its preferences are.

 

Target audience

 

«In sales there are going to be times when you can’t make everyone happy. Don’t expect to and you won’t be disappointed. Just do your best for each client in each situation as it arises. Then, learn from each situation how to do it better the next time.» Tom Hopkins

 

Definition. The term «target audience» comes from the spheres of publishing, in which it means the readers intended for the particular book or edition, and marketing, in which it sets behind the group of customers potentially interested in the particular product or service. The quickly developing sphere of digital products such as websites or applications absorbed this term immediately meaning the audience which presents the potential users of the specific app or website. 

 

Certainly, for many creators, it can be hard initially to find out what their target audience is: they would like this product to be used and loved by everyone. Still, in real life, it’s a sort of utopia which can become a death knell for the product. Selecting the core target audience and then, if needed and possible, broaden the abilities of the product to make it attractive and useful for the broader circle of users in many cases proves itself as much more successful and effective strategy. Setting the priorities, it’s easier to concentrate on key functionality and make it faster than trying to satisfy everyone at once.

 

wedding planner app UI design

App design for wedding planner

 

Design aspect. As we mentioned in the ultimate guide to creating a mobile application, user research and market research are highly advisable to be done at the start of the creative process to provide the designer or the creative team with understanding what their target audience is:

— what their interests and wishes are

— what kind of communication and lifestyle is convenient and common for them

— what problems they have and which of them the designed product solves

— what are the typical environments when they use this kind of products

— where they could get the information about the product

— what could stimulate them to try the product

— what could engage them to get back to it again after the first experience

— what could involve them into using the product on the regular basis

— what could make this product different from the others on the market for the target users.

 

Joel Anderson said, “You can’t just open a website and expect people to flood in. If you really want to succeed you have to create traffic.” Design is one of the powerful methods to do it, especially in cases when it’s strengthened with appropriate copy and general content selection. Creating custom graphics, supporting microinteractions with motion, writing clear, concise and informative copy, choosing readable fonts and nice color combinations, setting landing pages for specific purposes instead of sending the user to the tons of information on the home page of the website, you can directly attract and create traffic that will give profits and support the thriving business.

 

toonie alarm UI design

Funny and bright design for Toonie Alarm

 

upper app UI design case study

Minimalistic and elegant design for Upper App

 

Targeting

 

«You can’t wait for customers to come to you. You have to figure out where they are, go there and drag them back to your store.» (Paul Graham)

 

Definition. Briefly, targeting is another term from marketing widely applied in the sphere of digital design. It is usually associated with the strategy and techniques of the particular target audience to find the best and the shortest ways to attract their attention to the particular product.  

 

Design aspect. The scheme is very simple: when you shoot without seeing your target, the chance that you will score exists but its miserably slim. If you shoot seeing the target, the chances grow. The closer you come to your target, the higher becomes the possibility of hitting the mark. 

 

This metaphor successfully works in both marketing and design. Having set who the potential user of the designed website or app is and researching the basic and extended data about this group of users, designers are able to create the solutions which will get close to the user along one or several factors. Let’s briefly review what aspects and factors can influence this process setting the directions of targeting.

 

Geographic targeting. Location of the person is important to set the cultural background as well as the natural environment of using the product. It means that even one product can be different in some visual features or operational performance to satisfy users from the particular country or region, up to having different names to sound more catchy or informative on the local market.

 

Gender targeting. If you know that your target audience is mostly man or mostly women, this kind of data can have a great impact on design solutions based on the psychological and perceptional difference. Even such a basic aspect as color choice can be highly influenced by the gender of core target audience. 

 

Psychographic targeting is grounded on knowledge of motives which move the user to try this type of product. It is based on deep knowledge of the typical lifestyle, interests etc.

 

Demographic targeting happens when creators and marketers are focused on catching attention and involving a particular demographic group, for example, based on age, ethnicity, income, qualification, marital status, having kids etc.

 

Behavioral targeting is based on defining the target audience along the particular models of behavior, for example, young adults regularly visiting night clubs or people buying coffee and drinking it on the go. 

 

ui animation design tubik

Night in Berlin App

 

Understanding the process and methods of targeting and getting this sort of knowledge enables designers to choose the shortcuts to users’ needs and wishes. That is why in cases of outsourcing design it’s highly advisable to take all the chances of getting maximum possible information about the potential users and business goals from the customer. One of the good methods is creating user personas, user stories and user cases, on which we will give more details in our next posts.

 

Recommended reading

 

Hopefully, these insights will somehow help designers to get closer to the market creating goal-centered products for various businesses. Before soon, we will definitely provide you with new posts and thoughts on this theme, meanwhile here is the list of recommended articles which could be helpful.

 

Personas Make Users Memorable for Product Team Members

5 ways design and marketing can work together better

One Persona to Rule Them All

Designing for your target audience

Matching site design to your target demographic

Short but Vital. Key Abbreviations in Design for Business.

The Importance of Design in All Marketing Campaigns


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download the free ebook «Design for Business»