Screenshot of the FerryCheap case study by Michael Saunders

FerryCheap

Responsive Web Design & Development

FerryCheap offers its customers an on-line booking system via its website where you can search for the route and times that suit you. Complimented by its real-time cost-comparison engine, you can be assured you are getting the very best price with FerryCheap.

When the company acquired the FerryCheap website some time ago, the branding wasn't particularly strong, and neither was the old-fashioned website that used a non-responsive approach. While retaining the basics of what was there originally, the FerryCheap website was redesigned and rebuilt with a maintainable Bootstrap framework, with a mobile first approach and given a fully-responsive layout where the website scales to fit whichever browser or device a customer is using. For brand reinforcement and a bit more personality I introduced illustrations of a cheerful character called 'Sid Seagull' which was an ideal way of incorporating a bit of fun within the FerryCheap brand by using CSS3 animations with Sid Seagull going along the screen from left to right in the header, appearing vertically from behind the navigation to join the logo in the header and going along the screen from left to right in the footer. The website draws from the one code base and was designed and built from scratch using hand-coded HTML and CSS with jQuery and JavaScript.

Screenshot of the FerryCheap homepage in mobile, tablet & desktop viewports

FerryCheap Responsive Web Design & Development

Homepage - Mobile, Tablet & Desktop Viewports

Screenshot of the FerryCheap ferry operators webpage in a tablet viewport

FerryCheap Responsive Web Design & Development

Ferry Operators Webpage - Tablet Viewport

Screenshot of the FerryCheap homepage & with the navigation open in mobile viewports

FerryCheap Responsive Web Design & Development

Homepage & Navigation Open - Mobile Viewports

Screenshot of the FerryCheap with the booking form open in mobile viewports

FerryCheap Responsive Web Design & Development

Booking Form Open - Mobile Viewports

Screenshot of the FerryCheap destinations webpage in mobile viewports

FerryCheap Responsive Web Design & Development

Destinations Webpage - Mobile Viewports

Screenshot of the FerryCheap CSS3 animated 'Sid' Seagull going along the screen from left to right in the header in a desktop viewport

FerryCheap Responsive Web Design & Development

CSS3 Animated 'Sid' Seagull going along the screen from left to right in the header - Desktop Viewport

Screenshot of the FerryCheap CSS3 Animated 'Sid' Seagull appearing vertically from behind the navigation to join the logo in the header in a desktop viewport

FerryCheap Responsive Web Design & Development

CSS3 Animated 'Sid' Seagull appearing vertically from behind the navigation to join the logo in the header - Desktop Viewport

Screenshot of the FerryCheap CSS3 Animated 'Sid' Seagull going along the screen from left to right in the footer in a desktop viewport

FerryCheap Responsive Web Design & Development

CSS3 Animated 'Sid' Seagull going along the screen from left to right in the footer - Desktop Viewport

Screenshot of the FerryCheap Disneyland Paris webpage in a desktop viewport

FerryCheap Responsive Web Design & Development

Disneyland Paris Webpage - Desktop Viewport

Design

  • Responsive Web Design
  • User Experience
  • Identity & Logo Design
  • Originate Style Guide/Brand Guidelines
  • Illustrations

Development

  • Web Development
  • Mobile Development
  • Digital Product Development

Take a look at the rest of my work.