Daphne Cheng

Daphne Cheng

Daphne Cheng

Travel Bestie: AI Itienary just for You

Deploying a Travel Itinerary Planner that cut user planning time from hours to seconds using AI-generated suggestions based on user preferences

Project Type

Hackathon, Deployed App, Travels, OpenAPI, Yelp API

My Roles

UI Designer, Frontend Engineer

Team

Me, Ojal, Jonathan

Duration

48 hours

Context

2023 ACM x Grace Hackathon @UCSC

As a designer, I'm always looking for fun events to attend and grow my skills.

Invited by my friends to go, I attended this 200+ participant hackathon at my school, where we have 48 hours to create a digital solution that makes daily live easier.

As a designer, I'm always looking for fun events to attend and grow my skills.

Invited by my friends to go, I attended this 200+ participant hackathon at my school, where we have 48 hours to create a digital solution that makes daily live easier.

As a designer, I'm always looking for fun events to attend and grow my skills.

Invited by my friends to go, I attended this 200+ participant hackathon at my school, where we have 48 hours to create a digital solution that makes daily live easier.

Problem

It's hard to make travel plans

Finding places, checking reviews, getting recommendations that actually match your interests— it’s time-consuming and often frustrating. What if you could create a fully planned itinerary in one step?

Finding places, checking reviews, getting recommendations that actually match your interests— it’s time-consuming and often frustrating. What if you could create a fully planned itinerary in one step?

Finding places, checking reviews, getting recommendations that actually match your interests— it’s time-consuming and often frustrating. What if you could create a fully planned itinerary in one step?

Solution

Smart AI itinerary planner!

🔹 Uses OpenAPI to translate user interests into API requests
🔹 Yelp API fetches ranked food & place recommendations
🔹 Automatically generates a personalized itinerary in seconds

🔹 Uses OpenAPI to translate user interests into API requests
🔹 Yelp API fetches ranked food & place recommendations
🔹 Automatically generates a personalized itinerary in seconds

🔹 Uses OpenAPI to translate user interests into API requests
🔹 Yelp API fetches ranked food & place recommendations
🔹 Automatically generates a personalized itinerary in seconds

Discovery

Brainstorming and skill matching

We spent the majority of our 48 hours planning. It's our first time working together, so we spent a lot of time figuring out what was actually feasible based on our skill sets.

We identified key factors that influence travel planning:
✔️ Budget
✔️ Ratings
✔️ Activity Level
✔️ Distance

Ideas we were brainstorming
With limited time, we focused on speed over aesthetics, scribbling down ideas and structuring a rough user flow.
With limited time, we focused on speed over aesthetics, scribbling down ideas and structuring a rough user flow.

Design

Deciding on a flow

Since my teammates were handling backend integrations, I asked them to list the key API elements they could retrieve (e.g., ratings, stars, locations). I then used these inputs to shape the wireframes.

Elements to have on each screen; given to me from my teammates
Rough user flows
Refining the key screens
Gathering design references for UI consistency
1/ basic graphics w/ sliding numbers
2/ interactive animations
3/ colorful graphics
4/ no sliding numbers
High-fidelity screens

Finalized UX flow for handoff

Once the high-fidelity mockups were ready, I handed them off to my teammates.

Prototyped user flow

Development

Coding with React.js & Bootstrap CSS

Since I already made most of the designs in Figma, it was really simple to export the them into react using the Figma design to code option. I fine-tuned the layout with Bootstrap CSS, making sure the cards, alignment, and spacings are correct and look good on the landing and itinerary page

Deployed working code

Since the API calls are taking a long time, I also implemented a smooth loading animation using Bootstrap’s prebuilt elements. This made waiting easier.

Utilizing the "status" component animation
Loading animation

Conclusion

We won!

Out of 68 submissions, we were awarded Best Overall at the ACM x Grace Hackathon 2023!

Out of 68 submissions, we were awarded Best Overall at the ACM x Grace Hackathon 2023!

Out of 68 submissions, we were awarded Best Overall at the ACM x Grace Hackathon 2023!

winning best overall

Results

📈 Successfully implemented a functional AI-powered travel planner in under 48 hours

👏 Collaborated effectively despite it being our first time working together

Reflections

Bootstrap and frontend was surprisingly not that hard. I should explore and try out new tech stacks even if I think I don't know them. It's good to leverage knowledge I already have.

What's next?

  • Switch to React Native for better mobile development

  • publish on app store

  • make front end responsive, don't hard code it

Baskin School of Engineer after we won