Client was in a desperate need for a fresh new look and responsive functionality for their e-commerce site.  This site is built in Drupal 7 and uses Drupal Commerce. Original site was built by another vendor. But the client felt that design looked outdated, several features on the site have become broken, the checkout didn't work and the site wasn't mobile friendly. 

 

My responsibility was to create a fresh new custom theme that would allow visitors to easily browse on mobile and tablet devices, fix the broken shopping cart, patch security holes, and implement a new merchant checkout gateway. 

 

I chose Bootstrap 2.3.2 Tweme theme as the base theme, since it was the most stable BS (end of 2013) at the time. Created a new custom child theme to incorporate client's wishes and new design's reponsive functionality. Below are more screen shots from the project.

 

 

- Drupal 7 Commerce refresh and fix broken checkout system

- Implement new merchant gateway.

- Develop custo responsive theme based on Bootstrap 2.3.2

- Fixing and patching security holes - open user sign up, no defined user roles for buyers and lookers. No   active cron jobs, easy to guess passwords, wrong file permissions.

 

 

Below is the screenshot of the old website as was delivered several months before I was contracted for the redesign and rebuild. The old site look and feel. Very outdated. A lot of wasted space, unnecessary content and confusing layout. 

 

The client wanted to make it clear to the visitor where to go next or what they are looking at.

Finished product screenshot. Big, bold images. Easy to read information and clear navigation structure.

Plan style category landing page example.   Big bold images are an important part of house plan designer's site, and category landing pages are highly popular with the visitors. 

Advanced search was left pretty much the same, but with a few upgrades: slider range selectors, open plan style filter list, reduced number of options on the sidebar. It was hard to convince the client to trim as much clutter as I have.

Product detail page features multiple imagery areas with a responsive carousel slideshow. Added: save to favorites and print this page functionality.

New bolder cart look. This is a collapsible block located at the top of the page.

Checkout, stage 1

Homepage on mobile

Advanced search page on mobile. The search form is still pretty long, but once the choice is made - the form collapses until it is needed again. And just like the desktop advanced search page, the mobile search page allows filter via sliding range interface.

Product detail page on mobile. This section of the site retained the layout from the old theme. I am planning to completely revamp the layout for mobile. It was important to retain all interactive functionality on mobile devices, so that the visitor has the same experience as on the desktop browser.