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 lead 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.
What began as a personal challenge in Figma quickly turned into a high-stakes project when my parents and their SEO team highlighted key issues: slow loading speeds, a cluttered design, and a dated interface that hindered user engagement and search rankings. Recognizing the opportunity to address these problems, I took on the role of lead designer to revamp the site's main pages, focusing on improving navigation, trustworthiness, and content discoverability.
Analyzing the existing 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 current 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 current 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.
1
Establish consistent visual design across the site by establishing a design system and component library.
2
Showcase the website's diverse content offerings and establish trustworthiness directly on the homepage.
3
Categorize travel itineraries by continent and region for clearer navigation.
4
Restructure navigation for a more intuitive user experience, including adding a dedicated "Home" button.
5
Modernize the site to attract a younger audience.
6
Showcase the site's photography more prominently.
7
Keep features simple for a seamless developer handoff.
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.
Current
Redesign
Current
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.
