Travel Advice Landing Page Project
*Certain elements of this project have been undisclosed at the discretion of the company.
Team/Role: Collaborating with the marketing, development, and design team while completing user research and creating the layout/UI design
Tools: Sketch and Photoshop
Problem: There was a lack of organization for informational content on the client’s travel insurance comparison website. There was no central hub where users could easily find helpful travel advice, which served as important marketing material for the website/company.
Overview: This project was completed for a travel insurance comparison website where users can browse various travel insurance plans and find articles focussed on traveling. The goal of the project was to create the Travel Advice page which would act as a new way to house articles that existed on the website’s retired blog.
Travel Advice Landing Page Project
*Certain elements of this project have been undisclosed at the discretion of the company.
Team/Role: Collaborating with the marketing, development, and design team while completing user research and creating the layout/UI design
Tools: Sketch and Photoshop
Problem: There was a lack of organization for informational content on the client’s travel insurance comparison website. There was no central hub where users could easily find helpful travel advice, which served as important marketing material for the website/company.
Overview: This project was completed for a travel insurance comparison website where users can browse various travel insurance plans and find articles focussed on traveling. The goal of the project was to create the Travel Advice page which would act as a new way to house articles that existed on the website’s retired blog.
Research
Prior to completing this mockup, a great deal of research was completed and many team meetings were attended that provided the information needed to create the structure for this page.
- Before beginning the project, it was important to coordinate with the marketing team in order to review the content and their requirements for this page.
- From there, individuals from the company’s in-house insurance agent call center were brought into meetings to help gain an idea of who the target users were for this specific project.
- I also referred back to the company’s user personas and referred to articles and studies that discussed different practices for structuring content – specifically blog content.
- Finally, multiple rounds of card sorting were completed using the articles that would be hosted on this new page, in order to understand the most intuitive way to categorize the documents.
Target Audience
Once the research was completed, and after analyzing this year’s data from the client’s website, there was a solid understanding of who the target users were, and these user’s needs were taken into consideration.
- An important factor to consider during this project was that the largest group of users tend to be from an older demographic.
- With this in mind, the webpage was created with a high level of accessibility (large text, high contrast, clear affordances, etc.) which would make the webpage easy for users to interact with.
Competitor Analysis
The next step in the UX process was to research competitor’s travel advice or blog pages to gain a better understanding of how the client’s site could be set apart from the rest.
- The research concluded that many of the travel advice sections on competitors’ websites were difficult to navigate and the designs seemed outdated.
- With this information, I knew I wanted to focus on creating an intuitive navigation with a modern, yet easily accessible design.
UI
For the UI design I stuck to using the company’s green and blue color scheme, yet tried to break up the page with various shades of grey to keep everything feeling simple and light.
Redlining
After the design was completed and approved by the team, redlines were created for the mockup in order to make it as easy as possible for the developers to implement the design.
Mockup and Publish Design
After a few iterations, and a review of the prototype, five mockups were created for each of the screen breakpoints.
- The live page can be viewed here.
Final Thoughts
Overall, this project pushed me to think deeper about the way in which I design site navigations and page layouts that contain copious amounts of information.