I designed a shared travel app that connects the places people want to go with the plans they make together.
My work Flows · Wireframes · UI & visual design
Figma 100 views · Personal concept
From first idea to the day ahead
A trip, brought together.
Browse the journeys, compare each design with its wireframe, and expand either version to see the full screen.
01 · App home / Before choosing a trip
Trips home
I gave the app four starting places before a trip is selected: Trips, Saved, Updates, and Profile. Each keeps its own purpose, with trip details one level deeper.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
01 · App home / Before choosing a trip
Saved places
I gave the app four starting places before a trip is selected: Trips, Saved, Updates, and Profile. Each keeps its own purpose, with trip details one level deeper.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
01 · App home / Before choosing a trip
Updates across trips
I gave the app four starting places before a trip is selected: Trips, Saved, Updates, and Profile. Each keeps its own purpose, with trip details one level deeper.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
01 · App home / Before choosing a trip
Profile and preferences
I gave the app four starting places before a trip is selected: Trips, Saved, Updates, and Profile. Each keeps its own purpose, with trip details one level deeper.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
01 · App home / Before choosing a trip
Choose a trip for a saved place
I gave the app four starting places before a trip is selected: Trips, Saved, Updates, and Profile. Each keeps its own purpose, with trip details one level deeper.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
02 · Account entry
Welcome
The first visit introduces shared planning, then gives people a clear choice to sign in or create an account.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
02 · Account entry
Sign in
The first visit introduces shared planning, then gives people a clear choice to sign in or create an account.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
02 · Account entry
Create account
The first visit introduces shared planning, then gives people a clear choice to sign in or create an account.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
02 · Account entry
Check your email
The first visit introduces shared planning, then gives people a clear choice to sign in or create an account.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
02 · Account entry
Sign-in verified / Existing trips
The first visit introduces shared planning, then gives people a clear choice to sign in or create an account.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
03 · Account recovery and invitation verification
Link resent
Account recovery and invitation verification have their own next steps, so a failed entry does not leave someone stranded.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
03 · Account recovery and invitation verification
Sign-in help
Account recovery and invitation verification have their own next steps, so a failed entry does not leave someone stranded.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
03 · Account recovery and invitation verification
Invalid sign-in link
Account recovery and invitation verification have their own next steps, so a failed entry does not leave someone stranded.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
03 · Account recovery and invitation verification
Verify to join a trip
Account recovery and invitation verification have their own next steps, so a failed entry does not leave someone stranded.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
03 · Account recovery and invitation verification
Form validation
Account recovery and invitation verification have their own next steps, so a failed entry does not leave someone stranded.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
04 · Start a trip / Setup and availability
Create trip
A new trip starts with its destination and dates. The group can come together before every detail is decided.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
04 · Start a trip / Setup and availability
Trip preferences and constraints
A new trip starts with its destination and dates. The group can come together before every detail is decided.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
04 · Start a trip / Setup and availability
Send trip invitation
A new trip starts with its destination and dates. The group can come together before every detail is decided.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
04 · Start a trip / Setup and availability
Group availability
A new trip starts with its destination and dates. The group can come together before every detail is decided.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
05 · Joining and inviting
Open invitation
Joining a trip should explain whose plans you are joining and what happens next, including invitations that need attention.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
05 · Joining and inviting
Review invitation
Joining a trip should explain whose plans you are joining and what happens next, including invitations that need attention.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
05 · Joining and inviting
Invitation declined
Joining a trip should explain whose plans you are joining and what happens next, including invitations that need attention.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
05 · Joining and inviting
Invitation unavailable
Joining a trip should explain whose plans you are joining and what happens next, including invitations that need attention.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
05 · Joining and inviting
Invitation sent
Joining a trip should explain whose plans you are joining and what happens next, including invitations that need attention.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
06 · A new trip / Just you
New trip overview
A trip can begin with one person. I kept the plan useful before anyone else joins, with room to invite people later.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
06 · A new trip / Just you
Solo trip ideas
A trip can begin with one person. I kept the plan useful before anyone else joins, with room to invite people later.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
06 · A new trip / Just you
New trip plan
A trip can begin with one person. I kept the plan useful before anyone else joins, with room to invite people later.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
06 · A new trip / Just you
New trip group
A trip can begin with one person. I kept the plan useful before anyone else joins, with room to invite people later.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
07 · First idea and invitation
Suggest your first idea
The first saved idea gives the group something concrete to discuss. Adding an idea stays separate from committing it to the itinerary.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
07 · First idea and invitation
First solo idea saved
The first saved idea gives the group something concrete to discuss. Adding an idea stays separate from committing it to the itinerary.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
07 · First idea and invitation
Invite to your new trip
The first saved idea gives the group something concrete to discuss. Adding an idea stays separate from committing it to the itinerary.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
07 · First idea and invitation
Pending invitation / Solo trip
The first saved idea gives the group something concrete to discuss. Adding an idea stays separate from committing it to the itinerary.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
07 · First idea and invitation
Solo group / Invitation pending
The first saved idea gives the group something concrete to discuss. Adding an idea stays separate from committing it to the itinerary.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
08 · First planned stop
Add your first stop
Adding the first stop turns an empty day into a plan, with timing and practical details close to the action.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
08 · First planned stop
First stop added
Adding the first stop turns an empty day into a plan, with timing and practical details close to the action.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
08 · First planned stop
Your garden route
Adding the first stop turns an empty day into a plan, with timing and practical details close to the action.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
09 · Inside the trip
Trip overview
Inside a trip, the overview, ideas, itinerary, and group connect the whole journey without losing the selected trip.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
09 · Inside the trip
Ideas board
Inside a trip, the overview, ideas, itinerary, and group connect the whole journey without losing the selected trip.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
09 · Inside the trip
Full day itinerary
Inside a trip, the overview, ideas, itinerary, and group connect the whole journey without losing the selected trip.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
09 · Inside the trip
Group members and responsibilities
Inside a trip, the overview, ideas, itinerary, and group connect the whole journey without losing the selected trip.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
10 · Decide together / Ideas and voting
Place or activity detail
A decision keeps the options and the group’s responses together, so it is clear what is still open.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
10 · Decide together / Ideas and voting
Compare options
A decision keeps the options and the group’s responses together, so it is clear what is still open.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
10 · Decide together / Ideas and voting
Decision and voting detail
A decision keeps the options and the group’s responses together, so it is clear what is still open.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
11 · Decision to scheduled plan
Decision result
I connected the decision to its next step: adding it to the plan, choosing a time, and showing the result.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
11 · Decision to scheduled plan
Add river cruise
I connected the decision to its next step: adding it to the plan, choosing a time, and showing the result.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
11 · Decision to scheduled plan
Choose cruise time
I connected the decision to its next step: adding it to the plan, choosing a time, and showing the result.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
11 · Decision to scheduled plan
Saturday / River cruise added
I connected the decision to its next step: adding it to the plan, choosing a time, and showing the result.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
11 · Decision to scheduled plan
Saturday route
I connected the decision to its next step: adding it to the plan, choosing a time, and showing the result.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
12 · Shape the day / Itinerary and route
Itinerary overview
The itinerary follows the shape of a day. Stops, travel time, and open time sit in the same sequence.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
12 · Shape the day / Itinerary and route
Scheduled stop detail
The itinerary follows the shape of a day. Stops, travel time, and open time sit in the same sequence.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
12 · Shape the day / Itinerary and route
Route map
The itinerary follows the shape of a day. Stops, travel time, and open time sit in the same sequence.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
12 · Shape the day / Itinerary and route
Add or edit a stop
The itinerary follows the shape of a day. Stops, travel time, and open time sit in the same sequence.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
13 · A stop added to the day
Garden stop added
A new stop has a complete detail view, with its place in the day and a clear route back.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
13 · A stop added to the day
Garden stop details
A new stop has a complete detail view, with its place in the day and a clear route back.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
13 · A stop added to the day
Garden day route
A new stop has a complete detail view, with its place in the day and a clear route back.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
14 · Editing existing trip details
Edit trip preferences
Editing keeps the existing details visible and distinguishes saving a change from leaving it behind.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
14 · Editing existing trip details
Edit coffee stop
Editing keeps the existing details visible and distinguishes saving a change from leaving it behind.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
14 · Editing existing trip details
Edit coffee time
Editing keeps the existing details visible and distinguishes saving a change from leaving it behind.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
14 · Editing existing trip details
Unsaved changes
Editing keeps the existing details visible and distinguishes saving a change from leaving it behind.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Edit day order
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Review reordered morning
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Reordered Sunday saved
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Reordered day route
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Coffee stop removed
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
15 · Review day changes
Route after coffee removal
Plans move. I included changes to a day and the feedback people need to understand what happened.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Filter ideas
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Suggest an idea
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Create a vote
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Choose a time
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Assign responsibility
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
16 · Make a change / Sheets and confirmations
Confirm removal
Short choices use sheets, so people can act without losing the screen underneath.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
17 · Keep everyone together / Practical details
Reservations and documents
Practical information has a quieter home alongside the trip, instead of competing with the day’s plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
17 · Keep everyone together / Practical details
Reservation detail
Practical information has a quieter home alongside the trip, instead of competing with the day’s plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
17 · Keep everyone together / Practical details
Trip updates
Practical information has a quieter home alongside the trip, instead of competing with the day’s plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
17 · Keep everyone together / Practical details
Trip settings
Practical information has a quieter home alongside the trip, instead of competing with the day’s plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
18 · Documents / Select, upload, view
Choose a document
Travel documents need more than a successful upload. I included the surrounding file actions and recovery states.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
18 · Documents / Select, upload, view
Add a document
Travel documents need more than a successful upload. I included the surrounding file actions and recovery states.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
18 · Documents / Select, upload, view
Document uploaded
Travel documents need more than a successful upload. I included the surrounding file actions and recovery states.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
18 · Documents / Select, upload, view
Document preview
Travel documents need more than a successful upload. I included the surrounding file actions and recovery states.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
18 · Documents / Select, upload, view
Document download
Travel documents need more than a successful upload. I included the surrounding file actions and recovery states.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
19 · Personal saved places
Save a private place
Saved places work across trips. Choosing a trip gives a saved idea the context it needs before becoming part of a plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
19 · Personal saved places
Private saved place
Saved places work across trips. Choosing a trip gives a saved idea the context it needs before becoming part of a plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
19 · Personal saved places
Edit private save
Saved places work across trips. Choosing a trip gives a saved idea the context it needs before becoming part of a plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
19 · Personal saved places
Remove private save
Saved places work across trips. Choosing a trip gives a saved idea the context it needs before becoming part of a plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
19 · Personal saved places
Saved places / After removal
Saved places work across trips. Choosing a trip gives a saved idea the context it needs before becoming part of a plan.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
20 · Empty saves and filtered results
Saved places empty
An empty filtered result explains why the list is quiet and gives people a way to broaden it again.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
20 · Empty saves and filtered results
No eligible trip
An empty filtered result explains why the list is quiet and gives people a way to broaden it again.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
20 · Empty saves and filtered results
No matching ideas
An empty filtered result explains why the list is quiet and gives people a way to broaden it again.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
First trip empty state
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
Ideas board empty state
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
Waiting for votes
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
Tied decision
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
Schedule conflict
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
21 · When plans change / Empty and recovery states
Offline saved itinerary
Recovery screens keep the next action clear when something interrupts the normal flow.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
22 · Recovery and shared feedback
Document unavailable
Feedback confirms the result close to the action, without adding an unnecessary detour.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
22 · Recovery and shared feedback
Network error
Feedback confirms the result close to the action, without adding an unnecessary detour.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
22 · Recovery and shared feedback
Saving state
Feedback confirms the result close to the action, without adding an unnecessary detour.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
22 · Recovery and shared feedback
Action success
Feedback confirms the result close to the action, without adding an unnecessary detour.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
23 · Offline conditions
Saved day / Read only
Offline states explain what is available and what needs a connection, while preserving the trip context.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
23 · Offline conditions
Offline without cache
Offline states explain what is available and what needs a connection, while preserving the trip context.
Finished
Wireframe
Scroll each preview for the full design, or expand for a closer look.
The design decisions
Room for the trip. Clarity for the plan.
I kept the interface quiet enough for the places to stand out, while giving shared decisions, daily plans, and practical details their own structure.
Blue with a purpose
The Roam identity carries into primary actions and selected controls. Neutral surfaces keep the information easy to scan.
Places lead the imagery
Photography gives each place a sense of character. Dark-to-clear overlays keep white labels readable without covering the image in tags.
A clear way forward, and back
The four app tabs work before a trip is chosen. Deeper screens use contextual navigation, so people know where they are and how to return.
I worked through the complete active set, including joining, empty lists, changes, and recovery. The Figma file also holds a separate future expansion plan; those ideas are not presented as finished features. This is a personal design concept, not a released app or a tested product.
Explore in Figma
Wireframes & flows.
The screen structure and connected journeys, organized in sequence. The preview is open to view.
Explore in Figma
The finished screens.
The same journeys with the approved Roam visual direction. The preview is open to view.
Project files
Take a closer look.
Access the editable Figma file or download all 100 finished views and their matching wireframes at 3× resolution. Enter the shared access code to access these files.