Drupal was chosen because of its accessible development platform, its scalable architecture and its vibrant development community.
Project Goals
Simplicity
The first goal of the project was to provide a very simple shopping and ordering experience. BonLook wanted to keep their site as simple and user friendly as possible. This was a challenge, given the added complexity of dealing with users' prescriptions.
Responsiveness
In order to keep the conversion rate as high as possible, the responsiveness of the site was also very important. This too can be a challenge on fashion-related e-commerce sites, as these tend to highly depend on high-resolution photography.
Project Requirements
Custom Checkout Process
To help keep the shopping process as hassle-free as possible, BonLook elected to ask users for their prescriptions at checkout. While this tends to affect the conversion rate of the checkout process, the overall shopping experience is improved as it allows customers to browse and add items to the cart more freely.
Allowing repeat customers to re-order easily was also a big criteria in the project requirements. The client wanted to provide returning customers with the ability to reselect prescription and address details used during a previous purchase.
To achieve these things in a simple and easy design, it was necessary to heavily customize the checkout process.
Custom Search Catalog
Being able to search for frames by style and dimensions was also a requirement, as some customers know the type and dimension of glasses they are after.
Floating Shopping Cart
A floating shopping cart was also a desired feature of the site. This allows customers to add items to their cart without being redirected off the product pages, a big improvement in a user's overall shopping experience.
Project Outcome
Customized Checkout Process
In order to create a positive and easy checkout experience on the BonLook website a custom checkout module was created. The site uses Ubercart as its shopping cart platform, and the current checkout process did not play well with the overall design requirements.
The checkout process makes extensive use of Ajax services to provide a smooth, seamless checkout experience without needlessly reloading pages.
A custom order review page at the end of the checkout process allows users to easily edit their shipping information and clearly choose a payment option.
Visual Navigations
With the help of the Views module and its flexibility in creating highly complex queries, we created a series of navigation menus on the catalog pages where users can enter a variety of criteria to produce proper sizings for their glasses.
Users are prompted to select a frame shape right away, which is a more natural way to shop for glasses.
Once on the catalog pages, the top navigation menu allows for customers to narrow their choices by color, shape and size.
The frame sizing window, just a click away, allows users to enter the dimension of the frames they desire.
Floating Shopping Cart
To provide a satisfying shopping experience, we created a suite of Ajax web services that would facilitate order management. This allowed the BonLook team to create a floating shopping cart, so that users would no longer need to access the full and all-too-familiar shopping cart page.
Technical specifications
Ubercart was chosen to facilitate the process of order management. By providing a ready to use shopping cart and order management system, Ubercart saved BonLook a lot of time.
The Views module was used for various items around the site, specifically for the catalog pages.
The CDN module was used to alleviate the website's bandwidth requirements as well as optimize the page download time as much as possible. The module allows integration with Amazon Cloudfront.
The Display Suite module was used mainly to organize the layout of the product pages.