Web design will always be a serious business at Selesti. When we are creating a new E-commerce platform for our clients, or refreshing an information heavy site, it’s all about providing an unrivaled user experience.
E-commerce websites need their content to be engaging and alluring possible more than any other, and users won’t thank you for expecting them to scroll and scroll and scroll and... (you get the picture).
Our creative team have chosen three examples where design is used to create an enjoyable, interactive user experience; elevating a website above the norm.
If your site is suffering from text heavy pages or product pages limited to thumbnail images and nondescript text, please read on and learn what you (or we) could do to change this.
Is your approach to information-rich and E-commerce websites out of date?
Mobile technology in the form of tablets and phones has changed the way we access the internet and continues to become a greater influence on how we browse and shop online.
Using advances in coding and a fresh take on where your products sit graphically within the user journey can freshen up your approach to E-commerce and web design.
Online retailers have the chance to create visually engaging sites which place the product at the heart of the user journey.
Here are a few examples of how through visual means the product is at the centre of the user journey and how using HTML5 can change your approach to information pages.
DIESEL E - Commerce Web Design
Diesel re-interpret how the shopping experience can work on the internet.
Unlike most common E - commerce sites which are full of small thumbnails of products and complex detail pages, Diesel readdress the experience from a human perspective.
Upon selecting Male or Female, what the user is presented with is more of a visual representation of a store window, or even a wardrobe, than a traditional looking website.
It’s an extremely simple and effective approach that utilises large background images and a zoom feature. The result helps to subtly nod to a real shopping experience, with the feeling of choice.
It’s not as structured as a typical E-commerce listing page, but that adds an element of excitement. Seeing all the shoes together in a space and picking out a pair is a far more enticing way to shop.
Visit the Diesel Website
The Guardian - HTML5 Infographic
The Guardian’s article: ‘NSA Files: Decoded’ provides an extensive look from multiple perspectives on the topic of encryption and mass surveillance in today’s digital era. Traditionally, news articles of this nature, would be crammed full of quotes, data, interviews and diagrams. Often the message of the article can lose focus because the reader ends up getting lost in the details.
But in today’s culture, news journalism is increasingly adapting and evolving with new media; the web being at the forefront of these advances. Designers and programmers alike are constantly on the lookout for new ways of enriching the storytelling process.
The Guardian’s ‘NSA feature’ is a prime example of this. By using a theme of Decoding, (fitting for an article on the encryption) interactivity becomes the main driving force behind the article for communicating to the reader.
Through HTML5 infographics, heavy data is delivered accessibly and is easy to digest. Where drop quotes would traditionally reference an interviewee’s point of view, video footage replaces them to maintain punchiness.
Diagrams now become interactive with statistics revealing themselves based on the users’ input. The overall result adds a sense of discovery to the article.
Read The Guardian ‘NSA Files: Decoded’ article
Barenaked Foods E-Commerce Web Design
(Okay so we’ve chosen one or our own, get over it, it was award nominated). The Barenaked Foods website underwent a similar process. We showcase their products with large images, photographed on a table - this helps to present them accurately, in context.
Similarly, we designed a recipe section, referenced on the homepage, that uses an interactive plate slider to illustrate the aspiration point of the product - the finished delicious meal. Clicking the images in the slider takes the user to a detail page for each recipe that gives step by step instructions on what can be achieved if you purchase.
We feel it’s important to take E-commerce web design a step further, not just thinking about the purchasing process, but steps afterwards too, and get that into your potential customer’s mind. Often the best user experiences are the ones most alike to their real world counterpart.
Check out Selesti’s Barenaked Foods website
So there you have three examples to help you change your thinking when it comes to presenting information online and how to graphically elevate e-commerce pages. If you are in need of web design inspiration please get in touch for help with your website, [email protected]