Navigating Family Vacations with Compass (and exploring AI)

An opportunity arose

Compass is a mobile-first trip planner I built specifically for my family. It is a fully custom functioning webapp that caters to my family’s needs while on vacation together. As the designated “Project Manager” of my family’s vacation planning, I felt the need for this first hand.

However, the problem was only half the motivation. I'd been wanting to find a real project to get hands-on with AI tools. I wanted to explore and learn new tools to see how they can fit into my design workflow genuinely, as well as touch on something I had never attempted to tackle before - actually building it for real. Compass gave me the excuse to do both at once: solve something I actually cared about, and figure out where AI fits in the way I work.

Access the live prototype

Role

Product Designer and Developer (kind of)

Key Processes

  • Competitive analysis
  • Internal audit
  • Information architecture
  • Wireframing
  • User interface design
  • Webapp coding

Tools Used

  • Figma (MCP), Figjam
  • Google AI Studio
  • Claude (Chat, Code, Design)
  • Visual Studio Code
  • Supabase, Vercel and Github (for hosting)

Goals and constraints

My goal was to build a clean MVP that solved specifically for the major problems I had outlined. Due to working on this solo in my free time (while also working a full time job), scope was a major constraint. I was ruthless about the MVP. Features that didn't solve a problem my family actually had got cut, regardless of how interesting they were to design.

Work smarter, not harder

It was so much fun and empowering to work with AI on this project. Throughout the course of the project, LLMs had been a resource to ideate and discuss feasibility. I also used Claude Design and Google AI Studio to come up with design inspiration and Claude chat to help me get started on the information architecture.

At the beginning of design, I started with truly testing the limits of Figma MCP and Claude by asking it to design full screens for me. However, I quickly realized this was not feasible in terms of token usage. Additionally, some design work was just better done on my own. Where it really shone was handling tedious tasks (e.g. filling the grocery list with placeholder text or creating states in a component). While it worked on these, I was able to tackle the bigger design decisions.

The most daunting part of the project was coding. Claude made it easy. I was able to build a first prototype of the app in just an afternoon by utilizing Figma MCP and sharing my designs for build. It was more functional and quicker than anything I could've built using the Figma prototyping tool. I discovered there is definitely a right and wrong way to prompt; providing as much context as possible is key. It was also useful to quickly fill in any simple edge cases I might have missed without having to go back to Figma.

What's next

The goal of this project was a quick, functional webapp, which I have built. What I would love to do as next steps is to actually onboard my family onto this app during our next vacation for real usability and accessibility testing. It would be interesting to validate the design or identify areas of improvement. I imagine I could use metrics to track if the webapp genuinely makes our lives more efficient (e.g. reducing # of grocery runs or reducing # of times a car gets lost on the way to an activity).

As an additional nice-to-have, I think it would also be cool to develop branding for Compass to enhance the visual experience and maybe make some improvements to the UI in general.