Tag Archives: ecommerce

gourmet_herbs_website_design_tubik

Sell Like Hotcakes: UI Designs for E-Commerce.

In many cases when we are buying something, it’s not just about getting new things. It’s often about feeling and memories, dreams and achievements, changing ourselves inside and outside, sharing and giving, improving and learning… The advent of new technologies opened new perspectives for both shoppers and sellers, and the process of upgrading this type of relations is in active progress. A decade or two ago, buying something on the Internet was not included in a typical daily routine while now getting things and services in a couple of clicks cannot surprise anyone.

 

This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery — and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in e-commerce sphere, the connection between design and profits is tighter than anywhere else.

 

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications and landing pages aimed at selling products and services.

 

Website for a florist shop

 

web design florist store ecommerce

 

Flowers present the popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan and shares some information about the service. The header gives the instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist and shopping cart presented with minimalistic stroke icons. The footer includes the links to important service pages and accounts in social networks.

 

florist shop website design

 

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

 

florist shop website design

 

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

 

Application for the e-commerce jewelry store

 

jewellery ecommerce app UI

 

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting the instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

 

jewellery ecommerce app

 

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

 

Application for a cinema

 

cinema_app_ui_design_tubik

 

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment — a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

 

cinema app interaction ui animation

 

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

 

Landing page for dance academy

 

dance_academy_website_interactions_tubik

 

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is the effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

 

Website for herbs and spices store

 

web design UI tubik studio

 

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while hamburger menu hides the extended catalog. Moreover, here designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

 

Bookshop Website

 

online_bookshop_website_design_tubik

 

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items and reviews from readers. The visual presentation is strengthened with slight scroll animation.

 

bookshop website animation

 

Landing page for selling exhibition tickets

 

museum website

 

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service — a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates and prominent call-to-action for buying a ticket.

 

Landing page for an online travel gear store

 

Travel Gear Landing page by TUBIK

 

Here is the layout of a landing page: the company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

 

Website for a bakery

 

Bakery website design case study tubik

 

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

 

Randomizer for the online furniture store

 

tubik studio design UI

 

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

 

Landing page for online farm grocery

 

Landing Page Animation Tubik Studio

 

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

 

Website for the fashionable clothes shop

 

fashion clothes ecommerce website

 

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

 

Useful articles

 

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful

Hit the Spot: Design Strategies for Profitable Landing Pages.

UX Design for E-Commerce: Principles and Strategies.

Business-Oriented Design. Know Your Target.

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics

Landing Page. Direct Flight to High Conversion.

Case Study: Saily App. Designing C2C E-Commerce App.


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

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

These days e-commerce is evolving by leaps and bounds presenting new interesting challenges to designers of user interfaces. Websites and mobile applications enabling users to buy and sell need constant attention and improvement to correspond to the current concerns. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the strategies and practices of UX design for e-commerce. Welcome to listen and follow the updates!

 

If you want to get the set of episodes devoted to the theme of business terms and processes in the design aspect, subscribe here and get them right into your inbox.

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

ux design for ecommerce tubik blog

UX Design for E-Commerce: Principles and Strategies.

Quite long time ago known British author and scholar Thomas Gray stated: «Commerce changes the fate and genius of nations.» For the last decade, commerce has got hundreds of new ways to reach the customer, especially with the leap of innovation in technology and its growing role in everyday life. More and more buyers are turning to the experience of shopping online, more and more sellers start new channels and methods responding this trend. And this is the sphere in which design of positive user experience directly moves the stakeholders to profits. Today we are talking about UX design for e-commerce.

 

What is E-Commerce?

 

As we mentioned in our free ebook «Design for Business», in general terms, e-commerce (Electronic Commerce) is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

 

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

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

The role of design for e-commerce

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful» says CEO of Amazon Jeff Bezos, and it’s hard to argue. Obviously, the success of e-commerce activity depends on several factors among which:

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

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

 

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

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogs etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.

 

tubik studio landing page toys

Handmade Toys Landing Page

 

On that ground, let’s check the details in three key perspectives whose combination in design makes success for e-commerce platforms: business aspect, UX aspect and UI aspect.

 

Business Perspective: Branding and Promotion

 

Websites and mobile applications for e-commerce are (well, should be) always the products created within a particular business scheme. It means they are the part of a certain business plan with the specific goals in mind and the planned ways to achieve them. Therefore, design for this sort of products definitely starts much before the first real line appears on the paper or screen. There are several important issues which should be considered and agreed upon before actual design starts.  Among them we would mention the following:

 

USP of the product. It’s essential to set which benefit (or set of benefits) will differ this website or application from the others and make it the core value presented via design.

 

defined target audience. In e-commerce, it’s important to set who your buyers are from the initial stage of the project. Knowing their age and culture, potential problems and wishes, level of tech literacy and trust to the idea of online shopping, the social circles influencing them and aspects forming their habits, designers can be more precise searching for the shortest way to successful purchase.

 

positioning, tone and voice of the brand. How would you describe your brand? Is it friendly? Fun or serious? Mass or luxury? Easily available or exclusive? Does it communicate to potential buyers in formal, informal or semi-formal style? Does it open much or mostly keeps reserved silence creating the mystery around the offered goods? These questions may seem far from business which has to be all about finance, profits, points of sales and other stuff of that kind. Still, these issues present the number of features which will set the future brand image. And design is somehow going to be its face, outfit and make-up.

 

marketing and sales channels. No doubt, it’s hard to immediately set all the channels for selling and promoting the future product; however, effective business planning means thinking over the core of them from the start. It will enable design team track and support the consistent experience of both getting to product and actually interacting with it. Even more, designers take active part in setting and strengthening marketing and sales via variety of means from branded items, landing pages and product videos to exclusive photos, posters and banners attracting customers to the platform where they actually can buy.

 

— type of business relations. Type of business relations based on target customers deeply influences the core aspects of UX design. Set from the start whether it’s B2C, B2B or B2C to create proper layout and predict possible user behavior.

 

typical environment of use. Designers need to know when, where and in which conditions users will typically use the website or app: these factors have a considerable impact on the decisions about layout, color scheme, typography, transitions and interactions, which all need to have the global objective to make the process of shopping easy, quick and enjoyable.

 

gym landing page concept by Tubik

Gym Landing Page

 

It’s easy to see that all the mentioned points directly influence design solutions as well as techniques and approaches for their realization. It means that the best way to go is to involve designers into the discussion together with stakeholders and marketing specialists at early ideation stage if it’s possible; if not, then specification and tasks provided to designer afterward have to include maximum information about those aspects. In case you work in outsource design team, make sure you get this information to be more concentrated on the key aspects of the task, and if not, communicate with the clients as long as it’s needed to get all those points clear. This communication will save many hours of iterations, which happens in cases when design is started out of the thin air without the basis of information and goals.

 

UX perspective

 

Talking about e-commerce, it’s vital to understand that selling the goods once via the website or mobile application is the minimal program of actions. What stakeholders of the business really aim at is having this user buying via their website or app again and again. User retention is the direct condition of growing profits. And we have to admit that this aspect makes e-commerce sphere highly attractive for designers. The objective which should be achieved is clear and simple: people have to reach the e-commerce platform and buy items offered on it.

 

Make no mistake, positive user experience is the key thing for user retention. In case of e-commerce, the four key aspects of UX are quite clear:

  • utility lies in the nature of the product: it helps users to choose and buy things and services they need.
  • usability has to make the customer journey clear and easy, without unnecessary clicks, time lost on loading overloaded pages or inconvenient menu, frustration of not getting feedback from the system etc.
  • accessibility has to bring up design which can be used by different categories of users, for example people with disabilities (dyslexic, color-blind etc.) or low level of tech literacy.
  • desirability means that the app will get the look and feel which will make the experience enjoyable and users will wish to get back again.

 

bookshop website animation

Bookshop Website

 

Among the core aspects dealing with the mentioned issues and considered from the early stages of design like UX-wireframing and user research, we would mention the following.

 

Intuitive navigation

 

You can have an amazing website with stylish and trendy design and breathtaking images, but the success of it will be measured not by the number of «wows» it will bring out. The efficiency is measured simply: by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

— what company or brand they are dealing with

— what page they are at

— where the menu is

— how they can get back to home page or catalog

— where is the search and filters

— how long the page-loading process is going to take

— how they can see the detailed information about the item

— how they can choose between the option for the same item (color, size etc.)

— how they can pay for the item

— how they can save the items they would like to get back to later

— how they can contact the seller

— how they can see the rating and reviews of previous buyers etc.

 

Bakery website design case study tubik

Bakery Website

 

Every button, link and card can play the crucial role and change the conversion significantly. What’s vital to bear in mind: in terms of intense competition we have in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations. What they demand from e-commerce is the experience which is faster, easier and more convenient comparing to going to the actual store. If you don’t give it to them, they will look for it somewhere else.

 

Sales funnel

 

Sales funnel (in other words — purchase funnel) is a technique that moves the customer through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase. As we described before in the book, basic sales funnel includes the following stages:

 

  • Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.
  • Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
  • Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
  • Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.
  • Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.
  • Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

 

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

 

home page landing tubikstudio

Comics Online Shop

 

Effective presentation of the items

 

The layout of the product pages or screens is another core aspect to think over. On the one hand, it’s advisable not to overload the page with too much information which will overwhelm users and can distract their attention from the major goal — to make the purchase. On the other hand, users aren’t ready to go from one page to the other to get different information about the item. Therefore, the designer has to take the time for thorough research of the issue and find the right balance of data given on one screen. The analysis of target audience and user testing can give the clues what information is required by the target audience for the specific categories of items or services.

 

jewellery ecommerce app UI

 

jewellery ecommerce app

Jewellery E-Commerce App

 

UI perspective

 

Being concentrated on not only logic and transitions but also looks and style, UI design stage also contributes much to the success of the e-commerce project. It is the aspect which creates visual performance and sets the solid ground for the desirability of the interface and positive emotional feedback from the buyer. At UI design stage for e-commerce, designers have to find the general stylistic concept which will support UX aspects mentioned before and will give the online point-of-sale the attractive looks. Some aspects, which designers have to take into account in this perspective, are:

 

— choice of colors that correspond to the brand image and strengthen emotional feedback

 

— setting the style corresponding to the nature of the commercial offer: reaching the website, people should instantly understand if it sells household goods, fresh vegetables, trendy clothes, exclusive devices or anything else

 

— visual hierarchy which makes the core zones of interaction instantly noticeable

 

— general harmony of perception which sets the feeling of aesthetic satisfaction supporting positive user experience.

tubikstudio ui animation website design

Design Studio Website

 

Points to consider

 

For the bottom line, here’s a simple check-list for some essential aspects designers would rather consider working on e-commerce projects:

 

— Know the buyers: user research will help to get the needs and wishes of target audience.

 

— Have users informed: make the screens or pages filled with information and functionality users really need for making purchase.

 

— Keep design consistent: not only does the website or app itself need consistency of design for all the screens in terms of general branding, but also social networks, print materials and actual point-of-sales appearance if they exist.

 

— Refresh the experience: minor changes or attractive details added to the interface from time to time without breaking general visual consistency can give the feeling of refreshment, like new looks of mannequins do in the window displays of the shop.

 

— Check your solutions: user testing can have a great impact on understanding the factors that boost conversions. Ideally, it should be applied not only in the process of design but also after the launch of e-commerce platform on the basis of real user interactions and troubles which can arise.

 

— Be careful about revolutions and wow-effect: the power of habit plays the big role in the products of this kind. Choosing layout, menus or icons, which stand too far from the ones users are generally accustomed to, can bring confusion and frustration. For example, usage of any other image instead of the magnifying glass to mark the search field can result in bad user experience as buyers know that visual symbol and will look for it. So, making this sort of experiments, take time to test them well.

 

— Respect the buyers: remember, that they are not abstract metrics — every figure in conversion report is about real people. Look for the interface that will respect their time, effort and needs and it will bring positive experience of shopping for both sides.

 

Landing Page Animation Tubik Studio

Organic Food Shop

 

Recommended reading

 

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

 

Two Types of User Motivation: Design to Satisfy.

 

The ultimate guide to designing ecommerce websites

 

Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid

 

Designing for 5 Types of E-Commerce Shoppers

 

20 Common UX Mistakes In Ecommerce Websites

 

Everything You Need to Know About Designing for eCommerce


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

Welcome to read or download the free e-book «Design for Business»

Bakery website design case study tubik

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet. 

 

In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:

 

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

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

 

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website. 

 

tubik studio landing page design

 

Task

 

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

 

Process

 

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.

 

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.

 

tubik_studio_website_ui_bakery

 

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Bakery website catalog design ui

 

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

 

bakery website product page ui

 

Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting. 

 

Bakery website animation

 

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

 

Another aspect to mention generally about this web design concept is typography which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.

 

designers tubik teamwork

 

No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!


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

tubik studio design for business

Short but Vital. Key Abbreviations in Design for Business.

Design is the job whose aim is to achieve the goal and usually it is done by multiple means, techniques and tricks. Anyway, design is a professional activity that has to solve a problem. In design perspective, even purely artistic elements have to perform some task and play their role in achieving the goal. In the vast majority of cases, we design not for ourselves or our clients: we design for users who have pains, needs and wishes and our task is to set the goals and find effective solutions. It’s like math: you get the problem — you find the formula and way to solve it — you work over the solution — you get the result. To get the result you need to set the goal at the very first step of design process.

 

Plenty of websites and mobile applications are created with a sort of business idea or scheme behind. That makes them goal-oriented and customer-oriented. For designers it can be both help and challenge: they get a clear goal, which means they know what result is expected, but with the goal, they also get a set of limitations and restrictions to consider. Designing for business, it is necessary to understand not only user experience and behavior, the psychology of interaction and decision making, but also business goals and processes which influence the general result. It is important to understand business language to have a quick contact with customers, who sometimes don’t know much in design, but definitely, know what are their business goals and expectations.

 

In our previous post devoted to basic business terms we have already started building the bridge between business and design process. There you can read about business and design relations in ecommerce, get the definitions of conversion, sales funnel, sales channel, niche market, 4P theory etc.

 

tubik blog article

 

Today’s post continues the topic with vital abbreviations which are now an integral part of business communication. Making orders for design and development services, customers can mention those abbreviations in the scope of work and philosophy of product, they should be included in business and content strategy. Understanding them and knowing design aspects of their realization results in goal-oriented and user-centered design which is able to solve problems and bring profit.

 

So, let’s get started!

 

USP

=Unique Selling Point / Unique Selling Proposition

 

Definition. Unique Selling Point (Unique Selling Proposition) is the element of marketing and promotion strategy which presents the most important benefit (or set of benefits) that people can get with the product or service. This is actually a feature which makes the offer unique and different from the others on the market. This is what marks the offer out of the competition.

 

The article published by Kissmetrics Blog and giving several practical examples mentions: «Instead of attempting to be known for everything, businesses with a unique selling proposition stand for something specific, and it becomes what you’re known for.» That is a good explanation of how USP is beneficial for the business itself and why it should be also considered at the design stage. For most cases of business practice, the attempt to offer everything for everyone is the utopia which goes nowhere. Specific offers to definite target audience give much more, especially at the start of the way.

 

Design aspect. USP is an important thing to define at the first stage of ideation and development of business strategy and design solutions that correspond to it. Outlining the USP is one of the hardest tasks as it actually influences on all the design process as well as ways to present and promote the product. However, starting work without understanding what is going to be the USP is mostly like starting traveling without any particular place or destination in mind: it can be a sort of exciting experience, but nobody knows what it will bring in the end. Business trips are never planned like this and business goals are hardly achieved that way.

 

If USP is defined at pre-design stage that means that all design solutions can be made to support it. That is a good foundation for efficient branding supported by recognizable and consistent interface design which enhances better interaction and memorability. USP directly influences:

 

— design of a logo and brand identity

— understanding the mission of the offered product, its tone and voice which directly influence visual and graphic design presentation

— application of identity in the elements of interaction (website, mobile application, interactive displays, presentation in social networks etc.)

— building up principles of interaction and user experience in terms of efficient presentation and providing benefits of USP

— creating user interface that clearly reflects USP and provides fast and easy way to getting it

— creating and selecting content which will support general design concept and show users the advantages of the product

— design of a landing page that will have the structure and content directly presenting USP to target audience

— applying design tactics that increase conversion of the webpages or app screens

— strategy of SEO and copywriting which will support design solution and consistency of the offered benefits etc.

 

It’s also important to realize that USP is not a business statement or business goal itself. It is the benefit that the provider shows and outlines as essential and beneficial for users. Business goal is the result which company wants to obtain, business mission statement is a sort of 3D presentation (the directions of business development and its results for company’s clients, employees, and owners), while USP is what company shows to clients and users as good and worthy for them.

 

tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov

 

For practical example, let’s imagine a company launching a website selling books. Suppose, the business goal is to sell 5000 books via the service for the first year. To do it, the company needs to attract visitors with a feature that will differ it from the others on the market. Say, the website will provide the ability for live communication support in choosing books provided 24/7. A user will be able to ask any question about the range of presented books any moment when it’s desired and get the immediate feedback, which is very convenient for customers. That is what the service chooses as its USP and declares to users as the feature differing it from the competition. Buyers do not need to know the business goal as how many sales are expected to be done or how much profit the company wants to earn. Buyers need to know what is especially good and comfortable for them so much that they should come to this company and not to the other. When it is defined at the first steps of creating the product, design becomes the powerful tool to inform users about the benefits, strengthen their power, make them look as attractive as possible for this particular target audience.

 

Moreover, knowing the USP with which the product is or going to be positioned on the market, UX designer is able to find the best ways and techniques to provide users with the ability to get what they want quickly and easily. Navigations, usability solutions, layout and transitions — everything will make the user experience more positive and efficient while business goal more achievable.  This is how thoughtful design works for business.

 

Therefore, at the earliest stages of design process, project documentation should definitely include the data about USP. If design and marketing are done within one company, it is highly advisable that management, marketologists and designers get together and discuss the general strategy of work to avoid misunderstandings. If design is outsourced and provided by the other side it is recommended for designers and project managers to get as much information about the USP as possible. This will save money and effort for both sides as this way reduces issues of redesign that can come up when the task is very general and blurred as well as will provide the result which is more customer-oriented and adjusted to business goals of the company.

 

As a practical example, we can remember the story of creating new branding and UI design for Saily App. This is a local service of user-to-user e-commerce. The customers defined its USP from the very start: it is a local community app allowing neighbors to buy and sell their used stuff, so it provides people with the ability to sell their own things or quickly search for the needed ones sold in their location. This idea became the solid basis for all the design solutions around branding and user interface of the app, setting bright experience and friendly communication. If you are interested to read the details and see visual design process, welcome to read case studies on logo design and UI design for the app.

 

tubik studio UI design

 

 

MVP

=Minimum Viable Product

 

Definition. MVP is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations which are solving target audience’s problems, is created as live and starts real functioning as soon as possible. The approach is opposite to the strategy of creating full design and comprehensive functionality for all the product features for broader target audience and only afterward launching it on the market.

 

Design aspect. MVP approach has several benefits:

— as it starts from the simple and basic version of the product, it doesn’t take a long time to provide design and development and makes possible to start playing on the market faster. It’s especially actual for diverse technological ideas and concepts as they are always at risk to outmode by the time all the design, development and testing cycle is finished;

— it enables designers, testers, analysts, managers and marketologists to collect data of real users’ interaction with a product, reveal the bugs, understand their wishes and pains deeper and use all that information in design and presentation of further, more complex versions of the product. Although testing should be done at the stage of development, it is impossible to predict all the potential problems of interaction with a product before real users start this interaction. MVP enables to do it faster and make next versions more efficient;

— if thoughtfully made and carefully presented, MVP can play the role of bait attracting target customers and allowing its creators to see if target audience was defined properly and analyzed deeply enough;

— next versions of MVP usually present quite massive functional additions so depending on the target it may work as the way of positive and dynamic user experience, different from slight changes in the products whose functionality was fully developed before the launch.

 

Therefore, in terms of design MVP is the strategy of step-by-step movement on the market, when every next step is based on the analysis of the previous one from the actual data collected from real users. That means that designer should also apply the strategy of gradual design,  carefully applying only core features which are really vital for the MVP as the start of the journey. It greatly influences the number of screens and content on them, necessary transitions and notifications which users really need at this stage of using the product, level of complexity and sophistication of graphic materials and animation etc. UX designers should remember that MVP always has a definite core target audience and the solutions around interactions, experience, visual perception etc. Knowing these core users makes the design task more particular and the result will be more customer oriented thus efficient. Next versions of the product will provide broader functionality and in this way will broaden the circle of users, but it will work in case when core target audience is caught by MVP.

 

Successful MVP is directly connected to the USP of the product. Here USP plays even bigger role as it enables to make the product user-centered and in this case the chances of making it efficient and attractive to users get much higher. Presenting the product solving particular problems of a particular group of people in many cases proved itself as an efficient strategy with the perspective of further growth of both functionality and audience. This strategy works especially well for various startups which start with limited budget used wisely for practical presentation of the vital features of the product: if MVP is thought out properly, at this first stage they already start monetization of the product, attract users and at the same time apply practical data analysis in further stages of design. It’s easy to see that the role of UI/UX design here gets even higher as MVP is actually the chance of making a good first impression. Spoiling it with bad design can have crucially bad result for product’s promotion as well as good design can build up solid foundation for product growth.

 

sport app motion ui tubik studio

GIF for Sport App by Sergey Valiukh

 

 

B2B

=Business-to-Business

 

Definition. B2B is the term used in business, marketing and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at the other companies’ business activities. The target audience of the offer is not individual customers but businesses. Nature of relations has a direct impact on business process, strategy, promotion and therefore any design stages involved in this scope. Actually, if we are talking about outsorce design and development services, they are a direct example of B2B.

 

Let’s mention the same company which sells books. They need a website which will provide quite broad functionality for big amount of users. They monitored the market of webservices and found out that hiring an outsorce company for design and development is cheaper for them than creating an in-company department of such specialists. This is the start of B2B relations as design studio provides their services for another business — a bookshop.

 

tubik studio design UI

Photo Retouching Service by Alla Kudin

 

 

B2C

= Business-to-Consumer

 

Definition. One more way of business relations in which business provides products or services directly to individual buyers or end consumers.

 

Remembering the case with a bookshop selling online, its business is built on the B2C scheme. It presents and sells books to individual buyers and its aim is to involve as many customers as possible. It needs to strengthen its presence online communicating directly to potential buyers so for this aim it can use online e-commerce spot, blog, forums, social networks etc. The graphic material, ways and style of communication, visual presentation and brand identity will work differently than for B2B and will need another approach because psychological background of the interaction is different.

 

gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko

 

C2C

= Consumer-to-Consumer

 

Definition. It’s definitely clear that presented term features one more type of business relationship when operations are done directly from consumer to consumer. This term has grown its presence significantly with the boost of e-commerce because nowadays the internet provides broad opportunities for such sort of business. The best-known way of C2C relationship is platforms for online auctions, sales etc. Creating such platforms, designers have to consider peculiarities of interaction in terms of this business scheme. Design, in this case, is usually done for the third party which creates this platform allowing users to operate on it selling and buying their stuff.

 

saily UI screens tubik studio

Saily App by Tamara

 

Design aspect. People involved in the design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation which are different from the one presented directly to end users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.

 

Neglecting the aspect of business relations increases the risk of creating the design which will not provide high conversion rate even being sophisticated, stylish and attractive visually. The psychological background behind design solutions has to support a particular business schemes or strategy. Here in Tubik Studio we have had broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.

 

Designing for B2B, it’s important to remember that:

— design solutions shoud consistently strengthen branding and company policy which is important for other business side. If website or landing page represents, let’s say, a service as accomplished by well-prepared and professional team of specialists with their policy and statement, it is appreciated and trustworthy so builds better bridge for collaboration;

— implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors and graphics, specially designed branded items etc. is one more way to strengthen brand awareness by means of design;

— consistent and thought-out content strategy combining visual and textual material with careful selection of visuals and copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;

— concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. The good variant of scenario is when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Surely, this solution should be based on thorough user research, but anyway it has high potential to make user experience more positive and effective;

— business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally unacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;

— the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to target audience and are potentially open and able to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers in this case plays not less role than involving them into the game.

 

Designing for B2C it important to consider that:

— the target audience can be more diverse so design solutions which will effectively transer the necessary message to the user can require more universality;

— visual presentation should be catchy and original as in this sphere competition is very high;

— in many cases website or platfrom for B2C provides full way up to the process of buying and delivery. Terms of data protection and security need high attention here. Neglecting this aspect will get the company name associated with bad service so will make a big hole in its reputation;

— the website has to be technically ready to support a really big number of users simultaneously as frequently more offers are available than in B2B so the flow of users potentially interested in buying it can get higher quantities;

— strong and consistent presentation of the brand in social netwroks featuring the same design solutions is certain must-have. Not only does this strategy offer more marketing opportunities, but also supports better direct communication with consumers and shows the company’s opennes to discussion as one more reason to trust. The same visual design should be used consistently cross all the platforms to increase brand awareness and create strong associations;

— the aspect of virality works effectively in this type of business relations and can be used via design features like interesting animations, engaging illustrations and characters, brand mascots, Easter eggs, funny or encouraging videos etc.

 

Designing branding and interfaces for C2C, it’s advisable to consider that:

— the platform should be intuitively navigated and clear to use for people with different level of tech abilities and on various devices;

— engaging and original UI desing solutions are a good way to set the first contact and involve users into active interaction;

— thought-out placement of layout elements and visual hierarchy can increase conversions and that will be the strong reason of user retention;

— UX of user-to-user communication (chats, discussions, comments, sharing etc.) should provide diverse features and broad possibilities;

— user interface visual design should provide good universal background and environment for presentation of various products and services;

— the platform will need an efficient and quick system of user support.

 

tubikstudio designers

 

Recommended reading

 

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

 

What a Unique Selling Proposition Really Means & Why Your Business MUST Have One

6 Incredible Examples of B2B Web Design

10 MUST DO’s Before You Start Designing Your B2B Website

Design is Marketing

The Importance of Design in All Marketing Campaigns

The Role of Design in Business

Refining Design for Business


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

tubik studio design business

Business Terms in Design for E-Commerce. Sales Basics

 

«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 the sphere with a different perspective. Design is 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 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 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 team with marketing specialists, advertisers, researchers, analysts, and psychologists all of whom have a purpose of increasing 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 marketing specialists 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.

 

tubikstudio design office teamwork

 

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 significantly increases the chances of creating 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 full cycle of commerce operations, including payments, delivery and refunds.

 

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

 

Design aspect. Obviously, 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 the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of 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, catalogues 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.

 

tubikstudio ui animation

Product Card Animation by Alla Kudin

 

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 e-commerce 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 strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in 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 more detailed description of the product or service etc.

 

Therefore, conversion for a webpage or app screen can mean different actions that correspond to 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 which 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 website or app bringing profit both for user and business.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

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 which is deeply customer-focused and based on the gradual involvement of a customer into 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 to make a purchase.

 

Basic sales funnel includes the following stages:

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

In addition, sales funnel stages thought out and applied properly can work as a sort of filters letting quickly inform users about the product or service and move to the next stage 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 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.

 

website design concept tubikstudio

BRMC Website by Konst

 

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 maximum of the possible sales channels which are really numerous on the Internet, from social networks to specialized forums, influencer’s 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 asects to remember about:

 

— Sales channels should be initially concentrated on target audience. There is always the place and time to broaden the perspective as soon as core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to 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 initial awareness stage if they witness strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in brandbook 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 in Facebook invites users to participate in summer sale, they should be directed right on the landing page of this sale, not to the homepage 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.

 

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 the concentration of the offer on specific needs, wishes and problems of a specific target audience. Niche market is a specialized market segment which is aimed at specific market needs with a close view on its demography, education level, level of income and purchase abilites etc. For example, when one company produces software generally used for creating and editing textual materials for broad target audience while the other is adapted 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 specific nature of the product or service by means of design such as branding and original UI solutions can help the product to stand out of the crowd and stay competitive.

 

tubik studio ui animation

Bonano e-commerce interactions by Vladyslav Taran

 

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 at 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 work group, family, friends, 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 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 relationship. 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 product achieving its target audience and solving its problems.

 

Certainly, it’s great when the designer is able to involve professional marketing specialists into 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, designer able to analyze economic basics and business factors influencing the design scheme and logic gets the 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, 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 determine their motifs, triggers that can catch their attention, words that can touch them, the 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.

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

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. 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 e-commerce sphere. It states that product launch and lifecycle is based on four «P» factors: product, price, place, 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 four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.

 

Design aspect. No doubt, 4P theory is highly applicable in design for e-commerce. The Price of the product is usually the furthest part from designer’s decisions as it is decided and given by the stakeholders ordering design part of work. In 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 online marketing features numerous ways of presenting the product and achieve 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 UI animation

Tubik Studio | Museu by Ernest Asanov

 

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 any sophisticated design solutions, marketing techniques and any sort of magic which will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. Positive experience of interaction with a website will not overcome bad experience of interaction with low-quality product or service.

 

The offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in the fast and easy way. Nevertheless, if the product is of poor quality, successful design of e-commerce platform isn’t going to make it better. Think about the product and its user first, only then 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

 

tubik studio designer ecommerce

 

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!


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