Over 10% of Contiki’s traffic is coming from mobile devices, with over 58% being iOS, but the mobile bounce rate of 8.25% is more than the site average.
Why? Well…
That’s a lot of interactions for such a small screen.
Viewing a full site on a mobile device can be a bit challenging. While most devices allow you to zoom and scroll to accommodate for this, a user’s mobile experience is more likely to be positive if a site is streamlined to a simple and pared-down interface. When you are on a mobile device, you want to find information fast. You don’t want to have to search through numerous screens, hunt through pages, and wait for large images to load.
So with a huge task at hand, it’s off to work we go.
Time to build a plan and set some goals
If you haven’t had a chance yet, take a look at Contiki’s site.
Extensive, right?
They have hundreds of tours to choose from, and the site is filled with resources, information, images, and tools related to all things travel. While the goal would be to pull as much as we can to a mobile platform, to be able to successfully create a functional mobile site, we are taking baby steps and focusing on one major aspect of Contiki’s site: finding a tour.
So with that in mind, we researched best practices (through studies and examples we could find) and reported our findings to Contiki. We also walked through a rough idea of what we could keep on the site and what wouldn’t translate over as well. For example, while the new search results filter and sort components would be difficult to use on mobile, having some component of them was important, even if it became a stripped down version.
Once we agreed on the direction, it was off to bring the site to life with a paper prototype.
Paper Prototyping
As the invaluable wiki says, paper prototyping is
“a throwaway…which involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design.”
This was a first for me and one that took my imagination by storm. My ideas might have been bigger than my ability (rough is an understatement), but the end-product wasn’t so bad. Select the image below to view it in action
While I may have felt like I was cutting paper dolls in the corner with each of my screens, the end result was actually a lot more helpful than a stack of paper dresses and hats. It not only gave me a chance to explain how I thought the interactions would work to Contiki, it opened up more questions I hadn’t thought of and gave me more ideas on functionality that I wouldn’t have thought of had I not sat down and literally drawn out the scenario.
With the ideas fresh in my mind, I was able to bring our front-end team up to speed and pass my creation off to them to turn my make-believe into reality in a slick mobile prototype.
Check out the other posts in this series, Creating Contiki’s Mobile Site:
- Part 1: Design Strategy
- Part 2: Making the Mobile Prototype
- Part 3: Visual Design
- Part 4: Implementation