Clipper Vacations had previously performed an Eye Tracking study, and the results of that plus Stakeholder Interviews formed the background for this project. This project was very collaborative and iterative, with continuous client review cylces that included some live sketching/wireframing in client meetings. The end result is a site that blends UX best practices, with a pre-packaged booking engine and content management system.
One of the foundation elements for this project was an updated Site Map. As you can see above, content was organized based on its location within the Header/Footer navigation. This came out of a prioritization exercise and was refined through multiple iterations.
Here we can see several options for a revised site Header, which was the first element to be developed. A preference exercise was performed with the client to narrow the choices and arrive at a final proposed Header. This exercise was also performed for the Footer and select content pages.
Once the Header and Footer were approved, page-level sketching began. The process of iterating with the client continued for select pages and templates. Placing sketches within the context of more refined work helped the cleint envision the overal structure of the page.
Clients often want to see the Homepage before any other, even if it is not necesarily the most important page of the site. Below is an example of more sketching and near final wireframes of the Homepage. This provides a good example of increasing levels of detail throughout the lifecycle of the project. You can also see progression in the layout of the Header and Footer, which continued throughout the project.
The Clipper Vacations website was comprised of a CMS-driven marketing site and a 3rd Party Commerce Engine that specialized in Ferry/Travel booking. Unlike the marketing site which was driven by dynamic tempaltes, the Commerce Engine was designed using a series of key workflows/use cases that covered the primary pages and interactions. This was done so that individual flows could be worked on by the developement team (CE provider) which was based offshore. Due to the unique nature of this structure the pages in the Booking wireframes include both the Flow and Annotations to assist the developer in understanding how each page works and fits in to the larger whole.
TABLE OF CONTENTS
This is an example of the booking wireframes Table of Contents. Key findings are included to help ground the project and as reminders for everyone what to evaluate the solution against. Additions and Deletions for each revisions are marked in the Publishing history to provide an at-a-glance reminder of what has changed.
Using sketching as the basis for the project helped speed development and improved client involvement and sign-off. The client was happy with the solution and our team was always ahead of any project deadlines. The work, which was completed in a 2 month time period in 2012 stands today (3 years later).