Custom Responsive Magento Development - Visual Conferencing

Visual Conferencing Logo

Looking for a professional Magento development team, Visual Conferencing approached GCM eCommerce to help create a new and improved look that would be responsive to device screen sizes. In order to remain a leading company that provides video conferencing hardware and software and Unified Communication solutions, Visual Conferencing were aware that they now-dated website needed to be brought up to date in terms of a new Magento version, look and style, and an improved "user experience".

As with all new Magneto designs, the in-house designers at GCM eCommerce spent time researching the company, products and target market as well as competitors. This research was combined with an ever-increasing knowledge of modern web design techniques, effects and looks to create a mockup that reflected both the Company's brand and products and also an improved experience for visitors to the site.

Visual Conferencing Mockup Splashscreen

Initial Magento Design Mockups

Once the initial design mockups were agreed, development began on the new Magento website. The first step was to take the current Magento installation and database and update them to the newest version of Magento, keeping the site secure and safe. Following successful upgrades, progress began on the responsive design with regular contact between the teams at Visual Conferencing and GCM eCommerce to ensure everything ran smoothly and that improvements to the content could be made where possible, such as content and new, higher resolution images.

Visual Conferencing Category Page

Visual Conferencing Category Page

Simplified User Experience with Magento Categories

The design required that the new responsive Magento design should be clean, simple and easy to use. This perfectly reflects Visual Conferencing's approach to customer service and the products they provide. The result is a category page that feels spacious and simple to navigate with large, clear, high quality images of the products.

For an improved user experience, it was decided that the main navigation would "stick" to the top of the borwser screen when the user scrolls down the page. Rather than the whole of the header section, it is purely the navigation. This allows for the user to still view the content of the page but navigate throughout the site very quickly and easily.

Clean and Clear Product Page

The Product Page for Visual Conferencing's Magento website is broken up into large sections. This allows the information to be split between them, giving "time-for-pause" - a subconcious effect on the visitor which allows information to "sink it" and make the experience easier and not overwhelming.

Following on from the category page, the product page is full-bleed, allowing for high quality, large product images and descriptive content. The content is broken down into sections, making the user journey straight forward and easy to understand. The first section features the most important features of the product page; the price and "call to action" buttons to add to basket or wishlist. The price is then reiterated in the bottom section, as a reminder to the visitor.

Product Cross Sells and Related Product Information

Featuring on the bottom of the product page is a "similar products" call to action. These products have been manually selected within the Magento admin area and are an opportunity to cross-sell (or up sell in some cases) related products and upgrades.

For the admin team, it is simply a case of selecting the products they wish to appear on the page, and the information is automatically pulled out to be displayed. If required, the information within the cross sell can be different to the information that appears on the product's own page. This alleviates any potential issues with search engines' "duplicate content" penalties and also provides an opportunity to display contextually-pertinent information, rather than a "generic" description.

Visual Conferencing Product Page

Visual Conferencing Product Page