Tag Archives: collaboration

tubik studio design business

Business Terms in Design for E-Commerce. Sales Basics

 

«Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» (Erik Spiekermann)

 

 

Modern design has multiple faces, sides and directions. Some of them are more artistic than the others which are deeper concentrated on profits and goals. However, any way it goes design is the sphere with different perspective. Design is goal-oriented and problem-solving activity applying art to serve people.

 

«Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.» (Mike Monteiro)

 

Talking about the sphere of web and app design, one of the most practical and goal-oriented fields of creativity is design for e-commerce. In this domain, there are many factors influencing design decisions and lots of relevant aspects to study and research. Designing a product for ecommerce, be it a website, a web or mobile application, branding design, advertising materials, designers work within various limitations built by particular product or service features, target audience, marketing and promotion strategy, business goals, budget and investment plan etc. Design becomes a tool working when used properly. Therefore, to use it efficently, the designer needs to know the basics of business and economy as the goal of design process in this case is creating an app or a website raising money and built on business techniques and methods. Moreover, quite often designers creating e-commerce platforms and products work in team with marketologists, advertisers, researchers, analysts and psychologists all of whom have a purpose to increase the level of profit brought by the final product.

 

So, today we decided to start collecting and explaining here basic business terms which are important in the process of digital design for e-commerce. Considering this list can make the designer much closer to marketologists and provide great help for better communication. In addition, keeping the aspects mentioned below in mind on the earliest stages of design such as UX research and wireframing is a good way to effective solutions increasing profits on the solid well-thought-out logic of interaction. The set of terms can be also useful for project managers involved in the process and managing collaboration between different sides of the same process.

 

tubikstudio design office teamwork

 

Business Basics

 

Today’s section is focused on basic terms used in the domain of economics and business strategy mostly concentrated on sales in their broad understanding. Taking them into account and analysing significantly increases the chances of creating efficient digital product.

 

«A satisfied customer is the best business strategy of all.» Michael LeBoeuf

 

E-commerce (Electronic Commerce)

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful.» (Jeff Bezos)

 

Definition. E-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 ecommerce 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.

 

Design aspect. Obviously, success of e-commerce activity depends on several factors among which:

— quality of the product or service offered

— quality of the content presenting the offer to customers

— 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 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, catalogues 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.

 

tubikstudio ui animation

Product Card Animation by Alla Kudin

 

Conversion

 

«It’s much easier to double your business by doubling your conversion rate than by doubling your traffic» (Jeff Eisenberg)

 

Definition. Initially in terms of e-commerce, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

 

Design aspect. Today ecommerce uses wide range of techniques, so in terms of web or app platforms meaning of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

 

For example, in our article about landing pages which are recognized as one of strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in case of:

 

  • moving to direct use of a product
  • subscription
  • transition to the other page
  • downloading an app or a file
  • providing some information
  • answering the question in the survey
  • starting free/discounted trial use of a product
  • browsing a library
  • reading more detailed description of the product or service etc.

 

Therefore, conversion for a webpage or app screen can mean different actions that correspond to sales or marketing strategy of the particular business.

 

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the web page or app screen efficiency which is vital for business. It is a metric reflecting focus on engaging visitors with data performance and stimulating them to make the action which is a part of a business plan.

 

For designers the factor mentioned above means that if they create design concentrated on conversion rates via positive user experience, their work will result in website or app bringing profit both for user and business.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

Read more and review the examples on this topic in our previous article

 

Sales Funnel

 

«Communications is at the heart of e-commerce and community.» (Meg Whitman)

 

Definition. Sales funnel (in other words — purchase funnel) is a technique which is deeply customer-focused and based on gradual involvement of a customer into the process that potentially gets finalized with the act of actual purchase. When this technique is applied, the customer moves through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase.

 

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.

 

Design aspect. In terms of e-commerce, sales funnel is highly effective commercial technique supported with diversity of functions digital products can offer. Knowing the priciples 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 the product.

 

In addition, sales funnel stages thought out and applied properly can work as a sort of filters letting quickly inform users about the product or service and move to the next stage those who are potentially more interested while saving time and effort for those who are looking for something other.

 

However, sales funnel designed carelessly can play the opposite role: it can confuse users who are potential buyers and turn them out of the website or app without taking a chance to know proper information about the offer.

 

Sales funnel should be applied and designed on the basis of thorough research of target audience and market segment. Moreover, it should be carefully tested from the very start of its implementation to measure if all the stages work efficiently. Practice proves that even minor design changes can bring big changes.

 

website design concept tubikstudio

BRMC Website by Konst

 

Sales Channel

 

«It is not your customer’s job to remember you.It is your obligation and responsibility to make sure they don’t have the chance to forget you.» Patricia Fripp

 

Definition. Sales channels are the ways through which the potential customers come to the point of e-commerce, be it a website or mobile application with which they can realize the actual purchase.

 

Design aspect. Designing for e-commerce, it is important to take into account maximum of the possible sales channels which are really numerous in the Internet, from social networks to specialized forums, influencer’s reviews and tailor-made advertising campaigns. Researching and understanding those channels gives broader prospects to the actual point of sale which you are designing for.

 

There are several vital asects to remember about:

 

— Sales channels should be initially concentrated on target audience. There is always the place and time to broaden the perspective as soon as core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to waste of effort, time and money spent on design and promotion. Move gradually and measure the efficiency of design solutions at every step.

 

— Sales channels will work effectively from initial awareness stage if they witness strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in brandbook considering all the details of visual presentation and mission statement. Consistency is a powerful tool of both design and marketing.

 

— Sales channels should direct traffic to the places which enable users quickly get informed and make the actions they come for. For example, if the post in Facebook invites users to participate in summer sale, they should be directed right on the landing page of this sale, not to the home page of the website.

 

The mentioned factors thought out at the stage of thinking over UX design solutions are able to make a good impact on conversion and sales rates.

 

Niche

 

«We will continue to see a convergence of the digital and physical world. Those who conquer that trend will be market leaders.» John Phillips

 

Definition. In business, niche means concentration of the offer on specific needs, wishes and problems of a specific target audience. Niche market is a specialized market segment which is aimed at specific market needs with a close view on its demography, education level, level of income and purchase abilites etc. For example, when one company produces software generally used for creating and editing textual materials for broad target audience while the other is adopted for specific needs of copywriters and editors (grammar checking, plagiarism analysis, synonyms prompts etc.), the latter one presents the niche business.

 

Design aspect. Designing for niche market and niche product, it’s important to learn all the details about the target audience as it is going to be quite specific and more details are usually influencing the process of design and marketing. Applying psychology of color, copy targeted at potential clients, deep analysis of their needs and providing efficient layout, easy transitions, clear data presentation and aesthetic features that suit this particular audience is good way to high profit. In addition, creative ways to emphasize specific nature of the product or service by means of design such as branding and original UI solutions can help the product to stand out of the crowd and stay competitive.

 

tubik studio ui animation

Bonano e-commerce interactions by Vladyslav Taran

 

Maslow’s hierarchy of needs

 

«It is quite true that man lives by bread alone — when there is no bread. But what happens to man’s desires when there is plenty of bread and when his belly is chronically filled?

At once other (and “higher”) needs emerge and these, rather than physiological hungers, dominate the organism. And when these in turn are satisfied, again new (and still “higher”) needs emerge and so on. This is what we mean by saying that the basic human needs are organized into a hierarchy of relative prepotency» (Abraham Maslow, 1943).

 

Definition. One of the basic psychological theories widely applied in business on both micro- and macroeconomical levels. Developed by Abraham Maslow, it is focused on the hierarchy of human needs and consequently factors of motivation.

 

Its presentation found at Simply Psychology website features  5 levels of human needs featured by the theory:

 

1. Biological and Physiological needs — air, food, drink, shelter, warmth, sex, sleep.

 

2. Safety needs — protection from elements, security, order, law, stability, freedom from fear.

 

3. Love and Belongingness needs — friendship, intimacy, affection and love, — from work group, family, friends, romantic relationships.

 

4. Esteem needs — achievement, mastery, independence, status, dominance, prestige, self-respect, respect from others.

 

5. Self-Actualization needs — realizing personal potential, self-fulfillment, seeking personal growth and peak experiences.

 

Design aspect. Having read the points of the theory, it’s easy for a designer to ask: «What does it have in common with design process?» The link perhaps doesn’t look really obvious, but it is fundamental in motivating people to use or buy products or services on different levels of economic relationship. Designing for e-commerce, which is one more type of human relationship, with a specific goal and ability to apply the mentioned theory can produce user-friendly and customer-centric product achieving its target audience and solving its problems.

 

Certainly, it’s great when designer is able to involve professional marketologists into all the stages of the creative process and apply their professional knowledge and skills in design form. However, this opportunity isn’t always available. Moreover, designer able to analyse economic basics and business factors influencing the design scheme and logic gets the higher level of proficiency.

 

In design for e-commerce, it is good to understand from the early stages of the process what stage of the Maslow’s pyramyd the core target users are at. Answering this question, designer is able to talk to users’ in their language and find the solutions that resonate in their hearts and minds the best. Users’ needs form their motifs, triggers that can catch their attention, words that can touch them, length of copy and calls to actions that they are ready to accept and follow. Analyzing the level of needs and expectations, designer is able to find the most efficient layout and informative graphic elements. Knowing and feeling the user is the solid foundation for problem-solving goal-oriented design.

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

4P Theory

 

“People don’t call it e-commerce anymore. It’s called omni-commerce, and it’s the idea that digital permeates every step of the purchase chain from product discovery to trial to pricing to actual purchase.” (Tolman Geffs)

 

Definition. Famous 4P theory, presented by Neil H. Borden and later grouped by E.Jerome McCarthy, also known as marketing mix, has become highly popular and efficient in business strategy, including e-commerce sphere. It states that product launch and lifecycle is based on four «P» factors: product, price, place, promotion. Business Case Studies website simply formulates it the following way:

 

«When marketing their products, firms need to create a successful mix of:

  • the right product
  • sold at the right price
  • in the right place
  • using the most suitable promotion.»

 

Marketing case studies prove that missing even one of four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.

 

Design aspect. No doubt, 4P theory is highly applicable in design for e-commerce. The Price of product is usually the furthest part from designer’s decisions as it is decided and given by the stakeholders ordering design part of work. In perspective of Product it works only partly being applicable to those cases when users buy digital products or services, let’s say mobile applications, which also need UI/UX design.

 

However, talking about the other two factors we can see how actual they are in terms of design effort and creativity. Indeed, designers creating websites or apps for e-commerce, create the right Place for trading and are responsible for making this place comfortable, attractive and correspondent to the product nature as well as target audience expectations. As for the Promotion, today online marketing features numerous ways of presenting the product and achieve the target audience; it’s effectiveness also significantly depends on design decisions. 

 

Neglecting close interconnection and mutual influence of all those factors on the final result increases risk of poor rates. Design decisions made on the basis of those factors supporting each other help to provide pleasant, positive, easy-to-use and user-focused e-commerce platforms.

 

Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov

 

The bottom line

 

The set of business terms and their definitions given above builds the bridge between business strategies and designs able to efficiently support them. However, it’s very easy to get overwhelmed with all those techniques and forget the first and most important thing. There are no any sophisticated design solutions, marketing techniques and any sort of magic which will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. Positive experience of interaction with a website will not overcome bad experience of interaction with low-quality product or service.

 

The offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in fast and easy way. Nevertheles, if the product is of poor quality, successfull design of e-commerce platform isn’t going to make it better. Think over the product and its user first, only then design will give it the chance to beam at full.

 

«To satisfy our customers’ needs, we’ll give them what they want, not what we want to give them.» Steve James

 

tubik studio designer ecommerce

 

Don’t miss our next article which is going to present the set of business terms useful for UI/UX and graphic designers in terms of marketing and user research. Stay tuned!


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

Design is a job quotes

Design Is a Job. 30 Honest Quotes by Mike Monteiro

For plenty of people design is a synonym of art. And for some creative guys who do not make their living or their business that way, it perhaps is. However, for those who decide on making design their job solving problems and pains, it obtains other perspective and requires different approach. Sometimes it becomes a great discovery what a goal-centered activity design is and how many problems can be solved with it, far more than just aesthetic satisfaction.  It is vitally important to understand that from the first steps on the path to avoid disappointment and achieve access.

 

In one of earlier articles with tips to beginners in app and web design our first advice based on practical experience was rather simple. The first and really crucial thing may sound quite primitive: you should make sure that you really want to make it your job. There are lots of people who, being great artists, deeply creative and inspired, get broken by the necessity to work systematically with strict deadlines and loads of requirements and wishes (sometimes illogical or not-too-professional) from the customers. Clear up the nature of your job: designer is not a pure artist free of obligations and fully devoted to creativity. Nope. In different stages of your project, you’re also going to be a researcher, an analyst, a time-manager and so on and so forth. Bear in mind all those things from the very start of the way.

 

For those who have made this vital decision, today we would like to recommend a useful and helpful book «Design Is a Job» by witty expert Mike Monteiro, the co-founder of Mule Design. The book reveals all the stages of design job, including communication with clients, organization of the process, drawing contracts, working in teams of colleagues and so on and so forth. The author doesn’t try to make the profession look like magic: he is deeply and sometimes sharply honest about not only the benefits but also pitfalls. In the foreword to the book, Erik Spiekermann says: «Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» The ideas shared by Mike Monteiro are highly practical in supporting this thesis. It is not about design process inside only, it is more about the outer part of the design world, full of clients, requirements, goals, metrics, iterations, presentations and discussions.

 

Here we would like to share a new set of design quotes which we grabbed from this book for Tubik Studio Quotes Collection. This time it will be fully loaded with honest and informative thoughts by Mike Monteiro. Join in!

 

Design is a job quotes

 

A designer requires honest feedback and real criticism, and that’s not going to happen in a realm where colleagues or clients are worried about crushing the spirit of a magical being. The sparkly fog of affirmation gets in the way.

 

Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practicing your craft by helping them clarify what they need.

 

If you can stand in front of a client completely confident and explain why you are worth the amount you quoted, you should charge it.

 

The general rule is to involve as many people as possible in early discussions, and make that number as small as possible once you go into review cycles.

 

Anyone who hires you because they thought you could do the job and then doesn’t let you do it has lost respect for either you or the design process.

 

Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.

 

quotes collection design tubik studio

 

Successful design balances convention—familiar forms, terms, and interactions—and novelty—new forms to engage and delight the users, in the hope they will stick around a bit longer and maybe buy their pants here instead of somewhere else. As long as you remember that those new forms must serve the goals of the business. Otherwise, they’re just novelty.

 

A good client will trust your process as long as they have transparency into it, can see results, and you’re willing to bend a little here and there. Without breaking.

 

A designer who does not present his or her own work is not a designer. Presenting the work, explaining the rationale, answering questions, and eliciting feedback are part of the design toolkit. If you sit at your desk while someone else presents work to the client, you don’t get to complain about the feedback. The failure was yours.

 

Clients are the lifeblood of a healthy business. They are the oxygen in your bloodstream that keeps everything going. No matter how good you are at what you do, without someone willing to pay you for that service you will have to close your doors.

 

tubikstudio design quotes

 

If you’re trying to decide between two design firms that seem equally talented, the one that came with a referral has a solid advantage. And that vetting goes both ways—a client who is well-socialized and has a good reputation in a large network is more likely to be a great client. In most cases, you’re going to be as skeptical of a client who hires a designer from an ad as they are of the designer who answered that ad.

 

…you should aim to be pleasant to work with, as everyone would rather work with someone pleasant than with an asshole. But no one wants to work with someone who’s faking it. Doing good work often requires a few hard conversations.

 

The biggest myth ever perpetuated in the design field is that good design sells itself. (The second is that Copperplate is a legitimate typeface.) Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users. The client needs to know that you’ve studied the problem, understood its complexities, and that you’re working from that understanding.

 

Ultimately, your job is to make the client feel confident in the design. Confidence is as much of a deliverable as anything you’re handing over in the project.

 

There’s a difference between being enjoyable to work with and being “nice.” Being nice means worrying about keeping up the appearance of harmony at the expense of being straightforward and fully engaged. Sometimes you need to tell a client they’re making the wrong call.

 

design quotes tubik studio

 

Of course, being the most pleasant person in the world won’t help your cause if the work isn’t good. But don’t make the mistake of thinking the quality of your work by itself will be a shining beacon that pulls clients near.

 

You can do a lot to show a client how valuable time is in how you comport yourself throughout the project. Run your meetings and work sessions efficiently. Come in prepared. Don’t run over. Don’t hang out. Don’t train clients to think you’ve got extra time on your hands.

 

At the risk of sounding like a broken record, stay in good communication with your clients at all times. They will accept your process as long as you are showing them results. Make sure to set their expectations correctly as to what is happening when.

 

Over the years the one constant that we’ve been able to rely on is that how a potential client behaves in the business development process is exactly how they will behave during the project. Trust your gut.

 

design quote tubik studio

 

Never work for free. Any work you take on for free will get pushed aside for paying work. That does neither you nor the client any favors. Neither of you will respect each other’s time. If the situation merits it, work at a discounted rate. But submit a budget showing the actual rate, with the discount applied. Let the client know the value of what they’re getting.

 

Not knowing the design language doesn’t make someone a bad client.

 

Only you know the value of your time. (Hint: it is greater than $0.) But the value of your work to a particular client depends on what the client has to gain from that work. And the client is not buying time from you. They are buying work. The value of that work is what you need to charge them for.

 

As we tell potential clients when they ask us what their site will look like: “Oh, we have no damn idea. But we know what the process is for finding out.”

 

But much like the best umbrella is the umbrella you have on you, the best process is always the one you’re having success with. Don’t fall for trendy processes. If the one you’re using works for you, go with it.

 

tubik studio design quotes

 

You’re not going to ask for permission to do things your way. You’re going to convince clients that your way works by showing them how you will use your process to meet their goals. And you’ll back this up by showing them how many times it’s worked in the past.

 

Throughout a project you may have to remind a client multiple times that they agreed to follow your process. And throughout a project you will have to convince a client that your process is actually on target to get them the results they need. There will be hand-holding. There will be tough love. But above all, you will have to stand your ground and stick to what you know works.

 

…just make it a habit never to speak ill of your clients. They’re paying your bills. And putting their livelihood in your hands. They’re good people.

 

Working with other (talented) designers makes you a better designer, and is essential to your professional development, especially early in your career. There’s simply no better way to learn your craft than to watch someone else practice it.

 

Not only can a designer change the world, a designer should. This is the best job in the world! Let’s do it right.

 

tubik studio design quote collection


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

item conference stuff tubik studio

ITEM 2016. Conference Connecting Experts.

It’s not a secret that the most powerful tool of presentation, promotion, collaboration and inspiration is personal communication between people. Nowadays we have got numerous chances to communicate, study from experts, train our skills, do business and get inspired staying at the computer desk. However, all those things are not able to fully replace live communication with experienced professionals, discussions on controversial issues, sharing interesting ideas and exchanging energy of those who know everything first hand.

 

Certainly, in practice it’s not so easy, as the better you are in your job, the more responsibilities, tasks and current projects arise every day. Still, knowing all those important “-tion” factors, mentioned in the first sentence, here in Tubik Studio we try to take some time for important meetings and conferences. This experience is always highly precious as it provides the moments of refreshment and new perspective of the sphere. Earlier we have already shared our memories from Dribbble meetups and Behance Portfolio Reviews. And, surely, we couldn’t have missed one of the biggest IT events of this summer in Ukraine – ITEM 2016.

 

item conference tubik studio opening

 

ITEM (IT Evolution Meetings) is a large-scale conference for managers of all kinds in IT sphere. This year it was held the 4th time in Dnipro, big city in central-eastern Ukraine which at the moment is one of the leaders in Ukrainian IT-industry and home for many IT companies known worldwide. The conference got together speakers and participants from different countries and companies all united with professional interests in diverse domains of informational technology.

 

item conference tubik studio

 

Organized at the very start of summer, 2-3 June, the event seemed to be filled with sun and warmth up to the brim. Participants arrived from various corners of Ukraine, including Kiev, Kharkiv, Lviv, Odessa, Zaporizhzhya and others. Also there were many guests from other countries representing New-York, Palo-Alto, Los Angeles, Oslo, Amsterdam, Tallinn, Riga, Tel Aviv etc. In general, the event was attended by representatives of over 100 companies among whom you could find executives and owners of IT-businesses, project managers, sales and marketing managers, designers and developers.  The conference became a great platform for IT professionals from different points of the globe to meet each other, share ideas and problems, discuss actual issues, listen to recognized speakers and have fun together.

 

item conference tubik studio managers

Tubik Studio managers team attending ITEM 2016

 

The program of conference took two full days of interesting and informative work.  44 inspiring and informative speeches were presented by speakers in 5 conference panels covering actual topics of modern IT industry: IT-Geography, IT-Business, IT-Technology, Sales and Marketing, and Project Management. That was one more chance for us to feel the great power of teamwork: with many participants of management staff, Tubik Studio team got the chance to catch the maximum of information having representatives in every panel and then exchange thoughts and ideas. The speeches were given by well-known experts. Among headliners, whose presentations were full of actual and practical tips, must-mention ones are Tom Gilb, Jurgen Appelo, Zhenya Rozinskiy, Yegor Bugayenko, Yakov Fain, Kfir Bloch, Nikolai Prosto, Eugene Galkin and others. Certainly, the most precious benefit was the ability to ask questions and get immediate answers and tips as well as the chances of informal chat during breaks.

 

tom guilb item conference tubik studio

Tom Gilb chatting with participants during coffee-break

 

item conference tom guilb tubikstudio

Tom Gilb giving speech

 

item conference speech tubik studio

Jurgen Appelo giving speech

 

item conference tubik studio

Zhenya Rozinskiy chatting with participants during coffee-break

 

yegor bugayenko item conference tubik studio

Yegor Bugayenko giving speech

 

The wide range of topics and directions presented at the conference gave a really wide scope of issues to consider. No doubt, information and feelings got there are going to transform into bright memories of this summer  for every participant and perhaps open new vision of the industry and market in IT sphere.

 

item conference tubik studio team

 

item conference it tubik

Tubik Studio managers team attending ITEM 2016

 

Those who had the experience of professional events organization obviously appreciated the level at which the conference was held. We left the Menorah Center, the venue of all the speeches and discussions, with warm feelings of inspiration and gratitude to those who did the stuff making all this big and bright machine called ITEM 2016 function like clockwork. Thanks to speakers for thoughts and tips shared and all the participants for great time together! Look forward to new meeting at ITEM-2017!

 

item conference stuff tubik studio


Most photos are taken from official Facebook page of ITEM conference.

SwiftyBeaver logo case study tubik studio

Case Study: SwiftyBeaver. Designing Logo.

In our previous case study we told you the story of UI and UX design for SwiftyBeaver describing the design process in detail and supporting it with the visual variants of different stages. Today we want to continue with unveiling logo design process.

 

swiftybeaver logo design tubik studio

 

Task

 

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

 

Tools

 

Pencil sketching, Adobe Illustrator, Adobe After Effects

 

Process

 

As we mentioned in case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family.

 

Design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concept. Following this approach for SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

 

Naturally, the initial stage of general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of beaver’s tail.

 

swiftybeaver mascot tubik studio design

swiftybeaver logo design tubik studio

 

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience as well as the nature of the product is quite specific so more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open for discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

 

swiftybeaver logo sketches tubikstudio design

 

Moreover, this version got closer to the general visual design of user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries and the chosen concept of logo provided strong connection of UI design and branding. Therefore, the next stage of design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

 

swiftybeaver logo design by tubik studio

 

swiftybeaver logo versions tubik studio design

 

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, user interface of the platform, landing page and logo were cojoint via colored elements.

SwiftyBeaver ui screens tubikstudio

 

tubikstudio swiftybeaver landing

 

The original version of logo was colorful, but monocromatic version was also accomplished and tested to provide branding solutions with high level of flexibility.

 

SwiftyBeaver logo final tubikstudio

 

SwiftyBeaver logo mono tubik studio

 

Another issue to consider was the choice of font for company name lettering featured with logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

 

swiftybeaver logo fonts tubikstudio

 

The approved variant of logo image and lettering was also supplied with the design of animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

 

swiftybeaver animated logo tubik studio design

 

And one more important task to move on with was design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in smaller size.

 

swiftybeaver icon variants tubik studio

 

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.


Welcome to see other works by Arthur Avakyan on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

Tubik Studio UI UX designer

SwiftyBeaver. UX & UI Design for a Mac Application.

Today we would like to present you a new case study on UX and UI design. This time it is a full design path for SwiftyBeaver project.

 

SwiftyBeaver ui by Tubik studio case study

 

Task

 

Design of user interface for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

 

Tools

 

Sketch, Adobe Illustrator, Adobe After Effects.

 

Process

 

SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family. User interface designer had to consider basic and advanced needs of people involved in developing process to make it easier, faster and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get more detailed description of the product and its functionality, welcome to read its presentation on Medium. And now let’s look a bit closer at some steps of user interface design for the product.

 

Tubik Studio UI UX designer

 

In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of development process helping developers to understand flow, logic and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, user interface for this sort of product needs to support high level of visibility for changes, intuitive navigation and presentation of big data bulks with high level of readability and visual marking of key details. The basic objective was to design a platform which will be easy to use, informative, supporting broad functionality for professionals and seamlessly integrated with any Apple device.

 

At UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:
— the way log entries should be shown in the stream, as a general feed or separated by filters
— the method log entries or the part of the stream history will be saved
— the channels of creating code or working over the existing code.

 

SwiftyBeaver UX by Tubik Studio

 

Obviously, this part of design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder and CEO of SwiftyBeaver Sebastian Kreutzberger. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions and navigation of the interface at UX wireframing stage. Thorough analysis of the target audience and unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.

 

UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based using dark background common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.

 

So, visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the stream feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.

 

SwiftyBeaver UI concepts by Tubik Studio

 

Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven therefore it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.

 

The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.

 

Among all the versions, the final decision was made upon the most minimalistic one. It used colored lines along the message body and small yellow star for saved entries. All the colored elements as well as the background color and shades of hovered elements were carefully tested to get the high level of visibility and pleasant-looking efficient contrast.

 

SwiftyBeaver ui screens tubikstudio

 

One more key element of design that needed deep attention was a choice of fonts. Actually, in design process around any interface the choice of an appropriate font has a great influence on general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.

 

The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.

 

SwiftyBeaver Style Guide by Tubik Studio

 

The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research and testing this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of kerning and spacing of the lines and work with efficient copy placement.

 

SwiftyBeaver UI screens Tubik Studio

 

The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main accent again was made around the colored accents echoing the design solutions of the application interface layout.

 

tubikstudio swiftybeaver landing

 

In addition, Ludmila accomplished graphic design task which resulted in illustrations presenting the features and benefits of the product.

 

SwiftyBeaver Illustration by Tubik Studio

 

Another design task accomplished by Tubik Studio for SwiftyBeaver was work on logo design for the app.

 

swiftybeaver logo design

 

We will tell about it in our next case study, coming very soon. Don’t miss!


Welcome to see designs by Ludmila Shevchenko on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

invision prototyping tool tubikstudio review

Design Tool Review. Prototyping with InVision.

Prototyping is one of the important stages of efficient UI/UX design process as it allows trying design solutions and test them practically before moving to high-fidelity design polishing as well as product development.

 

In one of our previous articles we have already mentioned the benefits of prototyping for designing strong and positive user experience and reviewed one of popular prototyping tools Pixate. Today we are going to continue this conversation describing the other efficient software for prototyping called InVision.

 

General description of the tool

 

InVision is the comprehensive prototyping software supporting the process of designing user interfaces for mobile applications and other sorts of digital interactive products. Now it is one of the major players on the market, perhaps due to constant improvement and extensions of the functionality which the company adds to the product as well as the strong informative support via their Blog which share diverse cases and articles on design.

 

invision prototyping in tubik studio

The basic idea behind InVision is fast and easy creating live prototype from static images of any fidelity level. The tool provides the ability to upload wireframes which can be more or less detailed and with the functional facilities of the software they are automatically transformed into the prototype of the app. It is possible to follow the necessary transitions, to test the buttons, to analyse the layout in the mock-up of the device interface.

 

tubik studio design

 

Working over numerous project on UI/UX design for mobile applications here in Tubik Studio, we are usually keen to try different tools and software to increase productivity and — what is more important — efficiency of design workflow and communication with the customers. These are the reasons why InVision prototyping tool has become popular here in cases of app design. Being simple and clear in its interface, it doesn’t scare clients who can be easily involved in the process; in addition, it provides numerous functions enabling designers to make the process of testing design faster and easier in terms of productive teamwork.

 

Why should you try prototyping?

 

As we have already mentioned plenty of times in our earlier blog posts, prototyping is the essential stage of design process when user interface for mobile application or a website is created. Being based on our practical experience, we can definitely say that prototyping is the stage when testing can save the time, effort and money.

 

Let’s see, how the process is going on here in the studio. After setting clear objectives for the product, conducting user and market research, defining and analyzing target audience designer starts working on the initial UX design solutions. This is the time when the living organism of the future product gets into its skeleton and all the elements that have to be included start functioning as the united system. The designer thinks over all the layout, forms the group of screens, decides on their functionality and transitions, thinks over the most efficient variants of placement for interactive elements and CTAs. The result of this process, based on great deal of thinking and analysis, is initially given out as a system of UX wireframes. This is usually the set of screens done in limited color palette and its main goal is to set all the logic and functionality of the future application. And this is the high time when the team involved in design process could apply a prototype to make a full analysis of design solutions before starting UI design stage.

 

tubikstudio UX design

 

Lively and clickable prototype tested in the mock-up of an actual device screen you design for is the great and fast way to reveal any sort of problems influencing usability of the product. It lets all sides of the design process – designers, managers, testers and clients – have actual experience of interaction with the future product, to ensure that there are no missing parts or unnecessary steps in the process, to test if all the elements are logical and placed right.

 

The great advantage of InVision tool is that due to its functionality its now rather easy to apply the technology of prototyping, in fact, almost at all the stages of design process as it is not time consuming to upload the static images of the screens and form the prototype with them. That means that it’s possible to start effective testing from the very first groups of screens to see how they provide logic of the layout and transitions.

 

invision prototyping tubikstudio

 

Moreover, in case of using the tool it is also possible to test all the UI decisions in the clickable prototype and see them actively used. The designer can apply animation and simulate gestures using tools’ native functionality to make the prototype felt even more realistic and the experience very close to natural.

 

The power of collaboration

 

What we especially appreciate about InVision software here in Tubik Studio is its strong and constant support of efficient collaboration in design process. Knowing that fast feedback from the client is a vital feature of effective and productive design workflow, creators of this tool made it convenient and clear not only for designers and project managers who are usually fast in dealing with different tools and soft, but also for those customers who are not really avid software users and it takes some effort for them to deal with new tool. InVision has good navigation and is user-friendly for different types of users.

 

The tool enables creators to get a clickable prototype and at the same time to communicate on every smallest part of it. That means clients are able to set their feedback not only to particular screen but even to a particular element of the screen such as button or toggle, shade or shape, piece of copy or graphic icon – anything. It provides the functionality of multiple threads and therefore designers, managers and clients can discuss particular elements quickly and set more productive workflow together.

 

invision prototyping tool tubikstudio review

 

 

Additional features

 

Except the general functionality of prototyping process, some important additional features of the tool should be also mentioned:

 

— Easy and fast integration with other design tools for efficient work, such as Sketch of Photoshop, for example, from which the wireframes can be directly uploaded to InVision.

— Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.

— Easy control and marking of project statuses for efficient project management.

— Functionality for creating and presenting mood boards, brand boards, galleries and style guides.

— Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.

— Saving versions history to easily compare several versions of design solutions.

— Diverse functions and features for creating high-fidelity prototypes that can be used for user-testing before the stage of development.

 

invision tool tubik studio review

 

So, the software has shown itself as the important tool improving teamwork and the process of testing design solutions as well as tight collaboration with the customers. Those positions are among the key points of efficient design process providing thought-out, high-quality and user-friendly designs.


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

Tubik Studio Review

Tubik Monthly Review. January

Traditionally, we start a new month in Tubik Studio with a moment of looking back at what has been done in the previous one. New year has started with new interesting projects and concepts, diverse shots on Dribbble, new plans and hopes and new articles in Tubik Blog. So, let’s look a bit closer at what January has brought up.

tubik studio office

 

In January we filled up our Dribbble portfolio with fresh shots featuring concepts for web, app, motion and logo design. Glad to mention that this month brought us two bright debut shots for the team, both featured in Dribbble weekly replays. Here’s the set of January shots.

 

tubik studio design UI

Photo Retouching Service by Alla Kudin

 

tubik studio UI design

HomeBid — Live Furniture Auction by Violetta

 

tubik studio app design

Social Network. UX for Communication by  Marina Yalanska

 

tubik studio app design

Entertainment App by Ludmila Shevchenko

 

tubik studio design

Structure – Architecture Blog by Ernest Asanov

 

tubik studio logo design

Tootl Logo by Ildar Alexandrov

 

tubik studio design

Microinteraction for Macroresult by Marina Yalanska

 

tubik studio web design

Web Template by Sergey Valiukh

 

tubik studio design

Weather Concept by Tamara

 

tubik studio design UI

Weather in UI Design by Marina Yalanska

 

tubik studio UI design

Messenger App by Ludmila Shevchenko

 

tubik studio design UI

Randomizer concept by Vladyslav Taran

 

tubik studio web template

Luxury Real Estate Web Template by Sergey Valiukh

 

tubik studio UI design

Offer App Coupon by Daria

 

tubik studio UI design

Case Study. Saily UI Design by Marina Yalanska

 

We also had an active month publishing new articles in Tubik Blog. In case you could miss something, let’s review the topics of the month:

  • Social Network Design. UX for Communication. The article gathering general points important to consider in the process of creating efficient UI/UX design for social networks of different kinds
  • UI Animation. Microinteraction for Macroresult. The article considering use and purpose of interface animation in UI/UX design in the aspect of efficient microinteractions. Supported with practical ideas and examples from Tubik Studio team.
  • FAQ Design Platform. Diversity of the Job. The fresh set of frequently asked questions about design in new FAQ Design Platform issue. This time it reviewed popular questions about different aspects of digital design as a job. Based on Tubik Studio answers at Quora.
  • Weather in UI Design. Come Rain or Shine. The article about some principles and practical ideas about UI design for weather applications and widgets. Supported with weather concepts by Tubik Studio designers.
  • Project Management. Design Process Backstage. The article considering the role of project management in successful design process. Here we gathered some important points and practical tips from Tubik Studio Project Manager.
  • Case Study: Saily App. Designing UI. The second case study about design for Saily App. This time it is devoted to description of user interface design for the application and packed with loads of images and animations to show more about the process.

Tubik design studio

 

As usual, we had a lot of everyday bright and memorable moments of team work, communication, creativity and rest, posted regularly for our over 15K followers in studio Instagram page.

tubik studio designer

 

Also, we shared our ideas and thoughts via Medium, WordPress and Quora and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

tubik studio on medium

So, leaving one more dynamic month behind, all the team is full of inspiration looking forward to new interesting and active work.


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

Tubik Studio UI design Saily app

Case Study: Saily App. Designing UI

In one of our previous case studies we have told you about a logo which Tubik Studio designed for Saily App. To continue this bright design story, today we are going to get you to some backstage of UI redesign for Saily App.

 

Tubik Studio UI designer

 

Task

Redesign of UI for the mobile application for local user-to-user ecommerce.

 

Tools

Sketch, Adobe After Effects, Adobe Illustrator

 

Process

 

User Interface

 

To remind for those who have missed our previous case study, Saily is a local community app allowing neighbors to buy and sell their used stuff. Although it is a sort of e-commerce app, it includes a strong feature of communication between users. One of the essential accents brought out by Saily App team puts a deep focus on design and culture at the core of everything they do. User interface redesign of the app, accomplished by Tubik Studio designer Tamara, according to the client’s vision of the product needed to have the fun and entertaining feel and look. Bearing it in mind and setting the task to make the product trendy, clear and easy-to-use, the designer created the new image for Saily App which presented new visual concept and featured new functional points the clients wanted to add to user experience.

Saily UI design tubikstudio

Tubik Studio designer Tamara working on Saily App screens

 

In the process of research and analysis of existing general concept of layout and transitions, the designer concentrated on UI solution which put bright accents at the most important features and provided fast and easy microinteractions. E-commerce is the process which a user needs to feel as clear and fast; in addition, the features should be informative and easily recognizable for rather diverse target audience.

 

So, UI design points that must be thought out were the following:

  • easily understandable layout and navigation
  • recognizable icons
  • graphic elements not creating unnecessary distraction from the main points
  • the process of inputting the data about the item as simple and user-friendly as possible
  • interface elements showing data about the item not looking overloaded but containing all the necessary information
  • efficient communication available from any point of the application
  • funny and entertaining graphic elements all harmoniously supporting the same style concept and preferably original to create additional recognizability for the app.

 

Screen Tubik Studio UI

 

The general stylistic concept, which was chosen to support the idea of funny and uptown interface which should at the same time be informative and useful, moved around light background and a lot of bright accents in navigation and notification elements of the interface. As it’s easy to see from the grand-list above, due to this decision the screens get a lot of air and light background promotes good readability which is essential in the case of e-commerce app. Moreover, light background gives efficient field of presentation for any kinds of items brought out to sales.

 

The search followed two directions: actually the search of the actual items and search along the requests that were made by other users. In requests users left the information about the wished item. Also the user could save the history of own requests. Requests made by users gave additional channel of easy matching sellers and buyers letting them know what is actually on-demand at the time. Moreover, requests could be filtered by location and make the process of matching the buyer and the desired item even more efficient. Search field was hidden in the process of reviewing the content not to distract the user and open more space.

 

One of the decisions made to add some interesting visual features was the colorful highlighting of the content photos to make them look interesting and attract user’s attention. Colors were used to visually support navigation via color coding creating conventions and increasing the level of usability. Categories in the navigation were represented with background photos and original icons.

 

saily categories ui tubik studio

 

All the icons for the app were unique and customized so that they could create harmony of visual perception with all the other graphic elements and at the same time add to general originality of visual design of the screens.

 

Tapbar included the basic navigation items enabling the user to activate feed, search, communication features and add a new item or request.

 

saily UI screens tubik studio

 

All the items, as you can see, were organized along the cards. The card of the item showed all the necessary information about the thing for sale and enabled the potential buyer to connect with the seller at once. To visually present the item, which users wanted to sell, they could upload and customize one to four photos which user could add from his/her own device gallery or take a photo right out of the app screen. Sharing function was transferred to the separate screen so that not to overload the card.

 

One more functional side of the application to mention is the features of chatting and planning. As the app is positioned as highly social, simple and usable chatting feature was seen among the essentials and organized along the standard and common scheme of native chats without too much experimenting so that even the users without frequent experience of communication via digital channels could feel comfortable with this chat.

 

Planning functionality was realized via “meetings” feature which enabled a user to fix the time and day of meeting with the seller/buyer in the app calendar and see this information at the card of the item. In the «meetings» mode the image of the item got smaller and moved to the field of the item description while the bigger image featured the image of the meeting place and data.

 

So, user’s feed could switch in three different modes and show the chats, meetings and requests. In the own card of item, the seller could also change different status of the item to inform the users who could potentially get interested in it. Also application enabled the user to add some items to favorites not to lose their trace in the great bulk of items.

 

saily ui design tubik studio

 

User’s profile showed basic information like name, location, followers/following and also activation of the chatting function as one of the basics. The preview of the item card included the photo, main description with the category color code, the price and ability to add it to favorites right from the preview.

 

All UI solutions obtained via numerous discussions and iterations turned around the high level of usability and efficiency which should be supported with all the visual elements available on the screen.

 

Illustrations

 

In the previous case study we have mentioned the Saily brand mascot which is a funny little ghost having its own legend. Logo created for the brand by Tubik Studio designer Arthur Avakyan was just the start of branding process which continued with the next step of branding in UI design.

Tubik Studio logo design Saily app

 

The mascot as well as the other funny and user-friendly characters were used in numerous funny illustrations which presenting a sort of entertaining element at the same time became the tool of informing the user about the issues or problems demanding attention.

 

Illustration Saily Tubik Studio design

Saily Illustration Tubik Studio

 

Also the team of UI designer Tamara, illustrator Arthur and motion designer Kirill created several animations which livened up the screens, supported general cool style and at the same time had the functions of informing the user about the state of processes such as pull-to-refresh animations or loaders.

 

Tubik Studio Saily Animation

Enable location animated screen

 

Animation Saily Tubik Studio 1

Enable notification animated screen

 

Animation Saily by Tubik Studio

Pull down to refresh animation

 

Saily Animation by Tubik Studio

Search Screen Animation

 

So, Saily App project became a great and bright challenge for designers to make a trendy, funny and attractive but highly efficient and informative application with user interface aimed at wide and diverse target audience and having strong element of socialization.


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

Welcome to see other works by Tamara on Dribbble 

Welcome to read a case study on Saily Logo Design

Welcome to learn more about Saily app

Tubik Studio Year Review

Tubik Studio 2015. Year in Review.

It’s hard to believe, but 2015 is almost over. For Tubik Studio this year was dynamic, bright and rich in meetings, shots, interesting projects and non-stop professional growth.

This year, being active on Dribbble, we have published around 140 shots. Here we offer you to look through the set of top positions in the categories of UI/UX design, illustration and animation. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Twenty UI/UX shots

 

Tubik studio traveller app UI

Traveller App by Ludmila Shevchenko

 

tubik studio social network ui

Social Network by Sergey Valiukh

 

Tubik Studio UI design

Analytics App by Ludmila Shevchenko

 

tubik studio UI app

Skydeck App by Konst

 

tubik studio design ui

Calendar App by Ludmila Shevchenko

 

tubik studio ui design

Book Review by Sergey Valiukh

 

tubik studio ui app design

Task Management App by Ludmila Shevchenko

 

tubik studio ui design ipad

Octopus Bar iPad App by Sergey Valiukh

 

tubik studio music_app

Music App by Ludmila Shevchenko

 

tubik studio app design

GIF for Sport App by Sergey Valiukh

 

tubik studio design ui ux

Sea Schedule by Valentyn Khenkin

 

tubik studio dribbble shot

Sea Schedule Mobile by Valentyn Khenkin

 

tubik studio app ui

Time Management App by Tamara

 

tubik studio graphic ui

Travel Notes App by Ludmila Shevchenko

 

tubik studio blog app

Blog App by Ludmila Shevchenko

 

good_sign_app_tubikstudio

Good Sign App Concept by Polina Makarevych

 

app design tubik studio

 ECHO App v2.1 by Sergey Valiukh

 

artgallery ui tubik studio

Art Gallery App by Ludmila Shevchenko

 

app interface tubik studio

Emotional App by Daria

 

dribbble shot tubik studio

Eventflow App by Dima Panchenko

 

Top Twenty Animated Shots

 

tubik studio motion design

GIF for the Timeline App by Sergey Valiukh

 

tubik studio button ui

GIF of the Tap Bar Concept by Sergey Valiukh

 

tubik studio tapbar ui

GIF of the Tapbar Interactions by Sergey Valiukh

 

ipad interaction tubik studio

GIF — Portrait vs Landscape by Sergey Valiukh

 

tubikstudio motion design

GIF of Dynamic Scroll by Sergey Valiukh

 

tubik studio_social_network

Gif For Social Network by Sergey Valiukh

 

app design tubik studio

 GIF for the ECHO App v2.1 by Sergey Valiukh

 

tubik studio pull down

GIF for Pull Down — Space Ship by Tamara 

 

hamburger button tubik studio

Hamburger button by Kirill

 

ui concept animation tubik studio

UI Navigation Concept by Ludmila Shevchenko

 

calendar-app animation tubik

Calendar App Animation by Kirill

 

 preloader animation tubik studio

Preloader by Kirill

 

ipad interactions animation

iPad App Interactions by Sergey Valiukh

 

ui concept animation design

UI Animation Concept by Alla Kudin

 

add button animation

GIF for the Add Button by Sergey Valiukh

 

landing page animation

Good.co Animation by Ludmila Shevchenko

 

sport_app_motion ui

Tubik Studio prototyping with Pixate

Benefits of prototyping for UX design with Pixate

The process of user experience design for any mobile application is a very responsible stage on the way to the final product, which will satisfy the user. In our previous articles we have already mentioned that UX process is the basis for successful UI as it develops the whole logic of the application, makes possible to think over the efficient transitions and layout as well as consider all the ways to make user experience as positive as possible.

 

The important way to check out and test all the solutions made on the stage of UX design is prototyping. Here in Tubik Studio we are keen to try different tools of prototyping to test the efficiency of UX. Earlier we promised to share our experience of work on prototypes and discuss the benefits of different tools in more detail. So, this post is going to be the first in the set and this time we would like to consider main benefits of prototyping and tell you about the tool for this aim called Pixate.

 

The essence and role of prototyping

 

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

 

The value of prototypes in the sphere of app and webdesign 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, prototype will be the great help.

 

tubik studio motion designer

Tubik Studio designer Kirill, always keen to try the best options for prototyping

 

Tubik Studio motion designer Kirill, having extensive experience of work with prototypes, defines them as the step of vital importance in the process of creating successful UX. 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”, he says that in practice this approach is not effective. 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 solution 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.

 

The first and most important role of prototype is to check and test the functionality rather than the beauty and appearance of the product. Practice shows that testing UX with prototype enables to make the stage of UI design less time and effort consuming. It’s easy to ground: if you test UX solutions with prototype, you are able to reveal and fix the basic bugs and problems before you start working on UI tasks. If you don’t, the risk to devote a lot of time to UI design which will be not so efficient and so will have to be changed is much higher. Redesign of the complete UI is more difficult and long process than testing the design at UX stage with a simple prototype.

 

tubik studio design testing

Prototyping lets the designer check UX solutions with the experience close to real use

 

The simplest prototypes have been the paper ones and even they are highly efficient in understanding the main concept of layout elements and transitions. Nowadays, the variety of different tools and services for digital prototypes is incredible and gives designers the opportunity to choose those, which are more appropriate for their work and task. They really improve matters in the process of design, especially in the sphere of app design as the modern tools of prototyping create the prototypes very close to native apps and therefore user experience can be tested deeper and closer to reality.

 

A bit of practice: Pixate

 

Pixate is one of the various modern tools creating prototypes for mobile applications.

 

prototyping pixate tubikstudio

 

It provides the wide range of functions to create efficient prototypes, which are animated and look very close to the native apps. Pixate was one of the pioneers adding native animation to make prototypes more efficient.

 

Pixate prototyping tubikstudio

 

Pixate has a clear and simple functional scheme and layout that doesn’t require a lot of time and effort from the designer to study how to create a prototype. This is a very important trait for such a tool as most designers highly appreciate any opportunity to save their time when possible and use the tools which are clear, intuitive, fast and highly efficient.

pixate prototype tubik

 

Pixate can also be described as a flexible tool whose features provide various opportunities to present the content in the created prototype. Moreover, Pixate allows separating layers and embedding interactions such as Tap, Double Tap, Drag, Scroll, Pinch and others. No need to say, how happy the designer can be to use all this things creating the prototype close to real product.

Pixate prototyping tubik

 

As the functional potential of the tool is very close to real app appearance in presentation of UX solutions, it makes the process of testing UX quick and easy. You can intitally customize the prototype to your target device.

Pixate prototype ui tubik

 

It is not a secret that in UX design process attention to details and thinking-out the ideas to make operation of the app easy and pleasant for the user are essential. Prototype made with Pixate on this stage gives the chance of testing all the elements of layout and the process of screen transitions. Sometimes the smallest details which are missed in the general scheme of app design cannot be revealed from the wireframes easily, but are easily seen in the process of testing the prototype. So, prototype provides the prompts to the designer and allows feeling the real experience of transitions, using buttons, understanding the propriety of all the elements placement in the layout and the role of every element in real experience.

Tubik Studio prototyping with Pixate

 

The benefits of prototyping

 

Summing up, by example of work with Pixate, we can conclude upon the basic benefits of prototypes.

 

Benefits for designers:

  • Clear and intuitive tool, not requiring much time and effort to study how to use
  • Flexible in the ways and methods of content presentation in the prototype
  • Contains customized animation and provides the prototypes which feel and look as native apps
  • Efficient in testing UX solutions and sharing it for testing with the customer or tester

 

Benefits for customers:

  • Simple and intuitive features of the tool make easy to understand how to use the prototype.
  • It doesn’t require any specific knowledge or skills to test the prototype
  • It doesn’t need special devices or technical characteristics of the devices on which the prototype can be used
  • It provides high level of feeling the real experience as the prototypes looks and feels very close to real app.

 

All the mentioned features are highly valuable especially for the customers who are non-designers and have never had experience of working with wireframes and understanding UX-schemes and flows.

 

In our next articles we will share the practical workshop on all the flow of prototype creation and also will tell you about other efficient tools helping designers to improve their work and make both customers and users happy.


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