top of page
APP UX / UI
Trippin:
The Ultimate Roadtrip App
PROJECT DESCRIPTION
PROBLEM SPACE
Road trips are meant to be fun and exciting things to do with your friends, but when you have a bigger group of people traveling together, it's always stressful making sure everyone gets to do and see what they want. When traveling in groups, in multiple cars, can be dangerous when trying to synchronize and communicate between cars on the road.
STRATEGY
Trippin focuses on making your road trips with friends as easy and as organized as possible, allowing you to focus on making lasting memories with your crew. We want to be more than just a navigation app, and more than just a planning app, we want to focus on the before, during, and after of your trips; allowing you to collaborate on your itinerary, stay synchronized while on the road, and share your memories with each other afterwards. We want to allow you to make memories that will last a lifetime.
This project was started as a group project for our interface class, most of the research was collectively done, while the further development of the app was carried forward by myself and further revised after the course had ended on my free time.
The memebers of our group included Dylan Shrier, Tom Yao, Ally Carter, Ariana Wilder and myself.
APP FEATURES
APP WALK-THROUGH PROTOTYPE
I created a rough prototype of the app's features to show the user flow through the app's features.
PROCESS
Research / Journey Map
To begin our research on how to make the experience of group road trips better, Dylan put together a journey map of a typical road trip experience.
START
DURING
AFTER
EXIT
Research / Personas
We then collectively developed several personas of different types of people we thought could benefit from an app like Trippin, to identify their key characteristics, motivations, and needs. By doing this we were able to consolidate what features would be crucial and how Tripping could be set apart from other similar travel apps.
Above is an excerpt from the presentation deck I created for this project, which can be found at the end of this project page.
Research / Competitive Analysis
Upon researching other travel apps—including Kayak, Roadtrippers, and Google Maps— we put together pro's and con's of each in order to see what they did well, and try and do it better, or tfind a hole in those existing products, and how we could look to fill it. We focused mainly on the Roadtrippers app, as that was more in line with what we wanted Trippin' to accomplish.
PRO's
Can be used outside of the USA
Can plan gas and rest stops
Easy to add detour stops
Strong brand identity
CON's
ETA on trip durations have often been inaccurate
Information is old & outdated
Only available on IOS
Trips can only be edited by the person who created it
Note:
This project was completed in November 2018, therefore the research does not reflect Roadtripper's most recent feature updates and improvement to their app
Research / Surveys & Interviews
To obtain more information about the experience of going on road trips we sent out a couple of online surveys for people to fill out, in order to figure out more about the necessity of a road trip planning app, what parts of a roadtrip were important to people, how people are currently planning their road trips, as well as what pain points they experience that could be eased by our product.
We recieved over ____ responses, and highlighted some re-ocurring points and quotes. We found that a large number of people regularly road trip, and that a pretty equal amount of people enjoyed road trips for the scenic views and for making memories, while the others preferred to just get to their destination as conveniently as possible. These were all important factors in decided which features were important and which wouldn't add as much value.
Structure / Flowchart of Features
We collectively came up with a list of important features we wanted to have for the before, during and after of a roadtrip experience. Because we wanted our app to encompass several aspects of the road trip experience, and have it be an app that could help with most of the pain points of going on a road trip with a bigger group of friends. From there we had a long discussion about the best way to organize all these features into an organized and un-intimidating interface.
We discussed how we might separate all these features but keep it very simple and easy to use, and preferred over using other chat apps or map apps. We decided on having three main pages to our app accessible by the bottom toolbar; the chat, map, and profile section. It took a while but I was able to eventually organized all the other features under these three main sections and I created a flow chart for the app, showing how the app would function.
Skeleton / Lo-Fi Prototype Sketches
Because I was able to organize all of the features and worked closely with making the flow chart, I was able to create the lo-fi wireframe sketches did some of the app wireframe sketching simultaneously while figuring out the flow chart of the app's functions, because it helped me visualize what would go on each screen. Below are my lo-fi app wireframes.
USER TESTING
"I thought it was cool that it encompasses all parts of the the road trip experience, from planning, to during the trip, and then being able to share your photos afterwards.”
—Nikka Francisco
"The driver mode feature seems really useful, but maybe instead of just the emojis you could add a voice messaging option, I use that a lot when I drive and need to reply to someone quick and safely."
—Justin Ng
Skeleton / Mid-Fi Wireframing
REVISIONS
Icons needed to be more intuitive for their function to be more easily understood, add voice messaging to ensure safety for driver's chat space, make it more fun by adding icons for other cars on the map, and type logo needed to be revised and polished so it's legible. Below are the revised mid-fi wireframes I created using Sketch.
App / Style Guide
From feedback we also found that the initial type logo done by my group members wasn't very effective, so I decided to come up with a more simplified version that still kept the essence of old road signs, incorporating the arrow as part of the logo. Ariana came up with the icons and emoji's for the app, and Ally came up with the app icon and the line pattern that echoes topographic style maps.
Using this as a guide, I created the Hi-Fi Prototype screens of the app and used Invision to create a protoype for our presentation. I also created the themed presentation and process slide deck used for our final, which can be found here.
Presentation / Final Pitch Deck
Using this as a guide, I created the Hi-Fi Prototype screens of the app and used Invision to create a protoype for our presentation. I also created the pitch and process deck used for our final presentation.
1/39
THANK YOU FOR VIEWING THIS PROJECT!
bottom of page