Case Studies

Distinctive Doors

This long-running Sheffield company had a pre-existing website that made them tens of thousands of pounds of sales each week, but the site suffered from a number of problems. Chief among them was the fact that it was edited by hand, which, with thousands of products, made it time-consuming & difficult to maintain. In addition, the site’s look was antiquated & needed to be modernised. They also wanted to accept credit cards on the website & have it tied to their stock control software. Finally, they want to continuously add new features to the site: planning future development was critical from the start.

Easier User Interface

Distinctive Doors Website

Because the company was already so successful, getting the layout right was critical. It needed to be simple to navigate around the site quickly; present enough detail that detailed buyers could make informed decisions; give buyers the opportunity to view, at a glance, the contents of their cart; and finally, it had to augment, and not detract from, the company's search engine rankings.

Accordingly, one of the prime goals was to ensure that the new site retained a “family resemblance” to the old site, so that returning customers wouldn’t be put off, thinking they landed onto the wrong site. We re-employed elements from the previous design to establish this continuity (the placement of the logo, contact information & the display of products are similar) while modernising the look & functionality of the site. In order to augment the ease of navigation, all of the site’s content is accessible via the navigation. And, to maximise the use of the user's screen, the design is optimised for various screen widths: the larger the screen, the more products you can instantly see without scrolling.

We also emphasised user interface enhancements for the site’s owners. Today they have a fully-functioning system where they can change the site’s contents very easily. Furthermore we provided on-page editing for products & other information, so there’s no disconnect between the task the site’s admins have to perform & the location of those tasks. The result is that site administration is so streamlined that it’s a small fraction of the time it took to edit the previous site. Distinctive Doors can concentrate on adding new features, building more products & making more sales.

Ajax

Distinctive Doors: Product View

Enhancing the site’s ease of use was more complicated. Using Ajax (Javascript used to update parts of a page’s content dynamically) to enhance the experience is all well and good, but we don’t use it at the expense of usability. In our work, we follow “progressive enhancement” techniques—that is, if the end-user has Javascript turned on, their experience is enhanced by its use, but those who have Javascript turned off aren’t relegated to second-class treatment. This is critical for SEO—search bots cannot navigate sites dependant upon Javascript. If we didn't follow this approach, whole sections of the website would be closed to search engines.

Progressive enhancement techniques assisted with the viewing of detail images of the company’s products (where the details are viewed on the page directly), but more importantly with the cart’s behaviour. If you have Javascript turned on and you place a product in your cart, the cart is automatically updated with the item; you can also add or subtract the numbers of specific products in the cart dynamically. If Javascript is turned off, however, the cart is updated by a standard page refresh, much as you’d experience in a site like Amazon.

SEO

Like Distinctive Doors, ardes are also very concerned with search engine placement. Our HTML is created to assist search engine ranking inherently by shifting the core of the design off the page—the “weight” of the page’s content is therefore increased in proportion to the elements that constitute the design. This minimalist approach, coupled with semantic mark-up, means that Distinctive Doors has a more solid foundation for search engine optimisation (SEO for short).

Ruby on Rails, Agile Programming & Test-Driven Design

Critical to the site’s success was our use of Ruby on Rails, a powerful development framework that, when used right, helps us build solid sites confidently. Because we follow Agile Programming techniques & Test-Driven Design, we know that the site’s foundation is rock-solid. This is helpful when adding new features: we know that adding a new feature to such a complex site won’t break pre-existing functionality.

Moreover, agile techniques assist in the rapid development of new features. This helped greatly with the development of the site: whilst working on the core features as presented in the initial specification document, we were able to respond rapidly to requests for new features.

These techniques are what you find in radical, bleeding-edge development; but we employ them because of the flexibility they give us, not because it’s cool. This flexibility isn’t available in other development paradigms, and it helps make our clients very happy.

Return on Investment (ROI)

One of the aims ardes always have in mind for any website we create is "Return-On-Investment" (ROI): how quickly what we make for you will cover the costs of development. This site was so inexpensive for Distinctive Doors that it paid for itself in less than a week.

Because the client is eager to invest in the site’s success, development is ongoing. We’re looking ahead to full integration with their stock control system & many feature enhancements to come.

See more examples of our web design & logo design.