Tag Archives: design tips

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

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»

information architecture for designers tubik

Information Architecture. Basics for Designers.

The World Wide Web contains a tremendous amount of information which is hard to imagine unstructured because a human brain wouldn’t be able to perceive any single thing. People got used to seeing content and functionality of the digital products as many of them are now: structured and easy to use. However, it doesn’t occur unintentionally. Designers and developers take a responsibility of constructing content and navigation system in the appropriate way for users perception. The science that assists experts in the content structuring is called information architecture. Today’s article is devoted to the essence of information architecture and presents the basic points every designer should know.

 

What’s information architecture?

 

Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the IAI experts, information architecture is the practice of deciding how to arrange the parts of something to be understandable.

 

Information architecture 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. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become the fundamental study in many spheres including design and software development.

 

UX design process tubik

 

The role of information architecture in design

 

Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.

 

Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of the high-quality product since it reduces the possibility of the usability and navigation problems. This way, well-thought information architecture can save both time and money of the company which otherwise they would have spent on fixing and improvement.

 

IA and UX design

 

After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same. IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.

 

UX design means much more than content structuring. In the first place, UX designers aim at making pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.

 

Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has the powerful user experience.

 

tubik studio design process ux

 

IA system components

 

If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems and searching systems.

 

Organization systems

 

These are the groups or the categories in which the information is divided. Such system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned a well-known technique of content organization which is 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.

 

web ui design city guide

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.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

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.

 

mobile app design tubik studio

MoneyWise App

 

In addition, content can be grouped according to the organization schemes. They are meant to categorize content the product. Here are some of the popular schemes:

 

Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for the users.

 

Chronological schemes. This type organizes content by date.

 

Topic schemes. Content is organized according to the specific subject.

 

Audience schemes. The type of content organization for separate groups of users.

 

book swap app tubik studio

Book Swap App

 

Labeling systems

 

This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create the labels which represent loads of data in few words. For example, when the designers give contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.

 

gym landing page concept by Tubik

 

Gym Landing Page

 

Navigation systems

 

In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content. It’s a complex system which employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.

 

Searching systems

 

This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.

 

tubikstudio-ui-ux-design

 

To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of the IA science.

 

The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!

 

Recommended reading

 

IA for the Web and Beyond

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

Information Architecture Basics

The Difference Between Information Architecture and UX Design


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

home budget app case study

Case Study: Home Budget App. UI for Finance.

Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves. 

 

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

 

Task

 

UI/UX design for the web and mobile versions of a personal budget manager

 

Process

 

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily. 

 

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers. 

 

Dashboard

 

The web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

 

Dashboard_home_budget UI

 

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in. 

 

The cards present such information blocks of data:

— the menu with quick access to popular categories of expenses

— information on total expenses and frequency of transactions

— the list of popular transactions

— the cloud of expenses and weekly average rate in comparison to the previous period

— the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis

— the map with the pins marking the most frequent locations of spending money

— the block of recommendations based on financial operations of the period.

 

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance navigation and make interactions intuitive. 

 

Home_budget_app_dashboard_animation_tubik

 

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

 

Mobile UI

 

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

 

home budget app mobile screen

 

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

 

home budget app mobile notifications

 

To get the access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders. 

 

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

 

Home Budget app interactions motion tubik

 

The mobile interface was also supported with animations. The one above shows the interaction with the hamburger menu divided into three sections.

 

home budget app interaction animation tubik

 

Another piece of animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

 

home budget app case study

 

This project has started the deeper immersion into the world of digital products for finance management for Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.


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

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

tubikstudio homepage design

Best Practices for Website Header Design

Everyone knows: there is not the second chance to make the first impression. In the sphere of digital products, this eternal truth works in terms of high competition and incredible diversity. No doubt, some zones of the webpage or mobile screen are particularly important and effective in this aspect. Today we are going to discuss one of them in deeper focus: the header of the website.

 

In the issue of UI/UX glossary devoted to the web design terms, we have already provided the brief overview of what is a header. Today let’s look a bit closer at the topic and discuss what are the functions of a header and recommendations for its design. In addition, we will show a bunch of web design concepts applying different approaches to header design.

 

What is a header?

 

In web page layout, header is the upper (top) part of the web page. It is definitely a strategic part of the page as the area which people see before scrolling the page in the first seconds of introduction to the website. Being somehow a sign of invitation, header should provide the core information about the digital product so that users could scan it in split seconds. In design perspective, header is also the area making the broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in the website layout.

 

tubikstudio ui webdesign

 

The presented concept shows the home page for the online bookshop selling comics. The top horizontal area aka header presents the logo lettering showing the name of the website and the core navigation around: links to the catalog of items, fresh and special offers, blog, action figures, an icon of the shopping cart typical e-commerce websites and the icon of search.

 

What can a header include?

 

Headers can include a variety of meaningful layout elements, for example:

  • basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.
  • copy block setting the theme of the product or service presented
  • links to basic categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • switcher of the languages in case of multi-lingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. On the basis of design tasks, designers, sometimes together with marketing specialists, decide on the strategically important options and pick them up from the list or add the others.

 

Let’s have a look at a couple of examples to see which of the mentioned elements designers placed in the header for particular websites.

 

tubikstudio ui animation website design

 

This is the website of an interior design studio. The upper part of the page presents the sticky header which stays in the zone of visual perception all the time in the process of scrolling. It is divided into two blocks: the left part features brand logo while the right part presents the interactive area with links to several information blocks like «Product», «Studio» and «Press» and call-to-action button «Shop» marked out with a shape. The central part of the header uses negative space for visual separation of these two blocks.

 

tubikstudio homepage design

 

Here is another sample of the webpage with a bit different approach to the header design. This time the composition is built around the center featuring the logo and brand name. Left and right side are balanced around it with two links each allowing users to scan quickly and move to the information blocks they are interested in.

 

Why is header important?

 

There are several issues why the header is a vital element of many websites.

 

The first thing to consider is eye-scanning models which show how users interact with a webpage in the first seconds. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions.

 

In brief, when people visit the website, especially the first time, they do not explore everything on the page carefully and in detail: they scan it to find a hook which would catch their attention and convince them to spend some time on the website. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern. Let’s check what are the schemes provided for them in the research.

reading pattern

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As it can be seen from the scheme we found in Steven Bradley’s research, it marks out four active zones — and two of them go across the typical header area.

 

reading pattern zig-zag

Another scheme features Z-pattern and the presented zig-zag version is typical for pages with visually divided content blocks. Again, the reader’s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.

 

f_reading_pattern_eyetracking

 

One more model is F-pattern presented in the explorations by Nielsen Norman Group and showing that users often demonstrate the following flow of interaction:
 

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

 

All the mentioned models show that whichever of them a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

 

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind: «People judge the quality of a website in just a few seconds and a second impression is something absent on the Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure».

 

Another thing to consider is that the header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service.

 

Design practices

 

Readability and visual hierarchy

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays a vital role. The user has to be able to scan and perceive this basic information as fast as possible without any sort of additional effort. Otherwise, you risk providing the non-user-friendly interface.

 

online magazine design tubik studio

 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

web design UI concept tubik studio

 

Here is another website whose layout is built on the broken grid, so the header corresponds to this approach. The left part of the header is visually longer and consists of four elements: the logo and the links to three data blocks, while the right part is shorter and includes only two layout elements: search and call-to-action button market out with the shape and colored for the high level of contrast.

 

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the core elements of the layout active and available during all the process of interaction.

 

Hamburger menu

 

Another design solution which is quite popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of horizontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

 

This button is usually placed in the header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as save the place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

 

tubik studio ice ui website

The presented web design concept shows the version of hamburger menu. As the menu of the website contains many positions, the designer uses this technique placing the hamburger button in the area of initial interaction — top left corner. It allows creating the header supporting general minimalistic style of the website. The horizontal area of the header is divided into two zones: the left zone presents branding and a short introduction of the website colored in red and keeping visual consistency with visual performance of the headline and call-to-action element of the page; the right zone features icons of social networks and search icon. The central part of the header is left empty which adds some air and balance to its design and works as a negative space separating two different functional blocks.

 

tubik studio web UI design

 

This design concept presents the website with an original structure of the page, leaving the wide light margin in the left part of the page, with the brand name and logo in the top left part which is the first point of scanning. The other part presents interactive zone and has its own header composition: hamburger button to the left and four core links of transition to the right. As this example of interaction shows, hamburger menu allows the designer to organize numerous theme blocks of information and provide effective visual hierarchy. 

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based on the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

Fixed (Sticky) header

 

Sticky headers present another trend able to boost usability is applied effectively. Actually, it enables to provide users with navigation area available at any point of interactions, which can be helpful in terms of content-heavy pages with long scrolling.

 

Tubik studio UI design

 

The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalism principles featuring brand name lettering as a center of the composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

website design for photographers

 

Here is one more design concept featuring creative approach to the header design. The initial view of the home page includes the extremely minimalistic header: it shows only social icons and the search. However, scrolling down users get the sticky header with quite a traditional set of navigation items: the first element to see on the top left part is hamburger button hiding the extended menu, then branding sign followed by the links to thematic information blocks. The composition is finished with the search placed in the top-right part of the page in all the process of interaction with the page and supporting the feeling of consistency.

 

Double menu

 

Double menu in the header can present two layers of navigation. We have shown the example of such trick in one of the recent case studies for a bakery website.

 

Bakery website design case study tubik

 

As you can see, the website also uses a sticky header which consists of two levels of navigation. The upper menu shows the links to social networks, the logo, search, shopping cart and hamburger button hiding the extended menu. The second line of navigation gives instant connection to the core interaction areas:  products catalog, locations for the point-of-sales, news and special offers, information about the service and contact section. Visual and typographic hierarchy makes all the elements clear and easily scanned providing solid ground for positive user experience.

 

The bottom line is simple here: header of any website is the strategically vital zone of interaction for any website. Each particular case requires its own approach which will be informative and usable for the specific target audience. User research can provide the good basis for the design solutions which can follow quite traditional forms of header organization or require totally new perspective.

 

Recommended reading

 

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

 

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

 

F-Shaped Pattern For Reading Web Content

 

Sticky Header Usability: Making Menus Part of a Great User Experience

 

30 Interesting Examples Of Headers In Web Design

 

Headerlove: curated collection of headers design


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

Welcome to read the UI/UX Glossary: Web Design

Night in Berlin app design case study

Case Study: Night in Berlin. UI for Event App.

Have you ever felt the urge to leave the planned and predictable routine and do something impulsive? Maybe go to the random concert of an unknown band, or visit the exhibition you are walking by? Certainly, you know that feeling. Nowadays, people move in the circle of the everyday drills and the desire to drop everything naturally appears from time to time. But when the moment comes, we often don’t know the places to go or where to find interesting events. Here is how we have come up with the idea for a new mobile app concept called Night in Berlin.

 

Night in Berlin is one of the design projects accomplished in terms of Tubik UI Fridays. In one of previous case studies, we told about our new tradition presenting the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls. Today’s case study describes the creative process of the unusual mobile application design.

 

Task

 

UI\UX and motion design for a mobile event app.

 

UI Design

 

During UI Fridays the designers sometimes receive objectives far from ordinary. In this way, the team has an opportunity to create something absolutely unique. This time, the task given to the designers was to design a mobile application of the future. To specify the task, the art director gave them the background story. The designers had to imagine themselves in Berlin of 2019 where every night is extremely eventful. Their objective was to create the design concept for the mobile application that would come in handy to people who love hanging out at night. When the task was set, Tubik designers Ludmila Shevchenko, Eugene Cameel and Olga Popova started their work with art direction by Sergey Valiukh.

 

After active brainstorming, the designers’ team determined the concept of the app. It should be a simple application which enables people, who love socializing and visiting the latest events, to see the list of all the events, parties, exhibitions and the like taking place in Berlin. In order to add the effect of bright impulsive decisions, the list is shown at a particular time and only for the current day. The core thing the designers were supposed to keep in mind that the application is meant for the users of the future, so the design needs to be absolutely original and extraordinary. Let’s see what the team managed to create.

 

night_in_berlin_onboarding_tubik_ui

 

The first screen featured the onboarding with the countdown to the time when the list becomes available. The chosen gradient colors accurately convey the atmosphere of the night since they are associated with lights in night clubs. The illustration of the Fernsehturm, the famous television tower in central Berlin, is made in the corresponding colors, so the design of the screen looks solid. The app’s name is situated at the left bottom part of the screen. All the functionality is hidden behind the hamburger menu button placed in the top left corner allowing to make the focus on the countdown.

 

night_in_berlin_event_list_tubik

 

The screen above presents the list itself, informing the user about the variety of events. The data is organized along the cards for every event, which users can review scrolling vertically. Each card shows the key details about the event: its type, title and the time when it starts as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the offer.

 

Night in Berlin Event Details

 

When the users tap on the event card, they see the event screen. This concept features the exhibition in the art gallery, which is marked in the top right corner. The name of the artist and the exhibition are situated in the center of the page. The background image presents an actual artwork by the artists so the users are able to quickly catch the style and artistic manner, read the description and see the time when the event starts. All that combination provides the information to the user quickly, in clear and stylish manner.

 

night_in_berlin_app_event_screen_tubik

 

Motion Design

 

When the static variants of the screens were ready, motion designer Kirill Erokhin started working on the animations.

 

night_in_berlin_animation_tubik

 

Here is the animated version of the onboarding screen. The major element is the countdown numbers which are smoothly animated. The background is moving similar to haze changing the colors.

 

ui animation design tubik

 

This animation presents the screen with the list of events showing the user interactions. The data is organized along the cards for every event, which users can review scrolling vertically. The user can tap on the card and see more details about the event. The arrow button on the top of the screen brings the user back to the list.

 

Work over the design concepts of this kinds gives designers the prominent chances to think out of the box. It stimulates their creativity which beams brighter when given regular practice. Follow our blog and check out our Dribbble page not to miss the updates on the Tubik UI Fridays. More concepts and case studies are coming very soon. Meanwhile, you can be interested in reviewing another case study for the creative design concept called Big City Guide. Stay tuned!


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

design for business

Business-Oriented Design. Know Your Target.

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

 

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

 

design process

 

Marketing

 

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

 

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

 

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

 

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

 

web design tubik

Web design for e-commerce: Vinny’s Bakery

 

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

 

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

 

business cards design

Corporate branding: design of business cards

 

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

 

Target audience

 

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

 

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

 

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

 

wedding planner app UI design

App design for wedding planner

 

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

— what their interests and wishes are

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

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

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

— where they could get the information about the product

— what could stimulate them to try the product

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

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

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

 

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

 

toonie alarm UI design

Funny and bright design for Toonie Alarm

 

upper app UI design case study

Minimalistic and elegant design for Upper App

 

Targeting

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

ui animation design tubik

Night in Berlin App

 

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

 

Recommended reading

 

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

 

Personas Make Users Memorable for Product Team Members

5 ways design and marketing can work together better

One Persona to Rule Them All

Designing for your target audience

Matching site design to your target demographic

Short but Vital. Key Abbreviations in Design for Business.

The Importance of Design in All Marketing Campaigns


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

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

user motivation design

Two Types of User Motivation: Design to Satisfy.

No doubt, every designer — as well as any creative person — wishes to make something desired by lots of users, preferably on a regular basis. There is a group of creators who claim that they are interested in the process or the fact of creation and don’t care about the further life of the product, still, it’s incredibly tiny if compared to the number of people who want to see the results of their creative work usable, useful and regularly used. One of the key factors to achieve this goal is knowing the final users and ways to motivate them. So, today let’s take another little journey to the psychology of users, this time concentrating on types of motivation and their influence on design solutions.

 

What is motivation?

 

Basically, motivation is the term coming from psychology and dealing with behavior. This concept describes something that makes people do particular actions giving specific reasons for these actions or needs. Motivation is the force that gives people motives, defined in Merriam-Webster dictionary as «something (as a need or desire) that causes a person to act». According to professor of psychology J. Nevid, «The term motivation refers to factors that activate, direct, and sustain goal-directed behavior… Motives are the «whys» of behavior — the needs or wants that drive behavior and explain what we do. We don’t actually observe a motive; rather, we infer that one exists based on the behavior we observe.» (Nevid J., Psychology: Concepts and applications. 2013)

 

Motivation appears on the crossroads of biological, cognitive, social and emotional factors, that all together influence its strength and behavior it stimulates. Three basic features which could describe the motivation of any kind are the following:

  • Activation — the decision to activate the particular type of behavior, often stimulated by formulating a particular goal or achievement
  • Persistence — the power of effort which is taken in short-term or long-term perspective to achieve a particular goal
  • Intensity — the level of concentration and desire applied by a person to achieve the goal

 

Why is it important for designers to understand the types and mechanisms of motivation? Because it shows the direct way how to make the product correspondent to users’ expectations and solving users’ pains. The product, which is designed, can be extremely helpful, but to learn that, the user should be motivated to try. And design, being the part of the product, which is both functionally and emotionally appealing, is the first and powerful way to give a user the reason to try the app or website.

 

UI design product management

 

Two basic types of motivation

 

There are two major directions of how motivation evolves and they deeply influence the decision-making process. In short, they are based on what is the source when «Why would I do that?» appears and encourages us to act: some of these reasons come from the outer world while the others are found inside ourselves. On that ground, psychologists define extrinsic and intrinsic motivation.

 

Extrinsic motivation

 

This term unites the group of factors that come from outer sources. These motives can come from family, professional environment, competitions, contests etc. The motives of this sort encourage the person to deal with the outer world of other people as there is no other way to achieve the particular goals. It means that they involve the diversity of social reasons as well as stereotypes. Cultural background, age and gender, level of education, country of residence, religion and family status — these and many other factors can form and correct the reasons coming from outside and motivating people to communicate and behave this or that way. In the vast majority of cases, extrinsic motivation is a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). The situation of competition itself presents the strong extrinsic motive: some of us are more motivated with not the prize we get but purely with the understanding that we won the others. Moreover, this factor can become even stronger in the case when there is direct support from others like friends or followers.

 

These factors should be the object of thorough research for UX designers as they actually present the doors opening the digital products to the world. The motivation via rewards has been widely used in all the kinds of games — without it for many users, a game usually doesn’t make sense — it should present the real goal which is achievable and stimulates persistence in the process of getting it. The wide invasion of the internet technologies and social networking added the element of constant competition with others strengthening the power of outer sources of motivation.

 

However, this mechanism of attracting and retaining users is applied in the variety of digital products now, including those which are far from games in their traditional understanding. When you are marked as the most loyal customer or are promised to be given a discount in case of the particular purchase; when you get the certificate via the online educational platform of which you can boast to you friends via social networks; when you are marked as the top writer or top contributor on the blog platform, and so on so forth — all that stuff presents the signs of extrinsic motivation. And that’s not bad: that’s just the way to make specific activities reasoned, which is crucial for most users. The trick is to find which reason works for this particular audience.

 

snake battle app UI design

Snake Battle App based on the extrinsic motives of winning the battle and getting rewards

 

Intrinsic Motivation

 

This is another side of the coin: that set of motives and stimuli comes out from the inner world of the person. These are the motives which are formed by the wishes and needs the person has due to its intelligence, soul, and heart. These are the motives which can be much harder to find and understand, but much longer to work successfully.

 

Intrinsic motivation is the inner engine moving a person to self-improvement whatever it could mean. In fact, people are born with this need and wish, which gets the higher level of development when the person satisfies basic needs like food and shelter and goes to the next stages in the hierarchy of needs. It’s natural for us to wish trying new things, to accept new challenges, to try our own abilities and gifts, to feel satisfaction from getting new knowledge and mastering new skills. This type of motivation is often stronger than the previous as it comes from what nature the person has and what personal likes or dislikes move decision-making process. In everyday terms, we often call this type of motivation «interest» or «desire» which becomes a significant factor for retaining users. And it’s a well-known factor that the simple explanation: «I do it just because it’s interesting» is one of the strongest motives which can only exist. It moves the user to act because of the subject of the activity itself rather than reward or recognition.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia based on intrinsic motive of getting new knowledge

 

wedding planner app UI design

Wedding Planner based on the intrinsic motive to optimize personal effort in organization of the event 

 

toonie alarm UI design

Toonie Alarm combining intrinsic motive (getting up on time) and extrinsic motive (getting stickers as rewards)

 

Getting the knowledge about target audience at the stage of user research, designers can analyze which types of motives and which their combinations will work for the specific users.

 

Intrinsic_extinsic_motivation_by_IDF

 

The visual presentation of two major motivation types by experts from Interaction Design Foundation 

 

Building motivation with design

 

Knowledge on the mechanisms of motivation can become the great help for UI/UX designers and information architects. The advantage of providing appropriate motives for the target audience can be applied at the levels of:

— thinking over the clear application or website structure and organization of triggers and informational blocks supported with rigorous user research

— building navigation and call-to-action elements according to things which engage users motivating them to act

— creating appropriate layout demonstrating key benefits or rewards

— providing supportive onboarding process motivating to try the product and test its functions

— presenting visual design solutions appealing to the target audience and adding the motive of aesthetic satisfaction

— including the copy which stimulates users, describes the key benefits of the product, the achievements users can get and support available in the process of interaction

— adding the features of setting short-term and long-term goals

— enabling users to share their achievements via various social networks — approval and praise of virtual communities is the powerful extrinsic motive nowadays.

 

user motivation design

Upper App using the mechanism of intrinsic motivation to boost users’ productivity

 

The bottom line is simple here: if you want users to like and use your product, give them a reason to love it. They will start their journey with «Why?» and will repeat that question regularly at different levels of interaction — so get prepared to show them the answer.


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

big city guide web ui design

Case Study: Big City Guide. Landing Page Design.

People say the world is a book and those who do not travel read only one page. It’s hard to argue since traveling is always a chance to learn new things, meet new people and do something absolutely extraordinary. What’s more, a nice trip can become a source of life energy and inspiration. Today, travelers have more opportunities than ever before and the World Wide Web plays the significant role here. The Internet provides loads of information about various countries and their cultures helping travelers decide where to wend their way.

 

Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.

 

tubik ui designer

 

Task

 

UI/UX design for onboarding landing page presenting a website about big cities all over the world.

 

Process

 

The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays. Those following Tubik team on Dribbble already know about our new tradition which is the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls.

 

During one of these creative sessions, the task was given to design the landing page for the online resource providing the information about big cities around the world. Typically for the design of landing pages, the designer decided to apply expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create the efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.

 

The first page of the BCG concept presents Berlin. The city is filled with various sights so it was the difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.

 

Berlin big city guide ui

 

big city guide berlin tubik

 

Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.

 

The second featured city is Madrid. It is often thought that Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.

 

Madrid big city guide ui

 

Yet the priority has been given to the bridge in contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows the deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line gives the mood of the energetic and bright city. Here is the final result.

 

Big City Guide Madrid tubik

 

Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.

 

The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.

 

Stockholm big city guide ui

 

However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.

 

web ui design city guide

 

This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.

 

The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.

 

The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.

 

The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.

 

Big City Guide animation tubik

 

The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via navigation button and with the help of progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.

 

As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities which are particularly popular with readers of the website.

 

Tubik UI Fridays go on for more concepts and case studies we will share with you soon. So, follow our blog and Dribbble not to miss the updates.


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