concept
shop experience
In the real world, when you enter a store, you feel something. There is a design, a look, the atmosphere, the cleanliness of the floor and the ordering in the shelves, the grouping in display islands or rows of shelves, the people, visitors and attendants, and the products and their product-presentations, packagings, the advertisements, etc… You could have a bag or a basket, walk through the lines of shelves and pick here and there the products you need or enjoy. Finally, you go to the cashier and pay. If you liked the feeling and the experience, if you find you were well served and if you feel ok with the availability, selection, pricing and quality of the products, you will come back for sure.
Either you like it, or you are indifferent to it, or you even do not like it. In the online world this is the same – at least for the feeling, the design, the products, and advertisements.
What you are missing is the people.
The design, the products and the advertisements must give you the good feeling.
Either you really like it, or you leave to the next page or to the next shop. And as there are so many options on the internet, the only chance for a shop to attract you to become a customer, is to tap into your expectation or to surprise you, to retain your attention and to motivate you to discover more.
When a customer lands on your web-shop, after either entering your URL (uniform resource locator – your web address) because he knows it, has been there before, has found it in a search engine or clicked on a link in an article or social media post or email, or scanned your QR-code anywhere, the first point of contact is the landing page or the home page. This is where you will need to present your shop in its best possible light.
The most efficient way to do that is to use visual elements: images or videos on the very top of the page, as this is what the customer sees first.
They must be perfectly lighted, clear and clean, telling the story you exactly want to be told. It is important they are captivating, allowing the customer to “immerge” into your shop with positive feelings and expectations, amaze or intrigueing him and awakening her desire to discover more.
Once she scrolled past the first visuals, she should directly be given a glimpse at the product and the offering. This can be categories or product visuals, in form of navigation menus, portfolios or panels.
Customers need to be able to order in three clicks from there. So, there should be the first click for product selection, opening the product page, there should be the second click on quantity, and the third click on buy, so the product is in the cart.
From the cart, there should also be 3 clicks to checkout order confirmation. So once the cart is opened, the first click to start the payment, opening the delivery address confirmation page. From there, a second click to the payment selection page. And finally, the third click to the checkout order confirmation page. Done.
Every shop platform has a standard, default design. To adapt to your shop, you can select colors, fonts and upload logos. This is the first step to making your customer feel a bit like if she were in your shop. But frequently, this is a very limited adaptation and does not really create an immersive feeling, a unique experience, or reflect your brand messages and corporate identity. The solution to that are themed shops.
Themed shops are customized shops that reflect a specific theme with a specific design.
The theme is mostly a collection of page templates, that secure the pages across your web-shop all have similar layouts and capabilities to present contents according to your specific requirements, that may be based on the business model or the strategy of your company, or simply adjusting to your brand and CI in the best possible way.
Themes further optimize shops for deployment on any device, so that you can always expect to find similar pieces of information independent if you visit the shop from a mobile, a tablet or a desktop computer.
Themes further provide features as responsive and lazy-loading images, mobile first layouts or apps as PWAs.
Fine tuning the theme will enable a very uniform shopping experience across all devices with high brand recognition.
I can adapt standard themes and customize them to your specific requirements, as well as develop completely new and unique themes for you, if desired.
user experience
User experience is depending on the overall customer journey the user has on your website or web-shop. It is affected by first of all the satisfaction of her requirements. So, if she comes on your site for finding a specific product, it must be either available, or at least it must be clear when it will be available. It may be good to offer alternative products, that are available faster.
The satisfaction is also influenced by the overall feeling – does the website react as the user expects it – can she make it her tool – or does she feel not well served or misunderstood ?
Then there is the factor speed.
If instead she comes to be inspired, and is more interested in discovery of your offer, you must make sure that this is what she gets.
At the end of the day, the user is the most important party of all your online activities.
The offering, that you present her, must be interesting. You probably have heard the 3 seconds rule. This is the maximum duration you can expect to attract the attention of the user and convince her that your offering is interesting.
The there is the golden design rule, that you should probably respect, to make sure your design is received in the best possible way.
In addition the user possibly wants to know what is happening. So it would be good to inform her on the progress of all processes, while she is waiting for a system reaction.
There are practical and functional aspects influencing the user experience. Everything visual should be realizable in the implementation – and if not, it should be clarified or signalled accordingly.
usability
Usability is about the ease of use of a shop.
From a concept point of view, this is about making the shop experience as smooth as possible for the customer and as efficient as possible.
Smooth in this sense, stands for seamless selection, seamless ordering, seamless payment. What comes after a click ? The customer expects a reaction of the system to acknowledge his actions. And the reaction should be immediate and fast as possible.
Efficient in this sense, means to reduce as much as possible the time needed to complete the purchase. This covers everything from the selection process to the final order confirmation click. For example, wish-lists or past-orders can help to speed selection. Stock availability indications enable to limit selection on available products and not wasting time with ordering products that are not available or obsolete.
Recommendations give a sense of community appreciation for the products of interest. Subscriptions for regular automatically executed orders can be a big benefit for time savings, as the customer can concentrate on the exception rather than the boring stuff.
The ease of changing addresses, payment systems and coupons are all very significant and relevant to the overall usability perception of the platform.
user interface
The user interface is the part of the front end that the user sees and interacts with.
It is transporting your messages and information and outputs them to the user.
And it collects user inputs.
It needs to be designed in a way, that the user easily understands the options for information selection, search, scope and how to enter in interaction with the offering he is presented, how to buy a product and how to complete an order.
Once the order is placed, the user may want to verify or track the progress of completion until dispatch.
She also may want to add or cancel some position. For adding it may all depend on the progress of completion. It probably also may be possible to place a new order. The only problem for the user is then that she may incur the double cost for transportation. For order cancellation, there must be a process and an explanation.
For all these processes there must be a clearly defined process on the shop, ideally intuitive, self-explanatory and self-serviced by the user.
devices
Devices are still the biggest challenge to webdesign.
Unfortunately, there is no real solution to all hardware constraints as they are so different.
The standard device sizes I include in my designs are mobile, tablet and desktop.
engineering
With over 30 years of experience in software engineering and an initial background in electronics and automation technology, my approach is to simply make it work the way that is needed. Whatever.
If any specific functionality is required, I access to the full breadth of the platform to modify the piece of code that needs to be changed.
Of course, always trying to respect code life cycles and changes only in areas that are overcoming the next system updates.
In the current versions, Shopware and WordPress are both running on PHP on the server side, and use MySQL or MariaDB for their database. Depending on the configuration and requirements, Shopware may use Node.js as serverside Javascript.
The front-ends are coded in HTML, Javascript and CSS3 and Shopware uses additional technologies as the template engine Twig and the Javascript-Framework Vue.js.
Processes
I like to start with the processes. The processes are what will make your daily job productive and efficient or cost-intensive and boring.
I suggest distinguishing the following processes:
The discovery – this is where the customer finds some piece of information about you somewhere on the web, and lands on your website or web-shop for the first time.
The seduction – this is the phase where she decides to dig deeper into your offerings. The interest is triggered by visuals or slogans. She is clicking on a Call-to-action or on the main menu and will land on a category page for example. The trust – this is the phase you have the opportunity to present more and more information and products to the customer and she is starting to trust into your ability to deliver the offering he is seeing.
The doubt – this is a phase where she may try to verify your offering by comparing it with other offerings on the internet.
The convincing – she is back from the doubt because she either has not found any better offer or at least no other offer available right now, so she basically has concluded if there is an order to place, it is on your site. The convincing is then about the details. It is about raising the confidence, that what she will order, will satisfy her expectations. The texts that are describing the product. The perfection and attractiveness of the imagery. References, rankings, and comments can be very helpful here.
The decision – she has made her selection and is now configuring her order. The configuration mostly starts on the product page. What quantity at what price and when can delivery be expected. These are the essential information here. Now everything must be easy as possible and as quick as possible to avoid a change of mind.
The fulfillment – now is the most sensible part of all processes. The payment needs to be as easy as possible as well. And then the order confirmation. And finally, it is up to you now to make the product available in the time promised and to deliver it to the customer as expected.
The aftermath – it certainly is in your interest to try to get orders from the customer in future again. There are different ways to motivate her to do so. For example, you can ask if everything was ok, congratulate her for her birthday, or offer small gifts at special occasions. You can also provide the possibility to subscribe to scarcely available or regularly ordered products, or to the newsletter etc… or you can send some friendship-coupon, that she may give to some friends, whom then may get a rebate on their first order as new customers.
The return – if something is not in line with the customer expectations, she will return the merchandise to you. So, you need to be prepared for that. Depending on your business, it will be more or less easy to handle such situations. From a process perspective, it would be important to have a clear process so the customer knows exactly what to do to return the goods, for you to know what is coming and what costs you need to anticipate, and to raise the chances they will reach you undamaged, so you can try to resell them after repair or repolish, if possible.
interfaces
Once we have a clear understanding how these processes will work and be handled in your organization, we can continue defining the interfaces needed to satisfy the customer requirements.
As you are an e-commerce, you either produce or resell the merchandise. In case you produce it, you will have interfaces to the physical world where these products are built.
In case you resell physical products, you will have interfaces to your supplier or suppliers, if more than one.
In both cases, you have inbound merchandise flows. Your online shop may need to issue orders to your suppliers to steer their availability or correspond with you ERP system. And you have to have a clear process for receiving these goods, ensuring their quality, and sending them to your customers, resulting in outbound merchandise flows through your logistic partners to the customers destination address.
From inbound to outbound you can measure many aspects of the processes, for example to assess the exact cost of the product, the overall capacity, the run rate, etc…
For the concept, it is essential to define the processes, as they will provide information on all data required for the implementation, and where it should be collected.
What you need to keep in mind is that to scale your online business, you also have to scale your supply chain as well as your fulfillment and logistics.
products
What products does the customer want to buy from you ? And why ?
If you are a retail shop, then things are pretty obvious. If you are operating a grocery store, the customer expects you to sell fruits and vegetables, pasta and all kinds of food, maybe some bread and some meat or cheese, and some beverages. If you are a flower store, the customer expects you to sell flowers.
Your online store should be targeted at a specific scope as well, the customers will expect you to sell. If you are producer, then your own products will be the most important product segment of your store. But you may be able to sell even more to the customers, if you extend your offering for a specific requirement or need. If you are a reseller, then your advantage may be in the proximity to the customer or because of a larger product rang making you the one-stop-shop or any other purely virtual benefit he may associate with the shopping experience in your store.
product-data
Product data comprises all data you can make available, a customer will need or require to make a purchasing decision.
The minimal required data are unit, size, weight, price, materials, components, characteristics.
Additional data can be a great benefit as they may be a way to differentiate your offering and prove you can go more into the details than others, making your offering more transparent and more attractive.
Some product data may also be required by law, for example for food or cars or electronic equipment and devices.
product-visuals
Product visuals like images, sketches, videos are very important as they are the only way to show you product online.
The picture quality is one fundamental requirement of every online presentation. The styles of the imagery can be very different depending on the impressions you want to transport.
The pictures should create a very realistic expectation in a way the customer is attracted to the product – but it must not create an over-expectation that could then be deceived in reality.
AI is coming into this area as well and there is a great opportunity using it for commercial image productions.
Visuals may include other motives as for example a person using the product, a scene putting the spotlight on the product or showing its production, its application, its benefits or its origin or location of production.
Images must be clear in their messages, may be fascinating or complex and attract interest, but should not be troubling or disturbing.
And in all visualizations it must be clear what it is you want to tell to the customer. Ist it the product ? Is it the service ? Is it your competence ? Is it a feeling ?
The more precise your images language, the higher the chances a visitor will take a look around for your other contents and become a customer.
categorisation & segmentation
One of the key aspects of shop design is the navigation and the ability for the user to grasp the various parts of the offering and quickly access the product or service she is looking for.
Navigation is based on categorisation and segmentation.
Categories are essential for grouping themes and products by type, application, origin, brand and availability.
Grouping in categories helps to simplify shop navigation, making it useful and intuitive.
Segmentation is about properties, characteristics and attributes assigned, as color, price range, discounts, ingredients, energy consumption / ecological levels, standards applicable, specifications (Material, Dimensions, Mass, …), customer groups, and price groups.
The segmentation enables a further splitting of the categories, for example in price ranges, and is realized in Shopware with filters.
functionality
The functionality is what the website or web-shop provides to support the defined processes and products.
Every shop platform provides a lot of functionality off the shelf. But to find the perfect fit to your specific processes is still a challenge. The solution is my core business: adaptation.
Adaptation can help to speed or simplify the processes and even though it is some upfront cost, it can provide you clear benefits in the short-, mid- or long-term.
One core aspect is: How much clicks does it take to place an order ?
Or when you switch quantities on the product page, is it really required to reload the whole page ?
Another aspect is for example the supply chain. Is the web-shop expected to forward the orders to the supply chain ? Or will this be handled with a separate system ?
How does the web-shop know how long it will take to deliver a specific product ? How does that information come into the system ?
For the transaction the shop needs to be connected to payment systems.
For fulfillment your shop needs to be able to generate packing lists and dispatch notes.
All these processes require support in the software and in the database and possibly connectivity with external systems. To make it all work in the end, I develop adaptations that based on experiences with real systems.
headless commerce & APIs
Our increasingly connected world leads to myriads of possibilities. The way to inter-connect systems, is based on application programming interface (“API”) connections, secured with API keys.
For an e-commerce shop to be integrated in a interconnected environment, the shop should provide a “headless” mode, where just data are delivered in a defined protocol (as JSON, CSV or XML) and not html-web pages.
