UX Case Study — Tripper.com Shipping Design
Product: MVP prototype of Tripper.com — a responsive website that provides day trips from large urban centers
My Role: UX Researcher, UX Designer, Product Manager, Visual Designer
UX Team: Myself, Dave Devine, and Anne Porter
Duration: 2 Weeks
On the first day that we were introduced to our new teams, we gathered to begin brainstorming for a new product that would have potential for a business or brand of our choice. Three topics that our team gravitated toward during this initial brainstorming phase included outdoors, travel, and entertainment. We all began quickly jotting down items or topics that immediately came to mind when considering these initial topics.
Some of the initial problems and ideas came up with using these topics included:
People in their 20s and 30s living in the city want to get out on the weekends but most don’t have a car or want to rent one due to liabilityMillennials struggle with lack of planning and lack of transportation
There is a travel gap for individuals between between their late 20s to early 30s — they are no longer going with high school or college friends and before they start their own family
Create an idea similar to Class Pass, but for travel
Research — Exploration
Our research began with a screener survey in which we received 30 responses of which were 14 females and 16 males between the ages of 24–29. We then created a survey that we received 26 responses that included 17 females and 7 males between the ages of 25–28. After collecting responses to the screener and survey, we conducted 6 user interviews of which 3 were female and 3 males between the ages of 24–28. During these user interviews we found that there are many remote locations to hikes, orchards, and other seasonal activities that people would like to travel to during the weekends, but they have difficulty of finding ways to get there when they have no access to a car due to public transportation not taking them the complete distance. They often are using Google and Thrillest articles to find these destinations, and the suggestions for transportation usually end up with them taking a taxi or Uber/Lyft the remaining distance. We also found that most people would wait until the last minute to settle on plans because they wanted to keep their options open.
Next we began looking at who potential competitors would be within the short term travel industry. Competitors that we researched initially and put on a competitive matrix included OvrRide, Viator, Topdeck, TrekAmerica, Couchsurfing, Lonely Planet, Grouper, and Meetup. We evaluated all of these companies based on the length of trip as well as cost.
Initially we expected to focus on more of a social media connection through travel, but ended up pivoting after finding through the user interviews that was not a main goal for traveling. The main competitors we then focused on further were OvrRide, Viator, Topdeck, Couand Lonely Planet. We performed a market positioning analysis, feature analysis, and element analysis on these 4 companies.
During our research phase, we chose to partner with Priceline.com to back our product design. Our reasoning for partnering with Priceline is because our product would work very similar in ways as to how Priceline currently works. Priceline currently focuses on helping users find discount rates for travel-related purchases, such as airline tickets and hotel stays, and we would plan to be a brand extension that would focus on helping users find discount rates on day trips outside of large metropolitan areas. The focus we found to help our primary user is to aggregate current day trips offered from the New York City area to make it easier for Millennials to find transportation to remote destinations that they currently cannot travel to.
Synthesis — Compilation
Through the 6 user interviews we were able to synthesize our findings into 6 “I” statements that embody our user. We noticed that these “I” statements could then be broken into 3 different buckets: where I travel, why I travel, and how I travel.
Using these “I” statements and our other research, we created 2 personas. These personas included our primary persona, Kelly Shaan, and the secondary persona, Greg Butcher. The main difference between the primary and secondary persona is that Kelly is a transplant into New York City and does not have access to a personal vehicle, while Greg grew up in the suburbs of New Jersey and has access to his family’s vehicle when needed.
With both of these personas and all of our research in mind, we formed the following problem statement:
Millennials living in New York City have the desire to escape the city on the weekend, but lack access to direct transportation and committing to set plans. How might we provide options for these individuals to escape the city at an affordable cost without advanced planning?
Ideate + Design — Conception
The next step we took toward our concept was participating in a design studio with the entirety of our team. This process was definitely a positive one for our team. We came up with more features than we could have imagined which we then prioritized using a MoSCoW feature prioritization.
Through our design studio and feature prioritization we came up a list of the main goals and features that we would focus on for the first phase rollout. These included:
Goal #1: Provide last minute day trips on the weekend
- Aggregate trips from other sites
- Show the number of spots available, as well as time left to book
Goal #2: Mobile responsive website
- The site will be simple and consistent using a hamburger global navigation
- User will be sent an email with confirmation of ticket
- User will have the option to add trip to their calendar
Goal #3: Exploratory experience
- The user will be shown the temperature and forecast when searching trips
- After booking, the user will be shown trip details and nearby sites
Initially we did decide to focus on an iOS mobile app due to our persona being on their iPhone constantly, but after meeting with developers we pivoted our focus toward creating a mobile responsive website. This shift was a win-win as it would have a lower buildout time and cost using 4 developers for 1 week to create the minimum viable product (MVP) as well as it would increase user-base by allowing for Android, iPhone, and desktop users. As a team, we decided to focus on the mobile design first.
Findings + Iteration
After creating a low-fidelity working prototype using Invision, we conducted 5 usability tests with 3 scenarios and tasks. Our team then performed the first round of design iterations, then conducted another round of 4 usability tests with the same 3 scenarios and tasks. After the findings of this round of usability tests, a second round of design iterations were once again made. After each round of usability tests, we used the key performance indicators (KPIs) of error rate and success rate to measure each task and make our decisions our how the designs would be altered to benefit the user.
During the usability tests we also found some key points on the utility as well as the usability of the website overall. The utility and usability findings helped guide us when making our design decisions as well. These findings included:
Utility
- 75% of users found the weekend countdown in the landing page to be motivating
- Most user found the progress tracker in the checkout screen to be helpful
Usability
- Most users identified finding restaurants in Warwick, NY by using the map in My Trip
- Once icons were added to the global navigation users were able to depict the difference between each button
Some of the major design changes occurred in the following three sections of the websites: the navigation menu, the trip details page, and the my trips page. First, on the navigation menu, we found that it was too small, so we increased the overall size. We also found that people through some of the menu names were confusing and they were unsure of where it may take them when clicking on some. We first added icons to see if this would help clear confusion for users, but they still did not know what to expect when clicking on the My Trips and My Profile section as they some expected it would lead to the same destination. We solved this by nesting the My Profile and account settings under the My Trips section and adding a Contact page in its place.
Next, we focused on content hierarchy issues that users were having with the trip details page. Users were getting distracted by the clickable expanding information section and they also were clicking into each section before they were able to fin the information they needed. We solved this by focusing on the hierarchy of the content, adding icons, and listing all information sections out in a long list. Since this change caused the page to be a bit longer, we added the Book Trip button to be static at the bottom of the page, so users could always reach the action quickly. We also added the number of spots available and time left to book in this static section as well.
Finally, we focused on the My Trips page that could be reached through the main menu. After a user booked a trip, they would visit the My Trips section to find their confirmation and explore other options of things to do in the area their day trip was taking them. Initially, users were confused by the different section titles of “My Itinerary” and “My Trips” so these were changed to “Explore” and “Confirmation” and icons were added. This change increased task success rate to 100% for users. We still were getting the feedback that users felt odd being taken directly to this page, and we found it to be best practice to create a My Trips landing page which can be seen in the 2nd iteration. Users can then click on their upcoming trip in which it will take them to they options of “Explore,” “Maps,” and “Confirmation.”
To view the final prototype after two rounds of usability tests and two rounds of design iterations and a step into high-fidelity designs, click here.
Conclusion + Next Steps
Our next steps now include to begin building partnerships with businesses and add more incentives for the user such as tickets or entry cost covered when booking with Tripper.com. In the meantime, we will set the website up to scrape the information and drive users to book through the current websites to prove the exposure and value to the businesses. We will market our website through current listicles on websites like Thrillest, Timeout, and Refinery29. The additional next phases for the website development includes the following:
- Design Desktop Responsive Web
- Build out: My Trips, Contact, FAQ, Build Backend
- Test Hi-Fidelity Prototype
- Create Trip Review Section
- Add Cities: San Francisco, Boston, Chicago
This project overall has been extremely valuable in the process of learning UX. It really pushed my team to begin thinking about business goals along with the user goals and how these can coincide as well as sometimes contrast in the process. It was also valuable in learning and considering the technical feasibility that also comes into play within the overall picture. I gained knowledge about the option between using information scraping, APIs, backend users, and account representatives and the moments each may work best. Overall, I saw firsthand that it may take many design pivots when building a project from the ground up, and that that’s okay as long as both user and business goals are met in the end.
