Design - the most important thing when creating a webshop?

In the following chapters we will take you through topics that we have through the years of working in webshop design identified as important, all with the same goal - to make the final product of the project an attractive and user-friendly webshop that brings revenue to its owners.

1. Offer vs. expectations - how do we define design on projects?
2. Communication, communication, communication!
3. What are UX and UI?
4. Webshop design elements

1. Offer vs. expectations - how do we define design on projects?

The rule that applies in any cooperation is that both parties will be satisfied if what is achieved reaches or exceeds expectations. When creating a webshop, the appearance and design of the webshop is extremely important to customers, sometimes even the most important. Therefore, it is very important for us to be clear from the very beginning what we offer and what we can deliver in which price range, in order for customers to create realistic expectations.

Specifically, speaking about the design of the webshop, we have formed three levels of service which, depending on their scope, are included in the appropriate package of webshop development:

• Predefined design
• Standard custom design
• Premium custom design
• Deluxe custom design

PREDEFINED DESIGN

In our basic package, SHAPE CORE BASIC, the design of the webshop is based on a ready-made theme that adapts to customers in its basic elements: logo, colors, banners, font.

A predefined template is used in which the layout of the elements on the main pages of the webshop (front page, category page, product page, check-out) is preset. For example, the front page specifies where the logo is located, what the menu looks like, the size and position of the banners; the category pagey determines the appearance of the filter, sorting, display of products in grid and/or sheet  variants, while the product page determines the arrangement of elements that describe the item - image, name, description, quantity, add to cart.

As part of this package, it is possible to customize the basic color scheme of the webshop and, of course, the logo, so that the page visually represents the visual identity of the brand or retailer in question. By applying banners and quality photos to the product description, a modern look of the page is achieved, which above all ensures a good user experience.

At the beginning of the project, we provide clients with several links with examples of this level of design on active webshops, to get a better impression of what it looks like in practice. The template used is responsive, ie adapted for access via mobile devices.

STANDARD CUSTOM DESIGN

Unlike the predefined design, in the standard custom ie. custom design the website is designed from the start, but based on predefined wireframes. This level of design is included in the SHAPE CORE ADVANCED package at no extra charge.

After the first contact of the client with the Project Manager and the designer, the wireframes are discussed and based on them and the client's instructions and wishes, the designer makes a proposal for the design of the homepage. In addition to the wireframe itself, it is useful to get (from the client) a few examples of webshops they like, especially foreign ones that will not be their direct competition. If there is a brand manual or book of standards, all the elements on the webshop adapt to it.

What is a wireframe?

Wireframe is a simplified view of the future design that shows the basic elements of the page - the layout of images, texts, icons and the like. These elements are not interactive and do not show details, most often not even colors, and serve primarily to give the designer the 'foundation' on which to build further design.

Wireframe provides answers to the following questions:

• Content - What exactly will be displayed on the page? eg images, texts, icons, video content, products
• Structure - How to arrange the elements that the page should contain? eg at the top of the cover are the webshop logo, main menu, search bar, shopping cart, favorites overview, product comparison, contact link, phone number, language / currency change, etc.
• Hierarchy - How will these elements appear in position, markup, and size?
  eg the ratio of the main banner and the secondary banners, prominent products
• Behavior - How will these elements interact with the user? eg sliders, flip, hover, etc.

 

Here's what is designed in the standard custom package:

• includes design of up to five types of blocks on the homepage (eg header, slider / promo zone, featured products, featured blogs / news, footer ...)
• one type of block can be applied several times on one page (eg title page), with different content
• after confirming the design of the homepage, the design is applied to the category page and product page, and to all static and general pages
• responsive web design for the best user experience on mobile devices and tablets
• content is adapted for mobile devices with layout change, font size, image size, navigation layout, etc.

When designing the homepage within the package, one round of changes is included, ie. design corrections.

PREMIUM CUSTOM DESIGN

Another step up would be the premium custom, ie. custom design. This level of design is done at the request of the client and is not included in the standard SHAPE CORE packages but is additionally contracted.

What is the main difference between standard and premium custom design?

The premium design includes a custom wireframe and the design of all webshop pages. In more detail, this means the following:

• custom wireframe production for up to 5 pages: homepage, category page, product page, shopping cart, blog, about us, contact - at the client's choice
• based on the confirmed wireframe the homepage is designed, the client in the first iteration gets two versions of the cover design
• after selecting the preferred design version, up to three rounds of homepage design changes follow
• includes design of up to 10 types of blocks on the homepage (eg header, main menu, slider, promo zone, featured products, featured blogs / news, newsletter subscription, featured benefits, footer ...) - one type of block can be applied to one page (eg title page) several times, with different content following the design of all other pages based on validated wireframes
• includes one round of design changes to every page being designed (e.g. category page, product page, blog index page, blog, contact page ...)

Extra: 

- testing and supported work in different web browsers (Edge, Google Chrome, Safari, Firefox)
- final testing of functionality, UI (User interface) and UX (User experience)
- responsive web design for the best user experience on mobile devices and tablets
- content for mobile devices is adapted through the layout on the page, changing the font size, image size, navigation layout etc.

This package includes three rounds of homepage design changes. So after choosing one of the two initial proposals, through three rounds of changes  the final look is defined and then we move on to designing other pages.

After saving the elements in graphics, HTML 5 code is created and optimized in order to load the page as quickly as possible and reduce latency, which is especially important for Google advertising. When ranking ads, Google pays special attention to the quality of the landing page to which the ad leads, with special emphasis on the time of the first response, loading the heaviest element and full loading of the page.

DELUXE CUSTOM DESIGN

The highest level is deluxe custom design. It is also contracted additionally and does not have a fixed price, rather the price is defined based on the complexity of the project and the number of hours worked.

What does this design package bring?

• includes the design of all webshop pages, the design of all icons and buttons and all menus
• the design process begins with an introductory workshop where the client, project team and designer analyze in detail the client's wishes, examples of webshops with good design, specific needs for the client's industry and the like
• based on the workshop we make custom wireframe and custom design of all webshop pages (title page, category page, product page, shopping cart, check-out, contact, about us, static pages, blog index page, blog, user profile, loyalty club, etc. ...)
• includes any number of block types on the homepage and on all other pages (eg header, slider / promo zone, featured products, featured blogs / news, footer ...)
• includes the design of all icons and buttons on the page
• involves formatting the main menu
• included three rounds of design changes to all pages

In addition, it includes everything that Premium custom design has, with one additional thing: user testing of the design, ie collecting user feedback before the final production.

2. Communication, communication, communication

In order for the webshop design process to go smoothly and on time, it is important to ensure efficient communication between the project team - project manager, client representatives and designers. Most often, a project is opened at Asana as a collaboration point where it is transparently shown which tasks are on the to-do list, who is in charge of each task, whether a task requires feedback from the client and what are the deadlines.

This way of communication, with regular meetings and feedback sessions, allows for quick changes and changes of direction in the design.

When it comes to communication, we also work on educating clients about the elements of UX and UI that are important for webshop users. This way, we give our clients a broader picture and context of designing a particular element, instead of focusing on how pretty something is.

3. What are UX and UI?

UX (user experience) and UI (user interface) are terms used in web design and mobile application design. These are two related processes that ultimately represent the same thing - design.

What is UI design?

UI or User Interface design is actually the graphic appearance of a website, webshop or mobile application. It includes designing elements such as banners, click buttons, text layout, photo processing, icon design and other elements that allow the user to interact with the webshop. UI designers are mostly graphic designers and their main task is to find the ideal combination of colors, shapes, button sizes, text breaks and other elements to create the desired impression of the webshop.

What is UX design?

UX or User experience determines the way you interact with the webshop. It isn't the same if the navigation is logical or looks cluttered and unplanned, and whether the interaction with the user is efficient and fluid. UX determines the structure and functionality, ie. the ways in which you communicate with UI elements.

In short, the UI designer takes care of the appearance of the webshop, and the UX designer takes care of how it works. Our experience on a large number of projects and constant monitoring of the latest user experience research on webshops give us an excellent background in UX, and our task is to guide the UI designer through the client's wishes, while meeting the high standards of UX.

4. Webshop design elements

In the last chapter of this article, we would like to sum up the story of design with an overview of all the elements that should be taken into account when designing a webshop.

Before we go through these elements, let’s look at another important topic that can be influenced by the design and elements of a webshop, and that is trust.

Trust and security

What you definitely want is for your webshop to instill trust and security in your customers. The webshop may be the most beautiful and best in the world, but if the user is suspicious, they will not make a purchase. Most users really care about their privacy and whether the site protects their personal information, and whether they use a secure payment interface.

Here's what you can do to increase customers' trust in your webshop:

• clearly state the information about the company behind the webshop (company name, VAT, address, contact email and phone)
• post links to webshop profiles on social media
  photos of people from the team - all this information can be found on LinkedIN today, so why not share it on the webshop itself
• clearly communicate privacy, processing and protection of personal data policies
• highlight and make available the terms of payment, delivery and refunds in more than one place on your webshop - be completely transparent to customers about these three things
• General texts should be written in plain language, understandable to every user, instead of complicated legal terms and texts.
• Implement the SSL certificate and highlight the SSL certification badge.

• Add a distinctive badge of confidence, e.g. for our area they are Certified Shop by sMind or Safe Shop by eCommerce Croatia. The right certificate gives the site legitimacy and increases the level of credibility.
• Make the entire content of the website look authentic, verified and professional. Do not use Translate to translate texts, if you are not sure of spelling and grammar, send texts for proofreading, use only photos for which you have copyright or that are downloaded from free Internet services, make sure you do not have 404 errors, that there are no vacancies on the webshop or unverified information.

Finally, if you are really sure that you have done everything you can according to the above points, apply affirmative elements to the pages of the webshop (homepage, categories, products) that further promote security.

What do we design?

1. Webshop design – homepage

The visitor forms the first impression of the webshop in the first 50 milliseconds after opening the homepage. Therefore, the homepage must immediately capture the attention of the potential buyer, clearly and quickly communicate what is being sold and where it is positioned in the market - whether it is affordable goods, middle segment or premium offer.

For example, a webshop selling expensive designer jewelry should look significantly different from a local health food retailer. The main message that the brand sends should be manifested in the choice of font, color palette, style of photos used and other elements such as CTA (Call-to-action) buttons and the like.

At this point of defining design it is important to remember that what every webshop sells is its own brand. Webshop may offer many reputable global or local brands, but the user makes the purchase decision primarily based on their perception of the retailer's brand.

Brief homepage reality-check:

1. Can you immediately see that this is a webshop?
2. Can you immediately see what the webshop sells?
3. Do you immediately get the impression whether the goods being sold are affordable, medium expensive or premium?
4. Is there a clear CTA (call-to-action) in the first view (above the fold, before the user has to scroll or click further), for example BUY, ADD TO CART, EXPLORE SALE or similar?

If the answer to all 4 questions is YES, you are well on your way. If there are some NOs, talk to your designers about what could be done to improve the impression.

2. Product search, exploring categories

We have already written in detail about the product search bar on webshops, and we definitely recommend that you explore this area well during the webshop project.

In this section, we look at search bar positioning when designing a webshop header. Simply put, there are 3 options:

• magnifier marking the search engine
• magnifier and search bar
• dominant search bar

Which option to choose mostly depends on the range of the webshop and how complex the navigation through the webshop is. The search bar may or may not be equally positioned on the homepage and on other pages of the webshop, but take caution - habits are easily formed and changing the position of an element too often can have a counter-effect.

UX research shows that as many as 60% of customers who access the webshop via mobile go directly to the search bar, so for mobile versions of shops, a clear and large search bar on all pages of the webshop is definitely recommended.

View the categories in which the products are stacked as departments in a large store. These can be men's / women's / children's departments, by brands, by product types (eg household appliances in a large department store) or seasonal departments (eg Christmas assortment or everything for camping, from shoes to metal cups).

Modern webshop solutions allow you to easily rearrange items into new categories (either seasonal or permanent) without the need to manually change URLs or link filters.

It is important that the categories are clearly presented, accessible by clicking - avoid 'catching' the menu with the mouse on the screen, and that they are not too deeply branched. The golden rule says that each product should be available in 3 clicks. Too many subcategories can confuse a customer as much as too little.

3. Product page, exploring product characteristics 

When a visitor comes to the product page, we have one main goal - to encourage him to add the product to the cart.

• The user should never get into a situation of thinking about how to take the next step, especially when it comes to important steps like adding to cart or going for payment. These are the so-called primary actions on the webshop and for them we use noticeable CTA buttons with a call to action: BUY, ADD TO CART or similar.
• Buttons are positioned so that they can be seen without the need to scroll, and to stand out visually from the rest of the content (primarily in a color that contrasts with the rest of the design).
• Below the basic information about the product (photos, short description, price, basic features) are then a more detailed description, technical specifications, user reviews and the like, all with the aim that the visitor does not leave the product page unless necessary. But even that content needs to be thoughtfully displayed, piece by piece, as the user progresses down the page. We put the most important information at the top, and the details below at the page. We break long descriptions into sections with appropriate subheadings. We use tabs or expand / hide navigation elements for additional types of content. All of this contributes to the dynamics of a user’s content exploration and prevents us from suddenly bombarding them with too much information.
• When a user adds a product to the cart, we give them clear feedback that the product has been added.

4. Cart

Clearly present the order summary, so that the first visible list of all ordered products, quantity and price of each of them, the value of the total order as well as applied discounts and promotions, and most importantly - the cost of delivery or collection.

Allow users to have the ability to change the quantities and / or sizes of products in the cart itself, remove them from the cart, or add them to the favorites list.

At the end of the list, so at the bottom below or directly next to the total amount of the order is the ideal place for the CTA button with the next action we want the customer to do - payment. COMPLETE PURCHASE, PAY or CONTINUE TO PAY are clear messages that lead the customer to the next step.

5. Checkout process

A lot has been written and discussed about checkout processes, especially at the beginning of the development of online shopping when customers did not yet have experience with online shopping. Should the checkout process be simplified as much as possible or should it offer customers more options, should it be on one screen or in steps through several screens? There is actually no universal answer, but it is important to follow a few principles:

• enable guest purchases - by giving the option to purchase without logging in and registering, you will gain a whole group of customers who simply do not do this. These are mostly impulse customers for whom registration is just a disruptive step in the buying process, and we do not want them to give up because of that.
• visually show the customer the progress of the check-out process - either by counting steps such as 2/3 steps or a progress bar that graphically displays the progress, the customer must be clear at what stage of completion of the purchase is
• offer multiple forms of payment, taking into account locally popular forms of payment such as KEKS Pay or Paycek for cryptocurrency payments

6. User account

Vendors who receive a large portion of their purchases from existing customers should pay extra attention to designing an account where the customer can check their past purchases, make a refund, or seek customer support.

An excellent example is AboutYou, which has since recently been present in Croatia, based its business model on personalized marketing and constantly increasing the life value of the customer, which they achieve with a convenient and simple return model and overview of the entire process in one place.

If the vendor uses a loyalty program, the user account is the right place to provide all the information and benefits that the customer receives by participating in the loyalty program.

Pay attention to the consistent use of brand elements and building elements of the webshop itself, so that the user experience is the same throughout all stages of shopping.

In conclusion, let's try to summarize the most important points in terms of design in the project of creating a webshop:

• clearly set the expectations of customers in relation to what is offered in the package of web shop development
• maintain open and constant communication with numerous feedback iterations during the design phase
• take into account UX and UI design elements, as only a combination of both will result in a good webshop
• pay attention to the design elements of the webshop through all the main pages (front page, category page, product page, shopping cart, checkout, user account).

Following the above tips certainly facilitates project development, although design is never final and it is common for elements to change over time depending on trends and performance.

More on eCommerce

• Dynamic Pricing in eCommerce
• eCommerce terms and abbreviations