Pedal Ukraine | Bike Touring in Ukraine Website Design

About

As a passionate UX/UI Designer and an avid cyclist, I present "Pedal Ukraine," a pet project that embodies my love for travel and design. The project aims to create an immersive and user-friendly website offering exciting bike tours across the picturesque landscapes of Ukraine.

Project goal.

Pedal Ukraine is to popularize and develop cycling infrastructure and cycling culture in Ukraine. Everyone can become a part of the project. Each region has its own Pedal Ukraine community that controls bicycle tours within the region

Service.

Pedal Ukraine is online platform for selling cycling tours in Ukraine. On Pedal Ukraine you can choose a cycling trip in any region of Ukraine. Everyone can choose a trip to suit their level of difficulty, terrain, duration, and comfort.

Pedal Ukraine is suitable for both beginners and cycling pros. Routes can be easy short city excursions or long ones with tough routes.

How does it work?

On the website, which members of the Pedal Ukraine community offer trips based on their city of residence. A bike guide suggests an interesting route, develops a schedule, and leads the trip. The routes are checked by Pedal Ukraine cycling scouts for passability, interest, and safety. Photographers take impressive photos. People buy tours, ride them and leave feedback

Branding - Pedal Ukraine

For Pedal Ukraine, I developed a brand identity that reflects the spirit of exploration and embraces Ukraine's cultural heritage. The logo combines modern elements with cycling imagery, creating a sense of movement and discovery.

Design Approach

Taking a user-centric approach, I sought to design a seamless and captivating user experience that ignites wanderlust and encourages travelers to embark on bike tours with confidence.

Wireframes

Creating low-fidelity wireframes I mapped out the website's structure and user flow. This iterative process aimed to optimize the booking experience and ensure an intuitive navigation system.

Web Pages Visual Design

Drawing inspiration from Ukraine's vibrant landscapes and cultural diversity, I designed a visually appealing interface. The color palette evokes the country's rich heritage, while high-quality imagery showcases the beauty of each cycling destination.

Tours Page

Users can easily search for suitable tours using the standard catalog with a grid with filters....

...Or explore a map showing all the routes in a given area

Tour Description

Each tour has its own unique story and purpose. Tour tells and reveals new interesting places for users to visit. Highlights will tell you the most memorable places and activities. The map will show you the route and technical specifications. All routes are scheduled by day and filled with activities.

Prototyping User Flow

A detailed prototype was developed, laying the groundwork for the user experience. The following provides an overview of the user flow for purchasing a tour using this prototype:

1. Landing Page: The journey begins on the website's landing page. Here, users are greeted with captivating visuals, enticing descriptions, and a clear call-to-action (CTA) button that invites them to "Explore More."

2. Tour Catalog: Upon clicking the "Explore Tours" CTA, users are directed to the Tour Catalog page. Here, they are presented with a visually appealing grid of available tours. Each tour card provides essential details such as tour name, duration, difficulty level, and price. Users can easily filter tours by criteria like duration, difficulty, and location to narrow down their options.

3. Tour Selection: When users find a tour that piques their interest, they can click on the tour card to access more information. This takes them to a dedicated tour page, where they can view detailed descriptions, itineraries, highlights, and images of the tour. At this stage, users can also see available tour dates.

4. Booking Process: To proceed with the booking, users click on the "Book Tours" button on the tour page. This initiates the booking process, where they are asked to provide key details such as the number of participants, preferred tour date, and any special requests.

5. User Registration/Login: If users haven't already registered or logged in, they are prompted to do so at this stage. This step ensures a seamless booking experience and allows users to track their bookings and receive updates.

6. Review and Confirmation: Users review their booking details, including the total cost and selected options, on a summary page. They can add additional services and choose their preferred payment method (credit card, PayPal, etc.) and enter their payment details.

9. Tour Confirmation: Simultaneously, an email confirmation is sent to the user's registered email address, providing them with a comprehensive overview of the booked tour, including date, time, meeting point, and any additional instructions.

Contacts Page

Prototyping And User Flow

The prototype shows the whole process of buying a tour for the user from tour selection in catalog to final payment

Responsive Design:

Recognizing the importance of mobile users, I prioritized responsive design principles. The website's layout and elements adapt fluidly to various screen sizes and resolutions, providing a seamless experience across all devices.

404 Page

As a part of the design concept, I created a custom 404 error page to delight users even when they encounter a broken link or page. The 404 page includes a friendly message, engaging visuals, and button, helping users easily navigate back to home.

Conclusion

"Pedal Ukraine" showcases my passion for designing immersive digital experiences, bringing together my love for cycling and Ukraine's captivating beauty. This UX/UI design concept demonstrates my ability to create product user-centered platforms that inspire and enable adventure.

Thanks for watching

If you have any questions, feedback, or would like to discuss potential collaborations, please feel free to reach out to me. I'm always eager to connect with fellow designers, clients, and industry professionals.

Find me on 🔸Telegram 🔹Linkedin. 🔸Instagram

More by Yaroslav Tarakhkalo

View profile