work
just forfun!
various things i like to do in my free time :]
about me
I’m currently a senior at UCSD studying Cognitive Science Spec. Design & Interaction.
For as long as I can remember, I’ve always been drawn to all things art and design. Creating has always been a huge part of who I am and I want to channel this curiosity into human-centered experiences that spark joy, connection, and impact.
- project
- Concept mobile app
- my role
- Product Designer
- when
- Spring 2026
- team
- Christina Lin, Maci Phan, Sophie Morikuni, Tiffanie Truong
- mentors
- Arwen Lin, Rachel Lo
- tools
- Figma, FigJam, Google Forms
overview
One app for the whole group trip
packd is a concept mobile app that pulls group trip planning into one place. Our ACM Design team took it from a first brainstorm through research, wireframes, branding, and a fully interactive hi-fi prototype.
roles
Who designed what
We did the research together, then split the app into four areas so each of us could own a set of screens.
Christina Lin
Home and messaging pages
Sophie Morikuni
Continue trip and planning screens
Maci Phan
Budgeting screens
Tiffanie Truong (me)
Discover screens, which in our concept are powered by AI
background
Planning a group trip means juggling too many apps
After experiencing the stress and disorganization that often comes with planning large group trips, our team wanted a better solution for young adults navigating busy schedules and limited budgets. Whether it’s coordinating spring break plans, college retreats, or concerts, planning usually means jumping between multiple apps for different needs.
As students balancing demanding schedules and group commitments, our goal was to create a mobile app that streamlines the planning process into one centralized, personalized platform.
How might we create a mobile app that simplifies the trip planning process for young adults so that planning trips is more budget and group friendly?
brainstorm
What we decided to build
Through our brainstorm, we decided the final design should include:
Homepage
with collaboration features
Itinerary page
for planning and organizing activities, with an integrated calendar
Budgeting and finance page
Discovery page
process
How we worked
Research
Competitive analysis
Researched planning apps like Notion AI, TripIt, Google Travel, and Roadtrippers to see what already exists and what can be improved.
User surveys
Sent Google Form surveys to learn what real users want in a travel planning app.
User flow maps
Planned our features and how users would navigate between them.
Design
Lo-fi wireframing
Built simple templates for where each feature should live.
Style and branding
Chose the brand name, fonts, color palette, and overall vibe.
Hi-fi and prototype
Fleshed out every screen and made it all interactive.
timeline
Week by week
We kept notes in FigJam after every meeting. Here is how the project moved from first ideas to flows and wireframes.
Getting aligned
We introduced ourselves, talked through meeting times and Figma experience, and set team expectations: equal effort, a 24-hour response time, shared accountability, and mentors who guide and give critique. Then we each pitched app ideas: 12 concepts across personal care, campus life, food, and productivity, including a comprehensive planning app for larger trips or events. Next steps: secondary research on competitor apps, a problem statement, and a Google Form survey.
Competitive analysis
We each researched different apps and wrote pros and cons: Notion AI, TripIt, Wanderlog, SameTeam, Google Travel, Roadtrippers, Partiful, and Timetree. Then we pulled out shared pain points, like collaboration features locked behind premium plans, steep learning curves, cluttered interfaces, itineraries that ignore gaps between activities, and too much tab switching. That pointed us toward an all-in-one app.
Making sense of the survey
We went through the Google Form responses, summarized the results, and used affinity mapping to group what we heard into themes: design and UI, general features, expenses, communication, and the tools people use for planning, booking, navigation, recommendations, and chatting. We wrote our how-might-we question and built two personas.
Features, moodboards, and flows
We listed the features we wanted: collaboration with chat, sharing, and voting; a synced itinerary with drag-and-drop planning; a live group budget tracker; availability sync; live weather and currency updates; and highly rated activities nearby. We compared four moodboard directions, started the user flows, and began lo-fi wireframes in the design file.
research
Competitive analysis
We compared the tools people already use to plan trips and events, including Notion AI, TripIt, Wanderlog, SameTeam, Google Travel, Roadtrippers, Partiful, and Timetree. Each had real strengths, and each left gaps for group planning. Here are four of the deeper comparisons.
Notion AI
Flexible and easy for several people to edit, but the interface gets cluttered on mobile and setup takes time.
TripIt
Great at turning confirmation emails into an itinerary, but there is no way to join a group trip where everyone sees the plan.
Google Travel
Strong data consolidation, but not very collaborative: no chat feature or shared availability calendar.
Roadtrippers
Built around routes, so it fits road trips better than event planning, and AI features sit behind a paywall.
Pain points across the apps
- Collaboration features often sit behind premium plans
- Steep learning curves and cluttered interfaces, especially on mobile
- Some apps are strong at itineraries but weak at collaboration, and the reverse
- Itineraries rarely account for gaps, like waiting between hotel check-out and check-in
- Too much tab switching. Our goal became one all-in-one app
research
What users told us
We sent a Google Form survey about how people plan group trips and got 41 responses.
A listed itinerary with a map was the feature people expected most, and a chatting feature was the one they expected least. Text messages were by far the most common way to share trip details (38 of 41). People named Google Maps, Airbnb, Google Docs and Sheets, TikTok, Expedia, and Tripadvisor among the apps they switch between.
In their words
“most of my planning is scattered across different platforms”
“They all serve their respective purposes but it’s hard to keep planning organized when it’s dispersed among multiple apps.”
“There’s no “saved” sections on most of the webpages so everything I look at disappears if i close the tab.”
“Especially with countries outside of the US, the recommended locations and activities are very limited and often just "touristy."”
“Simple and not overly cluttered app, free to use, color blocking is available to differentiate from different people’s schedules, visually understandable”
“Listed itinerary with map and dates and budgeting feature”
“People's suggestions for places to visit for group members to vote on, links to Yelp/pictures so we know what to expect”
“Shared availability calendars, hyperlinked tabs to resources”
research
Who we designed for
After affinity mapping the survey, we wrote two personas to keep real needs in front of us.
Jennifer Nguyen, 20
A third-year UCSD student planning her club’s winter retreat to Big Bear for 30+ people. She’s in charge of finding activities and building the itinerary. She’s tech-savvy, finds ideas on TikTok, and jots them down in her Notes app. She has too many group chats and finds scheduling for 30 people hard. She dislikes switching between so many apps and wants one place for all of her information.
Chadwick, 23
A frugal post-grad student in San Diego who gets overwhelmed easily and isn’t very organized. He and his online friends, who live in different countries, are planning a trip to Japan to meet up. It’s his first time abroad, so he’s unsure about social norms and exchange rates. He asks an AI assistant for recommendations and wants to stay mainly in urban areas.
structure
User flow maps
We created a flow for each page to plan how people would move through the app: the home page, discover and explore, planning and itinerary, and budget and finances.
design
Lo-fi wireframes
Before any styling, we sketched templates for where features would live on each page.
design
Branding
We explored four moodboard directions with different palettes before choosing one.
We chose a deep indigo and warm cream as the primary pair, with soft peach, pink, and sage as secondary colors. The pastels came from our third moodboard. The primary pair checks out well for accessibility, with a contrast ratio of 9.28.
The title font is drowner and the text font is FOT-Seurat Pro.
design
Hi-fi and prototype
We fleshed out every screen and made everything interactive through prototyping.
reflection
Challenges
- Discovering what users like and dislike about their trip planning experiences, and accommodating that in our app
- Balancing school commitments with other club commitments
- Amassing enough surveys for user research
- Learning how to prototype all of our intended features
looking ahead
Next steps
- More time to gather input from a diverse group of users
- More emphasis on the discover page: new features and a different layout
- Fleshing out the finance page for app consistency
- Easier steps in the user flow
- Integrating a map feature with all the stops
- project
- Website prototype
- status
- In progress
- brand
- doxx.studios, an Instagram clothing brand launching soon
- tools
- Figma
overview
An online store for a brand that’s about to launch
doxx.studios is an Instagram clothing brand that is launching soon. I’m designing its website: a clean online store where people can browse the clothing, open a product page, and check out. The prototype isn’t finished yet, so this page shows my plan and the screens designed so far.
approach
How I’m approaching it
Research
Looked into how to create a custom site that’s integrated with an e-commerce system.
Mockup in Figma
Designed the key screens in Figma and checked them with the brand’s team.
Build and connect
Next: build the site and link it to Shopify for checkout.
requirements
What the site needs
Navigation and structure
Shop all or browse the catalog, category collections, new arrivals, home, and a contact page.
Branding
A logo (a square version works well for social previews), a consistent minimalist color theme, and a short brand story or tagline.
Product page
Name, price, multiple styled and model photos, fabric and material details, fit, care and construction notes, model sizing, a size selector, add to cart, and “pair with” recommendations.
Cart and checkout
A cart drawer or page with a subtotal, an optional gift note, multi-currency support, and Shopify checkout.
Footer and info pages
Privacy, refund, and shipping policies, a contact email, and a newsletter signup to hear about future drops first.
Social
Links to Instagram and TikTok.
inspiration
What we looked at
We collected clothing sites to study their layout and interaction.
ART-E-FICIAL
A clear, simple layout for the clothing. Easy to browse, but too simple, with no strong vision for branding or imagery.
Fracture and Acne Studios
Fracture for its interactivity: pictures, videos, and clear sections. We don’t have video, so we lean on photos. Acne Studios opens on a picture with the brand name. We want something similar, with modeled photos of our clothing scattered through the page, but its layout is too complex. Ours should stay closer to ART-E-FICIAL.
Serotonin and Special Production
Animation inspiration, including the logo animation when Special Production opens.
design
Screens so far
Home
A header with the doxx.studios wordmark and menu, search, account, and cart icons. Links to shop all and new arrivals, then a grid of product cards with name and price.
Product page
A photo gallery with thumbnails, the name and price, a shipping note, size options with a size chart, a quantity selector, add to cart, and express checkout buttons. Below: description, material, model sizing, and “pair with” recommendations.
Cart drawer
A slide-out cart with the item, size, price, and subtotal, plus a checkout button. Shipping and tax are calculated at checkout.
Menu
A sidebar menu with shop, about, and contact.
Landing page
The name “doxx” types itself out on a blank screen. Still in progress.
Lo-fi wireframes
Before styling, I laid out where everything goes: the home grid, the product page, the “pair with” recommendations, and the menu.
Hi-fi screens
Then I styled the screens with real product photos, the wordmark, and the full set of controls.
See all of the screens in the Figma file linked above.
next
What’s next
- Finish the landing page and its opening animation
- Keep checking the screens with the brand’s team
- Build the site and connect it to Shopify for checkout
overview
Case study coming soon.
process
Research, design decisions, and iterations will go here.
outcome
Final designs and what I learned will go here.