Design, Product, UI/UX

ABC of Product Design

ABC of Product Design

Entertaining but meaningful ABC checklist of features significant for successful product design in the field of web and app UX and branding

ABC of Product Design

Hopefully, you remember funny but meaningful piece of grammar practice called Basic Grammar for Designers. This time we decided to go further and make the exercise even simpler, so here in Tubik Studio we prepared ABC of product design – the set of features and characteristics we think are important for design of the efficient product which is a good combination of meaning, functionality and good looks. So, let’s get started!

A for attractive

Although, the content and functions are the most important factors of making a product problem-solving, still the old classic trend hasn’t changed: people still believe that a good dress is a card of invitation, a good mind is a letter of recommendation. Attractive look is traditionally highly important to make your user think about trying your product, especially in conditions of modern intense competition.

B for bright

Bright is actually the characteristic which goes far beyond the colors. It’s about successful combination of pleasant-looking appearance and smart design solutions which together create the positive user experience and happy satisfied user.

music player UI

Media Player Concept 

C for clear, creative, comprehensive

C is a very diverse letter to start the significant features of product design. And all of them are vital. Clear product design will make it unobtrusive and effortless in use. Creative component will root its originality and will make it not only stand out of the crowd but also solve old problems with new solutions, which will possibly persuade users to choose your app or site. Comprehensive product will provide different features and therefore will give users more opportunities in one spot.

D for delicious, desired

Two D-features are totally connected with the emotional component of the product. It’s not a secret that a word ‘delicious’ is now used far beyond the topic of food. The product is delicious if it brings the user the kind of appetite making him devote his or her most important resource – time – and feel the wish to get back to it again. The product is desired when it brings positive experience and we are deeply sure that it is directly connected with carefully thought-out usability and utility.

UI animation recipe and cooking app

Animation for Recipes and Cooking 

E for easy to use, efficient, engaging

No need to say how important it is now to make the product easy to use, as now in terms of great variety of the range on web and app market vast majority of people mostly prefer those products that make their life easier and solves their problems faster. Efficiency, therefore, is also a vital feature as speed and easiness is nothing if it doesn’t provide result. And if the product is engaging, if it always shows a bit of improvement according to the needs of the target audience and modern design trends, it can become the factor of not only attracting but also retaining users for a long time.

F for flexible, fast

Such characteristic as ‘fast’ does not require long explanations as in our fast and dynamic world people, especially busy ones, are in favor of those things and products that correspond to that fast pace of life. The ability of the product to be flexible, that is adaptive to different devices and resolutions, different environments and various new trends, restarts it lifecycle, again and again, making it a sort of perpetuum mobile.

tubik_studio_buonapp-ui

BuonApp 

G for global, gorgeous, graceful

The first G-trait – global – is concentrated both on the product essence and its appearance; the idea behind it is to make the product as universal for different cultures as possible if your ambition is to get the wide user community around the world. Making the product gorgeous and graceful, i.e. felt sophisticated and thoroughly thought-over as well as good-looking can be important in creating the positive user experience.

H for harmonious

Harmony is the basis of everything, say great masters and we tend to support them. Being understood as the way of orderly and pleasant organization of all the elements, harmony in design should consider a great deal of factors based both on theory as well as practical research and testing. And it is the great thing to invest your time and effort in as it then provides the high level of performance.

web design UI animation

Birds of Paradise Encyclopedia

I for intuitive

If the product is intuitive, it makes the basis for the traits mentioned before as it will make the product clear, effortless and easy-to-use that are among the major features of high usability level.

J for joyful

Different elements of joy seem to be obvious for the kinds of entertaining product, such as games or quizzes. However, the element of joy can be hidden much deeper even in very serious and business-like products, for example congratulating the person with the achievements or providing simple game features in basic operations. Joy can become the sub-conscious characteristic, still effectively making the product desirable.

animated timeline UI design

GIF of Dynamic Scroll 

K for kaleidoscopic

This trait is somehow a synonym to “bright”, as it means your product is full of variety and is never boring.

L for lively, logical

Lively product is full of life, and that means it is close to users, their needs and pains, their wishes and their lifestyle. Outlining the particular target audience at the very first stages of design process and analyzing their needs as well as looking for interesting and sometimes funny solutions will breathe life into the product. Logic of design is one more vital feature as design should ease and please, be helpful and useful, and never confusing or obtrusive.

eventflow app design

Eventflow App

landing page design

Capitoledge — Free Screensaver

M for meaningful, multifunctional

Any product having only appearance without any feeling of sense and meaning is foredoomed. Even being exclusively attractive, it will be not able to retain the users as it will not satisfy any needs except probably aesthetic one. So, the meaning which stands behind the product should be decided upon and defined before it is designed and kept in designer’s mind along all the design process. Multi-functional nature of the product is going to be a synonym of its ability to satisfy multiple needs of the users making the level of happiness even higher.

N for natural

Natural feel of the interaction is highly significant for positive user experience and retaining loyal users sometimes even preferring natural and organic feel to the feeling of innovations.

UI illustration

Veggie App Concept 

ui animation design

GIF Animation 

O for original

Originality is the trait that can make your product not only attractive especially in the stage of its launch on the market, but also it can become a feature making your product viral, as we have previously mentioned in our article on UX/UI to make you product viral. For those who like standing out of the crowd it can be the crucial factor of making choice in favour of your product.

UI interactions animated

UI Navigation Concept 

tubik-studio-animated-interface

Force Touch Slide Menu 

P for pleasant, personalized

The first P-feature mentioned is closely linked to positive user experience. Being pleasant doesn’t deal only with appearance, it takes into account all the features creating user’s pleasure. So, it works in tight connection with previously mentioned features, because the pleasant feel of the product is the result of making it intuitive, lively as well as attractive.

It’s also really important to think about making the product personalized. The functions, which provide the user with the feeling of personalization, for instance, enabling them to add or customize the features of design (avatars, changing styles, type or font, customizing part of functional) or provide strong communication with the user, have more chances of being successful and popular. One of the functions can be neatly organized prompts or tutorials in the web or app product. Another form is correct input text. For example, some investigations and reports on conversion analysis show that input prompts using first-person pronoun (I) are in a lot of cases more efficient than those which contain the second person pronoun (you). Supposedly, it happens due to more natural feeling of personalization.

saily UI screens tubik studio

Saily App 

contact list UI animation

Contact List Concept 

Q for quality

This feature, obviously, doesn’t need extended explanations and comments. According to our studio philosophy of work, this is the primary feature of any product behind any design task. High quality is the foundation for usability, utility and desirability, three basics able to not only attract but also retain users.

R for readable

The basic and literal meaning of this trait is easily explained. Lack of attention to correct use of types, fonts, their colors and placement can have a huge level of influence on usability rates as well as pleasant-looking appearance. Moreover, this is the problem which sometimes cannot be revealed and formulated verbally by users, so it transforms into the horrible blurred characteristic, a sort of “I don’t know what is wrong with but something definitely is”. Even the best animation, thought-out transitions and flows can move your product to nowhere if the copy is too small or illegible.

Explaining the feature of readability in wider and somehow metaphoric meaning, we can say that the product is readable when the user easily understands its functions and “read” its abilities and possibilities step by step without difficulties. So, in this meaning, it is the synonym to intuitive.

tubik studio social network ui

Social Network

web design animated landing page

Tubik Studio | Museu

S for stylish, simple

The first feature mentioned for letter S deals with the visual characteristics of the product, meaning its correspondence to a certain style. Among all the numerous definitions of style, we suppose the following one by as the most exact for our topic: style is a comfortable and elegant mode of existence (American Heritage® Dictionary of the English Language, Fifth Edition. Copyright © 2011). Giving your product the style, you make it catchy and support the feeling of harmony mentioned in the previous part of our design alphabet.

The characteristic of being simple, as well as intuitiveness and ease of use, is one more synonym showing that the aim of the most modern product is to help people deal with various issues of everyday life. So, looking for the new ways and decisions, it’s important to remember that they should provide simple solutions for the user’s problem, which means hard and sophisticated work for designer, as it’s well-known that making things simple is the hardest work.

tubik studio ice ui website

Tubik Studio | Ice 

T for trendy

Trendy here shouldn’t make you consider only the looks of the product. As it happened with other features, its real sense lies much deeper. We see the definition of “trendy” as able to follow the most modern trends efficiently combining them with the best classic solutions approved by UI/UX analysis through the times.

home page design

Comics Shop Home Page 

U for understandable, user-centered, useful, unique

We can see that U-letter is highly diverse in our ABC. And it’s natural, actually, as the most important word of product design – “User” – starts with this letter. So, all the U-features are concentrated basically on the user. To be successful, a product has to be understandable ( feels as synonym to readable in its wide and metaphoric meaning above) so that the user wasn’t confused with illogical operations or transitions, the absence of the essential elements of layout or unsuitable color and font choice.

The product has to be user-centered that means that all the solutions, schemes, ideas and versions should be totally concentrated on deciding the target users’ problem, and this should be the main concern of the designer from the very start of the process.

The product should be useful, especially if its aim is not to entertain the user, but also to educate, help, provide means of communication, ease any process or keep tracking and control etc. If the product is useful, it will retain and grow the target audience steadily.

And finally, the product should be unique. As we have mentioned in the article about UX design to make your product viral, the flavor of uniqueness can be applied not necessarily to the whole product – it can be a small feature of UX or interesting solution for UI and branding, which will make your product stand out of the crowd and survive in the competition.

bakery website UI design

Vinny’s Bakery 

V for viable

At the time of MVP trend, the concept of making the product viable is one more concern for designers, as it can be deeply analyzed on the first stages of design via extended user research and market research. Thinking about the core target audience and solving their problem instead of trying to please all and everyone, the designer is able to build strong community of loyal users whose further analysis will show the way of adding new features and extending functionality.

W for well-done

As well as quality, this feature doesn’t need much comment. When designers do their best to analyze finding the best solutions and devote part of their soul to the products they create, the users of the product will definitely catch and feel it.

tubik-studio-design-ui calendar

Calendar App 

calendar app interface animation

Calendar App Animation

X for xenial

Xenial is actually a characteristic which means being friendly and open. For many products, this is the way to support the strong contract with the user. When your product makes person feeling home, that is the way to success. The only thing to consider here is that home is where your heart is, so it can be anything that makes you interested and comfortable. Vise versa, any kind of tension means that sooner or later the user will try to find something more comfortable and user-friendly.

gym landing page design

Gym Landing Page 

Y for yummy

Yummy actually is the total synonym to “delicious” analyzed in the previous post. Once again, this characteristic reminds how important it is to find the functions satisfying user’s appetite by the means of well-thought-out UX and beautiful efficient UI.

Z for zestful

In one of its definition, zestful means full of interest or excitement. There is no secret that people are highly curious and inquisitive creatures, so the small element of mystery and intrigue will inevitably add user interest to it as well as small amount of spices makes all the meal much more desired.

tubik studio music_app

Music App 

ui illustration graphic design

Good Sign App Concept 

Well, here is the completed set of our ABC features, and as you can see, there are lots of them hiding behind all the letters of the alphabet.

It has to be said that we do not try to discover new horizons or reinvent the wheel with this post. It’s just a bit of review what important features can be considered working on product design, a sort of funny checklist. Moreover, we do not mean that the product should contain all these features as well as the word could not contain all the letters of the alphabet. Nevertheless, their efficient combination can make a great sound for your product. Combining them along the aim and target audience of a project can be helpful in creating well-done product.

And now it’s time for a bit of entertainment and exercise: let’s apply this ABC to famous and popular products.

Apple: Attractive+Pleasant+Personalized+Logical+Efficient

Google: Global(doubled!)+Original(doubled!)+Logical+Engaging

Facebook: Flexible+Attractive+Comprehensive+Engaging+Bright+Original(doubled!)+Kaleidoscopic

Quora: Quality+User-centered+Original+Readable+Attractive

Microsoft: Multifunctional+Intuitive+Clear+Readable+Original (doubled again!)+Stylish+Flexible+Trendy

Instagram: Intuitive+Natural+Stylish+Attractive (doubled!)+Global+Readable+Meaningful

and finally we cannot avoid our own studio name
Tubik: Trendy+User-centered+Bright+Intuitive+Kaleidoscopic

Continue our exercise with your own ideas and designs and let the inspiration be with you!

logo design tubik studio

Originally written for Tubik Blog

Don’t be shy to share this content:

animation, app design, branding, design, design studio, design tips, graphic design, icons, illustration, mobile app, motion design, tips, tubik studio, UI, usability, user experience, user interface, UX, ux/ui, web design, webdesign,
  • English
  • Russian


This website is designed and curated by Tubik Studio learn more about us Contact Us