marketing — Design4Users https://design4users.com/tag/marketing/ Mon, 11 Dec 2023 18:18:35 +0000 en-US hourly 1 https://design4users.com/wp-content/uploads/2020/06/cropped-favicon-32x32.png marketing — Design4Users https://design4users.com/tag/marketing/ 32 32 In Vino Veritas: Elegant Examples of Wine Packaging Design https://design4users.com/wine-packaging-design/ Mon, 11 Dec 2023 18:18:35 +0000 https://design4users.com/?p=10977 One of our recent posts about impressive wine packaging design projects attracted your active attention, so with a new issue of D4U Inspiration, we’ve decided to share more exciting projects in this direction. So, in this post, we invite you to enjoy creative approaches to wine labels and sip a bit of elegance with artistic […]

Сообщение In Vino Veritas: Elegant Examples of Wine Packaging Design появились сначала на Design4Users.

]]>
One of our recent posts about impressive wine packaging design projects attracted your active attention, so with a new issue of D4U Inspiration, we’ve decided to share more exciting projects in this direction. So, in this post, we invite you to enjoy creative approaches to wine labels and sip a bit of elegance with artistic graphic design projects by various design studios. Cheers!

NOMA Vino Taxonomico by Monotypo Studio

Monotypo Studio did this packaging design project, and they describe it the following way. The NOMA Wine Collection was born as a tribute to biodiversity, as well as to the tireless interest of human beings, from Aristotle to Karl Von Lineo, in understanding and studying their ecosystem. Two handmade illustrations were made, an edition inspired by the traditional Mushroom Route, carried out every summer by the Lic. in Biology Daniel Bojorquez in the Bosque de La Primavera. The biodiversity of the Birds Kingdom inspires the Second Edition.

vino taxonomico monotypo packaging design

vino taxonomico monotypo packaging design

vino taxonomico monotypo packaging design

vino taxonomico monotypo packaging design

vino taxonomico monotypo packaging design

vino taxonomico monotypo packaging design

Christmas Wine Labels by Tubik Arts

Catch the festive vibes with this packaging design project by Tubik Arts inspired by the winter holidays: here’s a glance at the custom wine bottle label designs with bright original illustrations for the special Christmas edition.

holiday wine bottle design tubikarts illustration

holiday edition wine bottles design

holiday wine bottles packaging tubik

holiday wine bottles packaging tubikarts

holiday wine labels design tubikarts

Wonderground by Cornershop

Wonderground is a place in Barossa Valley, a biodynamic vineyard, a boutique winery, and, most notably, a contemporary gallery and space for Barossa to lead with world-class art. Cornershop collaborated with the team at Wonderground to establish a brand identity and packaging that helps bring their unique vision to life.

wonderground-wine packaging design

wonderground-wine packaging design

wonderground-wine packaging design

Amuleto by Vantablack Studio

The creators of this wine packaging describe the idea as follows: “The ‘Expedition Uco’ wine project embarks on an intricate journey to the heart of nature, where each bottle becomes a testament to the struggle for vitality. The label, akin to a window into the subconscious, portrays the industrious ant, a symbol of persistence, standing out against a network of lines mirroring the intricacies of the soils that nourish our vineyards. This graphic dance embodies the symphony of life and death intertwined in an eternal ballet in the very unforgiving terrain where our vines seek sustenance. Just as humans delve into the depths of their psyche, in ‘Expedition Uco,’ we explore the mysteries of the earth to distill the energy forged through this fusion of opposites.”

In Vino Veritas: Elegant Examples of Wine Packaging Design amuleto-wine packaging design

amuleto-wine packaging design 3

Christoudia Winery Packaging by Reef+Co

The tale of Chrystoudia Winery unfolded in 1992 when the Christoudia family embarked on a journey to nurture their passion and expertise in enology. Nestled in the charming village of Kato Drys in Cyprus, this unique winery thrives in an idyllic microclimate, guaranteeing premium harvests and, in turn, crafting wines of extraordinary quality. Thirty years on, the younger generation of the family took on the exciting challenge of revitalizing the brand. The team at Reef+Co was entrusted with creating the new brand identity.

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Chrystoudia Winery packaging design

Mavrogianni Estate Wines Label Designs by Symbolic

The Mavrogiannis estate is located in a rich natural landscape at the foot of Mount Movris next to the historic river Larissos. The images of this place, its sounds, the creatures met there, the atmosphere it exudes are the identity and the soul of the estate. The Symbolic team included this place’s vibrant elements in the winery’s identity and labels. Inspired by all this, along with the winery owners’ boundless respect for nature and the processes required to produce a natural product, they have created four unique wine labels made entirely from Greek varieties. For each type of wine, they designed representations that describe with lyricism the hidden realities behind the hustle and bustle of modern life.

Symbolic-Mavrogianni wine packaging design

Symbolic-Mavrogianni wine packaging design

Symbolic-Mavrogianni wine packaging design

Symbolic-Mavrogianni wine packaging design

Symbolic-Mavrogianni wine packaging design

Symbolic-Mavrogianni wine packaging design

Graphia Wine Packaging Design by Studio Fen

Graphia, which means “to write” in Greek, is a self-initiated project for a collection of artisan wine label designs by Studio Fen, inspired by the love for typography and printmaking. The designs combine the artistic elements of handmade collages, typography, and silkscreen prints to create a visually striking and unique label set with subtle hints that pay homage to the typographic world.

graphia-studio-fen wine packaging design

graphia-studio-fen wine packaging design

graphia-studio-fen wine packaging design

graphia-studio-fen wine packaging design

CAOS Wine Label Design by Grit Studio

With this project, Grit Studio took on the exciting challenge of developing our own wine brand from the ground up. This passion project allowed them to extend their skills beyond client work and experience the brand creation process. They collaborated hand-in-hand with a skilled winemaker to blend their design imagination with real-world wine expertise to create this wine label design.

CAOS wine label design

CAOS wine label design

CAOS wine label design

CAOS wine label design

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение In Vino Veritas: Elegant Examples of Wine Packaging Design появились сначала на Design4Users.

]]>
Case Study: Crezco. Branding and UI/UX Design for Fintech Service https://design4users.com/case-study-branding-ui-ux-design-fintech-service/ Fri, 27 Oct 2023 19:30:29 +0000 https://design4users.com/?p=12113 Financial services have been undergoing incredible progress due to technological advances, yet unnecessary costs and complications still exist, sometimes playing a crucial part for small businesses. Our today’s design case study tells the story of the fintech service Crezco, which strives to solve this problem and make financial operations even easier at no additional cost. […]

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

]]>
Financial services have been undergoing incredible progress due to technological advances, yet unnecessary costs and complications still exist, sometimes playing a crucial part for small businesses. Our today’s design case study tells the story of the fintech service Crezco, which strives to solve this problem and make financial operations even easier at no additional cost. Welcome to check the details of the design process on brand identity and UX design for the website and the mobile application done by the tubik agency team.

Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

branding_crezco color palette case study tubik

branding_crezco typography case study tubik

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

crezco-identity-logo-design-case-study-tubik

hero image_crezco identity design case study

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

branding crezco case study design

Outdoor advertising billboard design

branding_crezco business card design tubik

Business cards design

branding_crezco booklet design tubik case study

Booklet/notebook design

branding identity crezco design tubik

Branded badges

branding_crezco tubik design case study

Branded tote bag design

brand identity design crezco tubik case study

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

mobile website crezco tubik design

crezco mobile website tubik design

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

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

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

 

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

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

]]>
Product Page Design: Best Practices on UX for Ecommerce https://design4users.com/product-page-design-ecommerce-ux/ Fri, 20 Oct 2023 08:54:18 +0000 https://design4users.com/?p=12043 In e-commerce, the measurement of success is not the number of website visitors or clicks. It’s the number of finalized purchases. From that perspective, a product page is crucial as it is usually the spot where most decision-making on “to buy or not to buy” happens. So, when designing or improving an e-commerce website or […]

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

]]>
In e-commerce, the measurement of success is not the number of website visitors or clicks. It’s the number of finalized purchases. From that perspective, a product page is crucial as it is usually the spot where most decision-making on “to buy or not to buy” happens. So, when designing or improving an e-commerce website or application, UX designers have to think it over and test it up to the slightest detail. That’s what today’s article is about: let’s discuss what a product page is and how to design it effectively. Packed with plenty of examples from both known e-commerce websites and creative design concepts for niche or specific business goals.

ecommerce product page design tubik blog

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-design-gardening-website-tubik

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-walmart-design4users article

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

mark-and-spencer-product-page-design4users article

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

gno-blankets-website-product-page

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.

uniqlo-product-page-design4users article

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-design4users page

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.

amazon-product-page-design4users article

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.

product-page-amazon-1-design4users

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.

product-page-amazon-3-design4users

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-design-target-design4users article

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-design4users blog

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.

hm-product-page-design4users blog

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 Design: Best Practices on UX for Ecommerce

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.

george-product-page-design-design4users

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.

sportsdirect-product-page-design-design4users

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 ecommerce app tubik design

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

old-navy-product-page-design4users

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.

oldnavy-product-page-design

oldnavy-product-page-2-design4users

old-navy-product-page-3-design4users

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 design UI tubik

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.

product-page-ecommerce-website-tubik

fashion-brand-website-mobile-tubikstudio

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 page ecommerce website tubikstudio

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.

]]>
Graphic Design Case Study: Identity and Packaging for Garden Center https://design4users.com/graphic-design-identity-packaging-garden-center/ Fri, 13 Oct 2023 18:57:00 +0000 https://design4users.com/?p=12027 “To plant a garden is to believe in tomorrow,” Audrey Hepburn once said, and whatever changes times bring, this idea lives through them. This graphic design and digital art project by tubik is also inspired by the beauty of flowers, leaves, and blossoming nature. Check the stylish and elegant packaging design and a set of […]

Сообщение Graphic Design Case Study: Identity and Packaging for Garden Center появились сначала на Design4Users.

]]>
“To plant a garden is to believe in tomorrow,” Audrey Hepburn once said, and whatever changes times bring, this idea lives through them. This graphic design and digital art project by tubik is also inspired by the beauty of flowers, leaves, and blossoming nature. Check the stylish and elegant packaging design and a set of bright, atmospheric illustrations developed as a part of the brand identity concept for the garden center and a plant nursery selling plants and gardening stuff.

The design process for the project included three creative tasks:

  • logo design and brand color palette
  • a consistent set of original brand illustrations for diverse marketing goals online and offline
  • packaging design

Identity and Packaging

The logo design for the project presents the combination mark in which the symbol echoes botanical motifs elegantly organized in a square shape, and the typographic part sets a strong visual connection with it using the same leaf shape as a part of the letter. The color palette features the domination of earthy natural colors, with different shades of warm, eye-pleasing brown for backgrounds and contrastive bright blue, green, yellow, and other shades for accents and details, distinguishing different products and goods by color marking. This approach can be seen in a variety of packaging design items.

garden center logo design tubik

plant nursery identity packaging design 2

garden center boxes design tubik

round box packaging design tubik

plant nursery identity packaging design tubik

plant nursery identity packaging design box lids

garden center branded tote design tubik

Brand Illustrations

The consistent set of illustrations developed for the project features a variety of people and characters holding different plants or dealing with gardening routines. Digital artworks of this kind add a solid human element to brand communication and make it more emotional. They can be effectively used for a variety of marketing goals, from printed branded graphics such as posters, banners, cards, and stickers to packaging design such as various branded boxes and bags, to digital communication on a website, hero images, landing pages, and social media posts. The consistency of the visual approach helps to create an integral customer experience and strengthens brand recognizability.

plant nursery brand illustration tubikarts

gardening website hero illustrations garden tubikarts

garden center illustration tubikarts

garden center brand illustration tubik arts

gardening shop illustration flourish tubikarts

plant nursery identity illustration tubikarts

New design case studies are coming soon. Stay tuned!

More Design Case Studies

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

Aqua Dudes. Cartoonish Packaging Design for Fish Food Brand

Herteas. Packaging Design for Herbal Tea Brand

Nutribite. Tasty Packaging Design for Granola Bars

Milkimu. Packaging and Marketing Design for Dairy Brand

Dance Festival. Creating a Set of Event Poster Designs

Soaplanet. Soap Brand Packaging Design with Travel Spirit

Joosi. Packaging Design and Marketing Graphics for Juice Brand

Pizzatta. Artistic Pizza Packaging Design

Page Turner. Identity and Packaging Design for Bookstore Chain

8 Bright Packaging Design Projects Employing Illustration Art

Bikker. Identity Design and Illustrations for Biking Service

 

Originally written for Tubik Blog, graphic content by tubik

Сообщение Graphic Design Case Study: Identity and Packaging for Garden Center появились сначала на Design4Users.

]]>
3 Stylish Visual Identity Projects by Black Pepper Design https://design4users.com/visual-identity-projects-black-pepper-design/ Wed, 23 Aug 2023 17:33:42 +0000 https://design4users.com/?p=11923 A new dose of design inspiration is up in our D4U Gallery, and this time, it’s another episode devoted to an elegant approach to visual identity design. Let’s review the stylish projects on developing a visual style approach for different brands accomplished by Black Pepper Design, a design team based in Brazil. Here, we’ve collected […]

Сообщение 3 Stylish Visual Identity Projects by Black Pepper Design появились сначала на Design4Users.

]]>
A new dose of design inspiration is up in our D4U Gallery, and this time, it’s another episode devoted to an elegant approach to visual identity design. Let’s review the stylish projects on developing a visual style approach for different brands accomplished by Black Pepper Design, a design team based in Brazil. Here, we’ve collected three of their projects reflecting their approach to graphic design and presentation for various types of business needs. Enjoy and get inspired!

Café Com Passagem

Café com Passagem project description from designers:

Café com Passagem is a family business focused on the specialty coffee market located in Foz do Iguaçu-PR. The need for this redesign came with the aim of praising the special Brazilian coffee bean, creating a brand aligned with the quality of the product that is able to reach international territories as well as the expectations of the specialty coffee consumer, who generally seeks knowledge about the world. of coffee and appreciates the stories behind each cup.

Specialty coffee in Brazil is treated in a very meticulous way, a process that involves many people and respects nature. The visual identity was built based on these precepts, with elements that reinforce craftsmanship, manual harvesting, people, Brazilian culture, and sustainability. The symbol in the typography represents coffee and the world, the Brazilian specialty coffee that has gained a prominent position in a global context. For the supporting graphic elements, animals from the Brazilian fauna (mainly from the Paraná region), the legend of Naipi and Tarobá, and drawings that illustrate the wisdom of the past of coffee cultivation were used.

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

black pepper design visual identity cafe

Terrano Engenharia

Terrano Engenharia project description from designers:

The brand was built by reinforcing the terrain’s work fronts (projection, work alignment, topography, and soil analysis) and also supporting the main pillars that the client expects to find in an engineering company: precision, seriousness, and safety.⠀

The colors used in the project represent a gradient of soil colors. Symbols and lines are essential elements in maps, and that is why they were added to the various geometric shapes of the visual identity – from the symbol “T” of the logo that was obtained from joining squares to complementary materials. The formats are generalist to facilitate reading and increase the level of understanding.

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

black pepper design visual identity terrano

Puppen Kids

Puppen Kids project description from designers:

The word “Puppen” used in the logo comes from the German language, which means dolls. The dolls historically occupy a place that brings warmth and affection, in addition to the rescue of free play. They were used in the complementary material as well as in the company’s name, contextualizing the idea of how dressing can be fun, cheerful, and cool.

The purpose of this visual identity is to encourage children to create their own imaginary world, express themselves, and play with comfort and style. The three dolls were strategically designed to initially represent Hannah, João Guilherme, and Isadora, children of Puppen Kids entrepreneurs – the biggest incentive to open a store in this segment. Being a democratic color, yellow is prevalent in Puppen Kids’ visual identity – not imposing any gender barriers.

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

black pepper design visual identity puppen kids

Check more projects by this team in the Black Pepper Design portfolio on Behance.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение 3 Stylish Visual Identity Projects by Black Pepper Design появились сначала на Design4Users.

]]>
4 Sophisticated Identity Design Projects by Monotypo Studio https://design4users.com/sophisticated-identity-design-projects/ Fri, 12 May 2023 12:40:34 +0000 https://design4users.com/?p=11764 A new dose of design inspiration is up to catch your eye in our D4U Gallery, and this time it’s all about the sophistication and elegance of identity design. Let’s take a glance at some projects on personal and corporate brand identity design accomplished by Monotypo Studio, a design team based in Mexico. Here we’ve […]

Сообщение 4 Sophisticated Identity Design Projects by Monotypo Studio появились сначала на Design4Users.

]]>
A new dose of design inspiration is up to catch your eye in our D4U Gallery, and this time it’s all about the sophistication and elegance of identity design. Let’s take a glance at some projects on personal and corporate brand identity design accomplished by Monotypo Studio, a design team based in Mexico. Here we’ve collected four of their projects reflecting their approach to graphic design and presentation for various types of business needs. Enjoy and get inspired!

Cuca Green Fonda

Corporate identity design project for an inn-type restaurant with organic and natural products.

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Cuca Green Fonda brand identity

Daniel Barreto Visual Identity

Identity design project for the talented audiovisual and graphic artist Daniel Barreto. The main design objective was to create a corporate identity project that visually reflected Daniel’s audiovisual work, with the creation of a monogram as a Japanese stamp, as Japanese graphic artists used to stamp their work, and a logo that reflects strength, distinction, and dynamism, and integrate the graphic work and the elements of the stationery consistently.

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

Daniel Barreto Visual Identity monotypo studio

MIES Identity Design

Corporate identity design project for high-line quality gourmet products next to be commercialized in México.

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

MIES identity design monotypo studio

Kiyoshi Sushi & Sake Bar

Kiyoshi is a corporate identity project for a luxury restaurant with a sake and sushi bar, a project carried out for a Domestika course, with the purpose of teaching the basic principles of modifying typography to create unique logos. The concept was inspired by Japanese gastronomy, which sees food as a ritual; the typographic inspiration and the illustration were made taking as inspiration the woodcut Ukiyo E engravings from the Edo period.

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Kiyoshi Sushi & Sake Bar monotypo studio

Check more projects by this team in Monotypo Studio Behance portfolio.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение 4 Sophisticated Identity Design Projects by Monotypo Studio появились сначала на Design4Users.

]]>
Case Study: FarmSense. Brand Identity and Website Design for Agricultural Technology https://design4users.com/case-study-brand-identity-website-design-agricultural-technology/ Wed, 26 Apr 2023 11:53:15 +0000 https://design4users.com/?p=11638 The new case study by the tubik agency team is ready to unveil one of our recent projects: we worked on the bright brand identity design and informative, easy-to-use website for FarmSense, the technology built on the crossroads of hardware and software, tangible and digital, and dealing with innovations in agriculture. Client and Project FarmSense […]

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

]]>
The new case study by the tubik agency team is ready to unveil one of our recent projects: we worked on the bright brand identity design and informative, easy-to-use website for FarmSense, the technology built on the crossroads of hardware and software, tangible and digital, and dealing with innovations in agriculture.

Client and Project

FarmSense is a USA-based innovative tech product that helps growers reduce losses from insect pests and lower dependence on pesticides to take the uncertainty out of pest management for better farming and a brighter future.

Why is it important, and how does it help? The agricultural industry loses more than $220 billion in crop damage each year because of insects. For decades, farmers have been stuck with few options for pest management. Most use sticky traps – a time-consuming and inaccurate method, followed by a broadcast spray of selected pesticides and insecticides. Still, sadly, these traps can also affect beneficial bugs that pollinate more than 70% of the global crop supply.

So, the FarmSense team formed by scientists and innovators developed a better way. Using computational entomological models, they created a real-time sensor that can help farmers make better decisions for pest management, saving time and potentially boosting crop yield. The team believes that leveraging the power of machine learning and computational modeling can help save lives, reduce hunger, and help developing countries achieve food independence.

The target audience they aim at is diverse, from big agricultural corporations to small family farms, from innovators and advisors with high tech-literacy levels to farmers that spend most time right in the fields and have no broad experience or tight connections to different software and applications. So, the team worked on the affordability and accessibility of the technology and strived to reflect that in the branding approach and website, helping them communicate with their clients and uncover the product’s benefits. Let’s check how the designers from tubik achieved that goal.

Identity Design

The branding design process started with extensive research covering the agriculture and ag-tech current state in the USA, the existing presence of the sector on the web, the pain points of the target audience, and the touchpoints of the brand communication.

Based on everything mentioned above, the key advantages of the product that branding had to transfer were defined as:

  • sustainability
  • affordability
  • accuracy of real-time data
  • rich information

As well, the team aimed at making a visual branding design system that would have a range from more strict and business-like to more illustrative and emotional.

One of the core tools supporting both emotionality and usability in brand design for FarmSense is color. The palette features bright contrast shades of natural colors employing the psychology of color and giving instant visual connection to the topic of agriculture, summer, soil, fields, insects, and plants: green, orange, yellow, and blue. The latter is also traditionally associated with tech-related and digital products.

case-study-farmsense-branding_color-palette

Having agreed upon colors, the team started working on the logo. The initial logo design approach was based on data as a core of the problem-solving power of the product. The creative search based on that resulted in a set of brand sign options reflecting that idea via lines and dots forming abstract shapes and building association with digital data processing and statistics visualization as well as fields seen from the bird-watch perspective. The basic shape chosen for the brand symbol was a circle.

case-study-farmsense-logo_reference

case-study-farmsense_reference-2

Here’s a glance at the logo design process, from sketches through variations to the polished sign. The first version of the symbol developed in this direction was an abstract round sign consisting of vertical lines.

farmsense-logo-design-first-variant_Sketches

farmsense-logo-design-first_Sketches

First sketches to think over the idea and find the composition

farmsense-logo-design-1_symbol

Digital symbol development

farmsense-logo-design-first-variant

Testing the symbol with the brand name typographic part

farmsense-branding-design_Logo-1

Monochrome version of the combination mark

farmsense-logo-design-first_soft-edges-option

The version of the symbol with soft edges

farmsense-logo-design-first_icons

Icons designed to test how the symbol can be further developed into other types of graphics

Another idea for the symbol at this stage of the creative search was to transfer the visual metaphor of the insect or the sun rising above the field, shaped by the lines. The latter was taken into deeper consideration.

farmsense-identity-design_drafts

farmsense-logo-design-first_new-sketches

Logo symbol sketching stage

farmsense-logo-design-first_vectorized

Digital logo symbol development

farmsense-logo-design-first_final-logo

Combination mark for the brand identity

farmsense-logo-design-first_white-logo

Monochromatic version of the combination mark

The set of branded items was also presented to show how this version of the logo and color palette could work for various marketing goals: banners, printed advertisements, social media posting, business cards, etc.

farmsense-identity-design_items

farmsense-identity-design-branded-items

farmsense-identity-design_socials

farmsense-brand-identity_items

Although the general idea looked effective, after discussions with clients and deeper testing, we together made the decision to move to another iteration, as this version of the symbol, even looking different, could bring up associations with some political campaigns that took place earlier in the USA. So, the second approach was also based on aerial views on the fields of crops, but this time irregular and asymmetric, cut by roads in various directions.

farmsense-logo-design_new-concept

For this version, the color palette excluded blue, and the basic shape was square. The creative search was done on the sign composition and detailing.

farmsense-logo-design_color-palette

The idea development resulted in the bright three-color symbol with a moderate level of detail and a bold, readable typographic part.

farmsense-logo-design-second-logo

farmsense-logo-design-second_monochrome

And here’s how it could be developed into the design system for branded items.

farmsense-identity-design-second_items

farmsense-identity-design-2_items

Posters design

farmsense-brand-identity-design-second_items

Truck livery design

However, the deeper the team dived into the visual concept for the FarmSense brand, the more the client’s team got certain that they would like to combine the discussed approach and palette to their existing logo and reconsider it to make its design bright, up-to-date, and recognizable as well as flexible for various communication objectives.

farmsense-previous-logo-design

The previous FarmSense logo

So, the final iteration started at the intersection of the existing logo and the ideas considered in the previous versions. The logo had to become simpler and less detailed to stay clear and informative in various sizes and get packed into a new color palette giving a quick connection to both agriculture and digital technology. Again, it started from basic sketching to think over the idea and moved to the polished logo.

farmsense-final-logo-design_sketches

farmsense-final-logo-design_symbol-options

Finally, the option with strict thin lines and a thin, elegant sans-serif typographic part was chosen as an approved brand sign.

farmsense-logo-design_final-variant

farmsense-brand-design_logo-final_white

So, based on that solution, the consistent set of branded items was designed for indoor and outdoor advertising and brand communication.

farmsense-identity-design-advertising

farmsense-identity-design-posters

farmsense-brand-identity-design-billboard

Billboards and banners designed for outdoor advertising

farmsense-identity-design-business-cards

Business card design

farmsense-identity-design_rollup

Rollup design

farmsense-identity-design_exhibition

Exhibition stand design

farmsense-brand-identity-design-truck-livery

Truck livery design

With the brand graphics above, it’s also easy to see that another important aspect of identity design for FarmSense was creating custom illustrations. They covered four major goals:

  • pictures set the atmosphere and apparent association with the agricultural theme
  • specially created graphics helped to visualize the flow and benefits of highly-technological processes which are hard or even impossible to show via photos or videos
  • custom graphics helped the brand to stand out of the crowd among the players in the agricultural sector, mostly using photo content which is often quite generic and just setting the theme
  • the hero illustrations featuring people added a powerful human element and made brand communication more friendly and emotional

farmsense-identity-design_illustrations

The creative process for the illustration also moved from rough sketches to present the idea and discuss it with the clients to the transformation of the approved ideas into bright digital artworks. Here’s a glance at the process for hero illustrations which had to become one of the first visual touchpoints of the product introduction on the website as a channel of communication.

farmsense-theme-illustration-sketching

farmsense-brand-illustration-design-sketch

farmsense-brand-identity-illustration-sketch

farmsense-brand-illustrations-sketch

farmsense-identity-design-hero-images

And here’s the process for creating custom graphics reflecting the main benefits of the FarmSense technology.

farmsense-icons-design-sketch

farmsense-identity-design-web-icons

Web Design

The next stage of customer experience design, extending the efficiency of the product presentation and amplifying brand communication online, was redesigning a website. At the initial stage, the team worked on developing a structure that would be effective and straightforward for the diverse target audience of the product.

UX-design-wireframes-farmsense-website-tubik

Overview of the UX wireframing stage to consider the solid and straightforward website structure and navigation

At the UI design stage, the bright branded colors were used not only for illustrations and other graphics but also as background colors for different website sections, supporting usability, scannability, and readability of web pages.

Here’s a glance at the home page of the website, catchy, friendly, and informative, amplifying the message with a hero illustration sharing the peaceful, sunny, and positive atmosphere and giving instant connection to the topic of farming that employs modern technology.

farmsense-website-home-page-tubik-design

The set of original illustrations used across the website pages proves itself as a powerful tool for visual communication and storytelling. It supports the text content, sets the mood, and helps establish consistency and integrity in the website’s performance.

farmsense-website-design-tubik-ux

Also, an infographic with custom illustrations was created to visualize how the technology works and make its benefits more accessible.

farmsense-identity-design-how-it-works-sketch

farmsense-website-design-how-it-works-illustration

farmsense-website-how-it-works-tubik-design

Here’s a closer glance at the set of artistic color icons supporting different text messages and creating visual triggers for essential functions or benefits to make them more noticeable and well-organized for website visitors.

farmsense-website-icons-design-tubik

To make the website work effectively and look attractive on any device, the tablet and mobile versions were also well-thought-out. They were arranged to provide a smooth and integral user experience at any stage of interaction.

farmsense-web-design-tubik

For our team, the FarmSense project was a great chance to collaborate with the representatives of the modern ag-tech industry developing with a rocketing speed now and utilizing innovations to improve farming experience and outcome, which is crucial for the whole world.

UI-design-wireframes-farmsense-tubik

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

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

Nibble Health. Identity and UX Design for Healthcare Fintech Service

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Glup. Delivery App Branding and UX Design

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

Carricare. Identity and UX Design for Safe Delivery Service

 

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

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

]]>
6 Elegant Identity and Packaging Design Projects by Studio MPLS https://design4users.com/identity-packaging-design-mpls/ Tue, 25 Apr 2023 19:48:12 +0000 https://design4users.com/?p=11563 Meet a new creative name in D4U Gallery. This time, we invite you to enjoy the elegance and sophistication of graphic design for business goals with projects on identity and packaging design accomplished by Studio MPLS, based in Minneapolis, USA. The studio specializes in brand identity, packaging design, and illustration with an artful, elevated approach, and […]

Сообщение 6 Elegant Identity and Packaging Design Projects by Studio MPLS появились сначала на Design4Users.

]]>
Meet a new creative name in D4U Gallery. This time, we invite you to enjoy the elegance and sophistication of graphic design for business goals with projects on identity and packaging design accomplished by Studio MPLS, based in Minneapolis, USA. The studio specializes in brand identity, packaging design, and illustration with an artful, elevated approach, and with over sixty years of collective experience, the team merges design sensibility with craft and artistry to develop innovative and elegant solutions for brands of all sizes. Here we’ve selected five of their project created for brands from different business spheres. Enjoy!

Duluth Candy Chocolate Packaging Design

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

MPLS duluth candy chocolate

Little Sesame Brand Packaging Design and Illustrations

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

StudioMPLS_LittleSesame brand packaging design

Sparkling Botanicals Identity and Packaging

Sparkling Botanicals MPLS drink packaging design

Sparkling Botanicals MPLS drink packaging design

Sparkling Botanicals MPLS drink packaging design

Sparkling Botanicals MPLS drink packaging design

Sparkling Botanicals MPLS drink packaging design

Sparkling Botanicals MPLS drink packaging design

Rishi Tea Packaging Design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

MPLS tea packaging design

Rishi Tea Sachets Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

Rishi Tea Packaging Design

AIGA Design Camp Identity Design

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

MPLS design camp identity

Check more design projects by this team on the Studio MPLS website or their Behance portfolio.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение 6 Elegant Identity and Packaging Design Projects by Studio MPLS появились сначала на Design4Users.

]]>
Case Study: Identity and Web Design for Niche Blankets Brand https://design4users.com/identity-web-design-blankets-brand/ Wed, 17 Aug 2022 20:10:17 +0000 https://design4users.com/?p=10844 Time for a new design case study, and this one is all about ecommerce and web marketing. Today we are unveiling the creative process by tubik agency on branding and web design for GNO Wellbeing, the company producing and selling special weighted blankets that improve the quality of sleep. Project Logo, identity, and ecommerce website […]

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на Design4Users.

]]>
Time for a new design case study, and this one is all about ecommerce and web marketing. Today we are unveiling the creative process by tubik agency on branding and web design for GNO Wellbeing, the company producing and selling special weighted blankets that improve the quality of sleep.

Project

Logo, identity, and ecommerce website for the brand of weighted blankets

Client and Story

It’s not a secret that healthy sleeping plays a huge role in people’s physical and mental health, productivity, and creativity. GNO Wellbeing company produces special and well-checked heavy blankets that present a reliable and comfortable way to wipe out anxiety and racing thoughts and sleep better.

First, GNO weighted blankets were sold only via Amazon, and people bought the product quite well there. However, to reach a wider audience and increase profits, GNO founders decided to build a solid brand and create an ecommerce website to expand their sales. As well, they strived for a new identity that would be both modern and flexible for various marketing goals.

Logo Design

Traditionally one of the core tasks at the branding design process is creating a logo, and this case was not an exception. The client gave a clear direction set behind the brand message: GNO Wellbeing is the brand that helps achievers to get a good sleep that helps them to achieve their goals. They wanted the logo to be fun, modern, and youthful and wished to think in the direction of a symbol logo rather than a wordmark.

As usual, the logo design process started with the creative search for a general visual idea. What the designer had to consider was the flexibility of logo usage for a diversity of surfaces, from blankets and packaging to the website and social networks.

The first set of concepts played around letter variations.

Here’s the symbol featuring the letter G that covers itself. The curves and rounded corners give a cozy feeling. In addition, the covering gesture corresponds with protection from anxiety and sets the visual association with the blanket.

logo-design-gno-branding-case-study

Logo concept

design-gno-branding-case-study-label

Label concept

bag-design-gno-branding-case-study

Bag design concept

Another concept presented a curvy letter G with a wavy ending that refers to the flow of a blanket when covering someone.

logo-design-gno-branding-case-study

Logo concept

design-gno-branding-case-study-label

Label design

bag_design-gno-branding-case-study

Bag design

One more logo design concept was inspired by the folds on the blanket. Also, it referred to ripples in the water, which is associated with calmness.

logo-design-gno-branding-case-study

Logo concept

logo-design-gno-branding-case-study

Label design

logo-design-gno-branding-case-study

Bag design

From this iteration, the style of the first variant was chosen for the further creative search direction to continue and dive deeper into searching for a proper symbol that would be both attractive and informative.

The new set of logo concepts offered a variety of symbols that could be developed and polished for the final brand sign. The set included both color and outlined options; most variants featured recognizable symbols such as a sleeping cat, moon, dreamcatcher, and some more abstract signs.

logo-design-gno-branding-case-study

 

In addition, to get another angle of view, the graphic designer made the set of options for typography logos in different styles, from bold and minimalist to beautifying serif.

logo-design-gno-branding-case-study

Having considered all the options, the symbol featuring a peacefully sleeping and smiling moon was agreed upon as the most effective for the brand goals.

So, this option was further developed as a brand sign for different goals. The choice of color had to be made, as well the designer offered two options for each color solution, outline and filled.

logo-design-gno-branding-case-study

The choice of visual concept was made upon a beige outline logo symbol (variant 1) accompanied by a solid and simple typography part.

logo-design-gno-branding-case-study

Then the approved logo was applied to the branded packaging and blanket label.

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

 

One more aspect to cover for the identity design was packaging solutions for branded candles. The minimalist and elegant solution for the candle with a branded cork featuring the outline logo and the readable label that used color marking for different scents and clear typographic hierarchy to let the buyer quickly skim the information.

logo-design-gno-branding-case-study

Another point to consider was updating and improving the Amazon presentation as the company still continues using this sales channel as well. So, it was important to make the brand presentation consistent everywhere. We created new infographics for that goal that supported the design solutions for identity and web design.

logo-design-gno-branding-case-study

Web Design

The website design for the brand had to keep visual consistency and harmony with the identity concept, let users quickly catch the message, review the benefits of the product, and make a purchase.

The web pages feature a well-balanced combination of airy light and deep dark backgrounds, high-quality visual content demonstrating the product outside and inside, clear visual hierarchy, readable fonts, and digestible information blocks, making the website scannable and eye-pleasing.

The website uses the sticky header to make the core links and cart available from any point of interaction.

Here’s a look at the home page. Its mission is to inform visitors that weighted blankets are not just regular blankets; they help people to get over sleep disorders and reduce anxiety. To quickly demonstrate that benefit, designers integrated custom illustrations that add a good mood and emotional appeal to the website. The information is divided into clear, digestible blocks in which background color works as a visual divider. The CTA button in the above-the-fold area echoes the color of the logo.

blankets brand design case study tubik

Home page for GNO Wellbeing website

Smooth scroll animation makes the interaction even more dynamic and attractive.

Except for the hero illustration featuring the peacefully sleeping woman and instantly setting the needed mood and atmosphere, there were some more custom 2D graphics integrated into the layout: a lovely sleeping cat character featured on the popup for subscribers and the section of reviews and original icons reflecting the benefits of the product.

icons-gno-website-design-case-study

Original icons visualizing the product benefits

Reviews-gno-website-design-case-study

The reviews section integrated into a cozy night-theme illustration featuring a cat character. 

subscribe-popup-design-gno-case-study

The Subscribe pop-up window with the custom illustration of a sleeping cat

The product page gives all the details about the product, includes the video presentation, and allows for choosing the needed blanket and adding it to the cart. The light background, balanced and thoughtful use of negative space, instantly noticeable CTA button, and highly readable font create the solid visual hierarchy of the page and make it easy to scan and interact with.

gno-blankets-website-product-page

The GNO blankets are made with premium materials. It’s important to tell customers about it, but it’s even more effective to show it. So, a special 3D illustration of the blanket layers was created to give an impressive visual presentation of that aspect.

The About page also uses contrast blocks to present the pieces of content. In the pre-scroll area, it gives a quick message about the brand message with a clear and prominent tagline in combination with the important infographic-style numbers about the company and lovely photo content setting the needed theme. This block uses a dark background making the photos look deeper and the tagline even more prominent. The next block uses a light background, first of all for the sake of readability as it presents the bigger block of text telling about the brand.

gno-web-design-about-page

So, the website for GNO features three different types of visuals: photos, 2D illustrations, and 3D graphics, harmonically combined and balanced together.

Blog pages designed for the website also feature the same approach: they are airy, calm, and highly readable, with the careful selection of photo content that sets the consistent visual atmosphere.

blog_orange-gno-design-case-study

To make the website usable from any device, the team made the mobile adaptation of the pages considering the peculiarities of mobile interactions.

product_mobile-gno-website-design-case-study

In general, that was the case of tight and fruitful collaboration with the stakeholders to clarify the business goals and find ways to reach them by means of design appealing to the target audience and unveiling the benefits of the product.

Welcome to check the GNO Wellbeing website live.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

PointZero25. Identity and Website Design for Event Agency

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

 

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

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на Design4Users.

]]>
Case Study: Identity Design for Family Winery https://design4users.com/case-study-identity-design-winery/ Wed, 14 Apr 2021 10:44:19 +0000 https://design4users.com/?p=10051 “Design is the silent ambassador of your brand” Paul Rand once mentioned. Today’s case study by tubik unveils the story right about that: let us show you the stages of branding design for a small family-run winery. The graphic designer for the project was Serafima Shpin, and in the article, you will see the different […]

Сообщение Case Study: Identity Design for Family Winery появились сначала на Design4Users.

]]>
“Design is the silent ambassador of your brand” Paul Rand once mentioned. Today’s case study by tubik unveils the story right about that: let us show you the stages of branding design for a small family-run winery. The graphic designer for the project was Serafima Shpin, and in the article, you will see the different stages of creating a visual brand, from the idea search to the logo, packaging, printed stuff, and website.

branding-design-for-wine-brand

Brand Positioning

Shpin’s Wine is a brand that originates in a small winery, where the love of wine has grown into a family business. This activity involves the whole family in the process of creating a unique and exclusive wine. It is based on the tradition of classic winemaking. The concept of the brand is based on the idea of a family as a core: everything and everybody is interconnected in it; it is a single entity in which all elements complement and emphasize each other.

logo design for wine brand

Shpin’s moves away from the standard perception of wine to originality: it catches the eye with its uncommon appearance details, from the authentic shape of the bottle to the label, also maintaining the classic taste of good-quality wine. It defines its customer as an intelligent, cultured, and progressive individual.

branding-design-case-study

Idea Search

Grapes plant characterizes and highlights the entire visual design for the brand.

The solution is based on the structure of the vine, with all its features and unique multi-faceted forms: flexible twisting vines with their rough texture, twisted and whimsical tendrils, free and lush growth.

winery-design-inspiration

Logo

The authenticity of the vine set the main view of the logo, repeating its roughness and durable, stable old trunk.

logo-design-process-wine-brand

logo-design-process-wine-brand

logo-design-process-wine-brand

Typeface

Gilroy was taken as an additional font. In the general dynamics of the label style, it stands out due to the static and stable form. This contrast helps to navigate the information parts of the label quickly and makes its reading easier.

shpins-wine-brand-identity-design

Illustrations

The illustrations reflect the freedom and originality of the exuberant tendrils, which defy the general characteristics or order having a new shape and appearance each time. For the main illustrations, three key objects traditionally associated with wine were chosen: grapes, glasses, and bottles.

wine-branding-illustration

wine-branding-illustration

wine-branding-illustration

wine-branding-illustration

wine-branding-illustration

wine-branding-illustration

Packaging

Bottles are designed based on the contrast of the dark bottle and white minimalist label featuring brand illustrations and clear readable information about the product.

branding-design-case-study-wine-brand

Printed Stuff

All design elements are complementary and at the same time flexible to integrate into the different types of visual language: brochures, posters, and website interface.

wine-identity design

wine-identity design posters

wine-identity design

Web Design

Working on web design based on design stylistics approved for the brand identity, the studio UI/UX designer Sergey Kucherenko offered two options.

The first version of the website design performs in the monochrome minimalist interface and original animated illustrations inspired by art, supporting the brand image as well as adding fun and emotion to the interaction process.

Another option for the website is based on the monochrome palette, minimalist navigation, and elegant scroll animation, supporting the brand image as well as adding emotion to the interaction process.

Check this project on Behance and join the discussion.

More Branding Design Case Studies

Quisine. Branding Design for Food Delivery Service

Logo Design: Collection of Creative Logos for a Variety of Brands

Dicey. Logo and Mascot Design for Party Game

MYWONY. Storytelling with Brand Intro Design

Inspora. Brand and UI Design for Virtual Stylist

AppShack. Logo Design for a Digital Agency

LunnScape. Identity Design for a Landscape Company

Binned. Brand Identity Design for Cleaning Service

Reborn. Identity Design for a Restaurant

Originally written for Tubik Blog, graphic content by tubik

Сообщение Case Study: Identity Design for Family Winery появились сначала на Design4Users.

]]>