Travel Stories

A redesign case study

Last year I redesigned the eDreams ODIGEO blogs as a Side project out of my daily basis. When you work on a corporate environment side projects like this give you a chance to think outside the box and work with different stakeholders you are used to.

The final outcome of this project will be a Wordpress based Blog with a white-label approach for 5 different brands, human driven and focus on engaging readers.

eDreams: blog.edreams.es, blog.edreams.it, edreams.fr/blog, www.edreams.pt/blog, edreams.de/blog

Opodo: opodo.co.uk/blog, opodo.fr/blog, opodo.de/blog

Govoyages: govoyages.com/blog/

Liligo: www.liligo.es/magazine-viajes/

Travellink: blogg.travellink.se

Index

1. Meeting stakeholders and get briefed

2. Define objectives and KPIs

3. Gather all qualitative and quantitative data

4. Benchmarking competitors and big players

5. Navegation redesign through cardsorting

6. Involve main stakeholders on a workshop

7. Drafts, mocks and prototyping

8. User testing and iteration

9. Specs and Development

10. Tracking definition

11. Launch

1. Meeting stakeholders and get briefed

I was briefed by the Head of Content and Social Media about the need of a refreshment in terms of look and concept for their blogs.

The Content and Social Media team was growing fast and getting more innovative in terms of tools and way of thinking. They manage a network of 15 blogs, feeded periodically with original content about destinations, airlines, travel tips and news with 700k/1M monthly sessions (70/80% of our traffic is organic) and a high bounce rate (85%).

They were working for 5 different brands (eDreams, Opodo, Govoyages, Travellink and Liligo) sharing content and managing different platforms with different needs. As far as we had already solved the multibrand issue on our transactional sites by creating a unique front (Check eDreams, Opodo, Govoyages, Travellink) they wanted to have the same solution for their blogs.

In terms of style their blogs were really outdated and not responsive at all.

2. Define objectives and KPIs

Making a clear objectives and KPIs definition at the very beginning phase of the project is must do in order to keep always on the proper path.

The Head of Content and Social Media and me sit together in order to define the objectives:

  • Increase brand awareness and create a positive connection with the brand, seen as a closer and more human travel advisor.
  • Create content that people would love to read, share and interact with.
  • New categories creation
  • Improve the functionalities of our pages to guarantee maximum visibility to our content and activities.
  • Look & feel up to date.

And also the KPIs we were going to follow:

  • Sessions
  • Pageviews
  • Organic visibility
  • Engagement
  • Bounce rate
  • Transactions
  • Adsales revenue

3. Gather all qualitative and quantitative data available

In order to have a 360 picture I went to check some qualitative data, provided by analytics and some qualitative data provided by Qualaroo

3.1 Quantitative data from analytics:

  • 700k/1M monthly sessions.
  • Top performing sites are eDreams FR, IT, COM, ES and PT, followed by Opodo DE and FR
  • Around 70/80% of our traffic is organic, the rest is coming from social, CRM and referral
  • Bounce rate of our blogs is high — around 80%.
  • Around 15% of visitors are returning ones, while the rest are new visitors
  • Around 50% are accessing via mobile, 10% tablet and 40% desktop.
  • Most visited post are the Ryanair ones related with cabin baggage.

3.2 Qualitative data from Qualaroo exit surveys:

  • Most of the users declare to have found the information they were looking for.
  • Asked about what info the would like to read users declare they want to read more inspirational content.
  • German users were the ones most likely to answer the exit survey

4. Benchmarking competitors and big players

A deep understanding of the environment where we are working on is a must to achieve a proper solution. Competitors are facing the same problems we have to face and big players are delivering great interactive solutions.

In order to do this I split my efforts en 2 areas, one more generic focus on understanding the environment and the other one more specific focus on understanding the specific functionalities.

4.1 Generic Benchmark

This benchmark is conducted mainly to understand the environment and have a proper view of the blog industry. Due to the big amount of travel blogs I had to review and the high quality of big players blogs I found, I invented a system based on a excel sheet that helps me to focus on the things a want to discover.

On the rows I placed about 50 blogs divided between travel blogs and other industry blogs. On the columns I placed the categories I wanted to be focus on, this categories are:

  • Image oriented
  • Fancy display and interactions
  • Delightful functionalities
  • Useful tips
  • Written content
  • Ammount of adeverts
  • Focus on humans
  • Corporative content

I defined each category with a short description and used a Likert Scale 1 to 5 (From strongly agree to strongly disagree) to evaluate each category. In this way, at the end of the benchmark I have a very visual overview of the results.

4.2 Functionalities benchmark (Link)

Once I had the generic benchmark, I chose 5 blogs from the 50 analysed to focus my attention on the specific functionalities.

The anaylsis was split on the following categories:

  • Navigation
  • Delighters
  • Shareables
  • Post content display
  • Mobile

As a result I have a more deep understanding of the way my selected blogs are displaying the information and which functionalities are mainly using.

5. Categories redesign through a cardsorting (Link)

In order to tag and categoryse the content, content managers were struggling to find the proper categories for each post they were publishing.

I decided to take the 20 titles from the most read posts and start a cardsorting campaign with all design and content teams. I asked to group all this posts titles in open categories.

The final categories decided were:

  • Inspiration
  • On Board
  • Destinations
  • News
  • Travel Tips
  • Events

6. Involve main stakeholders on a workshop (Link)

Once I had all the information I was able to gather, the next step is putting on the same room all the stakeholders: developers, content managers and Social Media strategists.

The objectives of this workshops where:

  • Create a sense of collaborative creation
  • Share the information gathered
  • Share my vision of the redesign
  • Share which are going to be the next steps

The workshop started with a simple question: Why Odigeo needs blogs? It was simple but very provocative one too, taking in account that this people work with the blogs as a tool. This question help me to start a conversation and give the chance to each member of the workshop to speak.

Then I asked to the participants to write down in postits which were the main objectives we though we had to achieve with the redesign. After 10 minutes, participants, one by one, were standing up, talking about their view and placing the postits at the white board.

Once all the members talked, I group the postits by affinity. the main categories we found out were:

  • Top of mind
  • Identity
  • Conversions
  • Social
  • Functionalities
  • SEO

7. Mockups and prototypes

Now I’m ready for the creation phase. After drafting some ideas on paper I will go straight to Sketch, Marvel and Flinto.

7.1 Drafts

My first approach to any project is always drafting ideas on a moleskine or in a Whiteboard. It works for me start the conversations with stakeholders. It is true that, after all the benchmark I have some pretty clear ideas of what I’m going to design so I moved very fast to sketch.

Bellow you can see, from left to right, results page, home page and the post page.

7.2 Sketch

This phase is going to take me some time. Based on the benchmark ideas and the first drafts I started to build the home page architecture for desktop and mobile simultaneously. I was focus on:

  • Image oriented
  • Easy to share
  • Interlinking

I followed material design guidelines and bootstrap breakpoints.

7.3 Marvel

In order to start materialising the work, I created a simple fast prototype which will allow me see the project more in context and share it with stakeholders for them to see the progress. Once I have clear all the navigations I will use this prototype to test it with users

7.3 Flinto

I wanted to have some pretty clean interactions so I went to Flinto to create them. On this case you see the scroll down interaction for a post page. This exercise helps me to translate ideas to developers.

8. User testing and iteration

Once I have a prototype I’m happy with, it’s time to try it with users and find out where are the main usability issues. Based on my hypothesis I will write down the research and script questions. After the test, i will check the results and iterate my design solution based on that.

8.1 Research questions

This are the questions I need some answers.

  • What are the main usability issues experienced on the eDreams
    blog?
  • How do users find content on the blog?
  • Do users share the posts and is this easy to do?
  • Is the main blog navigation structure understood?
  • Do users understand how to navigate between the blog and the main eDreams website?
  • Do users interact with the main carousel on the blog homepage?
  • What content are the users looking for when viewing the blog?

8.2 Script questions

In order to find the answer to the research questions I write down de script questions:

For the next task we’re going to focus on the eDreams blog. Before we start we would like to understand some things about how you use and read travel blogs.
  1. Which travel blogs do you read? Do you follow or subscribe to the blog?
  2. How do you use travel blogs to plan/book your travel?
  3. Why do you read travel blogs?
  4. When do you normally read travel blogs?
  5. Do you know eDreams or read the eDreams blog?
  6. What do you expect to find in a travel blog?

Homepage

Ok, imagine now since you were viewing the newsletter that you then decided to click on one of the articles/blog link to view the blog. What would you be expecting to see on the next page when visiting the website?
  1. Is this what your were expecting to find?
  2. What do you think of the menu?
  3. What do you think about the categories of the menu? (Is it missing something? Is it clear what the categories are?)
  4. Do you clearly see where the icons with links to our social profiles are?
  5. Besides the content what else interests you on this page?
  6. What do you think the banner is/where it goes to? Would you explore this? Why?
  7. How would you go to the eDreams homepage?
  8. (If user does not scroll carousel) Why?

Post page

Ok, now that we have reviewed the blog homepage, find a post that you like and let’s visit that page to see it. Before clicking, what do you find interesting about this post title and why do you want to visit this post?
  1. What do you think of this post page and how the post is presented?
  2. Do you think it’s easy to share a post on social networks? Are any social network missing for you?
  3. What about the comments at the bottom. Is this useful? What do you think of this feature?
  4. After reading the post what would you do next?
  5. (Do they explore the previous or next post?) How would you go to the next/previuos post?
  6. (Do they interact with the sidebar features) What do you think of the other features? Are they useful?

General

  1. (Does the user use the search box on the homepage or post page?) if user haven’t talk or click on the searchbox, What do you think of the search box in the sidebar?
  2. Does the user use the top navigation to go back to the main eDreams website?
  3. Do you miss something?
  4. If you are interested in this blog how would you subscribe to it to get regular updates? (e.g. with their email)
  5. What do you think about the footer? Is there anything missing?

8.3 Findings and Iteration

Once I’m done with the test, I will review the videos if needed and spot the main findings:

  • Asked by “What user expect to find on a travel blog?” all of
    the users expected to find suggestions and personal
    opinions from travellers or experts.
  • All users declare to not be follower of any blog.
  • If they look for destination inspiration they go directly to
    google
  • Users understand the structure of the blog (navigation,
    carrousel, posts)
  • Users need to interact with the main menu to figure out the
    content of the headers.
  • The way the different posts are shown is understood, and
    users know how to get to them and how the content is
    displayed.
  • The carrousel is interesting for all the users, although most
    of them don’t interact with.

9. Specs, development and QA

Once happy with the design solution, and iterations are implemented, its time to create development specs, develope the site and test it.

The developer designated for this project have been following the process from the begging: workshops, 1 to 1, and meetings with stakeholders so the prototype developed is aligned with the tecnological constraints

Development will take one month and a half and we agreed to start with the eDreams spanish blog version. Once delivered I started to do some visual and interaction QA and the rest of the team will spot the content issues.

10. Tracking

Before launching It’s time to place the tracking events to keep it monitored on analytics.

I need to find the potential areas to be tracked:

  • Navigations
  • Main CTA
  • Searchbox
  • Sharing

11. Launch

As I said, the launching will start with eDreams Spain and then we will keep rolling our 1 site each month. Bellow the results:

eDreams: blog.edreams.es, blog.edreams.it, edreams.fr/blog, www.edreams.pt/blog, edreams.de/blog

Opodo: opodo.co.uk/blog, opodo.fr/blog, opodo.de/blog

Govoyages: govoyages.com/blog/

Liligo: www.liligo.es/magazine-viajes/

Travellink: blogg.travellink.se

Thanks for reading