Year of Design: 2004
Introduction: Medical-Tools.com is an online surgical instruments store that manufactures and sells various kinds of surgery, dentistry and veterinary instruments. As a company, they have dual competition with manufacturers for the quality and with resellers for the prices.
Challenges: Like any online store, Medical-Tools.com has to address multiple concerns of a visitor in order to convince him for the purchase. These visitors' concerns are spread over a wide range of array. This includes understanding the product to evaluating its manufacturer and from cost/benefit analysis to seller's own reputation and credibility.
Requirements: In order to make sale successful, medical-tools must address important user questions including:
- 1.What is the product about? (name, brand, model, multiple previews)
- 2.What are its physical and technical specifications?
- 3.What is the quality level of this product? (hardness, material and finishing standards)
- 4.What are its usage details?
- 5.What are views of people who have already used it?
- 6.How to get further information about the product?
- 7.How credible is this manufacturing company?
- 8.What are the warranty terms?
- 9.How easy is to claim warranty or a refund?
- 10.Why to buy this item from this seller?
- 11.How secure is the order processing system?
- 12.Are there any benefits if I make purchase decision now or later?
While working on the Medical-Tools.com shopping system, I found other than basic instrument information like product name, SKU and a short description, the shop failed to answer most of the user's concerns. Therefore I updated the ecommerce store and developed the information framework which was a solution to user's concerns effectively.
Another level of study was conducted to understand what are the first things which user wants to do on the store. These findings were helpful in designing website navigation and user interaction elements.
It was found visitors had one of the following objectives:
- They are looking for a particular product (searching by name, type, category or usage)
- They want to get details of a product which they have already noticed
- They are looking for product support
- They are looking for usage details
- They are seeking information about ordering and shipping
- They are looking to track their orders which they have already placed
- They are looking to return or its product warranty
In addition to inquires which are directly related to product, users are also interested activities which are business oriented which include
- Sales and special offers
- Organizational policies
- Reseller options
- Bulk buying and stock sale options
- Manufacturing of special or customized instruments
These user concerns were addressed and wireframes were designed which provided solution to user's problems and concerns.
Wireframes and Mockups
Wireframes are simple sketches on paper, similar to floor plans in architecture, and show how a website would look like. Wireframes are drawn to understand web-canvas space, its distribution into sections, navigation and number of elements that will appear on a page.
For Medial-Tools.com, it was important to add features to its existing template which was built using smarty-template files and used tabular layout. Therefore new sections and additional functionality was built around the existing components and when necessary, old components were improved.
After careful analysis, following wireframes were drawn.
For the interactive elements, like accordion on the products page, footer navigation and components were built and tested separately using standard HTML/CSS/JQuery files and then plugged into the existing smarty templates.
Visual Designing is designing the personality of a website. Visual design uses colors, typography, images, graphics etc to make the website pleasant to look at, to control eye-movement, to inspire, to induce and to highlight the most and least important sections of the website.
Colors: For Medical-Tools.com, website color scheme was derived from corporate logo which uses steel blue, dark gray and red. However use of red color was minimized to the banner area because of its sensitivity and being symbol of warning of danger.
Typography: 10pt (13px) font was selected to display product description with Dark Gray #333 being its color. Main headings which user’s eye would like to find where made large 30px in Arial and headings which were needed for visual separation were kept dark gray. Also only Product Name and Product Description were given H1, H2 and H3 tags and other headings were just made large without using any HTML heading tag. This was done to increase the key-word density for the Headings tags and to hide 'unimportant' headings from Search Engines.
Search: Upon analysis, it was found that only fewer than 3% visitors were using site’s search functionality. Search is an important feature of site which reveals similar products as well as the one visitor is looking for. To increase its usage, it was given an increased prominence, larger height and dark contrast. Since updating it, stats show more than 17% site visitors are now using search and conversion rate has also gone up.
Credibility through Social Sharing: Facebook Like button was strategically placed under the Save banner, right under the product heading and next to initial product description. This approach is found particularly well in gaining the user’s confidence and also giving the impression that product is popular one.
Buttons: There are many buttons on the products page but Add to cart button was the most important with user’s requirements in mind. Email and FAQ inquiries suggested people were having difficulty in placing orders through online website. Therefore a large Add to Cart button was designed which also included a tick mark to give users an implicit message “it’s okay” to go with. Other buttons which were not significantly important were made embossed but whitish to avoid obtrusiveness.
Visual Clutter Reduction: In order to reduce the visual clutter, Products Area was given a dark background color which isolated itself from Product and Product Description areas considerably. Also all sections of website were giving a light gray and light-blue bounding box to show which elements were related and were part of one information block.