What Is 404 Page?

Technically, 404 or Page Not Found is the error message in HTTP (Hypertext Transfer Protocol) response code which is sent in case a user got successfully connected with the server, still for some reason couldn’t get the content that was requested. When it happens, for example, in situations if users try to follow the link which has been deleted, dead, or broken, the website server forms and sends a 404 web page informing the user that the content cannot be found.

Certainly, the page can have a very simple and basic appearance with just a line of copy saying that “nothing can be found here.” However, the vast majority of websites prefer to apply the customized 404 web page. And that really could be described as a user-friendly policy, also successfully supporting website or brand promotion. A correctly designed, stylish, and creative 404 page, which is shown to everyone who makes a mistake in the link, is able to not only inform users but also navigate them, entertain, or just give a moment of aesthetic pleasure.

What Does Page 404 Include?

Among widely used layout elements on page 404, we could mention:

• error message
• brand signs (logo, brand name, brand mascot, etc.)
• navigation elements (links, buttons, menus, search fields)
• decorative elements (illustrations, photos, animation)

In many cases, the design concept chosen for this sort of web page corresponds to the general stylistic performance of the website to keep the feeling of integrity and consistency. It means that designers apply the same or very close color palette, style of layout elements and graphic design, typography, and grid. Still, some designers choose the opposite way of presentation and make page 404 look totally different from all the rest of the website, in this way, perhaps, supporting the idea that this sort of error is an accident and shouldn’t be associated with the rest of the website content.

404 page at Dribbble applying the error message, two options of key links (home page or contact form), branding sign (brand name lettering), and theme image as a background

404 page for UXBooth applying the error message, the ability to contact directly to support, and the menu of content categories.

Two different approaches to showing the number 404 could also be mentioned here. Some pages apply it as the central element of the composition, based on the fact that all active internet users know what this number means on the Web: quickly scanning prominent and legible numbers, the user will be informed of the issue in split seconds. However, there are also designers who do not make the number 404 quickly noticeable in the general visual hierarchy of the page: it often happens when this page is used as the field for additional navigation and content presentation.

As for the navigation elements, the examples shown below will let you see that most of them apply the error message to the user and the link or button to the home page. Nevertheless, this basic set can be effectively extended with the following:

• a set of links or a menu providing the user with a variety of routes instead of only the home page, right from this point
• fixed header enabling a user to get to the key areas of the website instantly
• a search field, via which the user can request the needed content without getting back to the home page
• a collection of recommended posts, which could possibly draw the user’s interest
• the advertising element or link.

Creative 404 page design for the ShipDaddy website, featuring mascot animation and allowing visitors to quickly get back to the home page.

Definitely, it doesn’t mention that all of these elements should be included on one page altogether: the choice and composition should be based on thorough user research. Setting the priorities, the designer can make a decision on what should be included in the layout: if users should be navigated only to the home page, then all the other options will work as a distraction. Vice versa, if users, let’s say, look for a particular product or item,  they probably wouldn’t be happy to get back to the home page, and only there get access to the search. The solution should depend on the target audience, its needs, and wishes, and the problems, solved via the platform they are at.

The error message is usually another object for consideration: the text should be too long, the style and manner of communication (formal or informal) should correspond to the general tone and voice of the website, and the fonts should look harmonic in the layout and legible. The error message needs to let the users feel that they are respected and get them informed clearly on what happened.

One more highly debatable element of page 404 design is custom graphics. In reviews of design trends, we mentioned the growing trend of applying custom illustrations in mobile and web interfaces. Page Not Found design is one of the most convenient places to respond to this creative trend: original illustrations or unique graphics can both support stylistic performance and communication with users. No secret, people are visual creatures, and a picture is worth a thousand words: it can not only inform but also add vibes of fun, entertainment, formality, etc. This approach can transform the simple web page into a source of aesthetic satisfaction, which is, by the way, an important foundation of positive user experience.

Collection of creative pages 404

Now let’s go from theory to practice: here, we have selected a diverse set of creative 404 pages, differently applying the UX design practices and custom graphics mentioned above.

By TUBIK

By Andrew Colin Beck

By Timothy J. Reynolds

By UENO

By Congruity Hub

By Olga Baydalinova

By Anthony Lagoon

By TUBIK

By Kejia Shao

By Aleksandar Savic

by Anastasiia Andriichuk

by Lucija Frljak

So, we could definitely say that in the design of a 404 page, diversity is key: following the simple basic understanding of what information the user needs to get from this point of the surfing, designers can find hundreds of creative ways to deliver it elegantly and helpfully.

New design inspiration articles and collections are coming soon, stay tuned!

Useful Articles

Copy Content in User Interfaces: Tips and Practices

How to Improve Web Scannability

3C of UI Design: Color, Contrast, Content

How to Choose Between Light or Dark UI

How Human Memory Works: Insights for UX Designers

9 Effective Tips on Visual Hierarchy

Сообщение Meaningful Error: 404 Page Design. Inspiration for Page Not Found появились сначала на Design4Users.

In web design, it works similarly. For many users, a well-thought-out landing page will be the good experience of getting to the right destination and starting a journey around the website from the proper point. In our previous article sharing the details of the design for efficient landing pages, we mentioned that process of creating landing pages lies on the crossroads of design, marketing, user research, psychology, and other spheres dealing with people, their behavior, and solving their problems.

Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different landing pages reflecting various business goals, natures of presented offer, and visual styles supporting the purpose.

Landing page for the shop selling organic products

The aim of the presented landing page is to promote a shop of organic food. It is composed of several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions, and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. So, all the visual accents, first of all, key images of food selected carefully to immediately transfer the appropriate message to the user, support the basic theme. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation, and the visual elements were selected to support the general theme and provide the immediate visual perception of the basic idea.

We can also see that in this case, the designer chooses quite short and condensed copy blocks which provide users with basic data and give the links to learn more following the call-to-action. At the same time keywords describing the most important benefits like ‘organic’, ‘home-made’, ‘quality’ is marked out visually so that they could be noticed at once. This strategy is wise as users do not need to spend much time reading to learn about the service but see the opportunity to learn more any time they need.

Landing Page Animation

Landing page for a website providing services for everyday life

Here is the landing page concept designed for a website of the agency that presents its services. The variety of provided services is echoed by the variety of colors used in the interface. The designer’s aim was to make it lively, vivid, and attractive, creating a catchy first impression and supporting positive user experience with engaging design solutions. Dynamic motion accents add much to the general stylistic solution whereas a good combination of fonts with balanced contrast of layout elements creates the field of good visual perception and enhances readability.

magic.co landing page concept

Landing page for museum exhibitions

Museu

This example presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color, and motion. The minimalist presentation still is highly informative and successfully uses the studies of eye-tracking for applying the most important layout elements in the zones of the highest usability.

As we mentioned in the article devoted to the benefits of dark background in UI, the color of background can be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige, and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around the black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product which we can definitely observe in the presented design concept. The dark background makes the images of the exhibits look more deep and stylish while the readability doesn’t suffer being supported with the right choice of fonts.

Landing page for a non-profit charity organization

The provided example shows the design concept of a landing page for a non-profit organization accomplished. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity. The decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions. However, it doesn’t mean that every landing page should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and a concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow the call to action. So, in this case, copy becomes a tool of engagement and informing as the service is not concentrated on the product that can become the primary visual accent, but with the activities that should be verbally described.

Arts, Culture & Education Curation

Landing page for a native Mac application

SwiftyBeaver Landing Page

Here is a landing page for SwiftyBeaver native Mac application whose target audience is developers. As we can see it is designed in a minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion. The work on the landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main visual design solution was made around the colored accents echoing the design solutions of the application interface layout.

Landing page for a gym

Here is the landing page of a gym presenting all the basic information necessary for user: general description, provided services, trainers, prices, and location. Slight colorful accents and motion effects are used to make the interface more engaging and scrolling more smooth. In this sort of service selection of appropriate motivational images is vital as people associate workouts first of all with attractive and athletic body and positive energy. So, photos applied in design presentation support this particular aim creating a clear and obvious perception of the theme and benefits of the service. Bold and strong font applied for headlines adds to both fast readability of key messages and general visual consistency of all the design.

Gym Landing Page

Landing page for the shop selling travel gear

This one features the layout of a landing page for e-commerce. The company presented by it sells gear for extreme sports and active traveling so images were selected to set an immediate understanding of the main theme. The page includes a general description of the shop, presents the ability of transition to the catalog via description of hot offers, and also has testimonials part to provide users’ opinions about the service. A good combination of visual elements on the background as well as dynamic photos support the clear setting of the theme and provide the strong associative link to potential buyers engaging them and informing about the nature of the offer.

Travel Gear Landing Page 

Landing page for a service organizing photo tours

Photography Workshops 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide the quick harmonic perception of the nature of the services while the animation is provided to show the transitions between content blocks.

Landing page for a digital non-profit product

Capitoledge — Free Screensaver

The landing presented here has the aim to inform users about a free education service Capitoledge Screensaver which provides the opportunity to use screensaver for studying capitals. Here you can see the upper part of the landing page which features interesting and engaging animation activated by smooth scrolling. The visual presentation is full of air due to the light background which also provides easy readability and quick perception of the background map image.

Landing page for an adventure agency

Adventure Agency Website

Here is the concept design, presenting a landing page for an adventure agency specializing in air-balloon tours. All the information blocks are supported with bright thematic photos while copy blocks move users through the sales funnel stages. Again, light background feels harmonic and naturally adds air to the general design presentation.

So, practice shows the diversity of techniques and methods to make a landing page informative and attractive. Nevertheless, to retain users, the trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions that are accomplished according to business goals and user research. Otherwise, beautiful design will work as a hard landing immediately erasing all the positive vibes caught during the flight and that is a fast way to reduce conversion rates which are actually the main purpose of landing pages. Put usability, informative value, and functionality first, think over the logic, transitions, and intuitive navigation — and visual design will become a great support for smooth and effective landing!

Originally collected for Tubik Blog

You may also like the collections of ecommerce app designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение Creative Web Design Concepts of Landing Pages появились сначала на Design4Users.

Talking about web design, home page, in fact, is the place which should make the interaction with a website of any complexity convenient and positive. Any designer wants to create it as a place where users can find everything they need easily and quickly. So, this object of the design effort is strategically significant as most users dealing with a final web product in the vast majority of cases have a chance to interact with a home page, even if it’s not a place from which they start a journey around the website.

Earlier, we have already provided our readers with a general explanation of home page and its typical features in the issue of UI/UX glossary devoted to web design issues. This time let’s extend the basics with some ideas and strategies important to consider designing home page.

What is a home page?

Home page is the most popular name for the main page of the website. It is called home as it usually provides a starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines which means that it is the page which is visited by the biggest number of website users.

In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.

More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” The long time has passed since then but clear and a user-friendly home page is still the issue of vital importance for an efficient website.

Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.

Event Agency Webpage

What does a home page usually include?

The aspects of interaction with a website home page should advisably provide the following data:

– the nature/theme of the website: the users need to understand immediately if they deal with a company website, professional blog, e-commerce website, social network, personal blog, educational platform etc.;

– branding elements or other stuff supporting the web product identity: home page should be easily recognizable, memorable and identified by users among tons of others. Thoughtfully accomplished branding can be used to serve these goals, at least presented with a logo and corporate color palette. It plays the vital role for commercial and corporate websites which should feature strong connection with a particular brand or company; however, for non-profit or personal websites elements of identity also have a great impact on boosting usability and memorability;

– goals and utility of the website: it’s important to let users know what is the purpose of the website and what users’ needs it can satisfy. When users are provided with this sort of data during the first interaction with a website, they are ready to devote their most precious resource – time – to know more;

– ability to search around the website content: the search field or button should be easily seen and recognizable as well as located in the area of high visual intensity according to eye-tracking trends;

– navigation elements providing the ability to move to different sections and pages starting from the home page: the home page becomes the starting point of the route from which the user should get the ability to move to any essential and meaningful part of the website an also get back home any moment and from any point of journey;

– contact information and preferably data about creators or responsible persons: the home page is the place where users expect to get provided with the basic information about who creates, maintains and curates the website and how to contact people in charge if there is such a need;

– links to social networks: support of social networks is not only an effective tool for social marketing but also the good way to communicate to users. Social networks are now used by thousands of users on a regular basis, so there will be always the ones who are interested to see how the website is positioned in the environment which is common and clear for them as well as contact via usual social network tools instead of looking for the means of communication on the website. Considering and applying this trend can be one more step to positive user experience;

– testimonials or information supporting the trust to the website: mentioning famous clients or partners as well as the signs of social popularity can be a catchy factor to learn more and further investigate the website content.

Defined target audience and rigorous user research, made on the earliest stage of interaction and visual design, enable designers to sort out layout elements of the highest priority according to target audience’s needs, expectations and peculiarities of psychological perception. Preferably, the components of the highest priority should be placed in the pre-scroll area of the home page to make their perception fast.

Adventure Agency Website 

As home page is actually the front door to the website, definitely it should provide all the strategically vital information about the website which a user should be able to absorb in split seconds. It’s important to remember that not many users tend to spend much time investigating a new website: in most cases, there is a couple of minutes to attract their attention and inform about the website while they are scanning the page. If this short time is used wisely to communicate the observers about the theme and benefits they can get, they will be ready to spend more time to learn further and browse the site.

For this reason, it is highly advisable for web designers to learn more about psychological and physiological aspects of user interaction with web products, in particular, color psychology and studies about eye scanning trends, for example, the investigations by Luke Wroblewski and Nielsen Norman Group. They are deeply helpful for designers seeking to create home pages with the high level of usability which directly influences general conversion and bounce rates of websites. Knowing how users tend to scan the web pages, a designer can apply the most important elements in the zones of the highest visibility and in this way make the page quickly informative and catching attention of target users or readers.

Tubik Studio | Ice

Should all the traffic be directed to home page?

The answer considerably depends on the nature and complexity of the website. The biggest deal to think over is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. Landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses. If you want to know more about effective use of landing pages, welcome to read about the topic in detail in our article devoted to this topic.  Anyway, the approach in every case should be based on user research and then thorough user testing.

What are important aspects of efficient home page?

Among the numerous aspects essential for such an essential zone of high functionality as home page, we would define the following aspects as the ones definitely deserving attention:

• clear intuitive navigation and balanced visual hierarchy
• application of different menu types enabling to avoid overloaded page design
• utility of the applied layout elements
• readable copy easy to scan
• length of copy blocks that correspond to target users’ needs and expectations
• usage of language (vocabulary, syntax, modality, keywords etc.) which is understandable and appealing to target audience
• intensity of graphic visual content
• short loading time of the webpage
• thought-out and efficient search
• responsiveness of the webpage when it’s opened on different devices and screens with various resolutions
• effective application of keywords
• good balance of tradition and innovation
• accessibility of the home page from any point of the website
• easy and clear recognizability of the home page in comparison with the other pages of the website
• consistency of visual design solutions
• visible and informative call-to-actions
• defining most important content to get it supported and strengthened with visual design solutions.

Here are some more design concepts for home pages accomplished by Tubik Studio designers.

Comics Shop Home Page

Structure – Architecture Blog

Recommended reading

Here are some more articles we could recommend for those who would like to get deeper into the topic of home page design. Some of them are classics while the others represent the ideas around quite modern and fresh trends, anyway, all are useful for those who want to design helpful, usable and attractive home pages :

Top 10 Guidelines for Homepage Usability

6 Features a Prospect Needs to See on your Homepage Design

The Ten Most Violated Homepage Design Guidelines

5 Things to understand before designing Homepage for your start-up website

113 Design Guidelines for Homepage Usability

36 E-commerce Homepage Design Best Practices from the Experts

6 Elements of Outstanding Homepage Design

Home page principles

How eye scanning impacts visual hierarchy in UX design

Originally written for Tubik Blog

Сообщение Strategies of Home Page Design появились сначала на Design4Users.

«Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» (Erik Spiekermann)

Modern design has multiple faces, sides, and directions. Some of them are more artistic than the others which are deeper concentrated on profits and goals. However, any way it goes, design is a sphere with a different perspective. Design is a goal-oriented and problem-solving activity applying art to serve people.

«Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.» (Mike Monteiro)

Talking about the sphere of web and app design, one of the most practical and goal-oriented fields of creativity is design for e-commerce. In this domain, there are many factors influencing design decisions and lots of relevant aspects to study and research. Designing a product for e-commerce, be it a website, a web or mobile application, branding design, advertising materials, designers work within various limitations built by a particular product or service features, target audience, marketing and promotion strategy, business goals, budget, and investment plan, etc. Design becomes a tool working when used properly. Therefore, to use it efficiently, the designer needs to know the basics of business and economy as the goal of the design process in this case is creating an app or a website raising money and built on business techniques and methods. Moreover, quite often designers creating e-commerce platforms and products work in teams with marketologists, advertisers, researchers, analysts, and psychologists all of whom have a purpose to increase the level of profit brought by the final product.

So, today we decided to start collecting and explaining here basic business terms which are important in the process of digital design for e-commerce. Considering this list can make the designer much closer to marketologists and provide great help for better communication. In addition, keeping the aspects mentioned below in mind on the earliest stages of design such as UX research and wireframing is a good way to effective solutions increasing profits on the solid well-thought-out logic of interaction. The set of terms can be also useful for project managers involved in the process and managing collaboration between different sides of the same process.

Business Basics

Today’s section is focused on basic terms used in the domain of economics and business strategy mostly concentrated on sales in their broad understanding. Taking them into account and analyzing them significantly increases the chances of creating an efficient digital product.

«A satisfied customer is the best business strategy of all.» Michael LeBoeuf

E-commerce (Electronic Commerce)

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful.» (Jeff Bezos)

Definition. E-commerce is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services, and moreover — enabling the full cycle of commercial operations, including payments, delivery, and refunds.

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

Design aspect. Obviously, the success of e-commerce activity depends on several factors among which:

• quality of the product or service offered
• quality of the content presenting the offer to customers
• quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

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

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

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

Product Card Animation

Randomizer concept

Conversion

«It’s much easier to double your business by doubling your conversion rate than by doubling your traffic» (Jeff Eisenberg)

Definition. Initially, in terms of e-commerce, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

Design aspect. Today ecommerce uses a wide range of techniques, so in terms of web or app platforms, the meaning of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

For example, in our article about landing pages which are recognized as one of the strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in the case of:

• moving to direct use of a product
• subscription
• transition to the other page
• downloading an app or a file
• providing some information
• answering the question in the survey
• starting free/discounted trial use of a product
• browsing a library
• reading the more detailed description of the product or service etc.

Therefore, conversion for a webpage or app screen can mean different actions that correspond to the sales or marketing strategy of the particular business.

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the web page or app screen efficiency which is vital for business. It is a metric reflecting focus on engaging visitors with data performance and stimulating them to make the action that is a part of a business plan.

For designers, the factor mentioned above means that if they create design concentrated on conversion rates via positive user experience, their work will result in a website or app bringing profit both for user and business.

Landing Page Animation 

Read more and review the examples on this topic in our previous article

Sales Funnel

«Communications is at the heart of e-commerce and community.» (Meg Whitman)

Definition. Sales funnel (in other words — purchase funnel) is a technique that is deeply customer-focused and based on the gradual involvement of a customer in the process that potentially gets finalized with the act of actual purchase. When this technique is applied, the customer moves through several stages of involvement providing him/her with necessary information about the product and benefits persuading them to make a purchase.

The basic sales funnel includes the following stages:

— Introduction (Awareness). User gets the initial information about the product, its brand name, and its nature. In other words, the user learns that the product or service exists on the market.

— Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.

— Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.

— Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing up about core benefits of the offer, data about additional bonuses or special offers, engaging call to action, and explanation of purchase process.

— Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.

— Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribe to updates, and get the chance to repeat the purchase easily if desired.

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

In addition, sales funnel stages thought out and applied properly can work as a sort of filter letting quickly inform users about the product or service and move to the next stage for those who are potentially more interested while saving time and effort for those who are looking for something other.

However, sales funnel designed carelessly can play the opposite role: it can confuse users who are potential buyers and turn them out of the website or app without taking a chance to know proper information about the offer.

Sales funnel should be applied and designed on the basis of thorough research of the target audience and market segment. Moreover, it should be carefully tested from the very start of its implementation to measure if all the stages work efficiently. Practice proves that even minor design changes can bring big changes.

Björn

Sales Channel

«It is not your customer’s job to remember you. It is your obligation and responsibility to make sure they don’t have the chance to forget you.» Patricia Fripp

Definition. Sales channels are the ways through which the potential customers come to the point of e-commerce, be it a website or mobile application with which they can realize the actual purchase.

Design aspect. Designing for e-commerce, it is important to take into account the maximum of the possible sales channels which are really numerous on the Internet, from social networks to specialized forums, influencer reviews, and tailor-made advertising campaigns. Researching and understanding those channels gives broader prospects to the actual point of sale which you are designing for.

There are several vital aspects to remember about:

— Sales channels should be initially concentrated on the target audience. There is always the place and time to broaden the perspective as soon as the core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to a waste of effort, time, and money spent on design and promotion. Move gradually and measure the efficiency of design solutions at every step.

— Sales channels will work effectively from the initial awareness stage if they witness a strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in the brand book considering all the details of visual presentation and mission statement. Consistency is a powerful tool for both design and marketing.

— Sales channels should direct traffic to the places which enable users quickly get informed and make the actions they come for. For example, if the post on Facebook invites users to participate in the summer sale, they should be directed right to the landing page of this sale, not to the home page of the website.

The mentioned factors thought out at the stage of thinking over UX design solutions are able to make a good impact on conversion and sales rates.

Wood Products Landing Page 

Niche

«We will continue to see a convergence of the digital and physical world. Those who conquer that trend will be market leaders.» John Phillips

Definition. In business, niche means concentration of the offer on specific needs, wishes, and problems of a specific target audience. A niche market is a specialized market segment that is aimed at specific market needs with a close view of its demography, education level, level of income and purchasing abilities, etc. For example, when one company produces software generally used for creating and editing textual materials for a broad target audience while the other is adopted for specific needs of copywriters and editors (grammar checking, plagiarism analysis, synonyms prompts, etc.), the latter one presents the niche business.

Design aspect. Designing for a niche market and niche product, it’s important to learn all the details about the target audience as it is going to be quite specific and more details are usually influencing the process of design and marketing. Applying psychology of color, copy targeted at potential clients, deep analysis of their needs, and providing efficient layout, easy transitions, clear data presentation, and aesthetic features that suit this particular audience is a good way to high profit. In addition, creative ways to emphasize the specific nature of the product or service by means of design such as branding and original UI solutions can help the product stand out from the crowd and stay competitive.

Architecture Firm 

Maslow’s hierarchy of needs

«It is quite true that man lives by bread alone — when there is no bread. But what happens to man’s desires when there is plenty of bread and when his belly is chronically filled?
At once other (and “higher”) needs emerge and these, rather than physiological hungers, dominate the organism. And when these in turn are satisfied, again new (and still “higher”) needs emerge and so on. This is what we mean by saying that the basic human needs are organized into a hierarchy of relative prepotency» (Abraham Maslow, 1943).

Definition. One of the basic psychological theories widely applied in business on both micro- and macroeconomic levels. Developed by Abraham Maslow, it is focused on the hierarchy of human needs and consequently factors of motivation.

Its presentation found on Simply Psychology website features  5 levels of human needs featured by the theory:

1. Biological and Physiological needs — air, food, drink, shelter, warmth, sex, sleep.

2. Safety needs — protection from elements, security, order, law, stability, freedom from fear.

3. Love and Belongingness needs — friendship, intimacy, affection, and love, — from a workgroup, family, friends, and romantic relationships.

4. Esteem needs — achievement, mastery, independence, status, dominance, prestige, self-respect, respect from others.

5. Self-Actualization needs — realizing personal potential, self-fulfillment, seeking personal growth, and peak experiences.

Design aspect. Having read the points of the theory, it’s easy for a designer to ask: «What does it have in common with the design process?» The link perhaps doesn’t look really obvious, but it is fundamental in motivating people to use or buy products or services on different levels of economic relationships. Designing for e-commerce, which is one more type of human relationship, with a specific goal and ability to apply the mentioned theory can produce user-friendly and customer-centric products achieving its target audience and solving its problems.

Certainly, it’s great when the designer is able to involve professional marketologists in all the stages of the creative process and apply their professional knowledge and skills in design form. However, this opportunity isn’t always available. Moreover, a designer able to analyze economic basics and business factors influencing the design scheme and logic gets a higher level of proficiency.

In design for e-commerce, it is good to understand from the early stages of the process what stage of the Maslow’s pyramid the core target users are at. Answering this question, a designer is able to talk to users’ in their language and find the solutions that resonate in their hearts and minds the best. Users’ needs form their motifs, triggers that can catch their attention, words that can touch them, length of copy, and calls to actions that they are ready to accept and follow. Analyzing the level of needs and expectations, the designer is able to find the most efficient layout and informative graphic elements. Knowing and feeling the user is the solid foundation for problem-solving goal-oriented design.

Cafe Coupon App

4P Theory

“People don’t call it e-commerce anymore. It’s called omni-commerce, and it’s the idea that digital permeates every step of the purchase chain from product discovery to trial to pricing to actual purchase.” (Tolman Geffs)

Definition. The famous 4P theory, presented by Neil H. Borden and later grouped by E.Jerome McCarthy, also known as marketing mix, has become highly popular and efficient in business strategy, including the e-commerce sphere. It states that product launch and lifecycle are based on four «P» factors: product, price, place, and promotion. Business Case Studies website simply formulates it the following way:

«When marketing their products, firms need to create a successful mix of:

• the right product
• sold at the right price
• in the right place
• using the most suitable promotion.»

Marketing case studies prove that missing even one of the four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.

Design aspect. No doubt, the 4P theory is highly applicable in design for e-commerce. The Price of the product is usually the furthest part from the designer’s decisions as it is decided and given by the stakeholders ordering the design part of the work. From the perspective of Product it works only partly being applicable to those cases when users buy digital products or services, let’s say mobile applications, which also need UI/UX design.

However, talking about the other two factors we can see how actual they are in terms of design effort and creativity. Indeed, designers creating websites or apps for e-commerce, create the right Place for trading and are responsible for making this place comfortable, attractive, and correspondent to the product nature as well as target audience expectations. As for the Promotion, today’s online marketing features numerous ways of presenting the product and achieving the target audience; its effectiveness also significantly depends on design decisions.

Neglecting close interconnection and mutual influence of all those factors on the final result increases the risk of poor rates. Design decisions made on the basis of those factors supporting each other help to provide pleasant, positive, easy-to-use, and user-focused e-commerce platforms.

Tubik Studio | Museu 

Gym Landing Page 

The bottom line

The set of business terms and their definitions given above builds the bridge between business strategies and designs able to efficiently support them. However, it’s very easy to get overwhelmed with all those techniques and forget the first and most important thing. There are no sophisticated design solutions, marketing techniques, and any sort of magic that will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. The positive experience of interaction with a website will not overcome a bad experience of interaction with a low-quality product or service.

The offer is the key. Design is an actionable and helpful tool in every stage of launching, presenting, and promoting the product, informing users about it, and selling it in a fast and easy way. Nevertheless, if the product is of poor quality, the successful design of an e-commerce platform isn’t going to make it better. Think over the product and its user first, only then the design will give it the chance to beam at full.

«To satisfy our customers’ needs, we’ll give them what they want, not what we want to give them.» Steve James

Don’t miss our next article which is going to present the set of business terms useful for UI/UX and graphic designers in terms of marketing and user research. Stay tuned!

Recommended reading

UX Design for E-Commerce: Principles and Strategies
The Role of Branding in UI Design
Business-Oriented Design. Know Your Target
Business Terms in Design for E-Commerce
Two Types of User Motivation: Design to Satisfy Users
Sell Like Hotcakes: UI Designs for E-Commerce
Handy Tips for Home Page Design
Landing Page. Direct Flight to High Conversion

Originally written for Tubik Blog

Сообщение Design for Business. User-Friendly Way to Profits появились сначала на Design4Users.