Transforming the QVC shopping site. For this design exercise I looked at the beauty page on the existing QVC UK website and looked at how it could be transformed to both look better and present an improved user experience. The page looks rather busy and perhaps lacks focus, with a confusing array of choices being presented. With three separate menus for beauty products one is left wondering where to start. The situation is not aided by the presence of the many of the same items appearing on either two, or all of the menus. Also there is nothing for sale this page. The page is rather long, and will certainly run past the ‘page fold’ of most screens.

Overview of proposed revisions

Existing page

The objectives were to bring simplicity and order to the layout and find a look to accompany the layout that was stylish and uncluttered. The main menu is simplified and placed horizontally at the top of the page. The footer menu and accreditations are important, but can remain where they are. As telephone sales volumes remain significant for QVC, the phone number has been moved from the footer to a more prominent position. The main menu has been reorganised and now contains two groups of links. First, links to major parts of the site. Second, shopping cart and customer services. The body of the page has been reorganised into three areas: the ‘masthead’ contains a ‘mood’ image along with the QVC logo, the word ‘beauty’ to denote the site section and the introduction text from the currently live page. Below that a small navigational area contains links to the beauty department menu and the beauty glossary. Below that, but clearly visible within the ‘page fold’ of most monitors, are 2 futher areas: products and editorial. The products are contains one latest product, one best seller and one on air item. Links below the ‘buy’ button offer access to all products in those areas.

The ‘editorial’ area contains links to the Beauty tour, Beauty day and Alison’s pages.

Navigation

Menu detail

Two distinct styles have been applied to navigation buttons. The regular underlined links simply link to other page whereas the tabbed links open up either menus or content, in slide-out layers. This allows the page to remain visually simple, and to make more use of the available space. The beauty menu slides open (image on left).

Site search

Search detail

The search facility slides down (image on left), with options allowing refinement of the search appearing at the bottom. Similarly, results would appear in a pop up layer, so allowing the visitor to remain on their current page throughout the search process.

Cart detail

One final development is ‘tear-off’ panels. Sometimes, when buying online, it would be very useful to be able to carry on seeing additional pieces of information, such as the contents of a cart, or perhaps product comparison data. With the increasing prevalence of wide screens, this may become practical. The image on the left shows a ‘torn-off’ shopping cart summary panel. Contained within the panel is a link to the full shopping cart page, a ‘close’ button, and of course a nice big ‘checkout’ button.

The finished design

Revised design

Certain elements within the styling have been deliberately kept subtle. The intention to give a message of quality while allowing for the varied use of colours, patterns. Images and of course products to differentiate each section. Hopefully by keeping the persistent areas, like the menus, subtle, seasonal or themed branding could be incorporated without anything looking out of place.

Tags:

• Web design