Web Experience Design,
Toehold Travel & Photography
UX Design & Development of a comprehensive web portal experience, with integrations of CMS and other backend services for a travel-photography company, reimagining the entire information architecture, interaction patterns, workflow and visual experience.
What we did
Project Overview
Toehold Travel & Photography, a renowned travel and photography company, approached Design Brained Studio to revamp their existing web presence. Our goal was to create a user-centric, responsive web portal that would cater to the needs of both the business and its customers.
Key Features
Project Goals
Visual Design Enhancement
The original website featured an outdated design that was generic and needed a brand uplift. The website also needed a cohesive visual identity across all the verticals of business.
Organisation of Information
The original website's information organisation was an evolved output since the establishment of the company. It was in need of a fresh understanding, organisation and structure of information of its services and offerings.
UX Redesign
The original website's design, patterns, layouts, components and flow was from an older generation. The output, interactions, patterns, page templates, responses, etc. were not user friendly, and efficient as expected by today's users.
Technology Upgrade
The original website was built with technology that was not catering to the current needs of the business and its customers. The necessity of data-design separation was crucial to enable efficient and independemt management of data-content-design.
Research & Analysis
Our project began with extensive discussions and research to understand Toehold's existing web solutions and identify the business and customer needs. This phase was crucial to ensure our design would align perfectly with their goals. We worked on a variety of aspects of research and analysis, to understand the existing world of Toehold.
We developed comprehensive Information Architecture, User Personas, and UserJourneys. This foundation allowed us to create detailed wireframes for a redesigned solution. We also conducted A/B Testing on some wireframes/mockups to guide our decisions toward the final product.
The Design
Wireframes
Our wireframe creation for the Toehold project was deeply rooted in thorough research findings, A/B test results, and extensive discussions with stakeholders and customers. By incorporating diverse insights, we could rapidly iterate on our designs, refining both interaction patterns and information organization with each cycle. This collaborative and data-driven approach ensured that our final wireframes were not only user-centric and intuitive but also aligned with Toehold’s goals and user expectations. The result was a streamlined, effective design process that led to a well-structured and engaging website.
Colors
For the Toehold project, we carefully selected a color palette that reflects the essence of nature, wildlife, and conservation.
Together, these colors create a visually appealing and thematically consistent experience that resonates with Toehold’s mission and audience.
Typography
Clean, modern lines and excellent readability of the font made it perfect for presenting photography and educational content with clarity and elegance. The typography enhances the visual appeal without distracting from the stunning images and informative content.
Rebranding
A subtle rebranding was done to the logos of Toehold and its sister websites/offerings. Reflecting new colors & typography, the rebranded logos and styles elevated the brand visuals to align with the clean, minimalistic and modern design language.
Illustrations & Iconography
We created simple yet effective illustrations as icons for various Photo Tours. These icons represented the primary sightings of animals, monuments and locations in a concise way, while browsing through numerous tours.
Project Features
Responsive UX Design
The entire experience design was built with an approach that enabled the features to tailor themselves for desktops/laptops, tablets and mobiles.
Dynamic Content with Filters
The entire web experience was built in connection with a Content Management System, making the content dynamic. Searching, sorting and filtering were made integral parts of the experience.
Enquiry and Booking Forms
Connected to the back-end, numerous forms were built to send across data, store submitted data in the database. These forms are tied with dynamic fields such as the tours being enquired for and country code fields for phone numbers.
Validated thoroughly, these forms are built to send automated Emails and WhatsApp messages to the visitors and the company's customer representatives.
Dynamic & Interactive World Map
A CMS-integrated data-driven dynamic world map was built for filtering the destinations covered across for the tours Toehold offered.
Blog Section with Filters
Toehold's exceptional writing takes center stage in their new blog section, crafted to showcase their content in the best light. We’ve built a platform that enhances this outstanding writing with features like sorting, searching, and filtering, ensuring readers can effortlessly find what they need.
Data-driven Photo Tour Schedules
A dynamic section for Toehold's web portal that showcases their photo tours, complete with dates, schedules, and a color-coded status system. Whether a tour is open for booking, filling fast, or fully booked, this feature provides real-time updates powered by their CMS.
Ad Campaign Landing Pages
For every advertising campaigns the company runs, we build high-impact and high-conversion landing pages, connecting to payment gateways for seamless payments and forms integrated with back-end communication systems for easy conversion of users.
Automatic Blog Table of Contents
We've integrated an automatic Table of Contents feature that dynamically organizes each blog post based on its content. This not only makes navigation a breeze but also helps readers quickly access specific sections of interest.
Summary
Overall, the project not only achieved its goals but also provided a roadmap for future development, emphasizing the importance of adaptability, stakeholder engagement, and a user-focused approach in web design projects.
