What Is Product Page

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

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

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

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

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

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

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

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

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

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

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

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

That’s why many e-commerce platforms:

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

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

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

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

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

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

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

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

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

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

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

Informative but Simple Description

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

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

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

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

Super Obvious Call to Action

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

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

Focus on the Item

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

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

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

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

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

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

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

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

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

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

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

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

Intuitive Navigation

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

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

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

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

Consistency

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

In e-commerce interface, it touches both:

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

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

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

Power of Known Patterns

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

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

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

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

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

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

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

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

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

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

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

Fewer Clicks

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

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

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

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

Social Proof

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

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

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

Interactivity

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

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

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

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

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

404 Error

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

404 error page for a fashion e-commerce website

Bottom Line

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

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

Useful Articles

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

UX Design for E-Commerce: Principles and Strategies

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

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

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

Project

Bennett is a modern brand offering users high-quality tea for different tastes. It produces various worldwide popular beverages, such as black tea, herbal tea, green tea, decaffeinated tea, iced tea, and seasonal tea. The brand is positioned at the crossroads of hot trends and classic traditions and transfers the idea of elite, exclusive products which are about lifestyle and mood rather than just a drink.

Identity Design

The logo design for Bennett is based on the symbol, which presents a combination of shapes sharing the visual metaphors of a teal leaf, an eye, and a teacup seen from above. The sign is harmonically combined with a typographic part that features the brand name presented in an elegant and minimalist manner.

The brand identity that had to stretch to the e-commerce website design is rooted in the creative spark that is sometimes hidden in the simplest things. It started when our designer and art director, Ernest Asanov, got inspired by a photo of neatly collected tea leaves and started developing the idea. In identity design, it got transformed into a graphic pattern, and later the set of patterns applied to packaging and branded items. In the website design, the idea to feature realistic images of tea leaves turned into a video used on the product page.

Here’s how the graphic patterns became the basis for packaging design and stylish paper cups.

From the packaging perspective, one more important design task was creating an informative label that corresponds with the general stylistic concept and keeps consistency across a variety of packaging options. The label design carefully arranges a lot of text content about the particular tea blend to make it readable and straightforward; it looks original and trendy due to typeface choice and enhances perception with neat and clear line icons. The front label contains only key information and focuses buyers’ attention on it without distracting or overloading them with too many details, while the back label presents much more detail.

As a part of identity design and brand communication, special branded envelopes and business cards were also developed to echo the style.

Web Design

The website design approach starts from the home page, which uses typography as its primary and only tool for informing and impressing visitors. No photos, no illustrations, only the elegantly wrapped text content setting the mood and call-to-action button seen at once and inviting the visitor to check the range of the offered products. Product pages instantly connect to the tea theme and set the emotional and aesthetic appeal due to the video of tea leaves scattered from the top of the screen.

Here’s a closer look at the interaction with product pages in the tea store. The layout is built on bright and bold color combinations for the backgrounds, effectively highlighting various products in different packaging colors. Split screen, sophisticated geometry, smooth animation, and original typography – that’s what the designer chose for this case of web layout. The text information is organized in boxes, forming a sort of asymmetric grid.

To keep up with the external consistency and recognizable mental patterns of commerce website users, the website uses a stylish and minimalist sticky header, with the brand element in the center, links to core navigation in the left part, and a shopping bag button in the right corner. The latter uses the visual marker accented by color to let visitors quickly see if they already have something in their shopping bag.

The live Bennett Tea website was fully implemented on Webflow: for our team, it was a great chance to try how it works for non-standard design aimed at e-commerce objectives.

To make the website look good and work effectively on various devices, the designers worked out the mobile version of the website.

The website got positive feedback from the global design community, having received three awards on Awwwards: Site of the Day, Mobile Excellence, and Developer Award, proving once again that Webflow allows for the effective implementation of projects of different complexity and non-standard design solutions.

Stay tuned; new case studies are coming soon!

More Design Case Studies

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

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

OOP. Brand Identity Design for Online Flea Market

Otozen. Mobile App Design for Safe Driving

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

Сообщение Branding Case Study: Bennett. Identity and Website Design for Tea Brand появились сначала на Design4Users.

In our today’s collection, you will find a bunch of concepts that demonstrate the results of this creative search. Here you will find a variety of web pages typical for e-commerce websites: home page, catalogs, product pages, landing pages for particular campaigns. Enjoy, consider, and get inspired!

Fashion brand e-commerce website by tubik

Skincare e-commerce website concept by Emy Lascan

Food ecommerce website by Vision Trust

Clothing store website page design by Orizon

Ecommerce website design for craft confectionery by tubik

Online fashion store website concept by OTAKOYI

Bright ecommerce website concept for selling shoes by Shah Alam

Fashion ecommerce web concept by gde.design

Product page concept for a toy shop by Anatoliy

Brutal product page design by Justin Greene

Product page design exploration by Emy Lascan

Ecommerce fashion store concept by Witech Enterprise

Furniture store website concept by Bold Monkey

Balloon e-commerce website by Cuberto

Furniture e-commerce product page concept by RH Agency

Fashion e-commerce web concept by Ariel Jedrzejczak

Cosmetics e-commerce landing page concept by Nickelfox

Furniture e-commerce product page design by Halal Lab

Minimalistic product pages concept by isavelev

Ecommerce theme design by WPDeveloper

Clothing e-commerce website concept by Halal Lab

Light and airy product page concept by Vishnu Prasad

More thematic design collections are coming soon, don’t miss.

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

Сообщение UI Inspiration: 20+ Web Design Concepts for E-Commerce появились сначала на Design4Users.

By Tubik Arts

By Hesam Sanei

By Dipa Inhouse

By Tubik Arts

By Radostina Georgieva

By Makers Company

By Dominik Korolszuk

By Vida Lamakani

By Dmitry Mooi

By Unini

By Tubik Arts

By Razvan Vezeteu

By Muriel

By Rami Wafaa

By Storytale

By Kit8

By Four Hands

By Tubik

You may also like the collections of autumn illustrations, summer illustrations, love illustrations, spring illustrations, winter illustrations, quarantine life illustrations, and other D4U Inspiration posts

Сообщение Shop Till You Drop: 20+ Bright Shopping Illustrations появились сначала на Design4Users.

Just as a front window display entices customers to enter a physical store and check out the merchandise, the way that your online boutique’s landing and product pages look will either encourage people to make a purchase or go to your competitors.

To be more precise, it takes only about 50 milliseconds for users to form an opinion about your site that determines whether they like it or not, whether they will stay or leave. And if they leave, they’ll probably never come back – more than 85% of online consumers said they’re less likely to return to a website after a bad experience.

In ecommerce, visual appearance is everything. When shopping online, people can’t touch or feel the products, which means they will judge your boutique’s quality by what they see. In fact, studies have found that more than 45% of consumers base their decisions on the credibility of websites on their aesthetics and visual appeal. That includes website layout, color and color schemes, typography, and font size.

So, if you’re looking to have a successful online boutique, get rid of the ‘if you build it, they will come’ mindset and start thinking about how you can make it more visually appealing. To help you out, we’ve put together this 7-item checklist that will help you create a sleek online boutique in no time.

Designed by Tubik

Decide Which Platform You’re Going to Use

Where do you want to start an online boutique? Do you want to take advantage of Etsy’s organic traffic? Or maybe you’d prefer to have more control over your site, layout, and the overall shopping experience? There are upsides and downsides to both options and, ultimately, it will come down to what type of products you’re selling, as well as how much control you want in customizing your online store.

Platforms like BigCommerce offer a wide range of built-in tools and features to support your online boutique’s growth. They also provide powerful reporting to help you keep track of your store’s improvements and success. Moreover, if your budget allows it, you might hire a professional BigCommerce design company to make your e-boutique look as sleek as possible.

Natori

Think Clean and Organized

One study found that nearly 95% of the website first impressions are design-related. The study participants noted that they often found websites to be too complex and lacking navigation aids. They also commented on an ineffective search feature, excessive pop-ups, improper use of color, too much text, small print, and a corporate look and feel.

Just as people like shopping in clean and organized physical stores, they also like websites that are sleek and free from clutter. A messy design can easily dissuade customers from spending time in your online boutique or interacting with your site, which means they won’t be buying anything either.

DressUp

Even though it doesn’t hurt to include additional info on your brand’s story, an option to sign up for an email newsletter, or a blog, you need to ensure that these don’t distract customers from making a purchase. For instance, a form at the bottom of your homepage that visitors can fill out to subscribe to your email list is ok, but a pop-up might have the opposite effect of what you want. It could distract people from making a purchase and annoy them and make them less likely to want to give you their email.

In addition, make sure your navigation plan is cohesive and straightforward. As with any site, you should focus on ease of navigation, accessibility, legibility, and above all, optimization of the user’s experience. Once users land on your homepage, they should be able to find what they’re looking for quickly and easily, and make their way to your target zones, be it a contact form or checkout.

Bohemian Traders

Keep navigation choices to under 6 of your most important pages and use subpages to order a website with more than 5 pages. Create a hierarchy of what information is most important on the page, and don’t be afraid of white space and varied sizing to create contrast. If you have a lot of different categories and pages on your website, you can use a drop-down menu to organize them more easily without causing a sensory overload.

Use Colors to Your Advantage

Color can be a very powerful tool, and if you understand the psychology behind it, you can use it to your advantage.

Jackie Smith

Different colors inspire different feelings and actions from people, so if you want your ecommerce website to convert, you need to leverage them. For instance, according to color psychology, red inspires feelings of passion and excitement, which are driving factors behind spending, and studies show that making a CTA button red can increase conversions by more than 35%. On the other hand, blue has been shown to increase feelings of trust, which is why it appears in more than half of all logos (just think about Facebook, Twitter, American Express, and IBM).

The point is, color is one of the most powerful tools in your web design toolbox, and if you know how to use it, it can have a significant impact on your online boutique’s design.

Truvelle

Pay Attention to Images

In the ecommerce world, to sell your products, you must stimulate your customers’ visual appetite. 75% of online shoppers rely on product images when deciding on a potential purchase. A study by Forbes found that 50% of online shoppers consider large, high-quality product images to be more important than product descriptions or even reviews.

The images you use in your online boutique should be so attractive that customers will be immediately tempted to grab your products and walk around wearing them. High-resolution images are a must. Any pixelation or blurriness can make people think that your products are cheap and turn them away instantly. Consider creating a photo gallery for each product to allow visitors to see the product from multiple angles.

Mulberry

Another popular feature is zoom, which allows them to see the fine details. That is as close as you can get to allowing online shoppers to physically touch a product and examine it more thoroughly.

Whenever possible, use images of people using your products. Clothing looks a lot more attractive when it’s worn by a real-life model rather than on a mannequin or being laid flat.

When curating your images, make sure they represent your online boutique’s style.

Think about who your ideal customer is, what they like, and what they hate. What fabrics, colors, articles of clothing, or kinds of jewelry appeal to them? Answering all these questions will help you create aesthetic cohesion. Your goal is for all of your items to look unified on a screen together and tell a story.

However, you should also make sure that your images are realistic. The average rate at which consumers return products they bought online is about 30%, and more than 20% of those returns occur because the product looks different in person.

Keep Text Minimal

You can spend weeks working on long, detailed descriptions for your products, but we’ve got news for you— nobody is going to read it.

Studies have shown that most website visitors only read about 20% of the text on any page. The average Internet user has a short attention span, so large chunks of text can be quite off-putting. Instead of reading the text word for word, people tend to scan it, looking for crucial information.

Thing Industries

So, if you want to get your point across, you must make your content scannable. Try to keep all the text on your site as short as possible. Break up the content—whether that’s blog posts, an “about us” page, or product descriptions—into an easy-to-scan format. Organize information into short paragraphs, use bullet points, bolding, and even infographics to make it easier to read.

The easier to scan your content, the more likely website visitors will absorb your key messaging—and the more likely they will be to make a purchase.

Develop Your Unique Brand

Whether your online store specializes in toddler clothes or vintage pieces, it should embody a defined style. Create harmony between your boutique’s web design and that style to strengthen your branding and make your target customers feel at home when visiting your boutique.

Is your brand girly and fun, with bright colors and fonts? Or, maybe you’re going for minimalism and clean, sleek lines? Your brand is a combination of your chosen name, product selection, the ideal customer you’re targeting, as well as the overall look and feel of your site and social media platforms.

Toms

Ensure that your logo is visible on every page of your website and keep fonts and color schemes consistent and on-brand. You don’t want your visitors to feel like they’ve landed on an entirely new website every time they click onto a page. Maintaining the same design scheme and navigation menu across all pages displays a consistent and trustworthy image.

Don’t Forget About Mobile

If you’re still hesitant about the importance of mobile for ecommerce, here are a few stats to take into consideration:

• More than 55% of internet users say they won’t recommend a business with a poorly designed website on mobile.
• About 85% of adults think that a company’s site should be as good or even better when viewed on mobile.
• Nearly 80% of Internet users in the US have used a mobile device to shop online.
• 35% of US consumers use only their mobile devices to buy online.
• Experts estimate that US mobile commerce sales will reach over $420 billion by 2021.

Sephora

In today’s digitalized world, you can’t ignore the fact that many people will visit your online store via their mobile devices. So, in order to make sure that it looks great on different screen sizes, you’ll need to optimize the mobile view.

Mobile shopping differs from shopping on a regular PC. Mobile users prefer longer scrolling, so your site’s mobile version has to be designed vertically. Texts and images should be big enough and spaced out, so they don’t look cluttered. You should also organize your options and product collections simply and intuitively, allowing customers to find what they’re looking for quickly and easily.

Final Thoughts

Web design is critical when creating an online boutique. The main goal of good ecommerce web design is to convince visitors to make a purchase by using the right images, colors, graphics, words, and fonts. Your online boutique’s design should attract customers, provide outstanding UX, and present your store in the best light possible.

Designing an online boutique can be tricky, but now you have these 7 tips to help you create a store that not only looks gorgeous but also converts. It may seem like a lot, but with the right plan in place, you can have the online storefront of your dreams in no time.

About Author: this is the guest post by Hazel Pan, a copywriter whose expertise includes Funnel Copywriting & Inbound Marketing.

Сообщение Handy Guide To Designing a Visually Appealing Online Boutique появились сначала на Design4Users.

E-commerce application for buying vinyl records and players by Tubik

A sneak peek on e-commerce app and UI Kit from UI8

The minimalist design of the app for ordering pizza by Gleb Kuznetsov

Elegant UI for an e-commerce app selling natural cosmetics by Kate Buke

Shopping app interactions designed by UI8

Interactions with the catalog of shoes by Dannniel

Interactions of adding the product to a cart by Dannniel

Perfect Bouquet, the e-commerce application for buying bouquets or making the needed ones by Tubik

Product card for an e-commerce app selling stuff for lighting by Netguru

Product page design by Hiwow

Product screens for an app aimed at buying skateboards by Cuberto

Luxury perfumes e-commerce app by Aurelien Salomon

UI concept for AI-based e-commerce app by PLATFORM

E-commerce app for buying paints based on a dark background by Dannniel

UI concept for the Nike Store iOS app by Netguru

Search screens for a mobile e-commerce app by Cuberto

E-commerce app for buying action figures – inspired by Sideshow, designed by Tubik

Check more D4U inspiration collections
Review handy tips on UX design for e-commerce

Сообщение UI Inspiration: Elegant E-Commerce App Design Concepts появились сначала на Design4Users.

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 the research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in the 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

Flowers present a 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 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 links to important service pages and accounts in social networks.

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.

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

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 instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades that look sophisticated on a general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

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

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.

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

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 users 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 an 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

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 the hamburger menu hides the extended catalog. Moreover, here the 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

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.

Landing page for selling exhibition tickets

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

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

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

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

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

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.
Design for Business Goals. Explore the Target.
Case Study: E-Commerce. UI Design for Bakery Website.
Short but Vital. Key Abbreviations and Terms in Design for Business.
Strategies for Efficient Landing Page Design.
Case Study: Saily App. Designing C2C E-Commerce Application.

Originally written for Tubik Blog

Сообщение UI Design Concepts for E-Commerce: Sell Like Hot Cakes появились сначала на Design4Users.

What is E-Commerce?

As it’s 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 the full cycle of commercial operations, including payments, delivery, and refunds.

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

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

Designing an 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.

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 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 product definitely starts much before the first real line appears on the paper or screen. There are several important issues that should be considered and agreed upon before the 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, the level of tech literacy, and trust in 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 a 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 the 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 the design team to track and support the consistent experience of both getting to the product and actually interacting with it. Even more, designers take an active part in setting and strengthening marketing and sales via a 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

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 in the discussion together with stakeholders and marketing specialists at the early ideation stage if it’s possible; if not, then specification and tasks provided to designers 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 action. 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 the e-commerce sphere highly attractive to 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 the 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, the frustration of not getting feedback from the system, etc.
• accessibility has to bring up design that 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

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 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.

Bakery Website

Every button, link, and card can play a 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 compared 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, the user learns that the product or service exists on the market.
• Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
• Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
• Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to 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 a 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 an 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.

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 the target audience and user testing can give clues to what information is required by the target audience for the specific categories of items or services.

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 that 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

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

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

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 a 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 an 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 a 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.

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

Originally written for Tubik Blog

Сообщение Strategies and Principles of UX Design for E-Commerce появились сначала на Design4Users.

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

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

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.

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 web page: 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.

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. The call-to-action button, via which the user can add the item to the cart, is designed with a different color compared 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.

Clicking on a particular item, users get 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.

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 a significant role in building up the positive user experience and attracting buyers to use the service again and again.

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

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Home Budget App. UI for Finance

Health Care App. UI for Doctors

Toonie Alarm. Mobile App UI Design

Slumber. Mobile UI Design for Healthy Sleeping

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: E-Commerce. UI for Bakery Website появились сначала на Design4Users.

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

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

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

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

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

Business Basics

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

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

E-commerce (Electronic Commerce)

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

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

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

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

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

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

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

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

Product Card Animation

Randomizer concept

Conversion

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

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

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

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

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

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

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

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

Landing Page Animation 

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

Sales Funnel

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

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

The basic sales funnel includes the following stages:

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

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

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

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

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

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

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

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

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

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

Björn

Sales Channel

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

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

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

There are several vital aspects to remember about:

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

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

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

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

Wood Products Landing Page 

Niche

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

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

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

Architecture Firm 

Maslow’s hierarchy of needs

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

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

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

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

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

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

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

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

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

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

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

Cafe Coupon App

4P Theory

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

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

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

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

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

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

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

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

Tubik Studio | Museu 

Gym Landing Page 

The bottom line

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

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

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

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

Recommended reading

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

Originally written for Tubik Blog

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