Tucan Travel
Tourpages - UI/UX
We the marketing team were briefed from management and operations that we would be focussing our priorities on redesigning the tour pages which would be the face of the product available to potential clients. So this was a very important feature within the website we'd be designing and something everyone in the company would refer to quite regularly especially the sales team who would deal with inbound calls and emails regarding enquiries and bookings.
We wanted to create something that not only ourselves in the marketing department were proud to represent the company as a product but also have something aesthetically pleasing, easy for the viewer to use. So gathering information from our colleagues on what they thought was wrong or would even be helpful to them or more importantly the client was an essential aspect of this design process.
The company dealt with third-party developers who we would be handing over the designs, and they would build the design template into our site so communication with them was essential to see what can and can't be made. The design process was up to myself and the other designer to create but amongst the rest of the team of 6 (marketing), we would gather research and analysis from competitors and also assist in testing along the way.
The template created would apply to all the various tours built into the online system so it needed to be quite flexible as there were such a variety of differences among the tours. We would test all scenarios of how the site may look in different situations and this would often involve the team working together, talking about how the viewers might interact with the design. I found this a vitally important part of the process as having as many heads think over all aspects of the webpage functionality, someone is always likely to be thinking about something different to everyone else.
Overall this was an exciting project to be part of and the first time either of us designers had used Adobe XD which in discovering its purpose I found really cool and super helpful. Especially when it came to communicating to the developers who were based out in Bangaladesh, there was often a language barrier at times. Having something physically created that we could refer to and could be displayed on screen to demonstrate the intended functionality of how certain sections in the build would operate helped massively.
Being able to refer to something that we display on-screen to them and how the intended functionality of particular sections should operate helped massively.
Analyzing the old
tourpage design
One of the best ways I find to getting round to solving a problem or improving something is to analyze the existing material. Breaking down faults or ways to create better methods of putting forward the information that is essential for the viewer to get drawn into the product and hopefully becoming a customer - that is the goal.
So looking at each of the tabs we found there was repeated information duplicated under each tab which was pointless and a waste of space. The 'Overview' tab had the map with the route and that was repeated on another tab labelled 'Map'.
There was a section in the Overview 'Whats Included' that was repeated in the 'Dossier' tab along with the whole Itinerary which was its own tab too. It was just unnecessarily duplicated. The dossiers purpose was just to hold information the client could print off easily that would include the itinerary, map and highlights etc.. but this could all just be placed on a downloadable PDF file. Another section on the dossier was info about things to pack, advice with money, insurance, visas and health. This also could go somewhere else as its boring and this doesn't sell the tour. Not everyone wants this info, plus this would be repeated in several other tours, so why not just make this another PDF if people want it. Atleast then we can save so much space and endless scrolling.
For the itinerary, a solution to freeing more space and not overloading the eye on bulk amounts of text was to make each titled day a dropdown button. So when clicking the specific day the information would drop into the view under the title. This could also be reversed in hiding the text by clicking the title or button again to make the information disappear.
Another thing I would check on is the colours and typefaces used, are they the correct colours and type to the companies brand guidelines. The type was but not so much the colour, plus the team decided having a change would be nice as it didnt really feel a great colour combination.
The Concept Process
In this whole design process, we would plan out our intentions of how we could improve and implement new sections for the redesign. I would start with rough sketches and then jump into photoshop and play around with the concept, developing along the way, fixing any problems that may crop up.
Thinking about how items in the build would transition like when clicking, hovering, scrolling, etc.., I find this an essential part of getting a clear idea of how things are going to sit within the layout and operate functionally.
One of the earlier ideas was the tour page navigation would stay static and you could flick through the tabbed sections providing certain pieces of information. Another was to have the tour overview always displayed which would state the title, route - to and from, duration and price. This would sit in the column on the right and appear above the specific tour reviews pulled from Trust Pilot. I thought the reviews being accessible at all times would provide reassurance that this is a great tour and give the viewer more of a reason to book.
Having gone over several concepts creating a couple mocked up in photoshop we decided as a team that we could push the boat out a bit more on the design functionality.
But there were aspects from what we had created so far which we liked and wanted to try to incorporate into the potential chosen concept.
This is when we combined a few of my and the other designer's ideas together and collaborated on something we both felt was going to work well.
Management would be kept updated on the progress we were making and liked the path we were heading on with a few of the concepts. They would see other competitors tour pages and suggest extra things that could be great to include in the designs. This was fine but I was aware overcrowding the pages could also not be great as there can be other solutions, but we would try a few other ideas along the way.
The sketch to the right was the latest rough layout on what was to be followed through, as the main concept and would lead us towards designing something more in-depth
Below are the mockups made in Photoshop for what came next as for the concept and from there it was on to building the functionality in Adobe XD.
We got rid of the tab feature which meant no more pages to flick between. Instead everything was built into one page and realizing things could get quite long as for scrolling, most of the content could be minimized to save space. To make navigating around the page quicker and easier we also thought to have the sections of the page within their own static menu so they were always on screen and each would anchor to the specific section within the page.
Functionality
The Itinerary section was quite a simple idea in creating a visual for as each day of whatever tour would be labelled 'Day 1,2,3..' along with the location. This would sit within a wide rectangular grey box along with an arrow aligned to the right. Depending on the direction it pointed, it would indicate that the information for that day had been expanded or collapsed from behind the grey rectangle and the arrow would rotate upon the click.
The purpose for this was to mainly save space should the user be scrolling.
Another feature are the two buttons above all the itinerary info on the right 'Expand All' and 'Collapse All' these would do exactly as they read and just save having to open each individual days worth of information.
Once on a clear path with the structure of the page design, it was time to think more in-depth about how certain sections of information could operate functionally, giving the user a simplistic and enjoyable process in navigating amongst the page layout. So the next step was to create a visual prototype through Adobe XD, which allows us to manipulate the design layout through animation, demonstrating how the user would interact with the information.
My first task was to show how the viewer could navigate through the page layout and an early idea was to have static anchors always in view at the top of the screen. These would lead the user to whichever section of information they would want to read and it was also created so there wasn't an enormous amount of scrolling.
Although I wasn't able to show how the navy blue navigation bar would drop into the screen once scrolling down past the hero image. This was briefed over in the hand-off and the developers got the idea of how we wanted it to drop in.
Originally the right-sided column was would fit into most screen heights and we didn't have the section 'Why Choose Tucan Travel' with the bullet points beneath. We decided it wasn't really necessary to display and would save us space for the reviews without cutting off part of that section. But was just one of the things the CEO wanted and the solution in having this was to place an arrow above so the viewer could just hide that info away should they want a larger display of reviews. The whole reason for the column on the right to display static was so the reviews could be seen at all times in as that is what helps sell the tour with other clients providing positive feedback for others to see.
The more complicated of all the sections 'Select Dates' as this information was always varied on length. From initial designs, this particular section sent us back to the drawing board and coming up with solutions for space and realizing what was more important to display on the shell and not be hidden became the objective. Each tour date like the itinerary days was a drop-down that would provide more information like costs for such things as extra excursions. Obviously, the start and end dates were important along with the availability and these two pieces of info would be visible at all times on desktop and mobile. Then having the price is usually what most are looking for and we were instructed to try keep the discounts always visible and having extra selling points like money saved became another thing to include but that could be located into the dropdown.
Functionality for loading tour dates by year would auto-scroll up when clicking the 2020 button and the grey box behind 2019 would slide over behind 2020 stating the dates are now visible.
Most of the sections would be controlled through drop downs to save space but one other was a slider function. This was used in the gallery to display a variety of videos and photos on different locations the tour would visit. The thumbnail size images could be controlled by the user either clicking and dragging to navigate through the images or even clicking the left and right arrows.
This slider function in the gallery would also be used in the last section of the page which would display other tours either similar or more in-depth trips. This would be pulling through extra data though that would help sell the tour such as the tour name, route, amount of days travelling, previous price along with the call to action linking to the trip.
All of the projected functionality for the pages was created and thought through using the Adobe XD and this was such a great tool to use, especially when it came to demonstrating how the protoype would work functionally. Not only being able to display these animations on screen did it help us conquer potential future problems that would occur to us as a team but also it saved so much time in the hand over for our developers who were based in Bangaladesh and at time the language barrier slowed things down usually.
