Kris Balch, President of VST, reached out to Goldlilys Media to inquire how to make their existing website easier to manage. At first, they wanted a way to keep track of users who download their files, have a login system and maybe create a cleaner interface for their online presence. Their requests seemed simple enough, until Goldlilys Media browsed their previous website.
Some photos attached below are images of their old website. The color scheme was mainly black and difficult for the eyes to keep staring at because of the contrast. With the abundant amount of data for the cameras and some of the information in PDF files, it was too complicated to search for the products. To have most of the data in PDF files is also bad for SEO because search engine bots treat data inside PDF files like an image, not texts. The only way a customer can find anything on the website is if they already knew the camera title. Even the camera titles were difficult to decipher.
The connections between the data table of cameras were also not matching the data that belong in the applications and the contents for every camera pages. In other words, it was hard to find related cameras and offer suggestions to customers about what camera works well for a certain application. This was understandable because everything was manually coded in separate html pages. It became too complex to manage such a website without a Content Management System.
Design Phase
To solve this issue, my designer, Vina Rathakoune, and I discussed methods to improve the color scheme and organizational flow of the website. The photos attached below are some of the Balsamiq wireframes that were created. These are rough ideas that got translated to the design mockups. Vina had at least three rounds of revisions for the actual designs that includes color combinations, navigational styles, typography and other design elements.
The progress of the design phase can be seen from some of the photos below. In every design phase, the choices were narrowed down until the client decided on only one overall design for the website. All of these had to be approved first before the theming part of the Web Development phase.
Development Phase & Improvements
The major changes that were done in addition to the proposed Login and Register features for users to download files are the products, events, and articles. To allow the end-users to easily find the cameras they are searching for, a camera selection with filters for the different specifications is developed. Depending on the chosen filters, only the cameras that passes all the conditions are shown so that it lessens the camera options for users depending on their criteria.
Each camera is now organized into its own series and applications where the data is more in sync with each other. The series section is using the Foo Table user interface to allow table sort and better responsive view for mobile phones. To minimize the confusion for the naming, Vina also created the Camera Naming Legend infographic. The camera page separates the main features, applications and its technical specifications using tabs. From the requirements, end-users must login first and immediately get redirected back to the previous page once logged in to download the camera files.
The download section has been improved to include a file directory type of management to organize files. Every file on the website has privacy conditions that allow certain roles and users to download it. This helps content managers to keep track of who downloads what. The homepage includes a slideshow, featured event and latest updates. The slideshow images are able to link to certain parts of the website. The featured event is manually chosen by VST staff so they have complete control of what gets displayed there. Lastly, the latest updates display all the activities and changes taking place on the entire website.
In addition to the user interface for the end-users, the back-end management for Products is also simplified to allow the clients to easily add new cameras, accessories or lenses in the right section without coding knowledge. Adding a new product consists of a one page form with custom made selections and conditions that make sense to the overall flow of the website and their business process.
The second major change is the Events section where each event is categorized by type and year when it happened. This allows archiving and for visitors to know the current events happening for the company. Final major change is the articles section where each article has its own table of contents fixed on the left side. The table of contents allows content managers to include a shortcut interface that visitors can use to navigate long articles on the website. The shortcut interface uses anchor tags custom made for the content managers to easily create sections for their articles without any confusion.
Overall, upgrading to a Drupal CMS is an excellent choice when organizing a complex data extensive website like Vision Systems Technology. VST is managed by Kris Balch and Terry Guy who both have over 45 years combined experience at Eastman Kodak Company. At Kodak Company, they received their technical knowledge and business experiences that serves the digital imaging market very well. If you want experts in the digital imaging field and make the "right" decisions for your project, Vision Systems Technology will be happy to assist you.
