Tag Archives: motion design

cinema_app_ui_design_tubik

Mobile UI Design: 15 Basic Types of Screens.

Smartphones have invaded almost every activity of our lives. Different applications assist us and make the life easier. A designer’s job is to create the user interface meeting users’ needs and making the experience pleasant and satisfying. To build effective UI, designers need to dive deep into the peculiarities of mobile applications, learn their constituents and functionality. Nowadays it’s difficult to distinguish a standard set of necessary screens for any application because mobile industry is evolving fast and so do the apps. Our article presents the most common and popular types of mobile screens and shows the design features they require.

 

tubikstudio ui app design

 

Common screens

 

Splash screen

 

The first impression is one of the key points influencing user’s opinion about a mobile application. When the user experience is pleasant from the very beginning of interactions with an app, there are more chances it’ll be more popular among users. That’s why splash screen needs to be paid as much attention as any other mobile app screen.

 

Splash screens are the first image users see launching a mobile application. They are usually minimalistic and present a name, logo, or slogan of a product. To make sure splash screen will look good on different devices, designers often focus the elements in the middle of the screen. Splash screens are recommended to be shown no longer than 4-8 seconds otherwise users may get annoyed. Also, it may be good to show loading progress so that impatient users could know when the app will be launched.

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

Onboarding tutorial screens

 

Onboarding tutorial is a set of screens presenting a mobile app, its navigation system, features and benefits which the application could bring to the possible users. They appear to users who launch the app for the first time helping them get oriented within unfamiliar features and controls understand if the application can be useful for them.

 

The structure and content of an app tutorial are highly individual for every particular project. However, there are some common tendencies in onboarding design. First of all, many tutorials use custom illustrations presenting a specific feature or benefit in an attractive and easily decodable way. Also, designers often apply a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds. A powerful copy is significant for onboarding as well. It should be short, helpful and readable.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia — section tutorial

 

Home and menu screens

 

Home screen is an essential part of any application. In a context of mobile apps, it’s the main screen from which users interact with most options of the application. Home screens are designed depending on the type of a product and its purpose still there are some key elements common for different kinds. First of all, the main screen usually includes the search field or button so that users could easily search for the content they need. Also, since home screen is a start point for user journey, it often contains navigation elements providing access to the various content sections.

 

homey_app_ui_design_tubik

Homey App

 

To make user interactions easier, a mobile application outfits a menu containing the list of possible directions the user can move to within one click. There are two variants of presenting the menu in mobile applications: it can be a part of a home screen or a separate screen. It is recommended to keep the number of options in the menu under seven showing only important sections. If the app requires more, it can be a good idea to create subcategories.

 

tubik studio animated interface

Slide Menu Concept

 

Log-in and profile screens

 

Today many applications offer users creating their personal accounts, so every designer needs to know how to work with log-in and profile screens. Log in screens should be minimalistic and clear so that users could easily access the application. There are usually two fields where users can enter their name and password along with the confirmation button. For people using the app for the first time, there always must be the sign-up option.

 

Profiles make interaction within the mobile application more personalized and allow operating with the data effectively. Also, a personal account is a key part of any social network app which involves the user into the virtual community of the network and enables to share the personal info with the others. The main task for designers is to maximize the convenience via the smart UX. According to Interaction Design Foundation, the first point designer should consider is that profile page should be clear in use. The amount of the information has to be limited otherwise the profile screen may look too complex. What’s more, it’s vital to make sure the navigation system is intuitive. This way users won’t have to take much effort to puzzle out the app. Finally, the profile screen design should be oriented to the target audience of the app. User research is a must if you want your app to meet users needs.

 

Tubik Studio Social Networks

Dating App

 

Stats screen

 

Various applications contain stats on the user activities. The more data it provides, the harder it is to create a mobile design of a stats screen. Designers need to make sure it is possible to see all the key information still the screen has to be clear and usable. Graph curves, scales and original icons can make the stats screen look smooth and clean on a mobile app. Moreover, stats screens require distinct typography so that users could easily read the data.

 

car app interface

NGIN App

 

Calendar

 

Event apps, to-do list apps, and many others provide users with the personal calendar. Depending on the type of the application, calendar accomplishes certain functions such as remindings or schedule. The visual style should fit the mood and objectives of the mobile app.

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

E-commerce screens

 

Catalog screen

 

The main objective of any e-commerce project is to sell the products. Visual presentation has a great impact on users’ decisions. A catalog is a list of goods the company offers for sale. A designer’s job is to create the catalog that will attract users attention and encourage them to buy a product. The product list in mobile apps can be similar to many e-commerce websites where the items are placed in catenas and can be viewed via vertical scroll. The number of products in one row is settled according to the width of the screen.

 

Another approach to product organization in a mobile catalog is a row with horizontal scroll. To make the navigation intuitive the last item in a horizontal row should be shown not in a full view to let the user see that this is the direction of scrolling. In addition, the photos or illustrations of products should be only high-quality so that users could clearly see what they are going to buy. The catalog screen should include a call-to-action button via which the user can add the item to the cart. This way users will be able to pick up product right from the catalog screen without the necessity to go to the page of this particular position.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Product card screen

 

This screen is for people who like to know what exactly they buy. Product card demonstrates the key information about the goods helping users decide whether they need the product or not. Designers focus on the photo of the product putting it in the center of the screen. The description data is usually placed below. Designers can divide the data into the groups such as size, material or others so that users could easily find the info they need.

 

jewellery ecommerce app

Jewellery E-Commerce App

 

Check out screen

 

Today a lot of purchases are done via smartphones so the companies try to make the mobile shopping process as convenient as it has never been before. The checkout process is a final step users take before they buy the product. Designers’ task is to make people comfortable while people take this step. First and one of the essential parts of the checkout screen is a form where buyer fills in a specific personal data such as a name and number of the credit card. The type of required information depends on the resource where a user makes a purchase. In addition, it’s important for people to know their personal data is secure, so designers have to reassure users via visual elements that their information is safe. It can be callouts in a copy as well as some icons of the famous brands who gave their approval or maybe even some certificate signs if there are such.

 

cinema app interaction UI

Cinema App

 

Social screens

 

Feed

 

People often use various social network apps for communication and to be able to follow the news and updates around them. Feed is a constantly changing list of news and other data the users choose to follow. The practice shows that mobile users prefer scanning quickly through the feed, the reason why they need a simple clear design which won’t be overloaded with visual details. The news can be presented one by one via scroll. To make the navigation more intuitive the next piece of news should be partially shown.

 

tubikstudio motion design

Timeline App

 

Contacts

 

The contact list has been evolving for a long time. From paper notes to the different digital variants it’s been changing visually still delivering only one purpose: saving key data about friends and other close people. Mobile contact screen presents users a list of contact data sorted by the name in alphabetical order. Each contact should be clickable and lead to detailed data which includes the phone number, email, and sometimes contacts on Skype, Messenger, etc. Also, contact info is given with a small photo that makes the searching process easier.

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

Music screens

 

Playlist

 

Music lovers like creating their own playlist for every occasion. Obviously, every music app is obligated to provide their users with such a feature. Playlist screen looks similar on different apps: it’s a list of tracks showing the name of the song, singer or band, and the length of the soundtrack. Also, designers can add a small image of the album this track belongs to. In case a song has no image there still should be an icon, for example, with a music note.

 

tubik studio music_app

Music App

 

Player

 

People can control what they listen and how they listen to it via the player. The feature allows switching, stopping and starting a track with standard buttons which are easily recognized. This set is usually placed centrally on the bottom of the screen. The major part of the screen is typically taken by the image attached. Also, sometimes instead of a picture, many designers apply music visualizer as the central part of the screen. Visualizer is a good opportunity to reveal the imagination and creativity which is always inspiring for designers.

 

Player Transfer Animation for Echo case study

ECHO app

 

Nowadays, loads of mobile applications appear, so they bring new types of screen for fresh requirements users bring out. Designers should be ready to take this challenge and always follow innovations. Get inspired!

 

Recommended reading

 

A Roadmap To Building A Delightful Onboarding Experience For Mobile App Users

 

Mobile Onboarding: A Beginner’s Guide

 

Tell Me About Me – User Profiles for Mobile Applications

 

How To Design A Better Mobile Checkout Process

 

UI/UX Design Glossary. Navigation Elements.


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

opera video graphic design case study tubik

Design for Web: Promotional Video. Benefits and Pitfalls.

A video is an effective marketing tool which never gets old. People got used to watching video adverts on TV since the beginning of the past century. Now is an era of the Internet and a big part of the marketing and advertising is concentrated on the web. Internet users are in love with videos and joyfully spend hours watching them. Marketing community couldn’t ignore such an opportunity and many companies already use a promotional video as a creative and effective way of product marketing. In this article, we’ll dive deeper into details of custom promotional videos covering their essence and profitability.

 

What’s a promotional video?

 

Don’t want to sound obvious still there is no better explanation than to define a promo video as the one created to promote a company or its product. This type of videos is made that way so it could encourage people to buy a certain product or use the services of a company. They are usually small catchy videos showing all facets of a promoted object in the best way to prove people it’s worth of their time and money. Since promotional videos are popular and widely-used, everyone tries to find ways to make their videos original and creative. That’s why designers offer businesses promo videos created in different styles which stand out among thousands of the others because they are unique and catchy.

 

Animation case study by Tubik Studio

 

Types of promo video

 

Promo videos can serve many business purposes so there are different types each created to achieve certain objectives. For example, one of the most commonly used types of promotional videos is an introduction video. Their aim is to tell people about a business, its offers and reasons why someone should care about it. An intro promo video works best for startups willing to present themselves and interest their potential clients. This type of video needs to be informative still short and entertaining so that it could catch viewer’s attention.

 

Next type having popularity among companies is a product presentation video. Many businesses are looking for creative ways to tell about their products and a custom promo video is a trending tool now. The video can shortly present product features and tell about its value for users. Another type combines features of the two previous. These are landing page videos which aim at driving users to take expected actions such as purchasing or signing up. They usually are meant to present some unique offers which people can get by taking certain action like leaving contacts or else.

 

To gain people’s trust, companies often share the testimonials from the satisfied clients on their websites. Video testimonials are an effective way to show that a company is trustworthy and can bring values. One more approach to product promoting is short entertaining videos. This type usually doesn’t seem like promo videos because it isn’t centered on a product or a company. The videos are meant to catch people on the emotional level by showing funny, heart-moving, or thoughtful video pieces having a short plot and a promoted product can appear as a secondary element. Quite often, if done and introduced originally, the videos of this sort get viral and present additional support to the brand.

 

All the types of promo videos can serve as efficient marketing tools. However, a company needs to choose the type accurately according to business tasks which the video is meant to accomplish.

 

Product presentation video for Toonie Alarm

 

Is a custom promo video profitable for businesses?

 

Custom promotional video creation requires time, money, and effort to spend, so obviously many companies are concerned with the question “What benefits will we receive from it?”. Here is the answer.

 

People perceive video faster than copy. Psychological research shows that human brain processes video material much faster than text. It means that people need take more effort to read a copy about company’s offers rather than watch a video. That’s why, by placing a presentation promo video on a website, a company increases chances that more people will know about their product. Also, a quality video can accurately transfer the message which a company wants to tell to its possible customers.

 

Video increases conversion rates. Since people perceive video better than text, they are more likely to be influenced by it. It easier to gain users’ trust when they are able to see how the product works in a real time. If people trust a company and are interested in their offers, they more willingly take an action such as signing up or trying a demo. What’s more, a powerful promo video is an effective way to retain users longer rather than a great amount of copy.

 

Good search engine results. A major part of the Internet content consists of text data. Video content has less competition so the users searching keywords are more likely to find a video on the first page. To achieve even better results, a promo video needs to have well-thought SEO with the appropriate keywords in the headline, tags, description, etc.

 

Better social sharing. People are crazy about nice videos and the thing they like even more is sharing these videos with their friends. Videos are mobile and easy to share, the reason why it can be easily spread across social networks. Businesses should keep in mind that buyers are the best marketers they have, so it’s vital to encourage users to share the links.

 

Video receives real-time feedback. Internet users like commenting videos and discussing it with the others. It allows a company to see what people say about them and their product. Analyzing the feedbacks, a company can make significant improvements.

 

Better branding recognition. If a company creates an interesting and original video, people are more likely to remember them. The thing is that video has the influence on the visual memory as well as the echoic one so the chances that users will recognize a brand increase twice compared to elements that are perceived only visually.

 

Creative video helps to stand out from the competition. Video marketing isn’t a new approach, even more, it’s been a top tool for decades. However, technology is evolving and so do approaches to video creation. Original and quality video can help a company stand out against competitors.

 

Promo video for PassFold project designed and animated by Tubik team

 

Promo video pitfalls to consider

 

Certainly, there is no ideal approach to product marketing: considering video as a promo tool, you need to keep in mind possible pitfalls it may bring. First of all, the creation of a powerful promotional video requires spending money and time. To make an effective video, professionals need to handle many processes: from scripting and video recording to video and sound editing. Original video will need unique graphic material and high-quality animation, so if a company wants a quality video, it must be ready to invest in it.

 

In case a company decided to make a promo video, they need to make sure it’s done right. Bad quality video can affect brand reputation almost as hard as a bad quality product. Also, promotional videos have to be useful and interesting otherwise the users may consider it as disrespect to their time which is also not the best thing for company or brand image.

 

One more thing you need to think about once you’ve applied a promo video is that not all people would like to spend their time watching it. It means that there must be another way for buyers how to learn about a product. It can be a short piece of copy which users could quickly scan and decide whether they’re interested or not.

 

And, finally, we shouldn’t forget about the technical side. High-quality videos can overload server of the website so it works slowly. When you include a video as a content element, it should be thoroughly tested on different devices and conditions. It helps to make sure there will be no technical problems that may make users frustrated.

 

Case Study: Opera custom promo video

 

In the end of 2016, Opera, a web browser developed by Opera Software, presented their promo video devoted to their achievements over the past year. It was a short animated video called «Opera 2016: Year in Review» with illustrations showing their acquirements. To make this project done, Opera Software collaborated with Tubik design team.

 

The main idea of this project was to create a positive and cheerful video presenting the fresh innovative features the company added in the web browser during the past year. It was agreed that the video must consist of illustrations accomplished in the 3D flat style and lush colors. Each illustration would present lifestyle object composition devoted to a specific month when a feature was delivered. The accent was made on the typography since Opera wanted to emphasize useful opportunities their users have now. That’s why designers come up with the decision that animation of the elements should be minimalistic so that it couldn’t distract users. Here is the result.

 

 

Welcome to read a detailed case study on Opera video creation.

 

All in all, videos have taken a big part in our life, the reason why we should take all the benefits from it. Stay tuned!

 

Recommended reading

 

Beginner’s Guide to Online Video Marketing: Making a Video (Part 1)

 

How Ecommerce Businesses Can Generate Organic Traffic with Video Marketing

 

The Top 16 Video Marketing Statistics for 2016

 

27 Video Stats For 2017


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»

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

badges_illustration_tubik_design

Gamification in UX. Increasing User Engagement.

The user-centered approach, which strives for creating products highly responding to the user’s needs, has become the major philosophy behind many projects. Following this method designers constantly search for the new techniques improving user experience which depends on various aspects including emotions. The thing is that users expect a product to be simple and enjoyable in use, so the idea to add a “fun” element to the UX came as it is. But how to make the product fun and enjoyable in use? The technique called gamification was created to solve the problem. Let’s find out what’s the method of gamification in design and how it can improve UX.

 

What is gamification?

 

When we say word “gamification” in the context of design, it can be easily mistaken with the game design. Still, these terms hardly relate to each other, even more, they are opposite in many aspects. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. For example, if you want to encourage the users to interact more with your application, you can add the game element such as a challenge. They can be challenged to check-in every day during a week and be rewarded if they do so.The thing is that people like having a clear goal and even more to be rewarded after it’s achieved, so such a challenge would doubtfully pass unnoticed among the users. This way, designers 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.

 

toonie alarm stickers ios tubik

Toonie Alarm

 

Types of game mechanics for UX improvement

 

Gamification is a complicated design technique which requires using various game mechanics referring to the interactive UI elements. The main task for designers applying gamification is not to turn the product fully into a game. For this reason, there have been distinguished the effective game mechanics that are commonly used in design. Let’s see what they are.

 

Challenge

 

Human nature always makes us take the challenges and prove that we are able to handle them. So, a challenge is thought to be one of the most compelling game elements motivating people to take an action which can be a great tool on the way for UX improvement. In order to enhance the challenge effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

upper app UI design case study

Upper Streak Challenge in Upper App

 

Points

 

To measure the players’ success, many games use the points system. The gamified product can apply the same scheme that helps both users and stakeholders: the first sees their achievements and the others can estimate user engagement of the website or application. It is not necessary to make the count of points in the rating form. It may be just the number of check-ins or video views.

 

Badges and stickers

 

When users complete the challenge or gather a certain number of points, they can be awarded the badges or stickers. This kind of virtual rewards is often used in video games, so people are familiar with them. Stickers have gained people’s love long ago, therefore this kind of rewards will be appreciated. Besides, the badges and stickers give much room for the creative experimentations since they can be designed in various ways. Such rewards can become the additional drivers of motivation.

 

badges_illustration_tubik_design

PukaPal Badges

 

ui animation design tubik

Toonie Alarm Stickers

 

Leaderboards

 

The thing making the challenge even more interesting for people is the competition. Not many things can motivate users better than the desire to be the leader. The list of the “players” ranked in the order “Who’s got more badges” can increase users’ enthusiasm. However, in some cases, it may work contrarily demotivating people due to high ranks of the others. That’s why this game element is recommended to be applied carefully.

 

snake battle app UI design

Snake Battle

 

Journey

 

This game mechanic aims to make the process of interaction with the product as easy and understandable as possible. The user should feel as the real player starting the personal journey of the product usage. For example, on the onboarding page from which the user starts, they can be offered an introduction to the features, so that users won’t be afraid to make a mistake. When the journey continues, it is recommended to use the method of “scaffolding”. It means to disclose features progressively as the users become more experienced in using the product. Such an approach allows people to avoid errors and makes the product pleasing to use. Also, the journey element may be supplemented with the progress feature. Providing the information about the progress of the user’s journey, we can inspire them to continue.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Constraints

 

Many of us may think that it is not funny at all, still, there is a game element constraining players’ time. For example, the task in the games are often needed to be complete in the limited time, otherwise, players lose. The same approach can be applied to the gamified product. Users may be offered to do something which is available only today. The constraints make people react faster and somehow motivate them to take an action right here and now.

 

night in berlin tubik design case study

Night in Berlin App

 

These are some common examples of game elements in design but there is a room for the innovative game mechanics that can be applied in UX design. The major point to consider is that the product shouldn’t become too playful if it’s not expected according to general stylistic strategy and brand image.

 

The role of gamification in UX design

 

Today the method of gamification is widely used in design since it is thought to help to solve many problems in UX. The appropriate use of gamification and well-chosen game mechanics can become a valuable tool for UX designers on the way to increasing user engagement of the product as well as conversion rates. So how does it work? First of all, the gamification brings the element of fun to the websites and applications. People enjoy the interactive process full of fun, challenges, and competitive spirit similar to video games, so they are encouraged to go back. Furthermore, the game mechanics are the powerful motivators for the users. The game elements set the tasks and the awards are promised to those who accomplish them. The curiosity and excitement drive people to continue performing various the tasks and spend more time on the app or the website.

 

In addition, today gamification already goes as one of the major design approaches. Plenty of designers have caught the hype and actively apply this method in various projects. That’s why many users might already have an experience of interacting with the gamified products which mean they expect the same from yours.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Summing it up, gamification is quite a new technique which is now on the path of active proving its reliability as an effective design method. Nevertheless, its popularity is growing really fast so it has good chances to become the leading approach in a short time.

 

Recommended reading

 

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

 

Gamification And UX: Where Users Win Or Lose

Gamification: Designing for Motivation

5 examples of great gamification

Introducing Game Mechanics for Gamification


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

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»

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

graphic design tutorial tubik studio

Onboarding Tutorial Design: Greet, Inform, Engage.

The well-known quote by Chinese philosopher Lao Tzu says: «A journey of a thousand miles begins with a single step». When applied to numerous digital products, this simple yet powerful truth works the same way: the story of dealing with the app or a website starts from the first impression through the decision on trying to the actual interaction. All this process usually takes a little time but it’s often crucial to set the bonds between the user and the product. So, today let’s look a bit closer at onboarding process, starting from the popular technique of introducing the app to the user — onboarding tutorial.

 

ui animation design tubik

Social Network Tutorial

 

What is onboarding?

 

First of all, let’s look through the basic terminology. The concept of onboarding basically comes from the sphere of employment and HR: it is used to mark the number of steps and techniques aimed at helping newcomers to adapt to the new conditions and get comfortable to bring out good results. It’s not a secret that for many people trying something new is a sort of stress which demands some effort and consideration, so a little help could make the decision-making process easier and more harmonic. Special tactics enable to correct possible inconveniences and make people more confident at the new place, which means they become productive and socialized with their colleagues faster, bringing benefits to the company.

 

The advent of digital products as an integral part of everyday life absorbed this idea together with the term immediately. In this sphere, onboarding is the number of techniques and interactions whose objective is to comfort user and give the first concise introduction of the product.

 

One of the important issues which should be made by a designer working on user onboarding is thinking over the clear priorities. Users have limited time which they are ready to devote to learning how the product works before starting actual interaction with it. Moreover, people have limited capacities of working memory, and setting the priorities, creators of the product decide which dose of information is needed for this or that stage instead of trying to give the big amount of data at once making the user confused or embarrassed. In one of the recent articles in Adobe Creative Cloud Blog, UX researcher and cognitive psychologist Rob Youmans, who is YouTube’s Head of UX Research Sciences, says “When it comes to design, the place that I see primacy and recency in particular is in terms of onboarding. When you start to learn about a new product there’s often a tutorial, wizard, instructions or something. It’s wise for designers to consider primacy and recency in this context because you’re going to want to put the most important information first or last if you’re hoping that someone is going to remember them later as they use your product or system.”

 

What is onboarding tutorial?

 

Onboarding tutorial is the set of screens which are shown to the user in case of the first interaction with the product. In the vast majority of cases, designers apply 3-4 screens telling the initial information about the product to the new user. App tutorial is the sign of respect to the user: it gives the quick insight into what problems the app solves, how it can help the user and what benefits it gives. Surely, it is a good technique of boosting usability from the first minutes of interaction if it’s informative and clear.

 

tutorial_design_tubik_studio

Shauts App Tutorial

 

Why do you need the tutorial for your app?

 
Three basic functions of an app tutorial for easy onboarding could be described as following.

 

Greeting

 

App tutorials set the first contact between the user and the app. It is an act of introduction, in most cases imitating real communication starting with a greeting like «Hi!». It is especially actual when the app has a mascot or character which becomes a direct subject of communication with a user. Still, it’s important to be extremely careful and make the greeting as short and quick as possible not to distract users too much from the essential information.

 

Information

 

This is perhaps the most precious part of the tutorial mission for the user. First of all, the tutorial is a tactic of user onboarding, so it should inform users about the benefits they get using this product or basic operations they are going to do. User research and clearly set USP of the product will help the designer and copywriter to find the ways of providing the vital points quickly to the users.

 

Engagement

 

Another benefit of the tutorial is making it a foundation laid for building solid desirability of the product. Tutorials can quickly show the user the most beneficial sides of the products engaging them to try and tolerate with possibly hard first steps into unknown. Moreover, designed nicely, the tutorial provides the first insight into the style and appearance of the product which is (should be) based on the target audience research and becomes another hook boosting interest to see more. In most cases, users are visually driven and even more — aesthetically driven creatures: we tend to get interested with what appeals to our ideas of beauty and harmony or sets particular emotions via visual performance. And tutorial becomes a favorable way to set this approach from the first seconds.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

What are the points to consider for tutorial design?

 

The structure and content of the app tutorial are surely highly individual for every particular project. As we mentioned in the articles devoted to UX research and creative stages of app design, there are numerous factors influencing the design solutions depending on three major perspectives: user needs/ wishes/ expectations, product nature, and business goals. Being the initial site of introduction of the product to the user, the tutorial is also the point of analysis and creative approach to presenting the essential information in the way which is dynamic, edible and attractive to the target user.

 

Custom images or illustrations

 

Most people perceive and decode images faster than words. It makes usage of illustrations logical and rational for app tutorials which have to give the information quickly. In the article devoted to the benefits of illustrations in UI, we mentioned that in the case of tutorials, illustrations, be it photos or originally drawn images, fully reveal their potential in explanation and clarification. The options can be totally diverse from simple icon-like to artistic and sophisticated artworks. Illustrations of this kind become a good way to boost usability minimizing the necessity of using the copy on the screens. They are particularly efficient in apps for kids and youngsters as they usually feel this sort of explanations more user-friendly.

 

travel app tutorial tubik studio

Travel App Tutorial

 

Design trends of the recent year have demonstrated the increasing popularity of custom illustrations created for the specific interfaces. App tutorials became the favorable ground featuring the variety of styles and approaches. In many cases, illustration becomes the center of the composition and its aim is to present a specific feature or benefit in an attractive and easily decodable way. Another popular approach is applying a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds.

 

Illustration Saily Tubik Studio design

Saily App Tutorial

 

Copywriting and typography

 

In the case of tutorials, words are power. However, there are two simple rules to support this power: tell them short and make them helpful. No secret, that writing a short informative sentence is much harder than writing a long one: you have to find the effective way not to waste those precious seconds which user is ready to devote to reviewing tutorial screens. If it’s possible, involve the professional copywriter who will find the way of creating copy for the interface that makes every single letter count. Make your homework, take time and effort to create the concise, attractive and clear copy which applies the language appealing correctly to target audience and corresponding to the objectives set for the product. As well as designed solutions, the copy should be tested as much as possible to find the shortest ways of informing users.

 

One more aspect that designers should bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles and the like, it literally occupies the part of the screen or webpage as any other graphic component and influences the general stylistic presentation of the app or website. Furthermore, the success of the efficient copy directly depends on such design solutions as the choice of types and fonts, background, placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately, the copy will lose the chance to get all its potential applied, even being highly meaningful.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Animation

 

One more method to make tutorial not only informative but also attractive and engaging is applying animation. Motion makes interaction more dynamic, it is able to breathe life into the interface, amaze and catch user’s attention. One more good point is that animation can make the important details more noticeable. On the other hand, motion can increase the time and traffic needed to get it loaded, so it should be wisely applied and discussed with developers in the aspect of its technical realization.

 

ui animation design tubik

WaykeApp Tutorial

 

Clear page/screen indicator

 

Usually, tutorials consist of several screens, each devoted to one point or benefit to present. It’s vital to remember that from this very start of interaction users should know where they are and how long is the path. Page/screen indicator is a good and simple way to inform users about the flow of the process, and it shouldn’t be neglected.

 

Ability to skip

 

Another thing to consider is the choice of skipping the tutorial. Not all the users need it, even using the product for the fist time, so for some products, it could be reasonable to give them the ability to skip the tutorial. The decision upon this function has to be done on the basis of testing and analysis of the target audience.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia — section tutorial

 

In the bottom line, it’s vital to remember: in the interface, all the details count. Well-known proverb checked by many generations says: a good dress is a card of invitation, a good mind is a letter of recommendation. Surely, if the presented product is nothing good or helpful for the user, whatever good the tutorial will be designed, it won’t save the situation. However, if the product is user-friendly and problem-solving, app tutorial gives another chance to make the introduction smooth and pleasant. Good dress helps to impress — and thought-out app tutorial can easily prove it.


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