We overhauled and launched inbio.com, an educational and e-commerce, CMS website for Indoor Biotechnologies in Charlottesville. I wrote earlier about our approach to the package design we created for their Ventia product.
Just as packages require design expertise (layout, colors, visual hierarchy) and technical expertise (printing, production, folding, etc), websites require similar attention to user interface design and programming, but then they can have additional layers such as interactivity. That essentially makes them three-dimensional and tactile. It’s like a game of 3D chess where you have two or more playing surfaces stacked on top of each other. Any move on one of the boards affects the others below or above it. With any move we make on one of the layers, like design or programming, we have to consider how those moves affect the other components, like usability or site traffic flow.
We determined the overall content of the site in our usual way with a site map and then planned the various layers of user interface design with a schematic page layout. We determined the general sections of pages to be developed, and created schematic page layouts for the major ones, locating the most important features or areas on each, such as the navigation, main body area, shopping cart, login, utility links, etc.
We located the main navigation across the top and the sub-navigation (the pages within a given section) down the left column. Each section was color-coded within a harmonious color palette developed specifically for this site. As with any good branding, the colors are added to the brand’s repertoire to be used again in future marketing materials.
After a few revisions, edits to the color palette and discussions about functionality, we arrived at the final design to be converted to HTML code and then combined into the administrative suite.
The back end of the website was built on Zen Cart, an open-source e-commerce package. We selected it over several other options for its match of features to the client’s requirements and then customized it to meet the rest of their needs. We set up the site so that it accepts international transactions in three currencies – dollars, euros and pounds – and has different pricing for each of them. The news section of the site is synchronized from the US site to the others so that they automatically update every 24 hours.
So it goes with interactive design. You want some variety page to page, but you also want some predictability. Common elements between sections of the site make the user feel more comfortable while changes and variety help to engage them in new content from page to page. These techniques help to drive site traffic and work in conjunction with usability features to meet the client’s technical goals and requirements. Checkmate.
