What is prototyping?

The term ‘prototype’ is applied the sample model of the product that enables to test it and see if the solutions and decisions made about the product are efficient and working. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to provide a designer, a customer, and a user with the opportunity to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be the great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective, Tubik Studio designers. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

What is the best prototyping tool?

Obviously “the best” is very subjective and too personal. If there were the ideal and perfect tool for anything, for instance, prototyping, people wouldn’t need to make a choice, but still, we have a wide field of options and that’s great.

The list of prototyping tools that designers use for different goals is quite broad. Usually, the choice of the tool and its correspondence depends both on the task and on the preferences of the designer assigned to accomplish it. Designers having tried multiple options mostly mention that various tools have their own benefits and pitfalls. Let’s take a look at the list of some tools enabling us to create interactive prototypes easily and efficiently present them to clients or use in teamwork. Most of them have already become recognized in the field. This is the first set which will be continued and reviewed in more detail in our next posts here.

InVision

UXPin

Framer

Adobe XD

Origami

Axure

Marvel

Mockplus

CanvasFlip

Designers of design agency Tubik, experienced in all diversity of design directions, answer the following way: the best prototyping tool is the one that improves the productivity of the particular design workflow as well as helps to provide efficient and user-friendly final product. Whatever you feel working this way is good for you. Still, even if you are experienced in using a particular prototyping software, trying new tools is a good way to open new horizons and find new ways to enhance creative processes.

One more thing to consider is that new not always means “inexperienced” – vice versa, it can mean “innovative”. So, when you are offered new features for already established flows or new tools with a fresh USP different from the competition, try them before thinking for too long. Modern prototyping tools are offering more and more options and features able to have positive impact on speed and quality of design and development process. Some well-established tools, like InVision, are regularly updated and add great deal of integrations into the software to make it easily combined with other digital products which is highly appreciated in particular for complex multilayered projects. The others add new useful functionality to already expected features, like for example usability analysis as in CanvasFlip, QR-code simplifying the process like Mockplus and so on and so forth.

For those, who want to get dip into the theme of prototyping in UX design and communicate with their mates in the field, we would recommend to take a look to the prototyping community Prototypr which curates and shares the latest updates on the variety of prototyping tools and unites designers actively applying prototyping to create positive and problem-solving UX.

Also, it is advisable to revise the book by UXPin team called The Ultimate Guide to Prototyping in which the authors share the same position on the significance of prototyping in testing usability of design solutions: “Not only do prototypes help provide proof of concept, they, more importantly, expose any usability flaws behind the wireframes and mockups.”

Check out the next posts to see more detailed reviews for the features and functionality of specific tools. Good design day to everyone!

Not any part of the article is advertising, the post offers personal review and opinion of the writer.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Сообщение Prototyping User Experience. Tools to Try появились сначала на Design4Users.

What is the ideal process of UX/UI to make the product viral? Designing various products here in Tubik Agency, we usually avoid talking about anything ideal as it is quite a contradictory category. However, we are keen to share our ideas about making products viral on the stage of UX/UI design.

What is virality?

Virality is the concept behind which we understand fast and easy self-promotion of the product among users. Like a kind of infectious disease, it spreads from one person to another other, and no special efforts are needed to support this process. Organic growth of this sort of product is coming from recommendations and sharing. Making the product viral is the dream of any customer who sets it on the market and, therefore, any designer who is keen to create something successful and widely known.

Initially and traditionally, production of this “gene of virality” and “infecting” the product with it was entrusted to marketing specialists and advertisers. They analyze the target audience, research the market and develop the strategy according to which they directly or indirectly stimulate the users to share the product and create a solid presence on the market. In the sphere of promotion, it is a well-known law that the best advertising is word-of-mouth, one that is based on personal recommendations. The strategy and means of making the product viral can be thought out and agreed upon not only when the product is created but also much earlier, in the stages of its physical or even conceptual creation.

Nevertheless, now virality goes far beyond the marketing process, especially when it comes to web and app design products. Practice shows that there are some things to consider and some mechanisms to apply in the process of UX/UI design in order to make the product more or less viral, which means promoted by users and therefore saving time, money, and efforts on marketing.

Pre-design (UX ideation) stage

Any designer knows that predesign stage is as important as the time for actual work on design creation. Design should be based on solving problems and giving positive experience, so it’s not only visual but also a psychological thing. This stage is vital for any kind of product, but if you have the aim to make your product viral, it requires even more attention and deeper analysis. So, here is a list of some things to consider at this stage in the aspect of the potential virality of the product.

1. Find the key features and start with them

The mistake of some products which haven’t become really successful and widespread is the attempt to solve a lot of problems at the same moment. This way is not only really complex and needs much deeper analysis at the pre-design stage, but also can be a bit confusing for the users, who sometimes will not be able to distinguish the real aim of the product at once. So, first of all, define clearly who is your core target audience, what is their major pain and how to help them. Don’t become the hunter who tries to kill two birds with one stone; otherwise, it’s easy to forget about virality, although you may create a great multifunctional product. It’s better to add functionality and expand your target audience step-by-step rather than to start everything together at the same moment.

Book swap app

2. Analyze the target audience and their potential emotional response

When you have defined your target audience, and you want to make them promote your product through word of mouth, you should touch their souls and feelings. You will make people tell about the product if you create a strong feeling about it. Therefore, you should analyze their needs and typical demographic characteristics to create a noticeable emotional response that they would like to share with others. By the way, this response can be absolutely different depending on the aim of the product: you can awe them, shock them, scare them, inspire them, enchant them – any strong feeling will encourage the user to tell someone about the experience, to share it with others.

Music player concept 

3. Support a simple and original idea that unites people

There are a lot of practical examples of how simple ideas based on some widespread needs, wishes, or hobbies rocketed to success. Take Instagram, which started as a simple service of sharing photos for those who like this type of presenting themselves, or Pinterest, which started as a simple storage for interesting links. Now they are large-scale multipurpose services not only for personal but also for business needs, but they started from very basic needs which a lot of users could not satisfy in a fast and easy way. It is vital just to find the problem which makes a lot of people suffer, and they will unite around its solution.

Singify App

Saily App

4. Create a unique solution to the wide-spread problem or issue

There are two effective ways to make your product fast promoted, but they are first of all based on your decision if you are aiming at long-term or short-term perspective. If you want to create a long-term product that is going to become viral, then your way is to think about the problem globally and create the original product solving the widespread problem. It will take more time and effort, but it also creates a long-term prospective way. On the other hand, if you want something that will make your name with less effort and quicker spread, there is one more way: you can find drawbacks and bugs in existing popular products and create solutions for them. This is usually the short-term perspective, but it can be helpful to get well-known on the basis of already promoted products.

In both cases, it is important to concentrate on originality, not copying. Don’t try to create a second Facebook. Try to find the first your own product or at least a feature that solves a problem which earlier couldn’t be solved or can make previous solutions better, faster or easier and people will do the promotion for you.

Contact List Concept Scroll

5. Think over the element of fun and entertainment

People love when they are offered not only deeply serious things but also the element of the game or fun. Even highly scientific or business-like products can contain some elements of fun, which will make the product more widely discussed.

Cafe Coupon App

Green Spy App

6. Create the need of using friends to achieve user’s own goals

This is one of the most efficient techniques, which approved itself in numerous cases. When you create a great product, its quality can make people talk about it, and it will attract some attention. But if you promise the person something useful and beneficial, they start acting to satisfy their needs and at the same time, attract new people to use your product directly. It can be more space in virtual storage, some exclusive bonuses in the games or discounts on the goods – anyway, it will make users work as your most powerful weapon of product promotion.

Event app concept 

Singify App tutorial

All the mentioned points would better be decided and agreed upon before you actually start the process of UX/UI design so that in this stage, you could polish your strategy by tactic steps.

UX design stage

In the process of UX design for the potentially viral product, your main aim is to create as positive a user experience as possible. Actually, it is required for any UX, but for the viral one, it’s vital. And you can make it with the following steps.

1. Create the illusion of the choice

Users don’t really like when they feel that they are forced to do something. To make the experience pleasant, you should think about how to create the illusion of choice, sometimes even in obvious things. Users should be guided invisibly through the thought-out navigation and layout, but at the same time, they should feel that they are real decision-makers at any step of the way. The absence of this feature can be dangerous for the virality of your product.

2. Think about the feeling of the game

Games can be different, and they are not only for kids. Sure, the more serious the product is, the more hidden the element of the game will be. It is up to you, what part of your product will be infected with the direct or indirect gaming virus, but if you think about this sophisticated thing, it will work for you in spreading the product.

Moneywise App

3. Give the product heart and soul

We can often hear that designers should put a part of their soul into the projects they are working on. And that is not a joke, especially when it comes to potentially viral products. When the designer gets deep into the task and tries to solve it as if it was their own problem, when designers look into the user’s problem and penetrate into it, it always gives the products of high-quality, user-friendly, and pleasant UX. Users don’t only use the product, but also feel the product, its temper, and its energy. And when the designer creates it cordially, not only mechanically, the user will feel and appreciate it.

Museu Landing Page

4. Provide necessary functions right when they are needed

This may be the main point to consider at the UX stage of the process. It is essential to analyze not only the whole concept of the product but also all the steps that users are going to take. This is the time when user stories and cases are going to be extremely helpful. When you think over them, you will be able to bring forward the features at that very moment when they are most needed. And it will inevitably create a positive experience that deserves to be shared with other users through positive recommendations.

Healthy Food App

5. Make the connection with social networks fast, easy and solid

Social networks are the great basis for the virality of a product, so it’s vital to think if they are going to deal with it and how. You can (and should, if possible) simplify the sign-up and log-in procedures with social networks; you can think about how to encourage people to share their achievements or inform their friends and followers about using your product. It will create a strong and various web presence and will open the door to the viral promotion of the product.

Echo project

Blog App

UI design stage

The UI stage is more about the visual representation of the web or app product, so it’s easy to think that there’s nothing to do here because the most important basics of virality must have already been completed at the UX stage. However, there are a lot of important points which can expand and enforce the virality of the product at this stage. And we see them as the following:

• Make the product stylish and good-looking
• Ensure the interface is not overloaded
• Review and iterate to obtain the most efficient solutions
• Prefer UI elements which are simple, clear and original
• Create unique and recognizable visual feature (including icons, mascots, characters, and so on)
• Include interesting animation and transitions
• Provide an intuitive interface and natural interaction
• Include high-quality graphic elements

Dynamic Scroll

Timeline App

Fresh and funny button animation

Book Swap App

Sports App

BuonApp

At this stage, it’s very important to think of high-quality graphic elements, including the smallest ones. Depending on the nature of the product and target audience, you may use interesting illustrations, nice photos, funny characters, and the like to make the website or application visually appealing so much that people will be keen to show this “So nice! So cute! So stylish! So beautiful” something to their friends or colleagues. The traditional exchange like: “Have you seen that funny cat in the new calculator on PlayMarket? No? Still no? I can’t believe it, it’s so cute!” is able to virally promote the product even when it has no incredibly unique solutions to global problems.

Potential trap: utility vs good looks

When you consider how to make the product viral right from the first steps of creating and designing its concept, it’s easy to get into two well-known traps. One of them is to think that virality is the feature of only useful products, i.e., visual representation doesn’t matter. The opposite side of this fight says that only visual features really matter when you want to make your product viral. As you can assume from everything mentioned above, we would recommend keeping the balance and finding the happy medium. That is why it is important to think out and include different tactics at all stages of the design process. That doesn’t mean you have to apply all the positions mentioned above in one particular design process, as the choice of techniques depends deeply on the nature of the product and the target audience. However, thinking over all of the positions and applying those which are appropriate will bring massive results in the aspect of virality. As practice shows, only in this case, your product will get truly viral through utility, usability, and pleasant looks. All of these features will bring out desirability, which is so important to make people want to share the product with others and promote it this way.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of web and mobile user experience design

User Experience Design: 7 Vital User Abilities

How to Design Search in User Interfaces

5 Basic Types of Images for Web Content

UX Design: Types of Interactive Content Amplifying Engagement

The Anatomy of a Web Page: 14 Basic Elements

 10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

User Onboarding Design: Practices and Tips

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

Сообщение UX Design to Make Your Product Viral появились сначала на Design4Users.

In our article about illustration potential in user interfaces, we have already mentioned mascots and characters, providing some general ideas on how their implementation can improve UI concepts as well as become the foundation for solid and strong branding. So, today let’s analyze in more detail what are the advantages and secrets of mascot magic and when they are applicable.

The essence of a mascot

Mascots are images, usually personified, which in most cases represent the brand, product, or service identity and therefore become its symbolic convention via the whole application or website as well as the branded items and promotional activities.

Andre Landscape mascot concept

Mascot becomes the element of identity and inter-connector between the user and the product. In many cases, the mascot is the basic element of communication and interaction; therefore, in different states, it can become the basic way to deliver the message to the user.

The business practice of successful companies shows that thoughtfully designed mascots can work even better than product endorsements with the help of a famous person. Mascots can reflect any traits of character, follow any style needed for product positioning and communicate with the customer via a wide set of visual techniques. Mascots push the limits of personification and give a chance to create unexpected combinations of elements or make fantastic and non-existing characters alive.

Designing mascots for our numerous customers as well as our own studio brand, we have already checked their great power as a multipurpose and comprehensive design element. Efficient mascots should be based on thorough user research, analyzing needs, wishes, and expectations of the target audience, and also an attentive study of the market environment to support the appropriate level of originality as the basis for effective design solutions.

Saily mascot design process

Advantages of mascots

Let’s see what the important practical advantages of mascots are applied in branding and content strategy.

Memorability

People tend to remember substantial and actual images much longer than abstract ones, and characters reflecting human-like features are the favorites of this technique. No doubt, it can have a significant influence on the level of brand awareness.

Recognizability

Mascot can become a strong element of an original and unique piece of the content presenting a particular product or service. A well-done analysis of the target audience, as well as a sophisticated and thought-out design, can provide the brand with an important element making it recognizable in seconds. This advantage is also directly connected with the previous one. As long as it is easier to remember the mascot, it is also easier to recognize the product and its features, among others.

Visual marking

Mascot allows marking visually anything connected with the product creating an additional field for promotional activity. A mascot can work as a logo, transform into illustrations, elements of gamification, printed stickers, and every time, it will support a strong visual connection with a brand.

Personalization

As has already been mentioned, users usually appreciate the element of direct communication and personal attention to them. Mascot is one of the best ways to provide it. It can communicate directly with the speech bubbles, provide visual prompts via various facial expressions, reflect the mood of the user with different graphic variations of the mascot, provide helpful instructions in the tutorial and congratulate the achievements. There are hundreds of ways to strengthen the element of personal communication using mascots. For users, it can make a big difference, especially in cases of interaction: communication with a particular character often provides a much more positive and dynamic user experience than impersonal instruction sent by the system.

Stylistic support

Mascots, being a highly flexible element, can become a central part of the general style concept for the product. It is easy to send the key message to the user via mascot: it won’t take long to understand if the product is serious or entertaining, lively or calm, business-like or easy-breezy, highly private or broadly social, and so on and so forth.

Product voice and tone

In combination with the previous feature, mascots can play a great role in supporting general tone and voice, which is the basis for a branding strategy. Mascot usually reflects the most important feature of the product and transfers the idea much faster and in a user-friendly way. Moreover, it often gives a chance to avoid long copy bulks in product descriptions enabling visual perception of information which is by far faster than text perception.

Onboarding tutorial for Singify

Emotion and interest trigger

Dealing with users, we all should remember that they are unique individuals, unique inner worlds full of their own emotions. Emotions and feelings are often the main power moving people to a particular choice, decision or operations. Mascot is one of the fastest ways to provide this feature of emotional feedback to the user, letting them speak the user’s language, and therefore make the product more user-centered.

Aesthetic satisfaction

Although practical and problem-solving issues mostly come first as the central way of attracting and retaining users, aesthetic satisfaction shouldn’t be neglected. Mascot, as an element of the sophisticated artistic approach, can become the feature supporting this user’s need. A pleasantly looking mascot is a good reason to make a choice in favor of a particular product in the case when it’s compared to the ones with the same functionality but less attractive graphic support.

Long-term strategic potential

Mascots accomplished properly usually become the element of long-term branding strategy and are able to satisfy multiple needs getting transformed and refreshing the experience of product use without losing recognizability.

Saily mascot design process

Diversity of usage

Mascots can be applied in hundreds of various ways, both in digital graphics and physical products, starting from simple stickers and illustrations up to printed stuff, dolls and toys, play characters and cartoons.

Element of virality

Unique and stylish mascot can become a strong element of virality, becoming so popular among users that they will not only spread it to each other but also create new versions, parodies, discussions, and the like. That works especially efficiently in products for kids when the mascot actually becomes a central representative of the product and creates a high level of desirability.

Element of consistency

Mascot applied in various elements of branding and content strategy creates the feeling of consistency which is the basis of strong brand presence and positioning on the market.

Requirements to mascots

Therefore, according to everything mentioned above, we can sum up what requirements for efficient mascots should be considered. Among them, we would insist that a mascot should be:

• memorable
• recognizable
• original
• representing a consistent character
• flexible to adapt and adjust
• applicable for diverse tasks
• looking good in different sizes and resolutions
• stylistically harmonic
• lively and user-friendly.

Mascots in UI

Mascots are very helpful in interfaces: they liven up the general process, catch up user’s attention, become a memorable element, create important support for a stylistic concept, and make the illusion of direct communication with the user.

Also, wisely used in illustrations featuring actions or interactions, a mascot can become a good way to avoid using too much copy on the screen and, in this way, save space for other important elements of the layout or just more “air” really needed to create a good perception of data on the screen or page.

Saily mascot applied to mobile app user interface

Certainly, mascots should be wisely applied in order not to overload the interface where it is not needed. The aim of a mascot in any kind of environment is to simplify and speed up the interaction with a product. If this objective is not achieved, the mascot can play a bad role and create unnecessary distractions instead of improvement for the branding. In our next post, we will continue this topic, considering some pitfalls and issues necessary to consider in the process of creating a mascot as the element of branding. Stay tuned!

Branding 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.

Page Turner. Identity and Packaging Design for Bookstore Chain

BlockStock. Brand Identity and Website for Minecraft Models Resource

SwitLuv. Theme Packaging Design About Love for Sweets Brand

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

Garden Gates. Identity and Packaging Design for Garden Center

Bikker. Identity Design and Illustrations for Biking Service

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

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

FarmSense. Identity and Web Design for Agricultural Technology

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

Сообщение Mascot Power for Effective Branding появились сначала на Design4Users.