At afar.com, we decided to revamp our Travel Guides vertical in order to improve SEO ranking and overall UX. We felt that we had a good quality product, and decided to focus on fixing it in order to achieve the following objectives:
1. Improve the page’s SEO ranking
2. Reduce the bounce rate by improving the overall user experience
3. Update the visual design for better branding alignment across our platforms
The design on this page was pretty outdated and cobbled together over the years, and our hypothesis was that the internal navigation, content offerings, and visual design needed to be updated to improve the reading experience and reduce the bounce rate.
Additionally, our audience development team indicated that our competitive set of travel-related media sites rank better on search traffic, even though the content was pretty similar to other sites’. Some research on SEO best practices indicated there were some things we could do to improve our ranking:
Include more descriptive copy near the top of the page
Break up the page with better headings
Mention the destination name in key sections
Include as much high quality content and internal links to articles as possible
We gathered all the teams involved (editorial, audience development, data, product, engineering) and came up with the following ideas to improve UX and SEO on the travel guides pages:
Showcase more content related to a destination, such as articles, roundups, and nearby destinations
Include all relevant travel tips and essential guide information on the page, instead of hiding the content behind Javascript
Design more intuitive internal navigation
Organize the guide in a way that would make it a useful resource for travel planning
Tweak the voice and style of key copy elements to instill trust in our brand and editorial authority
We also came up with a mission statement for this project:
AFAR guides offer the world’s best travelers an easy way to find authoritative, curated, and inspiring information to help them plan their trip and travel deeper in a destination.
The biggest challenge for us was to decide and agree on what content to include, how much text to display, and how to prioritize the order that the content would be displayed. We came up with a list of content modules that the editorial team felt would be important to include for a travel guide to be truly useful to our travelers:
Once we had the content strategy in place, I created ‘priority guides’ showing all of the content modules and how they would stack up on mobile. The purpose of this step was to help my team see how long the page would be with all the content they wished to include. The trick here would be to determine what we could eliminate, and still end up with a robust and useful guide.
We had a series of collaborative meetings with the stakeholders, and went through a few iterations where we eliminated some of the content in order to get the page structure to a point where we felt it would be a good and useful product. Here is an early wireframe of the content that would appear on the Mexico City travel guide:
I added images, text, colors, typographic styles, and design elements in order to bring the wireframe to life, and also created clickable prototypes for some user testing.
I was eager to see what people outside our organization thought of our new travel guide product, and came up with a testing plan to recruit 5-6 volunteers, share the mobile prototype, ask them a series of questions and tasks, and see if our new design was on the right track. Here is the detailed testing plan:
I conducted the user tests over a period of 2 days at a cafe in my neighborhood. I paid close attention to each tester’s interaction with the prototype on their mobile device; recorded audio of all sessions, and took copious notes. I organized my insights into a massive Google doc (see screenshot below), and summarized the learnings into an annotated diagram of the mockup. Shared these documents with my team at our next meeting. Check them out below:
The prototype was pretty good overall, but the user testing showed us that there was definitely room for improvement. I annotated the mockup with insights from the user testing, and shared with the team so we could all be on the same page on what would changes to move forward with. One of the learnings was that the users would like more filter/sort tools for personalizing the content on the guides experience. In order to incorporate this capability, however, we would have to embark on a significant back-end tagging project. Due to time and budget constraints, the team decided that we would not include this functionality at this time, but plan to implement it in the future.
Other recommendations are noted in the mockups below:
I fine-tuned the typography, colors, icons, and design elements, and created some style tiles for the new design, shown below:
I created detailed specs for all the components and modules, and am now working closely with our engineering team to build the UI elements. Once these components are built, we’ll be able to use them throughout the site and update other sections of our platform.
Maria Stegner - Senior UX Designer
Anique Halliday - Director of Product
Anni Cuccinello - Director of Audience Development
Ann Shields - Guides Editor
Natalie Beauregard - Assistant Guides Editor
Laura Dannen Redman - Editorial Content Director