TJ Hughes. E-Commerce
URL: www.tjhughes.co.uk
Role
- Visual designer
- UI designer
- HTML & CSS coder
- JavaScript coder
Highlights
- Project taken from initial concept to final execution
- Concept, design and implementation of entire site design
- CSS based site design using EM based sizing
- Fluid layout design
- Multiple browser compatibility
- Valid XHTML markup
- Graceful JavaScript degradation
Description
TJ Hughes were using an off-the-shelf e-commerce solution (shop creator) that was failing them in a number of key areas: consistency of service, regular server drop outs, limited creative control, are among a few. The projects scope was to create a bespoke e-commerce solution that would solve their current issues and provide them with a tool that would enhance work flow and productivity.
The usual project flow was followed, initial meetings, project requirements, functional specifications etc. Once requirements were defined work began on the process flow of both back and front end of the site. Front end was broken down into the following categories:
- Homepage/department page
- Search
- Product page
- Basket
- Checkout
- Misc. information page
Each page required its own detailed analysis, including process flows, design patterns, etc. Once this had been done initial HTML concepts were created and integrated into the ongoing PHP development. The PHP coding and HTML/CSS design happened in parallel using SVN version control and Linux development servers, allowing for fast and safe prototyping.
After reviewing the site's Google Analytics for the previous four month period it became apparent that there was wide and varying array of visitors, all with differing screen resolutions and connection speed. Therefore, a design that could cater for resolutions of both 800x600 to 1280x1024 was called for. A fluid design was chosen due its ability work in all resolutions and expand, taking up all available screen space.
A shocking discovery that was made when researching competitor e-commerce solutions was the requirement for JavaScript for purchase. A number of large e-commerce site make it impossible to purchase if JavaScript is unavailable. While JavaScript is almost ubiquitous among modern browser, with the heightening of security and growing use of mobile browsers, not allowing customers to purchase without JavaScript is simply negligent. With some careful design choices from the outset and simple use of noscript tags, this issue was avoided in TJ Hughes site.
