Tag Archives: ecommerce design

strategies for ecommerce ui design

11 Profitable Strategies for E-Commerce UI Design

Ratings of e-commerce are booming and rocketing. People are getting more and more confident in buying things online. The report by BigCommerce on customers buying habits in 2016-2017 shows really interesting stats about online shopping:

 

  • 51% of Americans prefer to shop online
  • 96% of Americans with internet access have made an online purchase in their life, 80% in the past month alone
  • E-commerce is growing 23% year-over-year, yet 46% of American small businesses do not have a website
  • Online orders increase 8.9% in Q3 2016, but average order value (AOV) increased only 0.2% — indicating that transactional growth is outpacing total revenue.

 

The numbers above still haven’t stopped their increasing. That wouldn’t be reasonable for any business to ignore such global trends having a great impact on profits and reaching customers. For the last couple of years here in Tubik we see the obvious and logical growth of interest from big and small businesses in establishing their presence online via websites and/or mobile applications. Based on our experience and the research of the sphere, today we offer you the article telling a bit more about strategies and best practices in UI design for e-commerce.

 

So, let’s start with the 11 points which are important to consider when you are designing e-commerce user interfaces.

 

ux design for ecommerce tubik blog

 

1. Make the branding instantly visible

 

From the business perspective, branding is a crucial thing: it enables to provide a product, company or service with a recognizable face and personality.  In general terms, branding means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market.

 

Branding tends to be essential in an e-commerce user interface design, especially if stakeholders want to use the digital product as the additional flow of customer attraction. Moreover, identity integrated thoughtfully into the interface is the effective way to increase brand awareness. The time taken for proper market and user research, target audience definition, competition analysis and development of brand identity on the basis of all that data by a professional designer is a worthy investment. If that’s done before launching the process of UI design, the product gets higher chances of becoming recognizable faster and easier.

 

In this case, UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand.

 

There are numerous ways to add branding to the interface, still some layout zones and elements which have the highest potential in this issue:

 

Headers. In the article about website header design, we showed in detail that headers present the area of high visibility. So putting strategically important elements of branding in it is a good way to strengthen its memorability.

 

Splash screens. In mobile applications, splash screen or welcome screen is the first screen seen by a user while the application is loading and starting. It’s a good idea to use a logo, mascot or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it’s easy to make the sign even more attractive and memorable.

 

Preloaders and pull-to-refresh indicators. These are the elements which show the flow of the current loading process on the app or website. Branding applied elegantly in them can add much into the consistency of both UI and identity design.

 

MascotsMascots are images, usually personified, which often represent the brand, product or service identity and can be its symbolic convention in all the application or website. Mascots push the limits of personification and give the chance to create the unexpected combinations of elements or make fantastic and non-existing characters alive. A mascot becomes the element of identity and inter-connector between the user and the product. In many cases, it is the basic element of communication and interaction delivering the necessary message to the user.

 

jewellery ecommerce app UI

 

2. Set clear and easy navigation as the core task

 

In the article on UX design for ecommerce, we stated: whatever an amazing website or app is, whatever the stylish and trendy design and breathtaking images it features, its success will be measured not by the number of «wows». The efficiency is analyzed 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 the search and filters are
  • 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.

 

gourmet_website_interactions_tubik

 

3. Check the scannability of the page or screen

 

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles and laws of visual hierarchy, designers and information architects can put the core data and interaction elements to the zones of high and natural visibility.

 

Calls to action (CTA), in particular, should be instantly seen in the first seconds on the page or screen. In the interfaces for e-commerce, CTA elements are the core factor of effective interaction with the product playing the crucial role in usability and navigability and therefore in getting profits. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That increases the risk of poor conversion rate and general user experience.

 

4. Minimize user’s efforts whenever its possible

 

The respect to the customer lies not in pouring out your thanks. The real respect is in saving users’ time and effort day in and day out. Here are some design practices which can make the interface effort-saving:

 

Show related products. Seen on the item page as recommendations close to the features of this particular product can make the process of search and browsing much faster for users. However, it’s vital to check together with developers that this section really works according to the algorithm which shows suitable items, not random ones.

 

Strive for a minimal number of clicks. If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every users’ click possible. Too many operations are tiring and annoying which is a kind of negative emotion. And emotions have a huge influence on user experience and make retaining users much harder.  Minimize the number of clicks on the way of choosing and buying whenever it’s possible — this way you respect user’s time better than politest words of thanks.

 

Simplify the sign-in process. Imagine the situation when you got to the amazing website selling the goods of your dream, and they are presented in such a stylish way that you want to buy them at once. But when you click the button «Buy», you are taken to the huge long from which you have to fill in to register on that website. That will cool down your hot wish to buy everything right here, right now, isn’t it? You change from the state «Take my money, give me that» to «Really? 20 points to fill in before I can buy?» in split seconds. Not all the users will survive that transformation and the website or app will lose a part of buyers. So, it’s necessary to make the sign-in/log-in process as simple as possible.

 

User shape and color marking to group the items or types of content. Color and shape codes enable designers to apply Gestalt principle of similarity not only on one screen or page but on the whole app or website. Color or shape markers simplify navigation and keep the consistency of design enabling users to remember the prompts and find the content they want easily. For e-commerce platforms which are usually full of numerous items, it can make the interface much more user-friendly.

 

Check that perception of the layout is natural and harmonic for the human eye. There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds or pages loading for ages — any point of that stuff can spoil the experience quickly and move users away.

 

Bakery website design case study tubik

 

5. Don’t go too far experimenting

 

There are many articles and videos calling creative people to hear their heart, trust their guts and think out-of-the-box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it the way to solve the problem and make users happier. So, it’s vital to look at the interface from user’s perspective and find the way to make interactions that will provide the smooth and easy way to conversion. In the article on home page design strategies we mentioned: the website is made not for creative contests or gallery of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of revolution might confuse and scare: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning. Strive for the balance between innovation and traditions.

 

6. Use landing pages for specific purposes

 

For business aims and profits rate, this tip may bring crucial changes. E-commerce UI design principles are usually based on dealing complex websites or apps which are filled in with a variety of information. So, the approach of directing all the traffic from outer sources to the home page can be a step killing profitability and reducing conversion rates. Users might get overwhelmed, distracted or even annoyed with the amount of data they have to process finding what they need, especially if they are focused on a particular narrow goal presented in the source they come from. Using landing pages when you need to concentrate user’s attention on something specific can solve this problem efficiently. Landing page is focused on one item, to make it quickly found and reduce delays when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

 

web design UI tubik studio

 

7. Make the homepage informative

 

Home page can satisfy multiple functions: it’s a card of invitation, a starting point of the journey around the website, a storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is the first visual and emotional touch to the website. Certainly, design is one of the core ways to make this touch gentle, smart and helpful. With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website, not only by beauty and style but first of all by information which is looked for. Making it accessible, noticeable and clear, designers grow the chances of positive user experience.

 

In general, home page can include the following data:

  • the nature of the website
  • brand or company identity elements
  • internal search
  • links to the core interaction zones
  • contact data and links to social networks
  • signs of trust (testimonials, reviews, big numbers of presence in social networks etc)
  • for e-commerce websites, it can be visual presentation of bestselling and/or exclusive items, for example, specific books, toys, clothing, equipment etc.

 

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals set for the website and the research of target audience.

 

bookshop website animation

 

8. Apply high-quality images giving the message

 

Images take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. They present the part of the content which is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which:

 

— photos: theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items, title photos for blog articles and pages of special offers etc.

— illustrations: custom illustrations in graphic interface design can look both informative and original allowing the design to stand out of the competition.

— hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource.

— icons: these are small but meaningful pictograms which are informative and support data exchange between the informer and addressee. Icons play the key role in providing clear and intuitive navigation, but they should be checked on proper clarity and the absence of double meanings.

— mascots: images, usually personified, representing the brand, product or service identity.

— visual identity elements: various visual signs of branding like logos, custom lettering for brand name and/or slogan etc.

florist shop website design

 

 

9. Think about promotional videos of different kinds

 

There are several common types of promotional videos:

 

  • introduction video (the first insights on the company, product, or brand showing its benefits for users)
  • product presentation videos (details about product’s features and advantages, special steps of interactions and the problem-solving potential of the product)
  • landing page videos (strengthening the message driving users to a particular call-to-action offered on the page)
  • video testimonials (the reasons and signs of trust and loyalty to the company, brand or product)
  • entertaining and educational videos (rising emotional appeal and often presenting the material for viral marketing).

 

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative and attractive. However, the technical side should be double-checked so that the video was integrated correctly and didn’t overload the page.

 

10. Let the user contact the duty holders from any point of interaction

 

The most popular placement for contact information is footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, on an e-commerce website, presents the online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Anyway, the contact data should be available at any point users may need it. Among others, it is one of the factors influencing the level of trust to the website.

 

Contacts can be presented in various formats. They can reveal the data such as a phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and ways of contact which are the most convenient for them. For instance, if your target audience is teenagers, just giving the phone number may be not effective as they really stick to messengers and social networks. At the same time, if your users are elderly people, social networks may not work in comparison to a phone number.

 

11. Add gamification

 

Gamification integrated into digital products is a great way to stimulate users’ extrinsic motivation, which is mostly a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). So, challenges, leaderboards, rewards for loyalty and big orders, discounts, badges, coupons, stickers and all the other stuff of that kind can become great stimuli for users to not only start interaction with a website or app but also stay there and buy regularly.

 

badges illustration tubik studio

 

The offered e-commerce UI design examples and strategies, for sure, do not cover the whole scope of issues to consider in this fields. However, they can serve as a useful checklist or a source of UI design inspiration for those who aim at creating user-friendly platforms supporting business goals. No doubt, best UI design for e-commerce website is the one which leaves a buyer happy and brings profits to the stakeholders. 

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics.

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.


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

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, a 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