Dottourism.com

Project Insight: Wireframe Development for new Mahindra Homestays website

08 September 2011 | Kate Waite

Following the research and discovery period of the Mahindra Homestays website re-development project (which you can read about here) we moved on to wireframing.
 

What is a wireframe?

A wireframe is essentially a visual, working representation of the website’s layout, a prototype for the finished development. It contains all the important elements such as page layout and the navigation structure. It doesn’t contain finished design elements but allows you to test the navigation, see how content will fit onto the page and establish the user experience.

A wireframe does:
-    Allow you to develop and test site navigation
-    Refine user interface elements such as forms
-    Lay content out onto the page and see how it will all fit together
-    Study the usability and visitor journey
-    Plan for the later programming requirements
 

A good wireframe makes for an efficient project

A wireframe is far easier to amend than a fully developed website and without design elements it helps to focus the attention on the all important layout and structure.

Even on very small projects we always plan for a wireframe phase as it allows clients to see the site objectively and make changes to the project at a stage when they will be quick to integrate, rather than later on in a development when it might be too late.
 

Wireframe for Mahindra Homestays

We started the project by looking at the most important visitor journeys through the site, identifying which pages would be key in moving from a search to a booking.

The current site homestay search functions could be frustrating for visitors so we wanted to develop a number of ways that visitors could homestays which matched their travel requirements and started on looking at the various search options.

 
The above screenshot shows the search by interest page at an early stage of the wireframe process. You can compare this to the finished page on the live site to see while the overall design looks very different, the basic structure is essentially the same.

We spent several months developing a full, interactive wireframe for the site, making several tweaks and changes as we gathered feedback from the client and used the prototype for usability testing.

We can look at a specific example of how the wireframe developed.

 

In this early version of the destination overview page we had a much larger image. We were keen that the site was image lead as India is a beautiful destination and good photography creates a very strong urge to visit factor in travel marketing. We wanted to avoid having an image which was too panoramic so as to limit the choice of shots, however, it became very apparent that the important content was being pushed below the page fold.

A second issue you see highlighted in the screenshot above was the alignment of the top sub-menu. Once a guest had logged in there was insufficient room to add the additional customer specific menu options without messily moving the whole menu across.

 

We solved these issues by reducing the image depth and moving the top menu to the left hand side, allowing space after the guest login section for additional menu options to open up into. On a wireframe these changes took minutes to implement, but at a later stage in the development could have wasted valuable project time.

You can see how these wireframe pages ended up on the finished site below.

 

A wireframe really does give the client the opportunity to provide plenty of feedback allowing issues to be addressed at an early stage.

Moving forward we knew that the technical site integration would be done by Mahindra Homestays own in house web team and a working prototype wireframe offered great guidance for the final site build.

Read about the full case study.