Challenge and Client

To broaden its ways of reaching the audience and set an effective sales channel using mobile technology, Heineken Mexico strived to launch a mobile application that would allow users to buy beer and associated stuff like snacks, cups, and the like and get the orders delivered quickly. This is how the Glup application started.

The clients approached the tubik team with a range of design tasks: we worked on logo audit and tweaks, extended brand identity development, delivery application UI/UX design from scratch, website design, and creating custom 3D icons and 3D illustrations for marketing and user experience objectives.

Process

The creative process included two major directions: developing a flexible identity and creating a consistent functional UX design for the application.

Brand Identity Design

Firstly, it was essential to work on powerful branding that would be effectively applied to both marketing goals and mobile interactions, providing the integrity of the customer experience.

The brand already had a logo, but it had to be enhanced to get a more attractive and trendy look appealing to the target audience and become more pliable for a variety of brand advertising and marketing objectives.

Original logo color variations

Glup logo redesign

Certainly, the team took advantage of color power and its remarkable ability to set the needed mood in split seconds. The primary brand colors were yellow, setting the cheerful spirit and giving instant association to the beer theme, and deep purple, setting the effective contrast and playfulness and supporting the flexibility of the palette for the defined objectives. Also, an extended palette for different ways of product presentation was developed.

Another element of visual branding was the set of abstract geometric shapes to be consistently used across various branded items, advertising materials, delivery bags, social networking, and mobile application screens. What’s more, these shapes reflected the parts of the clock face setting a solid association with the speed of delivery as one of the key features. Take a look at the variety of branded items and advertising design.

Outdoor advertising

Social network posting templates

Billboard design

Delivery backpack design

Range of variants for delivery motorbike branding

Branded T-shirts design

Branded cap design

User Experience Design

The second direction of work was to think about the flawless and intuitive user experience for the mobile application. The interaction design was thoroughly thought-out to make the sales funnel work successfully and let the users move through the whole purchase flow smoothly.

The onboarding screens and categories use trendy and balanced 3D graphics presenting the products and setting friendly communication. Having a different visual style, these original graphics don’t distract users’ attention from the offered items.

The icons working as visual, illustrative markers for the different categories of items in the application also moved through several iterations and evolved from 2D graphics consistent with the general concept of visual branding and echoing its graphic elements to the big set of 3D icons following the style of 3D illustrations used across the app and in the onboarding process. Here’s a quick glance at the stages of the process.

Airy light screens of the application effectively show the products, while branded colors, graphics, and eye-pleasing gradients help to set attractive color accents for interactive elements, making navigation clear and intuitive. Custom icons in the interface also echo the brand palette, supporting both usability and consistency of brand performance. The customers are offered several ways to surf the range of provided items, including browsing the entire catalog, using filters to customize it, or using the internal search to find the needed item quickly. Plus, the button on each card on the catalog screens sets the shortcut to add the items directly to the basket without opening a card, which saves time and effort in cases when users have some faves and order the same items multiple times.

Here’s a quick look at the category screen. All categories are illustrated with stylish theme 3D graphics that instantly set the theme but do not overload the screen with too much detailing.

The shopping cart screen is informative and functional, based on the principles of external consistency and well-recognized mental models so that users can finalize their orders easily and effortlessly. A special progress bar with a text hint is used to visualize the ability to get free shipping for the order.

The home screen and promotions screen also feature sliders with banners for special offers or hot sales to attract more attention to them immediately.

One of the essential elements of building a solid mobile app brand and enhancing its online presence is supporting it on the web with a concise and informative landing page that uncovers the benefits and engages new users to try it. The landing page for the Glup application echoes the design approach of visual identity for the brand. It’s based on a bright background in primary brand colors separating different content sections, a solid visual hierarchy of text blocks, clear and visible call-to-action elements, and prominent visuals that present the balanced mixture of app screens and thematic 3D graphics to instantly set the connection with the essence of the offered service. Smooth web animation makes the user experience even more lively and dynamic.

So, as a result of the project, the Glup brand obtained a solid and effective sales channel via the easy-to-use mobile application, consistently reflecting brand identity and making the customer experience integral, engaging, and smooth.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

HP23. Website and 3D Animation for Prostheses Producer

Nova Post. Interactive Christmas Advent Calendar UI Design

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

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

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

Сообщение Case Study: Glup. Branding and UX Design for Delivery Application появились сначала на Design4Users.

Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

Outdoor advertising billboard design

Business cards design

Booklet/notebook design

Branded badges

Branded tote bag design

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

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

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

What Is Product Page

The product page is a page of the e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.

Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.

As we mentioned in our guide to the basic web pages, a badly designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

• shows the image of the product
• gives all the needed information about the product
• allows users to check different color/model options (if any)
• enables visitors to see the reviews, comments, and ratings from earlier buyers
• allows for adding the product to the cart or wish list
• shows other relevant options.

Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.

Product page interactions for Bennett, a tea brand e-commerce

Based on that, here’s a checklist of basic elements of the product page layout:

• name/title of the item
• photo
• price
• item availability
• add to cart/add to bag/add to basket/buy button
• add to favorites/save to wishlist button
• description
• social proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.
• choice of color
• choice of model
• choice of the number of items to buy
• size guide or calculator (for clothes and footwear)
• extended details (materials, technical specifications, dimensions, weight, special features, etc.)

The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

Ecommerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.

That’s why many e-commerce platforms:

• use a set of images to present one item from different points and angles
• apply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small details
• combine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizes

Product page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the model

The approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:

• originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelines
• high-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in general
• optimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate – unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.

Product page for the niche brand of underwear, using photo demonstration on model

Except for images, other media, more complex or interactive, can also be used. Among them, you can now find:

• product videos, detailed video reviews, and instructions
• 360-degree view of the item
• augmented reality technologies helping people to observe the item in their own environment or try it on virtually

The product page of GNO Blankets website uses video demonstration and graphics with detailed demonstration of product layers.

Obviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.

A creative product page concept for a website selling niche accessories applies special realistic effects to the functionality of a model choice.

The pet shop website uses video demonstrations of the items as a convincing way to see how the product works in the environment and sets the needed emotional connection.

Informative but Simple Description

The saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances to be read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.

Another rule of thumb here is connected to the previous point: show, don’t tell. Well, it’s better to say, tell, but also show! Don’t just describe in detail how the bag looks inside – show the photo. Don’t just tell how beautifully this neckerchief matches that jacket – show the photo. Don’t just mention the size of a toy – show the child playing it. Combine the power of words with proper images to make the experience much more effective.

Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of model size on the photo, allowing the customers to instantly understand the proportions.

The product page for the cosmetics website uncovers the information about the product gradually, with the core data above the fold, supporting the prominent item visualization; the split-screen approach helps to divide visual and text zones to make them easily scanned.

Super Obvious Call to Action

Calls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make an additional effort to achieve their goals – which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.

ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light, airy layout.

Focus on the Item

No doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?

On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal – to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.

Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.

Creative product page design for a niche perfume website focuses on item presentation amplified with an atmospheric video background and special effects.

The more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on and so forth – any of those details can play the premier violin in a story of a particular item.

Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.

Instead of creating intrigue, be open, direct, and clean in content presentation.

Try to put all core information in highly readable form on the above-the-fold part of the page.

And test, test, test again, analyze the time on the page, heatmaps, and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.

The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and shows what other products are often bought together with this one.

The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or buy.

And only after that, when scrolling further, users can find extended information, editorial reviews, etc., based on text without visuals.

Intuitive Navigation

Every button, link, and card design can change the conversion rate significantly. It’s vital always to remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.

So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:

• find search field
• use breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going away
• be totally sure which elements on the page are clickable
• see if the item is already in the cart
• see the number of items in the shopping cart or bag (usually in the website header)
• use the power of visual dividers and common directional cues to perceive the information faster
• find the contact information and navigation links in the website footer

Product page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.

Consistency

Consistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions smoother and more intuitive.

In e-commerce interface, it touches both:

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.

Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.

Power of Known Patterns

Adding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes a right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.

The power of habit plays a big role in the products of this kind. Choosing a layout, menus, or icons that stand too far from the ones users are generally accustomed to often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.

H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.

In the article on home page design strategies, we mentioned that the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.

Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

It’s already well-known that when coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.

There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages – any point of that stuff can spoil the experience quickly, distract users, and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.

First-screen view of the product page on George: due to the light, airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.  

Dark, elegant, and catchy product page for the neon signs shop, balanced and scannable

Fewer Clicks

If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible – this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.

Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.

Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tap.

The OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.

Social Proof

Social proof is a big factor of impact on the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.

In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has and, this way, support the positive decision about buying – or prevent from buying the wrong item and having a negative experience.

Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked, and further customers’ photos and details on reviews.

Interactivity

With more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room – all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.

Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones – able to add their own personality to the offer, many shoppers feel ready to buy.

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

Needless to say, there are many daily things people do with their smartphones nowadays, and shopping is becoming one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.

Minimalistic product page for a fashion brand e-commerce focused on photos, easy choice of color, and responsive to be used on any device

404 Error

With product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer to check something else.

404 error page for a fashion e-commerce website

Bottom Line

Sure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.

Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks.  Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.

Useful Articles

Here’s a bunch of articles to dive deeper into the themes of e-commerce, web usability, and user experience design.

UX Design for E-Commerce: Principles and Strategies

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

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

Сообщение Product Page Design: Best Practices on UX for Ecommerce появились сначала на Design4Users.

What Are Breadcrumbs

Breadcrumbs are navigation elements used mostly in web design and supporting users in a journey around the website. Due to breadcrumbs, users get aware of where they are on the website and can get used to the website structure easier, which means that breadcrumbs present a tool for better wayfinding. Yet, breadcrumbs don’t replace the primary navigation menu; they present the secondary level of navigation and increase website usability in case it has lots of pages.

Breadcrumbs on the product page on Amazon

Why such a funny name is used for this interactive element? If you think it resembles something from a fairytale rather than from design terminology, you are right. The term echoes Grimm Brothers’ tale about Hansel and Gretel: in it, the characters used breadcrumbs to mark the way home and not get lost. On the web, it works the same way: breadcrumbs visualize the path or the users’ journey from the perspective of the website hierarchy. That’s why they are also called a breadcrumb trail.

Types of Breadcrumbs

As for classification, there are three basic types of breadcrumbs:

Location-based: they show the visitors where they are according to a website hierarchy, usually applied to websites with complex navigation schemes consisting of multiple levels.

Image source

Attribute-based: they show the visitors the trail of attributes of the page they are on.

Image source

Path-based: these show the visitors the trail of steps they took to arrive on the page they are on. This type is often referred to as less effective compared to previous ones and is not recommended to apply.

Why Use Breadcrumbs

Among the benefits of breadcrumbs as a navigation element, we would mention the following.

• increased findability: the more complex is the website architecture, the more content it has, the better organized it should be to be found quickly. Breadcrumbs give users another touchpoint to the content and help to understand the structure of the website easier
• fewer clicks needed: with breadcrumbs, website visitors can jump from one level of the hierarchy to any previous step with no effort and no need to take all the way back, which means it takes fewer clicks and transitions to reach the page they want
• effective use of screen space: crafted well, breadcrumbs take a narrow horizontal line with plain-looking text elements that don’t need much space, so users get navigated but designers have no need to overload the page
• no misinterpretation: breadcrumbs present the element which is hardly ever misunderstood by users: the behavior pattern for them has solidified through years and people rarely mistake this element for anything else
• lower bounce rate: breadcrumbs are great support for first-time visitors or people that have no everyday experience of dealing with complex websites, so the more confident they feel the slimmer are the chances of them bouncing the page. What’s more, it’s an effective way of engagement for the users directed to a particular landing page: seeing it as a part of the bigger structure shown via breadcrumbs, users can get interested in jumping to other pages and seeing more.

Minimalist product page by tubik for an e-commerce website uses breadcrumbs to follow the typical mental model users expect and help them with quick navigation.

Design Practices for Breadcrumbs

Here’s a bunch of UX design tips and practices that can help to master breadcrumbs as a supportive and handy element of web navigation. Bear in mind that none of these practices is a cure-all to apply for any website: the examples below show you how different products approach this navigation element to cover their priorities.

Don’t use breadcrumbs as the primary navigation

The key rule of thumb for breadcrumbs is using them as an addition to major navigation. They shouldn’t be seen and used as a replacement for global navigation, usually found in the website header or menu. Instead, they support and amplify primary navigation.

Place breadcrumbs above the H1 heading

The most common place where users expect to find breadcrumbs and where they work effectively as a part of the general layout is above the H1 heading. It may be the name of the category, the product, the article’s title, etc. Sure, not all the pages have visually defined H1 headings; in this case, designers find the most appropriate place, typically in the top part of the layout.

For instance, on the George website, the product page features the classic approach to the breadcrumbs: they are placed right above the H1 heading, with a slight line used as a visual divider between them. However, on the category page, which doesn’t have an obvious H1 title, the breadcrumbs just keep at the same position at the layout, below the top navigation, and visual dividers help to clearly separate the trail from other navigation elements and filters.

Consider starting a breadcrumb trail with a link to the home page

Noticeable and easy-to-reach link to the home page that allows the user to jump to the website’s main page from any point of the journey is still an essential part of web navigation. Although more and more users are getting used to the pattern when the logo featured in the website header is clickable and helps to jump to the home page, there are still many those for whom this flow is not obvious. As the breadcrumbs let users quickly define the website hierarchy and their current position in it, it’s logical to start the trail from the main page of the website.

However, if there is a text link to the home page in the primary navigation, for instance, in the header, you don’t need to double it in the breadcrumbs.

As well, in the case of a polyhierarchical website, you may want to concentrate users’ attention on a particular level or category instead of sending them to the home page. For example, Uniqlo starts the trail from the name of the major category user is browsing at the moment, letting the logo in the top left corner do the job of moving visitors to the home page.

Make the current location look non-clickable (or don’t show it)

There are two different approaches to the last item of the breadcrumb trail: you may show the name of the current page or finish it with the previous step, which means that the current page’s name isn’t shown at all. Whatever your choice, make sure that all the elements cover a particular goal and help users. If you suppose that adding the current location to the breadcrumbs is necessary to support usability, make it clear that it’s not clickable and thus looks different from the interactive elements. For the mobile experience, it’s better not to show the current location at all, as the screen space is very limited.

On the contrary, for all the other elements of the breadcrumb trail, make it obvious that they look clickable and are clickable.

Example of a breadcrumb trail on the Walmart website

Clearly separate the elements

One of the most popular separating symbols for the elements of the breadcrumb trails is the symbol “greater than” (>), which typically defines hierarchy and features the movement from the parent category to the child category. Other frequently used symbols are slash (/), right-angle quotation mark (»), and arrow to the right (→). So, designers do have what to choose from, don’t they? Some also separate breadcrumbs with the color putting them into the colored tabs that imitate the line of elements, each colored in a different shade.

Mind readability and white space

As well as for any text element, the primary goal of breadcrumbs is to make the information packed in written form perceived and absorbed easily and in no time. So, take care of making them highly readable rather than decorative. And make sure there is enough space between the elements so that it is easy to read them, visually separate the pieces of text, and click.

A clear and unobtrusive breadcrumb trail on the Google Support website

Show the website hierarchy instead of the interaction history

Unlike the fairytale characters who used breadcrumbs to mark all their way, web designers would do much more effectively turning to show users the clear hierarchy of the pages instead of all the way they got through to reach this page. Such an approach will always look more logical and, furthermore, will clarify the clear and simple path back for the visitor who could get lost otherwise. What’s more, in this case, breadcrumbs don’t work at all for users who landed on a particular page and didn’t take any steps yet.

As Jacob Nielsen mentioned in his article, “a history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confusing progression at the top of the current page doesn’t offer much help.”

Don’t clutter the page with too many elements

What if the breadcrumb trail gets too long? Sure, it won’t be good to overload the page, especially at the secondary navigation level. In the case of the too long breadcrumb trail, some of them in the middle can be hidden behind the ellipsis. But never hide the first and the last element so as not to break the logic.

In his article about breadcrumbs, Alex Zlatkus recommends not to let breadcrumbs take more than half of the page and think about such a shortening with an ellipsis inside when the trails get more than 5 items.

Image source

Sure, the final decision is up to the designers of the particular project. It should be based on usability testing, as there can be different creative design solutions that allow for organizing longer breadcrumb trails effectively.

Don’t emphasize breadcrumbs visually in the webpage layout

If you feel the urge to find a super bright and catchy solution for the breadcrumbs, consider refocusing that on the other object of the web page layout. Breadcrumbs are not the primer violin in this show; that’s not the goal behind them, so keep them stylish but moderate. No need for bright accents, bigger sizes, and impressive fonts – breadcrumbs should just provide the secondary level of wayfinding, not scream into users’ faces distracting them from more important things that solve users’ problems.

For example, the OldNavy website uses super minimalist and non-distractive breadcrumbs placed in the top left corner right below the header with primary navigation, this way sticking to a common left-to-right reading and scanning pattern. That makes breadcrumbs almost unnoticed when you don’t need them but easily found when needed.

Don’t use multiple lines of breadcrumbs on mobile

The most precious asset of any mobile app screen is space. So, optimizing your website for mobile, take special care about that aspect: if the breadcrumbs trail is just copied from the website to mobile, it may take several lines, and this way snips off the big part of the limited screen space. So, by that, you get into the higher risk that some critical elements, for example, the name of the product on the product page or the introductory text, won’t be seen at once just due to the lack of space.

Don’t apply breadcrumbs to the websites with a flat or simple hierarchy

As well as with internal website search, breadcrumbs are needed and helpful in cases when the website has multiple pages and a complex hierarchy consisting of multiple layers. Breadcrumbs are common – and expected by users – in big e-commerce websites and platforms, media and news websites, blogs, and magazines covering a wide range of topics, etc. If that’s not your case and your website has a simple hierarchy, primary navigation will be enough to let the users effectively interact with it.

Example of a breadcrumb trail on the California State University website

Breadcrumbs present the perfect example of how much details matter in user experience design for the web. Being far from primary and critical functionality but approached thoughtfully and crafted well, this interaction element can contribute much to making interactions easier and user-centered. Nevertheless, think twice and test twice before deciding upon them, as there may be more effective secondary navigation options to solve a particular task for a certain project.

Useful Articles

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

5 Basic Types of Images for Web Content

The Anatomy of a Web Page: 14 Basic Elements

UX Design: How to Make Web Interface Scannable

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices

From Zero to Hero: Look at Hero Images in Web Design

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

Сообщение Web Design Usability: How To Use Breadcrumbs появились сначала на Design4Users.

Project

OtoZen is an innovative technology for safe driving, operating via a hardware device connected to a mobile application. It helps users to turn any car into a smart, distraction-free vehicle. It is the all-in-one safe driving assistant that keeps drivers focused, organized, and connected to friends and family. Users can quickly pair the OtoZen device with their Apple or Android phones via Bluetooth and install the OtoZen Pod in split seconds, with no tools, wiring, or professional installation required.

In this project, tubik specialists were involved in auditing and improving UI and UX design for the mobile application, as well as creating custom graphics and a website that would strengthen the product’s web presence.

App Design

From the perspective of user experience design, the Otozen application was a complex project that included a diversity of manipulations with different data, some of which are changing in real-time mode and should be updated and distributed appropriately. Another concern was dealing with a lot of personal data security and privacy issues. So, the design process had to start with diving deep into the slightest details of functionality and user problems solved by the application. This is what the application looked like at the start of the process.

The client came to us with a prototype that had to be reviewed, discussed, and reconsidered. In general, the technology is built around the following primary directions:

• safe, distraction-free driving: texting-while-driving prevention, reduced audio distractors, high-speed alerts, feedback on driving safety level, autodial to call help for emergency
• well-used driving time and organized reminders: location/time-based reminders, audio calendar alerts, joining meetings hands-free, simplified expense reports with mileage tracking
• convenient connection and communication with other people, for example, family and friends: requesting live location and ETA of other drivers, getting easily updated with automated notifications, full control of privacy and visibility

So, having analyzed the diverse functionality and data the app had to process, considering the objectives behind the application, our team made a deep review of the pain points and blind spots in the existing prototype. That process of design audit was grounded on constant communication with clients to find out the slightest details that could have an effect on user experience and grew into tons of graphs, charts, tables, and schemes. That’s a good example demonstrating that a huge part of the user experience design process is not about visuals but about analyzing, structuring, connecting the dots, considering details, and building systems. Here’s a look at just a small part of the process.

A part of multiple systematic tables textually organizing different information about the product, questions and issues to discuss, and suggestions that could improve user experience, to support collaboration between the clients and the creative team and let them stay on the same page.

A glance at the process of analysis and structuring user interactions with the application and issues arising in the process

The process of building a particular piece of user scenario

So, the core tasks for the UX designer were to think over data organization, visualization, and navigation which would make complex flows of information and functions feel intuitive and straightforward and wouldn’t overwhelm users. Supporting that idea, the choice was made on a light and airy interface with contrasting but not overbright colors for critical visual elements and buttons and a highly-readable sans-serif font to make the screens scannable and easy to use on the go.

One of the significant points for the user experience design of the mobile application was effective onboarding and registration flow. The account creation process is divided into several simple steps, with a progress indicator keeping the user updated about the current stage.

My Trips section opens the feed and gives an opportunity to easily tune what the user wants to see. This application is a good example of how well-crafted icons support the usability and navigability of the mobile interface and help set instant visual connections with different types of information. The map screen shows the trip details. It also uses color marking for the various points, such as speeding or telephone usage, this way visualizing quickly how often the issue happened during a particular trip.

Opening the calendar, the user can see daily time stats in minutes. The drive score section opens the information on issues that influence driving safety.

The tab bar lets users switch between five core interactive zones: Alerts, My Trips, Buddies, Profile, and Notifications. To maximize the influence and make it clear for users, it combines elegant line icons and text labels to quickly inform what users will find in each tab.

And here’s a glance at the flow of interactions with the app.

The Alerts section organizes all types of incoming alerts and helps to switch between them smoothly.

Profile screen shows different data about settings and preferences, neatly organized in groups. Here users also can add, edit, and review their emergency contacts, vehicle details, and places.

One more important and valuable feature of the Otozen application is Buddies. This function allows users to connect, make their trips trackable, and notify their chosen buddy about the needed information, such as the current point on the route or arrival. It can be super helpful for various issues, for example, when the app user needs to know where the family member is but doesn’t want to distract them from driving with calls or messages.

One of the points the technology creators describe as the most essential and show deep care on is personal data security. So, in the Buddies functionality, this aspect had to be well-thought-out, and sharing/accepting access to tracking the other users’ trip, OtoZen users needed to be sure that they can control the level to which they open data to their buddy in the app. That resulted in another neatly organized set of settings in the application that had to be clear and straightforward.

The major challenge behind the application UX design was to get together all the multiple flows of information, notifications, alerts, macro and micro settings, and decide upon the most user-friendly way to organize them.

Web Design

One of the well-checked tools for building a solid mobile application brand and effective promotion is creating a landing page or website to present the benefits and connect users to the product in an efficient, informative, and captivating way. So, the website was another task for our team to allow the OtoZen product to cover this aspect of digital marketing and set another major channel of communication with its users, letting them catch the idea and uncovering the answers for all the questions that may arise. The general layout and website style echo basic color accents and the airy, light layout of the application. The information about the technology is divided into concise sections to be scannable and skimmable. The hero section presents the immediate visual connection to the technology via the prominent image demonstrating both the device and the app and giving the main idea about the product and its value for users via an informative tagline and short description. The call-to-action button in the hero section is instantly visible due to the color contrast. It works in pair with the ghost button, allowing visitors who want more information to watch the video.

For the last few years, original illustrations applied to user interfaces have been one of the most popular and solid UX design trends. Not only do original graphics contribute to the general brand image and enhance its recognizability and memorability, but also they set a solid emotional connection between the product and its user. What’s more, they add much to the usability and visual storytelling, especially when consistent photos cannot be obtained for all the necessary demonstration needs, especially in the cases of highly technological products. The Otozen website took advantage of the custom illustrations keeping a consistent style and effectively supporting information blocks. Also, many of the pictures feature people, adding a human element to the communication. A mobile adaptation of the website makes it look attractive and work effectively from any device.

“We are very pleased with the outcome. The app UI/UX is well received by our customers. There was a consistent app UI/UX theme that was maintained throughout the development, and having the same designer working with us helped us achieve this,” the client company’s CEO wrote in his review on Clutch, and what could be the better way to finish the design story?

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

HotelCard. Brand Identity for Hotel Offers Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

Nonconventional Show. Website Design for Podcast

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

FarmSense. Identity and Web Design for Agricultural Technology

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

Сообщение Case Study: OtoZen. Designing Mobile Application for Safer Driving появились сначала на Design4Users.

What Is Interface Error

Interface error is the state or condition when the app cannot do what the user wants. It usually happens in three typical cases:

• the app fails to do what’s requested (literally, like there is no such technical possibility or function)
• the app cannot understand the input from the user (or the input is invalid)
• the user tries to combine operations that cannot work together (that usually happens because the user isn’t aware of the processes inside the app)

Sure, errors present a kind of annoying or even frustrating part of the user experience. Yet, there is no way to avoid them, so designers, developers, and UX writers have to think about ways to make that kind of interaction more user-friendly and smooth. Why is that important? Because, as well as in real life, virtual mistakes make a significant psychological impact and form a negative emotional background. For example, the research measuring the psychological stress caused by smartphone interactions showed a direct connection between appearing error messages and the level of cortisol, a known biomarker of stress. It can increase anxiety feeling and provoke a user to stop trying to interact with the product before they even start analyzing what’s the reason. So, let’s see what to do with those situations.

This is what the error of filling out the subscription form on Tubik Blog website looks

Best UX Practices for Errors

Errors are like fights: the best one is the one that never happened. There are different strategies for error prevention, like tooltips, prompts, tutorials, directional cues, suggestions, highlights, limitations, and the like. Yet, what should you do with users that already experience the error? Let’s cover some points that are effective in designing errors that wouldn’t make the user instantly turn their back to your app.

Make the error instantly noticeable

It may seem obvious, but don’t get tricked by it: what seems obvious has to be thought about twice. The worst thing that may happen about the error is when the user is totally uninformed about what’s going on and gets lost in the process. Be always honest with the user, and don’t try to mask the error. Even if the interface is super minimalist and any alien inclusion hurts your perfectionist designer’s eye and soul. Beauty doesn’t matter if it doesn’t work.

For example, if the user is filling the form made of 10 different fields, don’t just inform them that the form is not filled correctly, don’t make them search from one field to another where they made a mistake, and don’t hope they will do it. Make the field with a mistake super visible and save users’ energy and time.

Use well-recognized visual markers

Knowing mental models and well-known patterns of user behavior, user experience designers can reduce the cognitive load. That’s particularly essential in error situations that are quite unpleasant by default. Error screens and messages may not be the best place for experiments, so consider markers that are quickly recognized by most users. The red color and exclamation marks are still among the most popular ways to attract users’ attention to errors. Yet, be careful using the color as the only way to mark the error: check if it works for color-blind users. Also, mind the high level of readability on different devices.

Here’s how the registration error is marked on ArtStation: the system marks the field with color and explains the issue with a text prompt.

Explain what happened

Whatever the reason for the error, you may feel the urge not to explain anything, just to proceed with solving the issue. And that’s a mistake. Firstly, you risk getting a user back in this error situation again and again as they don’t understand what is wrong with their actions or app response. Secondly, we’ve already mentioned that errors literally provoke a psychological state of anxiety, and you may not predict if this error becomes a part of the wrong interaction pattern. So, be sure to find a way to quickly explain the nature of the error and keep users informed. For instance, instead of just informing (“You cannot log in to the app”), make the message explanatory like (“The username or password do not match”).

Don’t add more actions than needed

Another thing you may feel like doing is putting all the errors on separate pages or pop-up windows to make them as catchy as possible. Don’t overplay with it: in most cases, it’s enough just to make a color contrast marker in the interactive zone instead of popping up the additional modal window with the message requiring another unnecessary click to get the user back to the same page. Imagine that you are filling in the registration form and get that kind of pop-up for errors; no doubt, you will hate it very fast. Don’t make your users experience that: aim at providing inline validation and keep the message close to the field in error.

Yet, a pop-up window will be helpful if the user needs to be redirected to another page because of the error. So, for each case, take into account all pros and cons and target your solutions well.

This is how the error is marked on the Tubik website when the user tries to complete sending the contact form without adding an email.

Write simply

It’s crucial to make the error message as simple and clear as possible. Clear for the target user, not for the designers or developers creating that product. Avoid special terminology and jargon which you may use with QA engineers, for example (Like “Error 4.7 occurred” or “syntax error happened”). Don’t use long, complex sentences. Don’t make long and ornate introductions; it’s not the best place for them. Go quick to the point and make it decent.

Don’t blame a user

There’s an easy way to make a bad situation even worse: just tell the users that they are not clever enough to interact with this app, and that is why the errors happen. Offensive, isn’t it? Whatever form you wrap this message in, it will hurt the user who is already worried about things going not the way they wanted. So, don’t blame a user, be polite, friendly, and helpful; that’s important for setting the right emotional background of the situation. Try using clear instructions instead of blaming: for example, say, “Enter the valid email address” instead of “You’ve entered the invalid email address.”

Be constructive

Informing the user about the error in the right way is not enough: whatever friendly information you got lost, it isn’t super worthy if you don’t know what to do next. So, be quick to let the user know how to solve the issue. Some of the popular practices are the following:

• If that’s a web interface, give the options to move to other pages of the website, first of all, the home page
• In the mobile interface, make it easy to take a step back or quickly connect to the spot of the error
• In case of complex forms and processes, do it for each step instead of at the end of all the processes

This 404 page of the fashion brand’s e-commerce website gives the visitor various options to jump to, marking the ability to get back to the home page as the main call-to-action

Consider using images and icons

It’s not a secret that people perceive and decode images faster than words. So, thoughtful use of an icon or image on the error screen can make communication faster, saving the users’ energy and a good mood. What’s more, images have a big potential for emotional appeal, which can reduce the tension of dealing with an error.

404 error page for the ShipDaddy website uses funny mascot animation integrating brand graphics into the web interactions and making the error page smoothened with fun.

Test and analyze

Don’t have an illusion that work on error presentation is finished with the UI/UX design stage of the project. It never stops because feedback from real users is the best way to improve user flow. A/B test different options, analyze carefully what are the most vulnerable zones and interactions, and use the findings to prevent errors where possible and smoothen the process where mistakes are unavoidable.

Add fun if that’s appropriate

The page or screen of error messages can use gamification, interactive content, or other ways to add fun, and this way reduces the negative effect. One of the good examples is the 404 page on Dribbble: as its target audience is designers, the resource uses their natural creative curiosity to add fun to the error situation, so users can see the collection of popular designs organized along with a similar color palette. On the page, users can continue the game and try other colors or search for what they need using the search field integrated into the error page.

Well-Done Errors Checklist

So, to sum up, well-crafted errors would rather stick to the following points:

• readable and clear
• easily noticed
• constructive
• effort-saving
• polite and friendly
• reasonably emotional

Useful Articles

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

How To Use Visual Dividers in User Interfaces

How To Make Text Improve User Experience: Insights Into UX Writing

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

Big Little Details: 7 Helpful Elements of Web Usability

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

Meaningful Error: 404 Page Design. Inspiration for Page Not Found

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

Сообщение UX Design Practices for Error Screens and Messages появились сначала на Design4Users.

The niche e-commerce website for the water brand uses different atmospheric videos to make the user experience positive and emotional.

Types of Video Content in Interfaces

People are overloaded daily with tons of diverse information coming from various channels. So, make no mistake, most visitors to a website or users of a mobile application aren’t going to spend much time learning about products or services, especially the new ones. In these conditions, video can become another effective way of communication, informative, dynamic, and attractive.

A catchy video crafted with an understanding of the target audience is a tool for attracting customers’ attention as well as a well-checked method of informing them quickly and brightly. Video content activates several channels of perception – audio, visual, motion – simultaneously, and usually does that wrapped in telling a story. Such a combination of factors often makes a video presentation strong, emotional, and memorable.

Hero section video used as a part of the home page for the gardening company website

Content and Goals Perspective

From the perspective of the content packed in motion and the goals set behind it, there are several popular types of videos we can often come across on different websites and applications.

Welcome (introduction) video: these are videos mostly used on websites, especially company and portfolio websites. This video usually aims at welcoming and greeting visitors and introducing a company, service, or person in a friendly and lively manner. Another option is the “about” video created to tell more about the company, people working for it, mission, achievements, etc. Videos of this kind should be quite short, concise, and telling a visitor the core information that could engage them to see more.

Promotional (commercial) video: this type of video rooting in TV commercials and movie trailers. It’s created to inform people about a product, service, event, brand or company, new release or premiere, major updates of the product, and so on, and so forth, in a way that encourages people to learn more, buy, or join in. It’s a video playing a big part in increasing brand awareness and focused on getting the target audience aware of the offer and its benefits.

Promotional video presenting Carricare brand

Showcase (showreel) video: that’s another type of video coming from the movie industry. It’s a video showcasing a set of previous works by a person or company. This one is usually quite long, about 2-3 minutes, and is often used as an impressive addition to the portfolio of people representing various creative spheres like design, animation, filmmaking, acting, modeling, marketing, and the like.

Tubik showreel videos

Short showcase video giving a glance at the icon design project for HUAWEI EMUI 10

Showcase video for the case study about the design process for the Glup delivery application

Video testimonial: these videos share the feedback from buyers and users, show them describing their experience with the brand, product, or company, this way sharing the signs of trust and loyalty and contributing to positive brand image and reputation.

Background video: this kind of video is used as a part of website design when the background of a page is chosen not to be static. As technical improvements in web development don’t stop, video backgrounds and any other kind of video integration into web pages aren’t seen as a great challenge anymore. So, web designers often turn to full-screen videos as a way to capture people’s attention, create the needed atmosphere, and give an instant glance at the product or service.

Background videos on the landing page promoting the mindfulness application.

Mywony website design uses full-screen video setting the instant connection to the nature of the product

Website for the editorial about insomnia uses a background video to instantly set the mood

Product video: these pieces of video are widely used as a part of the e-commerce user experience, in particular on product pages and landing pages, to give details about the product’s features and advantages, and inform customers about the problem-solving potential of the product.

Pet Shop website uses video content to demonstrate the products they offer in the proper environment and the way to connect faster to buyer’s needs

Hero section video: that’s another kind of web page video that is used as a part of the hero section, which is the above-the-fold part of the web page, often the home page, that includes a prominent and attractive piece of content, be it an image, video, text, slider or other elements. Choosing a video for the hero section, designers often breathe life into it, make it dynamic and strengthen its emotional appeal.

Hero video for PointZero25 event agency website

Hero section video used on the confectionery website home page

Video guides and tutorials: these are classic how-to videos. They present video instructions of a different kind showing the step-by-step process of interacting with a product, a piece of information (for example, a recipe), etc.

Explainer video: basically, this video explains to the visitor what the website, app, product, company, or service is about, and often answers the most frequent questions that may arise about it. Being a part of branding strategy, it is focused on presenting the benefits of the product or service and explanation about how to. It often employs storytelling showing the flow of interaction or sharing particular cases and situations, and infographics helping to understand the effect quickly.

Explainer video for OffCents

Entertaining videos: these videos are more about fun rather than information. Their main goal is to encourage emotional feedback and make it connected to a particular product, brand, or company. What’s more, videos of this kind have a high virality potential as having fun; visitors may want to share it with their friends or audience in social networks, this way spreading a word about the brand.

Educational videos: these videos usually become a part of educational platforms and can present a diversity of content, from specially crafted models explaining the processes to videos of wildlife or people doing different jobs.

Educational videos about wildlife integrated into the Nature Encyclopedia app

Design and Technical Realization Perspective

From the perspective of how it’s made, we could mention such common types of video content for UI design:

Live-action videos: these videos are closest to the classic filming process and feature real people, objects, or locations. Their major benefit is a strong collection with real life that has the great power of setting associations and encouraging viewers’ empathy.

Atmospheric live-action video as a part of the home page hero section for the Lumen Museum website

Example of a live-action video combining human talk and visual demonstrations

Fitness application using video tutorials on how to do exercises

Screencast videos: this video type captures the screen this way, showing particular processes. It is especially effective for various tutorials and product videos presenting digital products and software.

Screencast video capturing the illustration process in Procreate

Live-action screencast videos: as it’s clear from the name, this type presents a combination of two previous types. In this case, viewers can simultaneously see what is going on the screen and the person giving explanations.

Animation (cartoon) videos: these videos are very close to cartoons, which means that they present the animated sequence of many still images that can be presented in a variety of visual styles: 2D (flat), 3D (having dimension and depth), and stop-motion (capturing individual frames and combining them in a sequence).

Animated video created as visual storytelling support for the article about gamification in UI design

Motion graphics videos: these ones are based on animated graphic elements, for example, shapes or text, aimed at catching attention, impressing, and setting the theme, but not employing storytelling. They also become a great help in cases when complex or abstract information should be visualized in a way that is easy to understand.

Motion graphics video background for digital transformation agency

Ecommerce website design using impressive motion graphics video for the home page hero section

Photomontage videos: this video type imitates a slideshow, combining a set of photos in an animated sequence that can be supported by special effects, voice-over, or music. This type can work effectively to present various events, charities, or social issues, tell about companies, mark achievements and milestones, and the like.

Whiteboard videos: this is a captivating type of video, where the story, guide, or information flow is unveiled as a picture drawn step-by-step on the whiteboard.

Typographic videos: this is a type of video based on moving text. It helps to make text content perform in a more dynamic and emotional way and engage users that are not keen on reading static text content not to miss core messages. In most cases, it is supported by the voice-over or sound accompaniment enhancing the message.

360-degree (immersive) videos: trendy and getting more and more popular, this type of video records a view in all directions at the same time, this way allowing the viewer to get the full panoramic view. These are, in particular, effectively used as a part of the shopping or booking user experience.

Functions of Video in UX Design

Being a type of content that is quite complex in production and often needing much effort for smooth integration, videos in user interfaces are often in question. However, there are different functions they can cover, often better and faster than other types of content. So, by analyzing the target audience and business goals and considering these functions, designers and creative teams make a decision if they need a video and, if yes, what type is better for their objectives and budget. Let’s take a quick glance at them.

Information

The core factor in making video content considered a part of the user interface is making the information flow clear and easier to perceive. In many cases, a short 1-minute piece of video can share a chunk of information that would take far more time from the visitor reading it in text or trying to understand it from screenshots, mockups, and the like. That is a basic reason why various explainers, tutorials, and guides work well in video format.

No doubt, background videos applied to many web pages or screens now make them visually and emotionally appealing as well as informative, as the image instantly captures users’ attention much faster this way. Also, it supports the feeling of the integrity of all the layout elements.

An explainer video on the home page of Credentially website is placed in the above-the-fold area and lets visitors quickly check the benefits of the service

Atmospheric video integrated into the museum website design concept quickly gives visitors a glance at it in a realistic and dynamic way

Demonstration and Presentation

One of the strongest points of video content is the ability to demonstrate products or services using all the channels of perception at the same time. If visitors are interested, watching the video, they can consume quite a lot of information in a very short time without the need to scroll, read, see the pictures, and keep all those different pieces of information in mind in the process. As the human attention span is quite short, video often allows for using it effectively and gets higher chances of visitors’ engagement and website conversions. For instance, explainer videos or product videos allow for catching how to deal with it while the visitor is on the wave of interest. As well, for services that are focused on visual outcomes like design, advertising, illustration, art, modeling, and so on, well-crafted showcase videos can become the fastest way to the future client’s heart.

Video demonstrating Fitness App interactions

Short videos used instead of static images to demonstrate the options of models on niche accessories website lets customers learn more about the product and get a positive impression

Video demonstration of the product in the Drink Recipe application helps to impress users and supports the atmosphere of a bar or restaurant

Storytelling

Another strong point of video content is its ability to tell a story in a smooth and engaging way, according to the laws and techniques of visual storytelling, supported with voice narration or music enhancing that effect. People like stories: they clarify things, illustrate situations, are often fun and aesthetic, they are often easier to perceive and remember. In most cases, videos based on storytelling feature a plot that moves through 3 basic phases: showing pain points, activating emotions, and offering the solution.

Promotional video for the cleaning service tells an illustrated story using cute characters and sharing positive vibes

The video version of the case study on design for the Annual Awwwards 2020 website

Atmosphere

As well as images, many videos integrated into UI are super powerful in setting the needed atmosphere, which is a part of customer experience with the offered service, product, place, or event. This way, it pushes demonstration to a higher level, letting the visitor catch the vibe in split seconds. That’s one of the reasons why immersive videos are getting more and more popular and demanded.

The background video for the home page of the agricultural holding website impresses with the atmosphere from the first minute

The hero section video of the website for forest camping creates the needed cozy atmosphere from the very start of interaction with the website

The atmospheric hero section video on the winter holiday website shares the views of the destinations users can travel to, and this way lets them get stunned and dive into the mood instantly

Emotion

Whatever logical and clever people are, many of our decisions are partly or fully based on emotions, not only facts. “I feel it,” “I like it,” “I want it” – aren’t these reasons often stronger than any logic, calculations, and analysis? Video content is often a good way to cover that point: as it employs multiple perception channels and can collect various factors of influence together in a time-saving concentrated piece, the chances it sets the emotional connection to the audience get much higher.

Hero section video for a horse riding club sets strong emotional appeal

Archive video added to the article devoted to the historical period strengthens the emotional appeal of the page

Points to Consider

Loading Time

This is a core thing to consider when you decide upon video integration into the website or application. This issue requires a thoughtful approach from developers and thorough testing. That’s especially vital for the web pages that are expected to attract much organic traffic but can be downgraded in search results just because the loading time of the page is too long while the bounce rate is high as some visitors won’t wait long to see the page and will just move away. Think twice, consider technical options, and do your best to test that aspect. Otherwise, there won’t be much effect from even a very well-crafted video if it’s not even got a chance to be seen.

Contrast Issue

Integration of video content, especially full-screen backgrounds well-spread these days, requires much skill and effort to find the right contrast and hierarchy of elements and integrate the navigation and text content properly so that the page wouldn’t turn into an illegible mess. Test the contrast on various screens, devices, and in different environments to make sure it doesn’t spoil general readability and doesn’t break navigation leaving users lost in all that beauty.

Other Ways to Communicate

Make no mistake; video content is not a cure-all or a magic wand, as it could seem from everything mentioned above. Not all people like videos. Not all of them, interacting with your website or app, find themselves in conditions that are convenient for watching a video. So, don’t make the video your only way of communicating with visitors or customers. Support it with other ways of communication, like text and images. Otherwise, you risk losing a part of the audience just because video as a way of getting information is not comfortable for them. The “Show, don’t tell” rule may work, but the “show and tell” works better in this case.

Manipulations

Take care of allowing a visitor to manipulate the video where it’s needed, especially if it’s long and heavy. Think twice about using autoplay, as it may appear less convenient for your audience than the ability to control if they want to watch a video or not. Make sure that the user can control the volume of the sound part as audio autoplay as soon as the web page or screen is loaded is reported to be one of the most annoying aspects of the user experience. Put shortly, consider all the basic manipulations that will allow users to feel more confident with the video content in your web or mobile product.

Mobile Adaptation

What looks well on a desktop or TV, may not work at all on a much smaller mobile screen. As more and more digital interactions of different kinds move to mobile these days, this aspect should also be well-considered and tested for all types of content, including videos. Make sure that it looks clear and legible and is well-adjusted to the mobile screen of any kind.

Mobile adaptation for a niche e-commerce website selling accessories

Sure, that’s only the tip of the iceberg in such a deep and diverse issue as video implementation into user experience design, so we’re going to share more examples, UX practices, and tips about it. Anyway, this article may help UX designers, marketing specialists, and businesses to take into account the different benefits and pitfalls of using video content on websites and mobile apps. Stay tuned, and don’t miss the updates!

Useful Reading

For those, who want to dive deeper into the topic, here’s a list of handy articles:

UX Design: Types of Interactive Content Amplifying Engagement

Photo Content in User Interfaces: When and How It Works

Aesthetic Usability: Beauty on Duty for User Experience

5 Basic Types of Images for Web Content

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Improve Website Scannability

The Anatomy of a Web Page: Basic Elements

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Videos as Instructional Content: User Behaviors and UX Guidelines

Step-by-Step Guide to Custom Promo Video Design

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

Сообщение UX Design: How Video Content Can Enhance User Experience появились сначала на Design4Users.

Mountain Resorts Website

This website design invites you to get stunned by the atmospheric mountain resorts and instantly sets the mood with the impressive video content and elegant typography. The website visitors are welcome to explore a variety of destinations with many interesting details smoothly integrated into the web page design, for example, the latitude and longitude of the specific spots. Also, the design concept literally plays with typographic contrast and uses the prominent cut-off typographic part at the top of some pages or the combinations of different fonts within one headline.

Lumen Museum Website

Here’s the website of Lumen Museum, the charming place that gives this fascination a photographic home with breathtaking views and interesting insights. The museum harmonically combines history and innovations, interactivity, and exploration, covering the subject of mountain photography from diverse perspectives. The website design features a variety of elegant pages, smooth animation, engaging scroll, video integration, and other design solutions to present the amazing museum content online. All the major pages of the website are based on a minimalist layout, impressive visuals, a light background, and mastered negative space, which makes them full of air and freshness and lets the visitors feel it from the first seconds. Also, such an approach ensures that all the diverse visual content, from archive black and white photos to modern shots and videos, will look good on the pages.

Learn more about this project in the case study about the Lumen Museum website design

Nature Expeditions Website

Here’s the concept of the website promoting expeditions that allow travelers to explore unspoiled nature and enjoy unusual destinations. The breathtaking full-screen hero video lets the visitors dive into the mood and get impressed immediately. Trendy shapes, elegant, neat fonts playing with upper case and lower case within one piece of copy, colored page backgrounds, and cool motion graphics pack the information in a stylish, emotional, and attractive dress.

Ecotourism Website

This website was designed to support people that want to try ecotourism and have some rest deep in nature and far from the urban hustle and bustle. The design shows the balance of readability and decoration in typography choice, solid visual hierarchy, and thoughtful combination of different types of visuals such as photos and custom theme illustrations. The home page features a stunning hero illustration while the Discover web page tells more about the destinations and types of holidays to book, with the video integration to amplify the effect. Mobile adaptation helps to save visual harmony and allows users to interact successfully with the website from any device.

Museum Website Concept

“A people without the knowledge of their past history, origin, and culture is like a tree without roots,” Marcus Garvey once said, and that may be the reason why museums will never be out of fashion. This design also touches on that important theme: it’s the website concept for Moesgaard Museum, a Danish regional museum dedicated to archaeology and ethnography. Impressive full-screen photo background lets the visitor instantly plunge into the atmosphere, while a solid typographic hierarchy supports both readability and visual elegance. The website uses interactivity to make the pages more engaging, and the pages demonstrate a thoughtful approach to data organization and visualization.

Geography Blog

This is the user experience design concept for a niche blog devoted to the topics connected with the environment, ecology, geography, and all things the modern state of nature. Here the design impresses the visitor with the spectacular photo and video content, illustrating informative and important text content and enhancing its emotional communication with the readers.

Event Booking Website

This design concept gives you a look at the website that helps visitors choose and book diverse events and experiences. The home page is made highly functional, with the form allowing users to search for the event in the above-the-fold area. In general, the website employs a variety of trendy shapes and minor geometric elements and makes shape and color contrast the primary tool of expressiveness, supporting beautiful photo and video content.

Winter Holidays Website

Take a look at atmospheric web design for the service helping to book accommodation and build routes for amazing winter holidays. The visitors dive into the magic of winter instantly due to the breathtaking video content naturally integrated into a minimalistic and airy web layout.

Yacht Hiring Website

Take a look at the website designed for the service allowing users to find and hire yachts. Atmospheric videos and beautiful photos, as well as the color palette, help visitors dive into the theme of sailing immediately. Interactive yacht visualizations assist in making the process of yacht choice both straightforward and fun, while sophisticated typography, functional color accents, smooth motion, and intuitive navigation make the web pages and their mobile adaptation attractive and easy to use.

New web and mobile design collections by our team are coming soon – don’t miss the updates!

Tubik Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

Product Page Design Inspiration: 17 Ecommerce Web Designs

App Design Ideas: 7 Nifty Mobile Application Design Projects

Information Beautified: Media and Editorial Website Designs

23 Impressive Web Design Concepts for Various Business Objectives

8 Bright Packaging Design Projects Employing Illustration Art

Mobile Design: 14 Stylish and User-Friendly App Design Concepts

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logofolio: 14 Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

Originally written for Tubik Blog, graphic content by tubik

Сообщение Atmospheric Web Design Projects Inspired by Travel Mood появились сначала на Design4Users.

Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

For more inspiration, check the sets of other posts from our D4U Inspiration gallery, where we gather impressive creatives to share their art with you, for example:

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на Design4Users.

Task Manager App

Having a life full of various things to do, we try to find the best way to organize them all neatly, and task manager apps become a great help. Here’s a glance at the design for one of them. With it, users can create multiple calendars, plan their tasks, and enjoy a simple aesthetic interface. Color marking helps to quickly monitor tasks from different calendars, while the dark theme supports the good balance of contrast to make text and bright color accents deep, scannable, and avoid eye strain in any environment of usage.

Calorie Tracker App

Those who care about being fit know what a big part healthy eating plays. Today, there are numerous apps helping people track their eating habits and analyze their influence on weight and well-being, yet we want to add our two cents to this theme. So, here’s the user interface designed for the app to calculate calories and give users a better understanding of the essence of the food they consume. An airy light interface with fresh green as the main color in the warm app palette, custom illustrations, and smooth animations make the app user-friendly, attractive, and engaging. But what UX designers put the most effort into is data visualization, allowing users to get confident about their stats and progress.

Exotic Fruit Ecommerce App

This mobile user interface design project is full of juicy colors and tasty looks. Take a look at the product screens designed for the e-commerce mobile application for buying various exotic fruit. Eye-pleasing, clear, and readable screens with prominent and attractive product images and contrasting call-to-action buttons are all aimed at making a choice and purchase process easy. The bright color marker gives the user a prompt that the shopping bag already has something added, special tab helps to choose the number of items quickly, just tapping on the slots and seeing the price changed immediately. An engaging and artistic main screen with custom illustrations of fruit allows for choosing a product right from there.

Cloud Storage App

Here you can take a glance at the design for a mobile app that offers a sort of cloud storage, nice and clean in the best traditions. The primary goal of design for such products is making them super intuitive and usable, with no distraction from content users interact with, but also aesthetic and eye-pleasing.

Drink Recipes App

This app design is filled with the vibes of a party or relaxation after a hard day. Here’s a mobile application with a big base of recipes and guides on how to make various soft and alcoholic drinks. The dark background sets the atmosphere of a bar or restaurant and adds depth and elegance to the photo and video content. Solid visual hierarchy, intuitive navigation, and data visualization help users feel confident.

Personal Challenges App

One of the interesting opportunities the modern world offers to us is various challenges that can be done remotely and supported by coaches from different corners of the world. Here’s a bit of app design devoted right to that theme. That’s a set of interactions for a mobile application helping people take various challenges online and boost their skills, knowledge, health, and fitness. It’s easy to see that elegance, readability, and usability were top priorities in the design process.

Quotes App

This UI design concept is about wisdom and inspiration packed together. Here’s the set of interactions for a minimalist and elegant Quotes App, the mobile application allowing users to collect wise thoughts and ideas from different sources.

Task Tracker App

Take a look at the user interface design for a task tracker that helps users to schedule and track various tasks, events, and things to do, this way increasing their productivity. An elegant and usable balance of dark and light backgrounds, lovely color accents, animated illustrations, onboarding, a variety of stats, clear transitions, and solid readability make the interface both handy and beautiful.

Finance Tracker App

This design project is devoted to money and finance. Here’s the finance tracker app that helps users to manage their incomes and expenses. Design solutions for this mobile application feature the dark theme, wise and balanced inclusions of custom catchy graphics, strong readability, and thought-out color accents for clear data visualization. Another thing worth attention is well-crafted and engaging UI animation.

Fitness Tracker App

Progress owes much to self-control, and in its turn, self-control is stronger when you are aware of what is going on. Here’s the design project whose aim is to help users keep their fingers on their health and fitness: that’s the Fitness App, with a personalized choice between a trendy dark theme and airy light theme, simple, clear, legible data visualization, highly intuitive navigation and eye-pleasing smooth UI animation for different states and clear communication between the app and its user.

Event App

Being sociable is not only fun and joy but also a challenge for your responsibility. Sometimes, it’s not that easy to keep everything in mind. Here’s the app solving that problem. That’s a simple mobile application for scheduling, keeping, and tracking events. It is aimed at young people as the core target audience, which determined the bright and trendy visual style as well as a catchy custom illustration used as loading animation.

Bees And Honey App

This app is about the sweetness and hard work combined together. It’s all about bees. Here’s a sneak peek at some mobile screens of the app that lets users buy and hire bee families as well as get some products and useful information connected to the theme. Another interesting design feature to attract the user’s attention is the playfully illustrated onboarding screens setting a friendly mood and tone of voice from the first contact with a user.

Gallery App

“Art is not a mirror held up to reality but a hammer with which to shape it,” Bertolt Brecht once said, and it doesn’t change with time and generations. Whatever progress is achieved, whatever technologies are invented, art still remains one of the biggest sources of inspiration, education, and motivation for mankind. More and more apps are rising to support it, and this app design continues showing you one of a kind.

This is a UI design concept for a gallery app performing the artworks by modern artists. The artists can sell their artworks here while visitors are able to choose the picture they would like to buy or just enjoy the variety of art. Sure, all the navigation and composition of the layout are built around visuals performed on the dark background to show them in the best light and supported with an asymmetric grid and smooth motion.

Bar Inventory App

This mobile user interface concept is about increasing the efficiency and productivity of bar workers. The app that is connected to the special scales quickly informs the users how much drink is left in the bottle opened before. This way, the process of inventory is made much faster, easier, and more intuitive. So, the interface is focused on clear navigation and the ability to use the app in a variety of environments.

New web and mobile design collections from our team are coming soon – don’t miss the updates!

UX Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

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

Сообщение Mobile UX: 14 Cool and User-Friendly App Design Concepts появились сначала на Design4Users.