# Trip Planner ![](https://i.imgur.com/xEPEpr5.jpg) :palm_tree: :beach_with_umbrella: Design Week --- ### Discovery Workshop - We thought about what the user would want from an app that could plan their trip and organise travel documents for them so they could have a stress free trip. - We discussed whether or not this app would only be for mobile, as this is the most common device people use when travelling. --- - Another feature we thought would be incredibly helpful is if whilst people are rushing to the airport :airplane: :runner: they could access their boarding pass quickly by a preview on their phone --- ### Inspiration :eyes: What's already out there? ![](https://i.imgur.com/4gdlGoA.png) --- ![](https://i.imgur.com/3F4kl7a.png) --- ![](https://i.imgur.com/tTxhJRF.png) --- ![](https://i.imgur.com/CPm84n3.png) --- ### User Research - We spoke to 6 people for our User Research and it challenged our assumptions about what people would want from a trip planner app :palm_tree: :notebook: - Users definitely liked the idea of having a place to put all of their travel documents especially with all the added documents needed nowadays and being able to access them quickly and easily, even download them when they're offline (stretch goal) --- - Users already use Google Maps, Google Translate and Google Reviews when travelling - people definitely get lost and hungry the most! :pancakes: --- - Users responded positively to having a personalised trip planner where they could have notifications / countdown to their next trip and reminders of flight times. - Users almost unanimously said that they would primarily use this app on their mobile :iphone: - Users mostly didn't use organisational apps already, but they would like to! :heavy_check_mark: - Users were surprisingly ok with having their personal documents stored in app, they're used to this! --- ### Wireframing ![](https://i.imgur.com/3etNCmu.png) --- - We utilised master components for repeated sections like bottom navbar - After Ephies feedback, we learned how to make wireframes more interactive by copying frames and hiding/showing layers (i.e checklist) --- ![](https://i.imgur.com/BLyunzc.png) --- ### Usability Testing We wrote a script and prepared some tasks for users to perform during the usability testing, as well as give room for general feedback --- - Users expect to interact with the prototype exactly as they would with the app: having existing list items was confusing - "Small" details have significant impact: the meaning of the same icons to different people --- ### Synthesize Research ![](https://i.imgur.com/62KtlqY.png) --- ### Core insights * Our assumptions have been challenged * The app needs some explaining * We have not thought about how some functionalities will actually work * Our UI has room for improvement * Icons * Fonts * Checkboxes * Clickable links --- * Some functionalities are not clear or missing * Back to previous page * Back to Home button * Log out button --- ### Positive feedback as well! ![](https://i.imgur.com/6VNNDlS.gif) --- * The users liked the general idea of the app and found it useful! * They found the layout simple yet detailed enough * They had a lot of ideas and suggestions! --- ### Trip Planner Drum roll please...🥁 A travel app that allows you to upload and access your travel documents in one place, view your upcoming trips and create a To-do list for every trip! --- ### Tech Stack We asked ourselves a few technical questions :thinking_face: --- ![](https://i.imgur.com/qZXA8Kx.jpg) --- * Privacy of the user (Auth? store in DB?) * Where to store documents (Use file hosting like Cloudinary? Firebase?) * Possibly developing a progressive Web App * Focus on client-side (indexedDB? LocalHost?) Thank you Reuben and Oli for your help!!! :stars: --- - Next.js: - Pages components - Dynamic routes - Using it as "React with benefits" - Cypress / Jest?
{"metaMigratedAt":"2023-06-16T20:17:44.387Z","metaMigratedFrom":"Content","title":"Trip Planner","breaks":true,"contributors":"[{\"id\":\"3934dd6c-8588-4d47-a23b-ba8c96da8ea7\",\"add\":1875,\"del\":207},{\"id\":\"9e5170a0-78d4-4b78-8fba-f500bdd88450\",\"add\":1255,\"del\":654},{\"id\":\"ae3532b1-4610-4f25-89ec-b00c8da7a54b\",\"add\":1802,\"del\":25}]"}
    192 views