Role
Website UI Lead
Skills and Tasks
Website UI Design
Visual Design
Design System
Information Architecture
Developer Handoff
Tools
Figma
WordPress
Duration
5 Weeks, Summer 2024
Earth Trekkers, my parents' travel website, needed a redesign to handle their growing content, improve site speed, and integrate competitive new features. As the sole UX designer, I focused on addressing user pain points while aligning the redesign with business goals such as improving SEO, increasing engagement, and simplifying content publishing. My responsibilities included creating a design system, defining content hierarchy, and building annotated templates to guide developers.
Analyzing the homepage, it was clear that while functional, the design felt outdated and visually unappealing. The extensive list of popular posts on the homepage appeared cluttered and there was no clear explanation of the type of content Earth Trekkers provided or elements to establish trust with new users.
The travel itineraries section was a single, sprawling page containing around 75 itineraries, with no efficient way to browse content by region. This lack of organization led to a fragmented user experience.
The website featured inconsistent card designs for navigation. While cards leading to pages and those linking to articles should have visual differentiation, it was important that this distinction not be too drastic. One of my primary goals was to create a consistent style guide to ensure cohesive design throughout the site.
I mapped out the website's sitemap to identify the content of each page and determine if any information was redundant, inconsistent, or needed further segmentation. The blue headers represent the main pages, while the white sub-boxes indicate the content within each page.
The changes to the sitemap primarily affected the home and Travel Itineraries pages. Collaborating with my parents, who run the website, we decided to condense the Start Here content and integrate it into the homepage. The Travel Itineraries page would be divided into sub-pages by continent, replacing the single page that housed all itineraries. Additionally, we opted to remove the Blog page, as analytics showed minimal user engagement with it.
Finding Inspiration
I analyzed other travel websites to assess their content, structure, and key features, while also drawing inspiration from award-winning sites and notable designer projects.
To ensure visual and functional consistency across the site, I developed a style guide and leveraged Figma's text and color styles. This streamlined collaboration with developers and reinforced branding by establishing a cohesive and scalable design system.
To create a cohesive experience, I developed a component library featuring standardized card designs and buttons. This design system ensured consistent visuals and streamlined collaboration with developers, who could easily reference styles, spacing, and responsive behavior.
Some pages required more extensive redesigns, allowing me to experiment with new ways of presenting information and adding sections to enhance content discovery. Below are early design iterations that, while not used, played a crucial role in guiding us to the final design.
Most pages of the website received a refresh rather than a full redesign. As shown below, the content remained the same, but key updates were made, including consistent card design across the site and adjustments to text size and fonts for improved readability.
Original
Redesign
Original
Redesign
The new homepage introduces features that clearly communicate the type of content Earth Trekkers offers, inspire new users with curated highlights, and establish trust through testimonials. This redesign ensures a captivating first impression while improving navigation and guiding users seamlessly into the site.
To improve user navigation, I divided the sprawling itineraries page into five sub-pages, organized by continent and further broken down by country. This structure helps guide users more effectively to the perfect itinerary based on their preferences. For those unsure of their destination, the "All Itineraries" page highlights top recommendations from each region, offering inspiration and a starting point for their travel planning journey.
To bridge the gap between design and development, I taught myself WordPress (the platform Earth Trekkers uses) and built the primary pages. This hands-on approach not only validated that my designs were developable but also provided developers with detailed, practical templates to guide implementation.
Reflection on the Redesign Process
This project was an invaluable learning experience, teaching me how to align my creative vision with both business objectives and user needs. It also deepened my understanding of the developer handoff process and reinforced the importance of consistent styles to create a cohesive user experience. While I recognize that my designs are not perfect and wish I had the time and resources to conduct user interviews and testing to better align the site with user needs, I am incredibly proud of the final outcome. Seeing the website come to life and witnessing the satisfaction of both the business and the developers has been deeply rewarding.
