Revamping a travel blog’s site design to improve analytics.
An analysis of Google Analytics showed where there was room for improvement. We focused on above-the-fold-experience to decrease the bounce-rate and article layout to increase user click-through.
Research, Design, Prototype
Sketch, Adobe XD, Lightroom
Jan '19 - March '19
Research, Design, Prototype
Sketch, Adobe XD, Lightroom
Jan 2019 - March 2019
Scope Travel is a blog that caters to travelers looking for adventure in not-so-touristy destinations around the world. Articles include itineraries, things-to-do, culture awareness, and budget trips.
The majority of users (over 90%) visiting the website come directly to an article page via a Google search. The site had a high bounce rate and a low number of pages per session.
How might we make content and resources more accessible and engaging to our users?
The navigation and article layout did not give users enough options for related content for an extended site session. The layout did not address our users biggest need, which is to gain access to material that would aid in trip planning.
Above the fold on the old site didn't offer opportunity for engagement, or excitement. Recommended articles were located at the bottom of the article and navigation options were few.
Scope of Project
The whole site will receive a redesign with a particular focus on the article layout and search components on the destination page. We will create a design system which will be implemented over time.
The previous site implemented effective SEO which allowed the majority of our users to find an article organically through search engines. However, users were leaving after reading the article and not continuing to read another article. The article layout did not inform users on what to expect or get an idea of what kind of site they were on.
Users were finding the site organically but didn't click through to other pages.
After looking into our Google Analytics, we saw that we had a higher than average bounce rate, and a less than stellar pages/session. A high percentage of users staying on the site were finishing the article, indicated by heatmaps and time per session.
We analyzed 100 randomly chosen users reading various articles. We found that 73% of users were reading/skimming the entire article. Users typically spent more time on articles that showed images of the writers, which we could assume they were more likely to read if they felt a connection to the writer. Users found value in clear headers and blockquotes and were more likely to read the content when it was broken up.
Based on the user's geographic location we can infer that a majority of users were searching for travel content in preparation for their trip and not during, which is valuable when constructing a content publishing strategy.
Majority of users were finding articles on search engines but did not click through to other pages.
Users are young professionals ages 25-34 worldwide who are interested in adventure travel to more remote destinations. The majority of our users are native English speakers or speak English as a second language. Users can afford to take 1-2 international vacations and several domestic trips a year.
Users are searching for authenticity and ways to interact with local culture and people. They’re interested in deals on flights and hotels but are willing to spend more money on experiences.
They are reaching the website via desktop (54%), tablet (4%), and mobile (40%). Approximately 73% of users are finding an article through search engines. The remainder of users are finding articles through social media platforms like Pinterest and Facebook.
Based off of research, interviews and analytics we created 3 personas and 3 separate user journeys.
We needed to visualize the importance of this design and the number of missed opportunities we had in Sandra's journey via Pinterest.
With the old design we were losing most of our Pinterest users on the third step. With the redesign we noticed that we were gaining more followers and returning visitors on Pinterest.
Three design principles guided our design decisions throughout the duration of this project. We submitted different iterations of the article layout for A/B testing for feedback. The feedback helped to create these design principles.
- Simple - The design should be uncluttered to enhance readability and navigation.
- Relevant - The design should gear toward providing users with more content they will be interested in reading.
- Slow internet compatibility - Being accessible in 2G countries was also taken into account during the process. Users should be able to access our site when/if they don’t have a stable internet connection.
Brainstorming of mobile article search flow and pages with an app-like feel.
Rethinking country search options in mobile.
Rationale behind design choices
- More than half of our users are browsing via desktop, so we added a sidebar packed with content, about us section, and an email subscription form.
- Readability is a crucial, during testing we A/B tested different line-heights, copy widths, and image widths. Results led us to the final product.
- The articles are lengthy so to address this pain point we added a table of contents to help users get to where they need to go quickly. The table of contents also improved our SEO.
- Majority of users introduction to Scope Travel was through an article, and they felt lost once they were there. We improved navigation and added breadcrumbs to the article layout.
- Accessibility played a role in the design and the tech used behind the curtain. Our website is easier for users who rely on screen readers.
- For a playful feeling, we rounded up the edges on images, buttons. Brightened up the color palette and went with a sans-serif font.
Evolution of the design
We tested different components designs and layouts during this process. We wanted the users to have a pleasant experience regardless of the device they were using. We wanted to avoid the mobile version being a shrunken down desktop site, which resulted in different component designs for both mobile and desktop.
Design > Prototype > Test > Refine
Above the fold - We wanted to highlight the main article image without compromising the content above the fold. We implemented A/B testing, and Concept 4 yielded the best results.
We had to rethink options when designing for above the fold. We conducted A/B testing.
Mobile Destination Search Component - We wanted to reduce the number of clicks and effort it took for a user to find the destination they were searching for. We wanted it to be the best possible search experience on mobile, so this design went through several design iterations.
- Concept 1 had drop downs for both continents and countries. Cons- some users classify countries as different regions, and it is not as cut and dry as we assumed. It required four clicks.
- In Concept 2 we consolidated into one drop down that also acted as an intuitive search bar — this reduced confusion for users when searching for a specific destination. Users liked the option to search by scrolling or typing. However, the mobile keyboard covered up most of the dropdown items when the user entered the input.
- These conclusions lead us to Concept 3. When users entered the search input, it brought the search experience full screen. This solution gives users the best search experience and also brings us closer to the goal of creating a more app-like feel to the website.
We prototyped 3 different search options for the destinations page to test for the best experience.
Destinations desktop layout - We decided that Concept 1 will be used as a stepping stone to get us to Concept 2 in the future due to time constraints.
- Concept 1 could be done within the time constraints and with the number of existing articles. Concept 1 could reuse code created in the mobile search component which cut down on costs.
- Concept 2 gave the best search experience because the search options are clear and defined. Users like that it gave them the most control when searching for articles they would be interested in reading.
Concept 2 was more popular but Concept 1 could be done more quickly. Concept 2 is for future reconsideration.
Prototype of search component functionality
After the release of the new design, we saw a reduction in our bounce rate and increase in the number of pages per session. Analyzing the latest data we can see that users are using the table of contents and more actively sharing the article URL.
The changes in the site have made it easier for us to see what content our users find valuable and we have been able to make decisions in the type of content we want to publish in the future.
The results have not been as immediate and as drastic as we would have liked, but it is still early in the process. The research and data that we gathered during this project have proved to be the most valuable in terms of making future marketing decisions.
- Budget - We had a tight budget during this project which meant few options for user testing. User testing was limited to email subscribers, friends, and analytics.
- Time - This is an on-going side project, so development work was limited to after-work and weekends. We had to plan the redesign in stages and components to make it easier for developers.
- Emotion - Scope Travel is a personal project, so we have to balance the battle between emotion and data. We made it a point during this particular redesign to put data first which led to a harmonious team.
The research and preparation for the design stage was the most valuable part of the redesign. We gathered so much data that has allowed us to create a roadmap for relevant content creation and better marketing material. It refocused the goal of what the readers find valuable.
We have on-going plans to improve the redesign based on the analytics and are restructuring content to appeal to new and returning users. The research phase also gave us insight on how to restructure our email campaigns to be more productive.