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.

Product

Uplyfe is an AI-powered health app that reacts to your behavior in nutrition and exercise and provides personalized recommendations. The app is designed to help users improve their health, as well as prevent or manage non-communicable diseases (NCDs). Founded by specialists with medical and healthcare backgrounds, the product shares the philosophy that a healthy lifestyle is the best medicine. The product team is based in Switzerland.

Research and Design Approach

Creating a brand image, the design team has to consider all the major ways the brand employs to communicate with its users and customers. Even an excellent logo design may not work effectively if it’s designed in a creative vacuum without a clear understanding of where and how the brand will use it, what environment it will be integrated into, and how it will be distributed. That’s why the first stage of design is all about deep research, asking tons of questions, and building up a great deal of communication between the brand team and the design team. This process is vital as not only do designers get a more comprehensive view, but also, brand holders start looking at their product from different perspectives and asking themselves new questions. You can read more about the design process for branding in one of the earlier articles:  together with the client, we discuss and define ‘the soul’ of a client’s brand. That helps us to create strong branding and identity, ‘the face,’ for products and companies. From the brand model to the design system, we build the identity that translates the product values.

The essential point to take into account about Uplyfe’s brand image was that, in a nutshell, it is not a product solving a narrow circle of specific health problems but a comprehensive eco-system of building a healthy life, adapting its recommendations to users’ goals and performance. What’s more, it’s based on a scientific approach but simple and accessible for the broad target audiences of different ages, from youngsters to the elderly. The app aims at being used by both people with NCDs and healthy people who want to improve their lives. As the team is based in Switzerland and that’s its core market at the moment, the research phase included the analysis of what kind of health services and apps are demanded and popular in this area.

To define the design approach, user personas were developed and analyzed as well as mood boards were created and discussed to determine the compelling visual design perspectives.

Based on that, our team created a complex brand design for Uplyfe.

Brand Graphics

Logo

The final logo design is a combination mark made up of a symbol and a typographic part presenting a brand name. The elegant and curvy symbol is balanced by the simple, solid, and highly readable font chosen for the text part. The color palette is based on a combination of pure colors that provide good contrast and work well both in digital and analog spaces.

As for the symbol, it employs a triangular shape. According to the psychology of shapes, a triangle is an energetic and dynamic shape always associated with motion and direction. The lines are placed so that human eyes automatically move to the triangle’s top or in the direction it is placed. An upright triangle brings feelings of stability and balance.

Also, the symbol intentionally doesn’t feature any visual triggers or prompts that are typical for the medical theme. The major goal in identity design for Uplyfe was to step aside direct associations with medical treatment, hospitals, and the like, as the application goes beyond that and is positioned as a helper in supporting a healthy lifestyle in general. What’s more, for many people with NCDs, their states of health are a matter of everyday life, like, for example, those who have diabetes, so the app would rather avoid day-by-day connection to that from the medical perspective and focus on helping users make their life better in those conditions. As well, a part of the target audience consists of people who have no specific health issues but would like to enhance their general physical conditions, so the logo directly connected to the medical theme could create confusion about the nature of the Uplyfe service and lead to losing a part of the audience. Instead of associations with medical treatment, the logo had to transfer the strong message of a bright, healthy, and well-balanced life.

To increase the logo’s flexibility for different visual design goals, the designer developed a set of variations, including a black-and-white version, monochrome variants on light and dark backgrounds, and options with a gradient background based on the corporate palette.

Digital touchpoints: app graphics, favicon, logo animation

But brand design goes much further than well-crafted and tested logo design. Together with the client, we defined the touchpoints and channels via which the brand communicates with its customers to create an appealing and balanced visual style covering them all. This way, the brand image looks and feels consistent, and brand recognizability increases.

First, let’s take a look at how branding was integrated into the digital product. Here’s the logo animation for the splash screen: it gives a clear visual connection with the brand from the first seconds and, at the same time, makes waiting bright and dynamic while the app is loading. Also, below, you can see how the branded app icon looks for the Uplyfe application.

And here’s a glance at the favicon for the app landing page. Favicon, also known as a URL icon or bookmark icon, is a particular type of symbol representing the product or brand in the URL line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. Although small and not prominent, this interface element is essential for effective web promotion; it contributes much to web usability and good recognizability of the brand’s visual identity.

The concept of the custom branded illustration was also developed to experiment with the general style of brand graphics that could be used for social networks, banners, and other marketing goals.

Going further, the extensive set of neat icons, both in corporate colors and in monochrome versions, was designed to support visual consistency for diverse branding and user experience goals behind the application and its pages in social networks.

Landing page design

One more important channel of app promotion is a landing page. For mobile applications, it is a web page created to set another touchpoint that informs users about the nature and benefits of the app, engages them to try it, and provides shortcuts to downloading it. Moreover, sticking to the brand style and color palette, the landing page strengthens the brand image’s web presence and recognizability.

Here are different design concepts for the landing page of the Uplyfe application.

Landing page employing dark background, prominent app demonstration screens, and bright color accents

Landing page design based on light, airy background and big custom illustration in brand style

Landing page design concepts with atmospheric background photo content setting the visual connection with the theme of healthy life. The photo also works as a gaze-directing directional cue: on the slide with yoga, the woman’s fingers direct users’ eyes to the CTA element in the header.

Social networks

Naturally, digital products are mainly promoted via digital channels of communication, so the next step of brand design for Uplyfe was considering its consistent identity in social networks.

Here’s how the Facebook page for the app looked. The concept features custom header images based on graphics combining abstract shapes and recognizable objects like a microscope, providing a quick visual connection with the brand style, the theme, and the goals of the service. Also, another illustration is shown as an example of theme graphics for posts.

Here’s how the same approach is adjusted for the Twitter page.

And here’s a look at the brand image concept on Instagram and Facebook for mobile. The system of icons works effectively as the covers for Instagram highlights. Also, the general style of brand graphics for Instagram posts is offered to make them consistent, attractive, and recognizable, sharing the brand mission and valuable information for the followers.

Printed stuff: business cards, posters, lightboxes, billboards

Talking about the more tangible side of branding, here’s how the business card design looked.

What’s more, the style, curvature, and shapes used in the process of design exploration for icons let the designer develop the design system for brand posters and other stuff or merch that could be involved in marketing.

Another direction to take into account was the design of outdoor advertising to spread the word about the application in various urban spaces, such as billboards with motivational taglines or lightbox ads informing about the app’s benefits.

This project demonstrates how the comprehensive design approach covers different aspects of the ways the brand uses to connect with its customers and how much more should be done to develop an attractive and informative brand identity than just logo design.

New design case studies are coming soon; keep up with the updates.

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. Brand Identity and Website Design for Agricultural Technology

Synthesized. Website Design for DataOps Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Shpin’s Wine. Identity Design for Family-Run Winery

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

Сообщение Branding Case Study: Identity Design for Health Application появились сначала на 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.

Pottery website design

Product or Service Demonstration

Obviously, photos present the major tool for the visual presentation of goods on e-commerce websites where the principle “you get what you see” is a vital part of success. As long as you sell something physical, the customer expects to see it by default; that’s really the case when the picture is worth a thousand words. For shopping online, the quality and style of photos are crucial as they often become the main trigger capturing the customer’s eye as well as one of the key elements in the decision-making process under conditions you cannot see and touch the real goods.

Other vital aspects of using photos effectively as a part of e-commerce experience and brand presentation are originality and consistency. To stand out from the crowd of competitors, online stores need their photos to look unique, memorable, and instantly transfer the brand image. That’s why regular photo shootings are an integral part of e-commerce reality. Depending on the target audience, different stores choose different approaches to photo presentation: some make it friendly, informal, and as close to real-life as possible, while others present their goods in original surroundings or model-posing; some resources prefer studio shots others take photos in special environments. Whatever the approach, an essential aspect is staying consistent in it to make it recognizable and so that website or app visitors can feel it like a pattern and didn’t handle too much cognitive load. As well, a consistent approach to the cross-platform photo presentation of the brand photo content in different marketing channels, such as social networks, advertising banners, newsletters, etc., sets a strong visual connection and helps shoppers recognize the brand whenever they see it.

A consistent approach to a visual photo presentation of the items on the e-commerce website for a fashion brand

Anyway, the photos should demonstrate the stuff from different angles and perspectives, especially on product pages. Another thing to keep in mind is that items photographed on models or in the proper environments have more chances to draw customers’ attention and look more convincing. It doesn’t mean that object photography doesn’t work, yet in most cases, seeing an outfit on a model, a toy in the hands of a kid, or a set of dishes on the served table lets the buyer easily imagine it looks and see its benefits. So, quite often, e-commerce platforms combine both types of photo presentation: a clean object photo with no distractions as well as its photo on a model or in the surroundings of use.

Certainly, it works the same way to demonstrate the services that can be visualized with photos.

Website for a massage services company

Creative approach to using photo content for not only setting a visual connection to the provided services of a cleaning company but also as a part of scroll animation

One more popular case often demanding thorough attention to photo content is the situation when the person or company has to build an online portfolio website. The visitor’s attention span is very short, so works in the portfolio should be dressed to impress. In this case, photos often become the major visual attractor and help to build a consistent presentation.

Fashion models portfolio website

MYWONY wedding dresses brand website

Setting Atmosphere

One more point photos are highly effective at is the ability to instantly transfer the visitor to the needed atmosphere. Properly chosen quality photo creates the mood, and this way engages the users to not only see the content but also somehow feel it, connected to their own experience and imagination.

Gin School website design

Home page for the ballet company website concept

Due to that, in particular, atmospheric theme photos are quite popular to be used in hero sections of websites and landing pages. This way, designers activate the factor of emotion and delightfulness from the very start of interaction with the interface.

Website design concept inspired by Moesgaard Museum

One more popular UI design trend of a recent couple of years is using photos as background images. Not only does this approach make the screens visually and emotionally appealing, but it also supports the feeling of the integrity of all the layout elements. On the other hand, it demands deep attention to contrast and legibility of all the elements, which may be harder to achieve than in the case of monochrome background.

Website design concept inspired by Moesgaard Museum: the home page features an atmospheric full-screen background photo.

The impressive 404 error page for the website devoted to saving the oceans features an impressive full-screen background photo, instantly communicating the problem to the visitor.

Lumen Museum website pages

Humanized Connection

Consciously or unconsciously, people tend to be curious about other people. What’s even more important, in many cases, human photos look more convincing and trustworthy to us. No wonder one of the key goals behind the photos on websites or apps is making communication more human-like. Photos of teams working on a product, pictures of people to connect to, from founders and top managers to support personnel, photos of clients providing testimonials or reviews, authors of articles in the blog or media, and many other cases – all of them aim at making the user experience more human and trustworthy.

Nonconventional Show interview podcast website

Website of a fashion designer brand 

Design concept for a website for a photography contest

Website design for Mayple, a fully-managed marketing services marketplace designed to help businesses work with experts.

Directional Cues

A directional cue is an element of the user interface giving a visual hint on a certain interaction or content and helps the visitor see it quicker and easier, just like road signs and signposts do in the physical world. Directional cues are an essential factor in enhancing digital product usability, as they:

• enhance the page or screen scannability
• strengthen the visual hierarchy
• improve navigation
• increase conversion rates.

Photos integrated into the interface can also cover that role. They mostly function as pointers (a photo of a human, animal, or object pointing at the needed element and this way attracting users’ eye to it) or gaze direction (a photo of a human, animal, or character whose eyes are directed to the needed element this way stimulating a natural urge of users’ curiosity to check what it is).

The hair beauty company website uses a hero image on the home page that works as a directional cue: the model’s eyes attract your attention to the zone of CTA elements.

Guides and Manuals

Being highly effective and common in setting a natural visual connection with the physical world, photos often become the primary demonstration tool in diverse manuals and guides. Be it a recipe, a guide on how to use a device, to knit a scarf, to tie a neckerchief in 20 trendy ways, or even how to take a photo – whatever kind of instructions is given to a visitor, supported with good photos it will work much more user-friendly and will be far handier than just a text.

Dessert recipes blog

Illustrative Article Images

One more goal efficiently covered with photos is illustrating articles and online editorials. Photos can add visual support to the topic of the article and strengthen the text.

The rule of thumb here is not to use photos as visual fillers. Both title images and photos included in the article have to work as visual helpers, not distractors, so make them meaningful, informative, or at least adding the necessary mood if the article is a piece of the emotional story. If you are telling a historical or retrospective story, find proper archive photos; if that’s the article about a specific place, don’t use stock photos to show something similar but get the ones from that particular location. Relevance is a key to successful photo usage in this case.

Online editorial about different generations

Bartending encyclopedia website

Web design concept for an online magazine

Creating Emotional Appeal

Another big reason to integrate photo content is the emotional appeal added to the user experience. Whatever logical and thought-out we try to make our actions, the emotional background of the situation plays a crucial role in engagement and decision-making. And that is the aspect where images in general and photos, in particular, are super helpful. They set strong associations and build up the necessary atmosphere, often even before a visitor starts reading, as images are perceived faster than words. With the properly chosen photo integrated into the web or mobile layout, designers are able to capture not only the user’s eye but also transfer the needed mood.

Confectionery website design setting strong emotional appeal

Online editorial about the history and development of skateboarding

Book festival website

Advantages of Photos in Interface Design

The significant advantage of photos is their ability to connect what users see on the web page with a real world of physical things and live people. Photos have been a part of human reality for many decades, much before the Internet’s advent, so this kind of visuals is fairly native, close, and clear for us. What’s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life for many people – so, being used on a website, it sets strong connections and associations.

What’s more, photography is also a kind of art. With them, you can set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and creating the required emotional background. That is one of the reasons for choosing photos to support articles on blogs and media websites.

Website design for a horse-riding club

Points to Consider

Using photos in web design, consider the following tips:

• download high-resolution photos
• optimize them for the web/mobile so that too big images don’t overload the page or screen – loading speed is a crucial factor of positive user experience
• give the images enough air to breathe – keep the balance of negative space
• remember about responsiveness and test how the images look on different screens and devices
• don’t use photos as just decor – let them speak to users, transfer a message and support all the other layouts.

Where Designers Get Photos

There are three several ways:

• original photo production for the particular project: this is the most expensive option, but the photos will have the highest level of exclusiveness;
• paid stock photos: you buy a photo you need from a photo stock that offers a variety of shots. This may be cheaper than custom photo shooting, but you may spend a lot of time searching for the photos corresponding to your tasks;
• free stock photos: you take the photos from the communities or teams that share them for free. It is the cheapest option, but you have to be ready that other people may do the same so you’ll have to think well about how to make your design original under these conditions.

So, it’s easy to see that the way you choose depends on a specific project, its budget, and goals.

Anyway, even if you are the one who runs a blog or charity with no budget for visuals or if you are creating a design concept for your portfolio, free photo stock websites offer a lot of high-quality content now. As well, some stock photo banks offer a mixed scheme, with some content or formats available for free and more on subscription; as well, from some of them, you can also order unique photos for your goals or buy already available photos to be sure they belong only to you.

Among them, the following resources are often used for good photo content:

• Unsplash: it’s a community of photographers from all over the world sharing their photos for free. Photos are featured under thorough curation, so you won’t find trash there
• Pexels: a big bank of free stock photos on a variety of topics
• Pixabay: a huge stock of free images, not only photos but also illustrations and vector graphics.
• Shutterstock: a huge bank of stock images on different topics, most content is available with a paid subscription
• Depositphotos: another massive library of stock images, especially for business and marketing goals, mostly available with a paid subscription

Useful Articles

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

User Experience Design: 7 Vital User Abilities

5 Basic Types of Images for Web Content

UX Design: Types of Interactive Content Amplifying Engagement

The Anatomy of a Web Page: 14 Basic Elements

 10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

User Onboarding Design: Practices and Tips

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

Сообщение Photo Content in User Interfaces: When and How It Works появились сначала на Design4Users.

Onboarding tutorial screens for the Vertt application

What Is Onboarding?

Let’s start with the basic terminology. The concept of onboarding comes from the sphere of employment and HR. It marks special steps and techniques aimed at helping newcomers to adapt to the new conditions and get comfortable to bring out good results as soon as possible. For most people, a new job is a sort of stress which demands effort and consideration, so a little help can make the decision-making process easier, the emotional background smoother, and performance growth more harmonic. Special tactics enable to correct possible inconveniences and make people more confident in the new place, which means they become productive and socialize with their colleagues faster, bringing benefits to the company.

The sphere of user experience design for digital products quickly absorbed this idea together with the term. Here onboarding means the set of techniques and interactions whose objective is to comfort the user and give a concise introduction to the product.

Considering the fact that users, especially first-time ones, are not going to spend much time trying to understand how the product works, one of the vital issues in user onboarding is deciding upon clear priorities. Users have not only limited time they are ready to devote to learning about the new product, but also limited capacities of working memory. Even if there’s much to tell about the product, don’t focus on overwhelming visitors with everything at once. Setting the priorities, designers and stakeholders decide which dose of information is needed for a particular stage: tutorial, wizard, tooltips, instructions and the like should feature the most essential information first.

Onboarding screens for the app on bee-keeping

Onboarding Goals

There are three basic goals that UX designers strive to achieve with onboarding screens and functions.

• Greeting: well-crafted onboarding process starts the communication of the product with the user in a natural, engaging way
• Information: at that stage, it’s crucial to tell users how the app is going to help them or make their life better
• Engagement: onboarding contributes much to set emotional appeal and encourage users to learn and try more

So, logically, you use onboarding screens and most elements for first-time users but not to annoy those who are already using it with the information they already know.

Flower Store application onboarding

Onboarding Elements

There are different elements and techniques of the general onboarding experience.

• app tutorial, aka first-look tour: a set of screens that quickly introduces the product to a newcomer and convinces the user to try it
• welcome messages: short messages on welcome/splash screens to greet the user and set the communication; quite a typical way to ignite the onboarding process; often feature a CTA element
• progress bars and indicators: the trick based on the natural human urge to complete the tasks. Progress indicators (dots, dashes, etc.) included in the user interface stimulate a user to complete the onboarding and creates an understanding of what stage of it is currently active
• explainer video: the video review of the product benefits and functionality explaining the major points to the user may work as a dynamic and effective way to quickly introduce the product.

The explainer video designed for OffCents App

• in-context and action-driven tooltips: prompting messages tied to particular layout elements or user actions, usually appearing in modal windows rather than separate screens
• empty state tips: these may appear in the zones which in the future will be filled with the content created by users, but while they are empty, space can be used for good and informative prompts
• checklists: as well as progress bars, this onboarding technique motivates users to complete the initial set of steps. Even more, it may become the element of gamification (for example, you complete the full list of points and get an achievement or open more functions)

Behance uses a checklist strategy to guide users in completing their profile

• hot spots: this onboarding element attracts attention to important zones or controls that risk being missed or unnoticed by an inexperienced user
• personalized onboarding: the approach is built on setting user’s preferences from the very start and can often be found in products based on interaction with a lot of diverse content (like Behance or Pinterest)

Personalized onboarding experience for the Perfect Recipes app helps users to set goals and restrictions this way making the app performance tuned for their specific needs

Sure, this list doesn’t mean that all of them have to be integrated into any product. In each particular case, the user experience designer has to find the balance and pick the points that work for both users and the business goals behind the product. What’s more, to organize onboarding right, explore the mental models of your target users via user research and usability testing: this way, you will be able to predict more precisely when and where users need help and prompts.

Onboarding Design Practices

Use Images in App Tutorials

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

Cute and funny 3D animation created for the onboarding experience in the app for the studio for children holding classes on 3D modeling and animation.

3D animation for the Status App onboarding

Design trends demonstrate the increasing popularity of custom illustrations created for specific interfaces. App tutorials became the favorable ground featuring a variety of styles and approaches. In many cases, illustration becomes the center of the composition, and its aim is to present a specific feature or benefit in an attractive and easily decodable way. Another popular approach is applying a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds. What’s more, you can make the images work as directional cues helping a user to understand the navigation and layout easier.

The onboarding screen for the Finance Tracker application features a custom illustration that is not only trendy and eye-catching but also works as a directional cue together with an arrow to attract users’ attention to core interactive elements

Don’t Be Wordy

In writing for user interfaces, words are power. However, there are two simple rules to uncover that power in the best way: say words short and make them helpful. Here’s the time to realize that writing a short informative sentence is much more complicated than writing a long text. You have to find a proper way not to waste those precious seconds that the user is ready to devote to tutorial screens or tooltips. Some creative teams involve a professional copywriter for this task to create texts that make every single letter count. With the writer or not, anyway, take time and effort to create a concise, attractive and clear copy that applies language appealing to the target audience and corresponding to the objectives behind the product. As well as design solutions, the copy should be tested as much as possible to find short ways of informing users.

“The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at ‘muddling through’ have failed.” Steve Krug once mentioned, and that’s the point to remember. When you are tempted to manifest your eloquence, just don’t overdo it here: tooltips, tutorials, and instructions are not the place for it.

Another thing to remember is that any text is not only an informative part but also a visual element of design. As well as the icons, fields, buttons, illustrations, toggles, and other layout elements, it literally occupies the part of the screen or webpage like any other graphic component and influences the general stylistic presentation. The success of the efficient copy directly depends on not only the message and content but also design solutions as the choice of types and fonts, background, and even placement of the text. All that affects the level of readability, so if these points aren’t thought-out well, the copy risks getting much weaker, even being highly meaningful.

The short tagline for the My Baby App onboarding screen expresses the essence of the problem it solves and leaves most of the screen space for the beautiful 3D illustration

Focus on User’s Needs

Have you ever dealt with parents introducing their children? When they start telling about the kid’s achievements, strong points, and features, it’s not that easy for them to stop. The same happens when you introduce your product to a new user. For you, it is the clot of ideas, iterations, effort, time, money, benefits, valuable functions, and much more else. No doubt, telling about it, you want to share that feeling, to unveil as much as possible. That’s a natural temptation, but sticking to it is a mistake. For a user, it’s just another app, tool, or website, a bit of a step into the unknown. So, decide what benefits and functions are the most needed by a target user and tell about them in a focused and effort-saving manner instead of trying to overwhelm the user with everything possible at once.

Even the quite concise textual content on the onboarding screens of the app devoted to bees and honey is organized with a clear visual hierarchy, with the most essential information in headings and a bit more details in the body copy

Add Life with Animation

One more way to add not only meaning but also fun and engagement is animation. Motion makes interaction more dynamic; it breathes life into the interface, creates wow effects, and catches the user’s attention. Even more significant point is that animation can make important details more noticeable. On the other hand, motion can increase the time and traffic needed to get it loaded, so it should apply it wisely and discuss with developers the aspect of its technical realization.

Emotional and eye-catching 3D animation designed for the onboarding interaction with the My Baby app 

Allow for Skipping

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

Mind the Context

In-context tooltips are a good way to support the users in the process of trying the interface functionality. They appear in the process of interface exploration one after another, feature after feature, in one-time dismissible modal windows to explain the ways to use a particular function or highlight a specific benefit.

Amazon uses tooltips to drive the non-registered users to sign in, and in the same way, informs about the vital benefit (international shipping) that may have a great impact on decision-making

Use Empty States

For the products, where users interact with content actively, at the early stage, they quite often deal with the spaces that are empty because the user hasn’t filled them with personalized content yet. For example, these can be the screens of a wishlist, projects, collections, etc. While they are empty, using them for onboarding prompts and further engagement is a good idea.

The Dropbox empty page for starred items features a funny illustration and a short, well-written prompt on how and why to use this function

Mind the Emotion Level

Making a digital product emotional is an essential aspect of setting a solid connection with the target users, and design is one of the most flexible ways to do it. Yet, make sure you find the right way to set the needed emotion and learn what works for your audience: user research plays a super important role in this perspective. Don’t design onboarding and write the copy for it until you have a clear vision of the tone and voice of the product’s communication with its users. Don’t go too far with humor, especially with a product aimed at users from various countries: what sounds funny for you can be not funny or even offensive for your users. Make onboarding emotional but do it carefully.

Don’t Overplay

Honestly speaking, many users don’t need instructions or help all the time. So, don’t overplay in your trying to be helpful. Onboardings elements start playing on the wrong side when:

• there are too many of them
• they are too distractive
• they are unclear
• users aren’t able to skip them or dismiss them (like “don’t show me that anymore”)
• they aren’t bearing any useful information.

So, keep a good balance of user support and never miss a chance to check it with user testing.

Summing up, it’s easy to see that well-crafted onboarding is the way to set the bridge between the product and the user, create the emotional background, quickly present the core benefits, and make a good first impression.

Useful Articles

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

UX Design: Types of Interactive Content Amplifying Engagement

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

Visual Dividers in User Interfaces: Types and Design Tips

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

Light or Dark UI? Tips to Choose a Proper Color Scheme

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

Сообщение User Onboarding Design: Practices and Tips появились сначала на Design4Users.

For the last decade or so, we’ve witnessed the rocketing rise of demand for diverse delivery services, getting even more popular in the world of online shopping. In this case study from the tubik agency design team, we will unveil the story of our collaboration with one of them: welcome to check the creative process of identity design and mobile application for Carricare, the service that helps customers get their parcels delivered safely and in perfect time.

Client and Project

Carricare is a service based in the UK; its objective is to effectively connect couriers and customers expecting the order to set perfect conditions and timing for delivery. It is an instant and real-time notification platform for delivery couriers that helps clients with last-minute delivery notifications, allowing them to manage their time better. Therefore, it aims at solving a fundamental problem of courier delivery, when the parcels aren’t safe if brought at the wrong time and left just at the door – or leading the courier’s coming up with the idea of what to do. Automating different user scenarios, the service makes the delivery process smooth and effective for both the courier and the addressee.

The first stage of brand design was all about absorbing, sharing, and analyzing various information. We dived into discussions about the client’s goals, visions, and brand value, as well as researched the market segment to develop a solid brand approach before the actual design of its identity started.

The service mainly focused on two critical aspects appreciated by target users: the safety of all sides of a delivery case – couriers, clients, and the delivered parcels – and the high convenience of taking them for the addressees. That’s how the brand name, Carricare, was up, combining two major concepts – carry and care – and echoing the idea out into the tagline: we carry and we care about your parcel, your time, and your convenience.

In the research process, the graphic designer emerged into the topic of visual elements that support the delivery process in the United Kingdom, from history to the modern state. The mood board of diverse stamps and icons transferring important messages, like the parcel’s fragility or the need to protect it from wet conditions, inspired the general approach to branding, echoing these well-recognized meanings and adding new ones to the set.

Another key aspect to consider was brand colors choice. In this case, the brand uses a bold and contrasting combination of colors, all well-grounded by the service essence: primary colors are blue and red that echo the UK flag colors, while the additional color is cardboard color setting the apparent association with packaging and boxes used for parcels.

So, logo design presents a combination mark flexible for plenty of practical goals. The bold typographic part is supported with a set of informational graphics reflecting the parcel delivery theme:

• parcel symbol
• fragility symbol
• water protection symbol
• parcel in hands symbol, transferring the ideas of courier delivery and care for the parcel
• line waves adding association to the typical postal stamps
• the heart symbolizing care and using the color contrasting to the rest of the graphic elements.

Here you can take a look at the ideas of different logo options and elements’ placement to cover various brand identity goals.

To make the logo work in an even more dynamic way in the digital environment, we’ve also made the animated logo version.

Here’s how the logo works on the branded boxes. Take a look at how QR code presenting the primary interactive element is integrated into the wavy pattern.

And these are the stickers, another key element developed for the courier and addressee interaction.

In addition, to satisfy the need for custom graphics, a special consistent system of icons was developed to link together branding and app design, also echoing the branded color palette and reflecting a variety of user scenarios that may arise.

Another task for the creative team was to think over a variety of graphic assets for marketing goals and outdoor advertising, such as posters, billboards, city lightboxes, etc.

Posters design

Billboard design

City light box design

Intending to strengthen online marketing and amplify brand recognizability, we’ve also worked on the general stylistic concept as well as the set of design templates and ideas for social media posting and advertising that would consistently reflect the identity.

So, this stage of the design process resulted in an eye-pleasing system of identity elements combining aesthetics and practicality, both essential for the service brand image.

UX Design

The mobile application was designed to meet the needs of two different categories of users: the courier and the recipient. The app offered several scenarios of delivery flow and was based on the delivery process improvement as a core feature: it aimed at providing successful parcel deliveries even when the recipient is away. Approved couriers scan the QR code, and the recipients get a notification and choose if they just open the door and get it when they are home, get the parcel back to the depot, leave it with a neighbor, or ask the courier to leave it in a safe place.

The user interface of the mobile application is nice and clean in the best traditions: minimalist and highly functional layout, readable typography, light airy background, and bright color accents make the app intuitive and easy to use on the go and for users of different ages. Custom illustrations help to not only enhance the messages but also add aesthetic and emotional appeal to the interface as well as keep close bonds with the rest of the branded items.

One more significant detail to consider was the app icon design that would be noticeable and digitally friendly, contributing its two cents to the general brand style of the service.

Working on the Carricare project, our team has got another great experience of connecting the physical and digital worlds employing beautiful and functional design.

New design case studies from our team 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.

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Roebuck. Mobile Design and Illustrations for Educational App

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

FarmSense. Identity and Web Design for Agricultural Technology

OOP. Brand Identity Design for Online Flea Market

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

Сообщение Case Study: Brand Identity and UX Design for Safe Delivery Service появились сначала на Design4Users.

Stop Plastic Website

This web design project is called StopPlastic and deals with a hot and important topic of today: our world is overloaded with plastic, and this issue shouts for global attention. The website tells people more about the problem, its influence on nature and our future, and information about how to solve it.

Limited and contrast color palette, readable text blocks efficiently supported with negative space, impressive visual and video content, and smooth motion for interactions make the user experience emotional and engaging. Visuals are mostly presented by artistic and eye-catching collages and theme photos. Typographic hierarchy is made super solid to let users quickly skim the text content and not miss the essential ideas.

Ecotourism Website

This website was designed for a service for people that want to try ecotourism and have some rest deep in nature and far from the urban hustle and bustle. The home page features a stunning hero illustration. The Discover web page tells and shows more about the destinations and types of holidays to book, with the video integration to amplify the effect.

The design shows the balance of readability and decoration in typography choice, solid visual hierarchy, and thoughtful integration of different types of visuals: photos and custom theme illustrations.

Mobile adaptation helps to save visual harmony and allows users to interact successfully with the website from any device.

Zero Waste Website

“We abuse land because we regard it as a commodity belonging to us. When we see land as a community to which we belong, we may begin to use it with love and respect.” Aldo Leopold’s words are full of truth, and luckily, that philosophy seems to inspire many people these days. This web design concept is also of that kind. Take a glance at a website devoted to a zero-waste lifestyle: here, people can communicate, get useful information and tips as well as buy eco-friendly and reusable stuff.

Promoting the philosophy of minimalism, sustainable consumption, and zero-waste living, the website design also sticks to minimalistic performance and navigation.

The product pages are built around the prominent product image and engaging animation of a bird to set a strong association with nature. The little bird image also works as a visual mascot uniting different pages of the website.

And here, you can check how the choice of color works on a product page, making the experience engaging due to smooth dynamic animation.

Blog pages feature lovely theme illustrations, split-screen presentation to make the text content scannable and readable, and an engaging loading animation. Here you will find the bird mascot supporting the integrity of transitions between pages.

And this page makes a part of the theme illustration work as loading animation.

Save the Oceans

This web design is devoted to a vital global problem of awful pollution of the world’s oceans, which has already become a disaster. Look at the user interface and interactions designed for Save the Oceans, a charity website gathering the community of people to make our planet a better place for future generations. The instant atmosphere of the theme is created due to the appropriate color palette giving a strong visual association to the majestic power of the ocean as well as atmospheric photo and video content.

The airy layout, bold typography, and ocean motifs transfer the theme to the visitors from the first seconds and make the content scannable and attractive, whatever the device they come from.

The 404 page deserves special attention, showing another piece of a creative idea by turning the error page into an atmospheric image supporting the general message of the resource.

Innovative Energy Service Website

The issue of alternative power sources and sustainable building is one of the hottest now, arising multiple innovations and new products. This web design concept is also devoted to this theme: it’s a home page design for the company providing services in new-age sustainable energy production, consumption, and even distribution for community needs.

The page features a digital theme illustration in the above-the-fold area to quickly set the visual associations and amplify the message provided in the tagline and core description block.

Environment Protection Community

With all the global problems our planet faces today, communities of people concerned with them are growing to prevent the negative impact. This web design example gives a look at a home page designed for the website of the eco-aware community consulting businesses and manufacturers, as well as launching projects devoted to environmental protection.  The composition and color palette of the hero illustration support the emotional appeal and create an instant message about the theme. The visual hierarchy of the webpage sets the basis for scannability to make the major information and CTA button instantly visible.

New web and mobile design collections from 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 they are for you.

Design for Sales: 10 Creative UI Designs for Ecommerce

Steal the Show: Creative Web Design for Diverse Events

App Design Ideas: 7 Nifty Mobile Application Design Projects

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

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

Web Design: 26 Examples of Creative Landing Pages

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

Logofolio: 16 Logo Designs for Different Business Goals

Originally written for Tubik Blog, graphic content by tubik

Сообщение Web Design Examples on Environmental and Ecological Issues появились сначала на Design4Users.