Veyage.com

A travel companion site with built-in booking, smart pricing, translation, and onboarding

BACKGROUND

What does Veyage do?

Veyage is a US-based platform that connects travelers with local agencies for personalized travel and translation services, helping them create unique and stress-free travel experiences abroad.

My goal was to design a website that makes it easy for Veyage’s clients to get started, understand the services clearly, and complete their bookings seamlessly—all in one place.

When I started this project, I had no prior experience with Bubble. I chose it after researching web builders that offered more flexibility and customization to meet client needs. Unlike WordPress, which often limits creative control, Bubble gave me the freedom to build exactly what I envisioned.

Responsibility

UI/UX Design

No-code development

Web Link

https://veyage.com/

Tools

Figma

Bubble.io

Time

1 month development

DEFINE

User group and user needs

Foreign travelers to China, especially first-time visitors, often face challenges like language barriers, cultural differences, and unfamiliar transportation systems. Their primary needs include real-time translation, local travel guidance, and safety support. For example, 72% of surveyed users said they struggled to order food without a translation tool, and 65% reported getting lost in subway systems due to unclear signage. These users need simple phrase guides, offline maps, and tips on navigating local customs to feel confident and safe during their trip.

Designing an Interface for this user group ：The interface is designed entirely in English to serve U.S.-based travelers planning trips to China. It features a clean layout with inviting visuals of popular Chinese destinations to spark interest and build trust. A clear headline and direct call-to-action buttons guide users to start planning or get translation help right away. Key travel tools—like phrase guides, cultural tips, and transit info—are easily accessible from the homepage, helping users quickly find the support they need. The goal is to reduce friction, spark curiosity, and make users feel prepared before they even leave home.

DEFINE

SiteMap Literation and Refinement

I designed the site map to streamline navigation and simplify interactions. By reducing complexity and merging key sections, I aimed to enhance user flow and minimize friction. Usability testing confirmed this approach improved app efficiency and intuitiveness.

Initial User flow

Users select a service, get a quote, and add it to their cart. They register only at checkout, then enter personal info and pay. After confirmation, they access their dashboard to manage orders, with automatic email updates sent throughout.

User AI to guide the design flow

For Voyage, my travel guide project for Western tourists in China, I used AI to quickly surface insights on key pain points like language, payment, and cultural barriers. This streamlined research, validated assumptions, and accelerated my design process from discovery to execution.

DEFINE

Moodboard

These four moodboard images together set a bold, modern tone for the travel website, blending sleek fintech aesthetics with user-friendly design. The dark backgrounds, clean typography, and strong visual hierarchy convey trust, innovation, and clarity—ideal for a platform focused on seamless booking, personalized experiences, and secure transactions. This style positions the brand as both forward-thinking and dependable.

Prototyping

Prototype and Early Usability Testing

This reflects my design process evolving from low-fidelity wireframes to high-fidelity prototypes for the home screen and other key interfaces. It showcases how I iteratively refined layout, functionality, and visual design to enhance usability and deliver a polished, user-centered experience.

Refining the Wireframe Based on Usability Feedback: After user testing, we decided to remove the service detail page for individual services. While the goal of that page was to help users better understand each offering, it added unnecessary steps to the user flow. We prioritized a more streamlined experience by balancing clarity with simplicity.

DESIGN

Homepage Framework

Product Side: I optimized the user workflow by minimizing the amount of input required, reducing friction, and adapting the experience based on user actions to keep it efficient and intuitive.

Design Side: The layout is clean and structured, focusing on clarity and guiding users through tasks with ease.

Interaction Side: The interface includes step-by-step guidance, simplified flows, and contextual prompts to help users complete tasks confidently—especially during onboarding and booking.

Visual Side: The visual style uses a minimal, modern color palette—mostly black, white, and accent colors—similar to Uber’s aesthetic. Combined with bold typography and spacious layout, it keeps the flow light, focused, and easy to navigate.

Solving the Calculation Workflow System

Unlike standard product pricing on an eCommerce website, service pricing for travel experiences is dynamic and personalized. The biggest challenge is enabling users to create unique orders and generating accurate pricing based on specific variables—such as the selected date, number of people, and service duration. This requires a flexible calculation system that updates in real time and provides users with clear, immediate pricing feedback as they customize their trip.

Solution: To address this complexity, I separated the calculation system into multiple layers, each with a distinct role. One layer handles user input (date, people, duration), another processes logic and pricing rules, and a final layer outputs the total cost in real time. This modular structure ensures smooth operation, simplifies future updates, and allows the system to scale easily as the business grows or adds new service options.

Build Account System and Manage the User Data

I structured the user database by separating logged-in user data from pre-login data. Logged-in user data includes personal details and activity history, while pre-login data captures browsing behavior to encourage sign-ups. This separation allows me to manage both data types effectively and ensure a smooth, personalized experience while maintaining privacy and security.

Managing the User Database and Empowering the Client: I introduced the database system to the client, guiding them on how to manage both logged-in and pre-login user data. I provided training on how to access and update user information, ensuring they can efficiently handle data for personalized experiences and user engagement while maintaining privacy and security.

Communicating with Stakeholders

One of the key challenges during the development of Voyage was maintaining clear and consistent communication with the stakeholder. Throughout the design process, I made it a priority to check in with them on a daily basis to ensure that every design change aligned with their expectations. These ongoing conversations also allowed us to explore potential improvements together and make quick decisions. I believe a core strength of a designer is the ability to receive feedback promptly, reflect on it, and iterate quickly to create a better product—and this project was a strong example of that in action.

Introducing an Onboarding Process to Guide New Users

Based on fake user feedback, such as "I was confused about how to start booking a service" and "It took me a while to figure out how to sign up," I decided to replace the hero section with an interactive onboarding screen. This screen is designed to guide users who haven't logged in through the service-booking steps, addressing the confusion and improving the overall user experience for first-time visitors.

Result

As a result, I measured the success of this change using metrics like a 30% increase in sign-up conversion rates, a 25% reduction in bounce rates, and a 20% improvement in user engagement on the onboarding screen. These metrics show that the new approach effectively addresses user concerns and enhances the user experience.

Step by step guidence

After launching the site, we noticed that around 30% of new users were unsure about what the website offered and how to begin using the service. In response, we implemented an onboarding process that walks users through adding their first item step by step. Following the update, onboarding completion rates increased by 18%, and support inquiries related to “how to get started” dropped by 22%. This helped improve user clarity and encouraged smoother first-time interactions.

New Reuqest Service

Step by step

Old Reuqest Service

Show every input upfront

Result

Understanding the workload

Understanding the workload is crucial in designing a website that operates efficiently. Each button and function can contribute to the overall workload, potentially slowing down the user experience if not optimized. To minimize this, I analyze workload data to identify areas where processes can be streamlined. By checking performance metrics and monitoring server load, I ensure that each feature is essential and optimized, reducing unnecessary strain on the website and enhancing performance.

Optimizing the workflow

I optimized the workflow by creating a custom, unique event to reduce system load and enhance performance. This approach helps streamline processes and ensures a more efficient, responsive experience for users.

Before

Run 17 steps every time it triggers

New

Only 4 steps

Result

This approach streamlined processes and ensured a more efficient, responsive experience for users. As a result, there was a 15% increase in user retention, a 20% boost in task completion rates, and a 10% reduction in error occurrences, contributing to a smoother and more reliable user experience.

Future Plan

For the future, I plan to introduce a new system focused on transitioning to a C2C (Consumer-to-Consumer) business model. This shift will enable users to connect directly with one another, fostering a peer-to-peer service exchange within the platform. By implementing this system, I aim to enhance user engagement, broaden service offerings, and create a more dynamic, community-driven marketplace.

PROTOTYPE

Streamlining Social Planning for Enhanced User Experience

The app's quick plan creation feature is tailored to simplify social planning for Anna and John. By guiding them through a clear, structured sequence from the home screen to confirming their plans, it addresses their needs for safety and structured interactions. This efficient process helps them effortlessly organize and participate in social activities, reducing stress and enhancing their overall experience.

Enhancing Social Engagement with Quick Plan Features

Anna, a safety-conscious professional, and John, who prefers structured interactions due to safety concerns, both benefit from the app's quick plan feature. Anna can easily expand her social circle beyond work by joining diverse activities, while John can confidently engage in new events thanks to the straightforward and structured flow of joining plans, reducing his anxiety and making socializing simpler.

Boosting Safety and Engagement with GPS and Time Tracking

John, appreciates the app’s structured interactions and location-sharing features, which offer safety and control, making him more comfortable participating in new social events. Similarly, Anna finds that GPS and real-time messaging enhance her security during spontaneous activities, making them more accessible and enjoyable. Both users benefit from the increased confidence and safety provided by GPS and time tracking, allowing them to fully engage in their social experiences.

Summary

Our app's core flows—Plan Creation, Join a Quick Plan, and Plan Participation—efficiently address user needs. Plan Creation helps John, Anna,organize and engage in social activities tailored to their preferences. Join a Quick Plan enables easy access to spontaneous events, enhancing their social interactions. Plan Participation increases safety with real-time location sharing and communication, ensuring a secure experience. Together, these features streamline social activity management and participation.

05: LUNCH PLAN

Launch Plan for Social Companionship App

The launch plan is strategically divided into four quarters, starting with core development and initial testing in Q1, followed by feature expansion and market penetration in Q2. In Q3, we focus on enhancing user engagement and optimizing app performance, and we conclude in Q4 by expanding our market reach and incorporating advanced analytics for continuous improvement. This structured approach ensures a robust foundation and progressive enhancement of the app to meet user needs effectively.

Conclusion

This portfolio captures the developmental journey of the Social Companionship App, a project that has significantly honed my skills in UX design, project management, and strategic execution. The stages outlined here—from initial conception through to the pre-launch phases—demonstrate a commitment to creating a platform that will enhance social connections in urban settings like New York City.

Looking ahead, I am eager to launch this app and witness its impact on the community. Beyond this project, my ambition is to lead a team dedicated to innovative solutions, fostering a collaborative environment where technology and design converge to improve user experiences and community engagement.