Tag Archives: tubik studio

information architecture for designers

Information Architecture: Effective Techniques For Designers.

Content is a constituent that can make any digital product valuable. Informative copy and well-thought visual elements of UI design are able to create the foundation for the successful product. However, even good content may fail in case it is structured badly. One of our previous articles was devoted to the basic points of information architecture and today’s post continues the topic.

 

In a nutshell, information architecture (IA) is a science of structuring content of the websites, web and mobile applications, and social media software. IA study aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which are believed to be a foundation of the powerful design. There are many experts working on IA development now, so loads of various techniques appear. Our article presents four efficient IA methodologies commonly used in design.

 

tubikstudio teamwork

 

Content inventory

 

Before you start constructing a layout of the product, you need to understand what elements your project will consist of. One of the first stages of building information architecture is called content inventory. The technique considers creating a list of the components for the future design project. The inventory list usually includes various elements such as title, author/provider, meta elements (keywords, description, tags), copy, images, audio, video, and document files.

 

A content inventory list assists designers at the different stages of the workflow. First of all, the list helps identify the essential content components in so that designers could plan the product structure. Knowing all the constituents, designers can place them properly. Furthermore, it’s an easy way to discuss the structure peculiarities of the project with your clients. It is much faster and easier to edit the list rather than modify the design project when it’s been started. Finally, the list of components can help designers deeply comprehend the content that results in creating appropriate connections between elements so that the design of the product would look integral.

 

tubik studio wireframing UI UX

 

Wireframing

 

Information architecture is something like a blueprint of the layout which needs to be generated by a visual scheme. The majority of designers constantly use the well-known technique called wireframing helping to create a simplified and schematic visual representation of a layout for digital products. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

 

Wireframing is a fast and cheap technique to plan the information architecture of the page or screen. Designers use wireframes to outline visual and typographic hierarchy of user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general layout markedly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.

 

tubik studio design process ux

 

Wireframing gives numerous advantageous opportunities not only for designers but for the whole development team and clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get the full understanding of the project’s design. Furthermore, developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both design and development teams.

 

Organization structures and schemes

 

In our article “Information Architecture. Basics for Designers” we’ve defined four essential components of IA: organization systems, labeling systems, navigation systems, and search systems. The organization systems are the groups or the categories in which the information is divided. It helps users to predict where they can find certain information easily. To categorize the design components effectively, designers apply the technique of division into specific structures and schemes.

 

There are three main types of content structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned well-known technique of content organization called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

 

Big City Guide tubik

Big City Guide

 

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps where people have to go from one task to another to make the purchase.

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.

 

health care app interactions tubik studio

HealthCare App

 

Content can be divided according to the organization schemes which are meant to classify the design components into certain groups. Here are some of the popular schemes:

 

Alphabetical. Content is organized in alphabetical order. This scheme works best when users know exactly what they’re looking for and know how to describe or name the object of search, so it can serve as a navigation tool for the users.

 

Audience. The type of content organization for separate groups of users. As an example, there are many educational resources which divide the information according to the skill level of the learners.

 

Chronological. This type organizes content by date and time. It’s often used on the news websites, event apps, and blogs.

 

Topic. Content is organized according to the specific subject. For instance, online book shops divide the products according to genres.

 

bookshop website animation

Bookshop Website

 

Content organization models

 

Designers have been working on the development of the information architecture field for a long time and so far they have established some efficient models of the content structure. Knowing them, designers can choose appropriate information structure for a product. Let’s take a look at the most common models.

 

Single page model

 

When the digital product requires a minimum of the content, the single page model is a perfect choice. Websites for a single product and with focused purpose often apply this type of data structure. As an example, we can consider design for the website promoting the brand new application. Its purpose is to make users upload the app, so generally, it provides a limited amount of copy with the focus on the button “Available on App Store”.

 

Upper App Animation

Upper App

 

Flat model

 

This model works best for the small websites or landing pages. In the flat structure, all the pages are equal and they are put at the same level of navigation, so they are interchangeably accessible for the users. This type of information structure is good for the websites which have a limited amount of the content and it’s not going to grow anytime soon. It may be a good idea to apply the flat model to the design of a startup company.

 

landing page design tubik studio

 

Index model

 

The index structure is one of the most commonly used. All the pages are equally similar to the flat model but the navigation system differs. Index model allows users to access pages via the page list which is available on every page of the product. This way, index model may contain more content and remain usable and simple for users since they can skip useless pages.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Strict hierarchy model

 

The model received its name, not by chance. It’s called “strict” because it gives users only one way to access the subpages: from the main page. This structure is a good choice for the digital products that have a specific purpose. For example, e-commerce websites use the structure so that the users wouldn’t skip the important information about their new offers. Also, educational platforms may apply the model in order to make the educational process gradual.

 

Co-existing hierarchy model

 

This kind of information structure is probably the most difficult to apply. It combines the ideas of a few models. Similar to index model, it provides users with various ways to access the content still it aims at guiding people through the certain path so that they would take expected actions. That’s why to create such a structure, designers need to have a bit of experience in this area. However, it may be worth trying.

web design UI concept tubik studio

 

The Big Landscape

 

Daisy model

 

This type of content structure is common for educational websites and apps as well as the others which require users complete certain tasks. The daisy structure is built that way so users return to a homepage (sometimes other specific points) after they accomplish the tasks. For instance, many to-do apps automatically return the users to the main screen when they point the task as complete.

 

upper app UI design case study

Upper App

 

Information architecture is vital for the powerful design but it needs to be done right. The various IA techniques we’ve discussed above can be combined and applied depending on the product and the clients’ requirements. Moreover, they are constantly improved since the design field never stays still, so many new methodologies may appear soon. Our next article will continue the topic of IA so stay tuned!

 

Recommended reading

 

A Practical Guide to Information Architecture by Donna Spencer

 

The ultimate guide to information architecture

 

How to Make Sense of Any Mess: Information Architecture for Everybody

 

Information Architecture: For the Web and Beyond

 

Information Architecture Basics


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

design events benefits

5 Big Benefits of Attending Local Design Events

Being a designer is not only about pure creative process. Design is also about communication with colleagues, managers, clients and experts. This connection can be done not only in the flow of current projects but also at a variety of design events held all over the world. And, as the famous author and speechwriter James Humes stated, «The art of communication is the language of leadership» which works prominently in creative spheres of human activity. So, today let’s briefly review what are the key benefits which designers can get from attending specialized events like conferences, meetups, workshops and so on.

 

1. You absorb knowledge and inspiration from experienced designers

 

If you have had the chance to read about art education a couple of centuries ago, perhaps, you learned the stories how great masters started their path from apprenticeship for masters of that time. It was the way which in the case of appropriate diligence and patience could open the door to the world of genuine great art. Centuries have passed, generations have changed, but this way still hasn’t got lost in time: we learn the secrets of the job from those who have already got them through practice. That is one of the reasons to attend the design event, especially for those who only start their career in the field. Some of the speakers will give you useful tips on design tools while others will share their experience in methods of time management and collaboration. Some of them will tell you about new trends in design while others will show the flows of real projects. There is even a chance that there will be speakers who will show you the methods and ideas you’d never like to try — and even this result is positive at it saves your time and effort for testing all them by yourself. Don’t waste the opportunity to take what they are ready to share. Surely, to get the chances of positive experience higher, it’s advisable to check the program of conference or meetup beforehand.

 

You may like recognized designers more or less but remember: they ARE already well-known and successful. That means there always exists something you can learn from them. Analyze, get inspired, try to see the best features so that you could get the technique. It was effective hundred years ago in old-school art education and it still works now. 

 

2. You get live communication with experts

 

Reading the thoughts provided in the previous point, it’s easy to argue: why would you need to attend the real event if tons of them can be found via the Internet in videos, photo workshops, podcasts, articles, and books? The reason is simple: all those ways of getting professional knowledge and training are great and helpful, but none of them can fully replace the experience of live communication. The precious moments when you can ask the question right in the process of live talk flow are irreplaceable. Moreover, make no mistake: conferences and meetups are the places where everyone, including speakers and organizers, is ready and open to communicate with you while in ordinary days full of creative search, management and loads of current tasks they do not plan their time to answer the questions from other designers. Cool if they can do it but it happens not so often whereas for the professional events it is a natural state of things: everyone goes there to communicate.

 

One of the upcoming local events of that kind called Shuba Design Conference will be held in Dnipro, Ukraine in the late May. Its philosophy is all built around the idea of providing the space for effective and fruitful communication of creative people both in form of the speeches from the experts and live brainstorming with colleagues. This year the motto of the event is «Design beyond the borders» setting the new perspectives and new flows of creative energy in the sphere. Furthermore, the organizers bring out the opportunities for designers to participate in the contest of posters «BORDER STUDIES» and express their ideas in the artworks which will be accepted until 14 May. If you are interested to know more, check the details here. Let us know — we’ll be happy to get in touch!

 

design conference shuba ukraine

 

3. You can get the qualified feedback on your work

 

While most design meetups set the platform where experts share their knowledge and experience, some events also create the foundation for getting live feedback on design portfolios. One of the founders of this movement worldwide is Behance, the well-known design platform for portfolios in a variety of creative directions. Behance Portfolio Reviews held in different corners of the world let every designer get a professional and objective review from the local design community. This is one more upcoming design event we are looking forward to this May — Behance Portfolio Reviews Dnipro inviting young designers to present and discuss their portfolios.

 

behance portfolio reviews dnipro 

 

4. You set new business contacts in design sphere

 

One more big reason to attend design events is directly connected to business issues: this is usually the fruitful ground for making new contacts useful for your career. It works the same as at any other specialized event: you can get in touch with other designers for collaboration on complex projects as well as you can meet new potential clients or investors. Again, live communication and real impressions make a considerable impact on decisions which can change the prospects of individual designers or even design teams for better. 

 

5. You get refreshed from your routine and check the trends discussed at the moment

 

Last but not least is the reason of refreshment, actual for professionals from any creative sphere. Getting dip into specific tasks and working on several design projects simultaneously, artists really need that breath of fresh air which will reboot their creative energy and give new directions of vision. So, if you see the event with interesting speakers or themes actual for you, don’t hesitate to give yourself a moment of new experience: it will take you away from you current work for some time, but it will let you get back with new ideas and impressions absorbed from the design community.


Welcome to get more details on Shuba Design Conference (Dnipro, Ukraine, 27 May 2017)

Welcome to get more details on Behance Portfolio Reviews (Dnipro, Ukraine, 13 May 2017)

ux design for ecommerce tubik blog

UX Design for E-Commerce: Principles and Strategies.

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

 

What is E-Commerce?

 

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

 

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

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

The role of design for e-commerce

 

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

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

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

 

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

 

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

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogs etc.

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

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

— design that supports the offer not overshadowing it.

 

tubik studio landing page toys

Handmade Toys Landing Page

 

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

 

Business Perspective: Branding and Promotion

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

gym landing page concept by Tubik

Gym Landing Page

 

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

 

UX perspective

 

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

 

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

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

 

bookshop website animation

Bookshop Website

 

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

 

Intuitive navigation

 

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

— what company or brand they are dealing with

— what page they are at

— where the menu is

— how they can get back to home page or catalog

— where is the search and filters

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

— how they can see the detailed information about the item

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

— how they can pay for the item

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

— how they can contact the seller

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

 

Bakery website design case study tubik

Bakery Website

 

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

 

Sales funnel

 

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

 

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

 

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

 

home page landing tubikstudio

Comics Online Shop

 

Effective presentation of the items

 

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

 

jewellery ecommerce app UI

 

jewellery ecommerce app

Jewellery E-Commerce App

 

UI perspective

 

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

 

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

 

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

 

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

 

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

tubikstudio ui animation website design

Design Studio Website

 

Points to consider

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Landing Page Animation Tubik Studio

Organic Food Shop

 

Recommended reading

 

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

 

Two Types of User Motivation: Design to Satisfy.

 

The ultimate guide to designing ecommerce websites

 

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

 

Designing for 5 Types of E-Commerce Shoppers

 

20 Common UX Mistakes In Ecommerce Websites

 

Everything You Need to Know About Designing for eCommerce


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

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

UX design process tubik

7 Key Motives to Invest Time and Effort in UX for Digital Product

Even if you are far from the design field, you must have heard of user experience (UX), since it has been a buzzword for the past few years. In a nutshell, it is the general attitude and emotional feedback that user has after interacting with the product. UX is based on several key factors such as usability, utility, desirability, attractiveness, the speed of work etc. Nowadays, user experience is thought to be as important as the visual identity. However, some companies still doubt if the UX design is a must-have or it’s just a trend which is a waste of time and money. Today we offer you to find out if UX design really matters and how it can help your business succeed.

 

Why does UX design matter?

 

Nowadays many companies say about the importance of effective UX spending money and time on its development. But what makes them think so? It is already proved that the success of the business heavily depends on how much users enjoy the product. UX design aims at enhancing user satisfaction by making products more useful and easy to use.

 

Some people may think that UX is based on the visual elements of the design but it’s much more than that. UX design is a complex process which consists of many stages including user research, wireframing, prototyping, visual and graphic design, animation and testing. It requires time and knowledge to create effective UX, the reason why it may involve additional innvestments not always expected by companies. However, UX design is beneficial for both startups and already existing products since it assists in many aspects which form the successful product including user engagement, usability, utility, and conversion rates.

 

If you have a complex website such as retail, it is crucial to have the effective UX design. It helps to organize content on the pages in the best way for the users’ perception and make navigation clear. Without appropriate UX design, there is a risk of losing users because they may find your product too complicated and useless.

 

The statistics collected in recent years show that 95% of mobile apps are quit within a month. That’s why to keep new users utilizing your app or website, the product should have pleasant experience which will make them stick around. Despite the given stats, according to User Experience Survey Report, only half of the companies invest time and effort in UX for the digital products.

 

Conducting the research for this article, we’ve distinguished seven key aspects of the successful product which can be managed via effective UX design.

 

UI design product management

 

Effective usability

 

Today the word “simple” isn’t associated with something boring. It is now the crucial aspect of the successful product. Don Norman in his book “The Design of Everyday Things” says that two of the most important characteristics of good design are discoverability and understanding. Users expect products to be simple and clear in use so that they could feel confident of what are they doing and don’t take much effort. This aspect heavily depends on UX design of the product.

 

UX designer’s objective is to create consistent experience for the digital products to keep users mind at ease. An effective UX design guides visitors through the websites and apps showing them what you can offer. UX designers can conduct deep user research and analysis and do some testing on few representatives in order to eliminate unnecessary, difficult and inexplicit options and make the digital product useful. What’s more, UX experts can create effective onboarding of the product which introduces people to the features of the app making users feel welcomed and not afraid.

 

 Tubik-Studio ux design

 

Driven user engagement

 

User engagement is a measurement of meaningful actions taken by the users and it’s one of the core aspects of the profitable products. Every company aims at creating the product with the high level of user engagement but not many of them know that good UX is a solution to this issue. Well-thought UX always includes various techniques that make users take the expected actions.

 

One of the trending methods in UX is gamification which is the technique of exerting game elements into the non-game environment, such as websites and mobile applications. Gamification brings the element of fun to the websites and applications. Moreover, game mechanics are the powerful motivators for the users. As the example, you can set the tasks for the users and give the awards to those who accomplish them. Curiosity and excitement drive people to continue performing various tasks and spend more time on the app or the website. UX experts are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

Unique product

 

It’s hard to say how many apps exist and how many of them have failed at the very beginning of their journey. There are loads of similar and even identical products on the market so businesses are looking for the answers of how to make users choose their products. UX experts can predict users’ reaction to your product by analyzing target audience needs and requirements. If you bring people the product with pleasant experience which is enjoyable and satisfying users’ needs, you may be sure they will distinguish your app from the others and give the preferences to it.

 

Tubik Studio UI UX designer

 

Saving money

 

UX design isn’t a free or cheap service still, it’s much cheaper than fixing usability problems when the product is on the market. Based on user research, UX designers accurately choose the set of features and plan the user interaction processes to exclude possible usability problems. In addition, UX experts carry out testing on some representatives of the target audience to analyze their reaction and improve the issues. UX design on the stage of product creation costs significantly less than making changes in your product after it’s been built.

 

Customer loyalty

 

Nowadays customers are extremely demanding and the unpleasant experience can make them annoyed in a second and they won’t return to the product again. Unhappy users will never be loyal to your product, so you have to make sure the people enjoy your product. UX design is a right way to your clients’ hearts. If your product is associated with the enjoyable experience, users will doubtfully change it to something else. What’s more, happy customers are more likely to recommend your brand to the others.

 

UI research web and app design tubik

 

High conversion rates

 

According to Nielsen Norman Group, the conversion rate is the percentage of users who take the desired action. The archetypical example of conversion rate is the percentage of website visitors who buy something on the site. UX designers master many techniques of the target audience analysis that allows them to influence on improving conversion rates. Deep user research and analysis help them defining the problems of usability and reasons making customers leave the product. Knowing the pain points of the product, you can solve them to increase conversion rates.

 

Positive brand experience

 

Brand recognition depends on not only the visual image but also the provided experience. Many users remember your product and form their opinion about it during the first time they’ve used the product. The first experience is vital and if it’s bad, your brand risks losing the customers. Good UX design can guarantee your brand positive experience. Providing product which users enjoy to use, you improve your brand recognition, because users don’t forget the things they have enjoyed.

 

UI design product management

 

Powerful UX design is obviously beneficial for businesses. It can be hard to see all its value but the fact remains: UX is an essential part of the successful product. It’s a tool which helps solve the problems of such aspects as usability, utility and user engagement. And finally, compelling UX design can save money and efforts which otherwise you would have invested in fixing and improvement of the low-quality product. What’s more, on this way you risk losing users who will not give your product the second chance after facing first bad interaction. Considering all the points said above, we may state that the companies get much more from UX design than they spend on it.

 

Recommended reading

 

Here are some articles providing further interesting explorations of the topic:

 

UI/UX Glossary. Steps to Usability.

 

The Business of User Experience

 

User Experience is Brand Experience

 

Good UX Is Good Business: How To Reap Its Benefits

 

The business value of User Experience (UX) Design

 

Conversion Rates


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

color theory design tubik

Color Theory: Brief Guide For Designers.

Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color selection is more complicated than it seems and plays a significant role in design. In one of our previous articles devoted to color psychology, we’ve found out that colors have the great impact on our mood and behavior. That’s why the success of the product depends largely upon the colors chosen for the design. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the appropriately chosen colors can be useful on the way of improved conversion for your product as well as advance usability of the product.

 

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

 

Color Wheel

 

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

 

color-wheel-2

Source

 

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination.The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

 

Color models

 

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which color wheel is formed: additive and subtractive.

 

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

 

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

 

difference-between-RGB-and-CMYK

Source

 

Additive vs subtractive

 

You should remember the major difference between these two systems: additive is for computers and subtractive for digital screens. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

 

Color Harmony

 

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes that work effectively.

 

Monochromatic

 

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create the distasteful color scheme.

 

business cards design

Deetu Business Cards

 

Analogous

 

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

 

ui animation design tubik

Night in Berlin App

 

Complementary

 

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

 

buongiorno_roma_illustration_tubik

Rome Illustration

 

Split-Complementary

 

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

 

bebright_app_animation_tubik_studio

Be Bright App

 

Triadic

 

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

 

halloween stickers toonie alarm

Toonie Halloween Stickers

 

Tetradic/Double-Complementary

 

The tetradic color scheme is for the experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.The scheme is hard to harmonize but if you do everything right, the results may be stunning.

 

mobile app design tubik studio

MoneyWise App

 

Color theory is a complex science which requires more than one day to learn. However, it is vital to understand the basics so that you could create the effective design with the knowledge of what you’re doing.

 

Recommended reading

 

Here are some materials we could recommend for those who would like to get deeper into the topic:

 

Color in Design: Influence on Users’ Actions

 

Digital colour mixing explained

 

Color Systems — RGB & CMYK

 

Why Color Matters

 

Responding To Color


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

UI design Upper App

Time-Management Tips for Creative People

People often say that 24 hours are not enough to do everything they need. However, we can’t add a few more hours no matter how everyone wants. What we really can do is to use time properly. The process of organizing and planning your time is called time management. Today the appropriate use of time is more significant than ever before because we live in the world of strict deadlines and great demands. Time management helps us to be more productive and work smarter.

 

When you work in a creative industry, time management seems to be something far and impossible to do. Loads of work, lack of inspiration never allow you to feel free in controlling your time. Nevertheless, our bosses and clients expect us to be highly productive, so we cannot afford delays and mistakes and have to use our time in the most effective way. Today our article presents some practical tips on time management for creative workers.

 

faq set by Tubik Studio

 

Plan your day

 

Many of us coming at work may spend the whole morning surfing the social networks up till the lunchtime and then wonder where the morning hours have gone. The problem is that we rarely plan the day ahead so we don’t know which task, among hundreds needed to be done, to start with. The daily plan helps to organize the tasks and gives the review on how your day will come to pass. With the plan on hands, all you need to do for having a productive day is stick to the plan as close as you can.

 

It is useful to form your daily strategy in the evening before you sleep or in the morning before the workday begins. There are many ways to creating an effective daily plan. For example, you can write a to-do list in your datebook or take some notes on your smartphone. Moreover, today many apps make this process even easier. Here in Tubik, we know the value of time and how crucial the daily plan is for the efficient day. Recently, we launched our to-do list app Upper motivating users and boosting productivity. And it’s absolutely free for everyone.

 

upper app UI design case study

 

Prioritize the tasks

 

Creating your personal to-do list may become a problem when you have loads of tasks to accomplish. Of course, all the assignments given to us by our clients or bosses are urgent and all of them are usually marked as “to do as soon as possible” but we’re humans and it’s impossible for us to do lots of tasks at once. That’s why you need to think out the details and prioritize the important assignments. To set the priorities effectively, it can be good to answer to yourself objectively which project needs to be finished today and which can wait a bit more.

 

However, if you have a creative job, it’s not always possible to stick to your plan and accomplish the tasks in the right order. The artistic job heavily depends on inspiration and its absence can stop the whole process. In this case, creative people are recommended to have a fallback meaning the next project in the priorities. Switching to another kind of work can have the positive effect to your mind and creativity.

 

Eliminate distractions

 

If you’re a designer, a writer or an illustrator, your job includes using the Internet, full-time or partly. Of course, the net is the major source of useful information, but on the other hand, it is also the spring of distractions such as social networks and entertaining websites. Interfering the creative process, you can’t concentrate completely on the task meaning you are not able to do the job properly. Certainly, it is hard to eliminate all the web distractions since we need to check our emails or contact the clients, still, we don’t need to be online for 24 hours. In most cases, you can choose the certain time for this part of daily routine like 10 a.m and 6 p.m. and that is enough to keep up with the things going on and stay in touch with the customers.

 

copywriting for digital products

 

Track the time

 

It is said that happiness takes no account of time. Nevertheless, any project has its deadline and we have to fit it, so the count of time does matter here. To be more productive, it’s advisable to establish your own mini-deadlines for the tasks. For example, the task number one should be ready at 11.20 a.m, the next should be done at 13.00 p.m. Try to estimate the time needed for the specific assignment more objectively, do not overestimate yourself. Having a detailed schedule, you organize your time in the most efficient way and prevent your work from dragging on. Also, this helps your mind stay focused on what should be done right here and now.

 

Stop procrastinating

 

The majority of us constantly postpone our duties for a particular reason. However, sometimes it may turn into the chronic procrastinating when we do anything but work. This can’t bring any good to either you or your clients, so something has to be done about it. Here are several pieces of advice on how to reduce the procrastination in the workflow.

 

Don’t push yourself. Negative emotions never help. While you’re biting yourself for the moments of procrastination, you are not able to start work. So, the first step to take is to calm down and understand that everyone is keen to procrastinate. There’s nothing wrong with you.

 

Find out the reason. Every time we postpone tasks there is a reason standing behind it. So, when you feel like procrastinating you need to ask yourself why you are doing it. Is the task too boring, or complicated, or unclear for you? Finding a reason, you’ll be able to find the solution.

 

Split big projects into small steps. Consistently, when we have a big project ahead, it may seem a heavy burden which cannot be accomplished anytime soon. That’s why, it is always a good idea to split the project into small, clear, and simple tasks. You can also talk this through with the client and set the mini-deadlines which will definitely improve your workflow.

 

Stay focused. Multi-tasking has become a part of the routine for many of us a long time ago, but only a few people learned how to deal with it effectively. We often switch from one task to another, and as a result, nothing is done properly. Try to stay focused on one task at the time, so you could perform it as good as you can. Shifting to the other activity is effective only in case you are totally stuck and have no idea where to move next.

 

tubik studio design business

 

Be good, not perfect

 

Someone may say that perfectionism never hurts but it’s not completely true. When you constantly work under deadlines, the desire to make everything perfect may play a joke with you. Trying to avoid the smallest mistakes at the certain stage of your work, you lose the time reserved for the next steps. And when the deadline comes, you realize that you have 80% of a perfect design, while the client expected the fully accomplished work. To avoid such a situation, try not to get obsessed with the smallest details that are not vital for the task. Remember that you can always polish everything later if you need.

 

Don’t forget to enjoy your life

 

Creative job demands the creative energy, but the endless projects, meetings, brainstorming, and other work routines can make us tired no matter how much we love our job. It’s necessary to include time for relaxing into your schedule. An evening with your friends or in the gym can charge you with the positive energy and inspire you to do something new and wonderful. So, don’t forget to find the opportunity of having a good time.

 

tubik studio sketch photo

 

Using at least some of these tips, you can improve not only your workflow but everyday lifestyle too. Value your time and the others will do the same.
 

Recommended reading

 

Why Being A Perfectionist May Not Be So Perfect

 

19 Productivity and Time Management Apps for 2016

 

Deep Work: Rules for Focused Success in a Distracted World by Cal Newport

 

First Things First by Stephen R. Covey, A. Roger Merrill, and Rebecca R. Merrill

 

30 Time Management Tips For Work-Life Balance


Welcome to read Seven simple tips for beginners in digital design

color psychology in design

Color in Design: Influence on Users’ Actions.

Every single day we’re surrounded by various colors from everywhere. If you take a closer look at the things around, they may surprise you with a number of colors and shades. People may not notice how colorful everyday things are but the colors have the significant impact on our behavior and emotions. Today our article is devoted to the science studying this issue called color psychology. Let’s define the meaning of the colors and review some tips on choosing suitable colors for the design.

 

tubik studio design

 

What is color psychology?

 

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts on colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

 

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance usability of the product.

 

Meaning of colors

 

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

 

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid the negative reactions.

 

toonie alarm mascot design tubik studio

Toonie Alarm app tutorial

 

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

 

logo design tubik studio

fOxygenic Logo

 

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel the inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

 

stardust_bikers_webpage_ui_tubik_studio

StarDust website

 

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits to the products connected with nature.

 

Big_city_guide_Stockholm_tubik

Big City Guide: Stockholm

 

Blue

It often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

 

design_for_business_tubik_studio_book

Design for Business E-book

 

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

 

night_in_berlin_event_list_ui_tubik

Night in Berlin App

 

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates the sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

 

tubik studio app design

Dating App

 

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show the experience and reassurance.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-Commerce App

 

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

 

Bakery website animation

Vinny’s Bakery

 

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause the feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

 

tubikstudio ui animation website design

Bjorn website

 

Color meanings in branding

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 

realli_logo_animation_tubik

Realli logo animation

 

Color Preferences

 

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during the life whatever the object is, let’s say, food, clothes, music, colors and plenty of other aspects. It is caused by both mental and physical changes that happen to us across the lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

 

Also, designers need to consider that there are many cultural differences and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

 

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted a deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

 

Blue is the top color. Both men and women of all ages think of blue as the favored color.The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

 

Brown and orange are in dislike. The first one considered less favorable among men, the second — among women.

 

Cool colors are preferred. Men and women favor blue, green and their tints in general.

 

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

 

Men prefer achromatic colors. White, black and gray are neutral colors and men are keen to choose them.

 

Favorite colors

 

favorite color on gender

 

Least favorite colors

 

least-fav-colors-gender

 

Source of charts

 

It’s vital to consider color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

 

Points to consider

 

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

 

  • Choose the colors wisely. They have a deep influence on the users.
  • Make sure your design and its colors convey the right message and tune.
  • Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
  • Some colors may look different on the screens of different devices. Additional testing never hurts.
  • It may be a good idea to test the UI colors with representatives of the target audience.
  • Try to make the color combinations wisely, in the best way for the users’ perception.

 

Recommended reading

 

Here are some books and articles we could recommend for those who would like to get deeper into the topic:
 

Responding To Color

 

Birren, Faber., Color Psychology and Color Therapy.

 

Color Theory for Designers, Part 1: The Meaning of Color

 

Color Associations

 

Why Color Matters

 

The Psychology of Color in Marketing and Branding

 


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

UI research web and app design tubik

User Research. Empathy Is the Best UX Policy.

Starting any project, which is not their personal presentation but a product for users, designers should be deeply aware: they work primarily not for self-expression, not for showing their creativity to the world, not for creating something revolutionary new that will make the world go round in opposite direction. They work to solve users’ problems, satisfy their wishes and achieve business goals.

 

That is why it’s vital to establish who the potential users of the future product are and which their wishes and needs could be met. This is the time when the designer turns into the researcher to get as much information as possible and analyze it for the sake of user-friendly solutions in design and interactions. In our earlier articles, we have already mentioned the significant role of user research in creating problem-solving user-friendly designs, and today we suggest getting deeper into its definition, methods, techniques and benefits in the process of creating a digital product.

 

web design tubik studio

 

What is user research?

 

Generally, the word «research», being quite universal for the diverse spheres of professional activities, roots into the Old French word recercher meaning «seek out, search closely»; first, it was the verb and later transformed into the noun of the same semantics. The modern definition of the noun according to Cambridge Dictionary state the meaning as «a detailed study of a subject, especially in order to discover (new) information or reach a (new) understanding». This sort of activity is widely applied in a variety of sciences and practical fields, including informational architecture and user experience design.

 

Basically, user research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the design team to work on the optimal solutions which will make the product user-friendly and attractive.

 

Therefore, user research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions, and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. On this basis, visual design presumes to create the original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

 

User research is actually the way by which designer is able to step into the shoes of the user and go along his or her path feeling all the stones on the way. This is the way to create designs based on empathy — the ability to place yourself onto the place of the other person, to feel what they are feeling and see what they are seeing. This precious ability enables designers to create things which not only work well and look good but also do what the particular users need them to do.

 

web development

 

Why is user research needed?

 

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.» Time has changed the means, goals and technologies, still, the vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly and original.

 

As we mentioned before, designers who start creating a product just at once when they get the task are quite risky guys. There are plenty of things to do before the designing process itself. Ignoring those things can give the interesting but not viable result. It’s important to analyze the competition, to understand the target market, to find out the sources of traffic and potential expectations of the users before setting off. Otherwise, you can waste much more time on loads of inefficient variants.

 

Toonie Alarm UI design

 

When is user research applied?

 

Describing the typical stages of product creation process here in Tubik, we have mentioned the set of the following stages: setting the task and initial scope of works; estimation; user/market research; UX wireframing; prototyping; UI design; animation; software architecture planning; development; testing; release; updates. Still, it doesn’t mean that all these stages go one-by-one in this order — some of them are interconnected and some of them are spread around the whole creative process. User research is applied at several different levels of creation, somehow changing the perspective and the goals on the data which should be obtained and analyzed.

 

We would mark out three typical stages when user research is a must-do essential for creating the efficient design.

 

Pre-design research: this is actually the initial stage of the creative process when designer working over the project is exploring the requirements of the stakeholders and collects the maximum information about the target audience.  As well as in a scientific project, the scientist collects and analyzes the heritage of the previous specialists involved in the sphere to make the product actual, the UX designer needs to do the same to offer the solutions correspondent to what users need and want.  This is the time to talk, read and analyze a lot. This is when the designer needs to dive into psychology and behavior, together with the stakeholder set the goals of the product and investigate the factors which influence choices in this domain. Certainly, with every next project and each next dose of experience, the designer can get accustomed to user research techniques and needs less time for them. However, there never comes the day when the designer doesn’t need any time for research as long as every project has its unique requirements and its own USP which should be enlightened by design.

 

In-process research: it is applied at different stages of the actual design process when, having the chances to interact with users, discuss their wishes, watch their behavior and analyze the problems they have, designers explore the offered solutions in action and on that basis can alter some positions of their research and add more efficiency to the user interfaces.

 

Real product research: this is the another level of research applied to actually existing digital product users operate with. Applying various techniques of user testing, designers collect actual experience, analyze it and make improvements in terms of real cases of the product usage in different environments and conditions.

 

UI design Upper App

 

What are the dimensions of user research?

 

Certainly, there are numerous approaches to the process of research. Among them, we would like to draw your attention to the dimensions outlined by Nielsen Norman Group, highly experienced in the domain of research and analysis and regularly sharing their findings in this sphere. They offer to view the methods of user research along a 3-dimensional framework with the following axes:

  • Attitudinal vs. Behavioral
  • Qualitative vs. Quantitative
  • Context of Use

ux-landscape-questions

 

As we can see from the scheme, attitude is what people say while behavior is what people do. In real life, they are often different things and aspects, due to numerous reasons like individual traits of character, temper, education level, age, gender, beliefs and so on. Another opposition presents qualitative analysis, which is usually measured by definite numbers (like «how many clicks the user makes before accomplishing the payment») and qualitative analysis («why user can leave the page without registration and how this problem could be fixed»). And the context of use analyzes all the additional factors which can influence the outcome of interaction with the product, for example, is the user goes along the preliminary given script or interaction is full improvisation.

 

Analyzing the data in terms of different dimensions, designers are able to take the comprehensive outcome enabling to make solid decisions about the interactions and visual performance.

 

What are the methods of user research?

 

Today, user experience design has already grown into a sphere with the considerable background of project and research cases, which have resulted in the extensive set of different research methods. Some methods are used on a regular basis, some are more rare and specific, yet it’s good for designers to be aware of a variety of them. Let’s briefly review the popular ones.

 

Interviews. Perhaps the most widely spread method when, having set the target audience of the product, people involved into the creative process interact directly with potential users and ask them questions to collect information. The quality of questions is the issue of high importance here. It’s effective to apply both close (yes/no) and open (giving the detailed answer) questions to let users provide diverse information.

 

Personas. The technique which has been applied in marketing and sales for a long time with client/buyer personas and now has transformed into a new perspective of user personas. With this technique, designer collects the data about the potential target audience, its psychological and behavioral preferences and habits and creates a bunch of imaginary users with these characteristic. On the ground of this data, the designer models users’ interactions with the product and possible issues that can arise in the process.

 

Sorting cards. This technique is effectively applied in cases when designers deal with the products presenting complex interfaces and variety of diverse content. The users are asked to categorize the content and set the hierarchies. In this way, the designers obtain the data showing how users see this sort of content and what way of its organization would be efficient for quick and easy navigation around the app or website.

 

Surveys. Another traditional method of scientific and social explorations when users are offered the set of questions. Answering them, users give the actual information enabling designers to understand their preferences and wishes deeper.

 

Focus group. Popular method presenting the moderated discussion of the product, its features, benefits and drawbacks within the group of people potentially close to the target audience. Altering some characteristics of the group, for example, age, gender, education level, tech literacy, researchers can receive the variety of data and see how these features can influence user behavior.

 

Task analysis. The method exploring the tasks and goals which users have interacting with the product. Understanding what users want to do enables designer to consider the fast and effective ways to achieve these goals.

 

Eyetracking. Special devices enable the designer to review which zones of the website or app users interact with more actively and use these zones in the most efficient and informative way.

 

Participatory design. Users are offered the set of elements for the layout and can suggest their own vision of the construction.

 

Clickstream testing. The analysis of the most clickable parts of the layout with the aim of designing clear interactions and reveal the problems.

 

A/B Testing. The users deal with one variant of design (version A) for some time and then another variant (version B) while the researcher collects the information along the necessary metrics and makes the conclusion about the efficiency of the versions.

 

Daily Reports. The user is asked to interact with a product for a particular period providing the reports on a daily basis. This helps to check the usability of the product in the perspective of long-term use.

 

Desirability testing. The users are usually offered visually and stylistically different versions and provide the feedback which version they would prefer and why.

 

design navigation UI UX tubik studio

 

What are the important points to consider in user research?

 

Collecting the data about user behavior and preferences via diverse methods and techniques, the designer has to take into account the following factors:

 

— the environment of use (the factors of using the product indoors or outdoors, the level of light, noise, available time and tons of other things can have an impact on design solutions)

— factors of intrinsic motivation (the internal personal stimuli moving the person to act)

— factors of extrinsic motivation (the outer factors of getting a reward or avoiding punishment that encourage people’s behavior)

— longevity of the product (based on the period for which the product is planned for use: if it grows together with the user or is applicable only in a particular age).

 

It’s should be remembered that removing the mistakes in design, even if its already high-fidelity level, is faster, cheaper and less painful for users than fixing negative issues with already launched and operating product.

 

The bottom line is simple. Don’t be lazy to research vital points of the project before you start designing. Don’t fancy doing the research? No problem, go to duck and dive in loads of baseless concepts instead of going along the solid path of understanding the user’s needs and wishes. Just don’t forget: it’s not you who decides that the product is successful, it’s not even other designers or stakeholders. It’s users. So, empathy is the best policy.

 

Recommended reading

 

Here are some articles we recommend for those who would like to get deeper into the topic:

 

Complete Beginner’s Guide to UX Research

 

When to Use Which User-Experience Research Methods

 

User Research Basics

 

Pareto Principle-Based User Research

 

How To Conduct User Experience Research Like A Professional

 

Open-Ended vs. Closed-Ended Questions in User Research

 


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

Bakery website design case study tubik

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet. 

 

In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:

 

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

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

 

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

 

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website. 

 

tubik studio landing page design

 

Task

 

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

 

Process

 

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

 

  • operational simplicity
  • strong branding
  • security of users’ data
  • effective use of visual elements
  • clear data presentation via menus, catalogs etc.
  • user’s ability to leave feedback about goods and services
  • easily available general and contact information about the business providing goods or services
  • design that supports the offer not overshadowing it.

 

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.

 

tubik_studio_website_ui_bakery

 

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Bakery website catalog design ui

 

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

 

bakery website product page ui

 

Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting. 

 

Bakery website animation

 

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

 

Another aspect to mention generally about this web design concept is typography which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.

 

designers tubik teamwork

 

No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!


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