“Road Trip” Planner App case study— Design Capstone Project
Introduction — The University of California San Diego on Coursera offers an 8-course certificate program in Interaction Design. Upon completion of these 8 courses a Final “Capstone” project was required.
Design Brief: Using the process of design thinking, find the problems in one of the three briefs (Time, Change & Glance) to design a solution around it. Walk through the structure steps designed for this project course to come up with the design for your product — -go through need finding, elation and paper prototyping to design as many creative solutions possible. Then turn those ideas into one concrete design with the help of Heuristic Evaluations. Test your application worthy, get feedback, iterate and test to keep on improving your designs. After all the refinements, demonstrate your final product design and document your process.
We were presented with three creative briefs and asked to select one and then to design an app that addressed the proposed problem in an effective and creative way.
Problem Statement: GLANCE— I focused my observations around the design brief for Glance. I wanted to learn about the process people take to plan, record and use a travel itinerary for a road trip.
Needfinding
In order to better understand the current landscape of issues facing people planning road trips we chose to interview people from different traveling backgrounds and therefore facing different issues around road tripping.
My observation was an interview of three people, and asked them to explain the process that they used to plan their last road trip. Additionally I asked them about parts of their planning process that were happy with and parts that they were unhappy with.
I interviewed 3 people:
- an urban professional
- principal planer from retired couple
- divorced electrician and father from western canada
The following observations where made from the needs finding exercise:
- Each person had a different approach to planning his or her road trip. Some people did very little planning and some people did lots of planning
- The different approaches developed different pain points.
- Each person used multiple tools in preparing for the road trip; maps, guidebooks, word of mouth and online research
- Could there be an app that could centralize the planning process for road trips
- Could there be an app to contain all the information so that the user could easily refer to their trip.
The final conclusion is that an app that assists in the planning and viewing of road trip itinerary would enhance peoples experience in both the planning stage and during the actual road trip, itself.
Ideation
The first thing to do is to brainstorm some great ideas around the specific opportunities that were identified during the needs finding phase of our project. Volume of ideas is our main goal so we tried to think of as many possible solution and designs, the meaningful solutions will be filtered out later. Creativity is paramount and anything is fair game. These ideas were then filtered in 16 identifiable needs. A user needs to — -
Brainstorm of user needs:
- Road trip planners require easy integration between their itinerary and their GPS.
2. Road trip planners need a way to find and book available campsites based on location and with listed amenities, fees and restrictions 3. Road trip planners need a way to plan their trip within the restraint of their budget
4. Road trip planners need a way to find hotels along their route that is connected to their loyalty programs
5. Road trip planners need a way to find their favourite brands along their route for, hotels, restaurants, service stations
6. Road trip planners need a way to find and record suggested scenic routes, destinations and major landmarks
7. Road trip planners need a way to easily store all their information for their road trip as they are planning
8. Road trip travelers need a way to find gas station based on location
9. Road trip travelers need a way to find and book, available hotels based on their current location, including information such as location, prices, amenities and customer reviews
10. Road trip travelers need a way to find restaurants based on their current location, including information such as location, phone number, menus and customer reviews
11. Road trip travelers when off track need to be alerted and to have a suggested route to get back to their original route.
12. Road trip travelers need a way to easily access all their road trip information
13. Road trip travelers need a way to keep friends and family updated on their road trip
14. Road trip travelers need a way to keep a travel journal for their road trip
15. Road trip travelers need to be aware of important emergency information based on location, i.e. hospitals, police stations, and service stations
16. Road trip travelers need alerts to when they should service their car based on mileage. Alerts should recommend service station.
From this brainstorm we were able to properly define our “POV” — Point of View for the App.
POV: People love to travel by car for their vacation and these vacations can be complex. To properly plan, users need information on roads, travel times, service stations, destinations, available lodging, restaurants, and emergency services. During their travels the user needs to access to the above information in real time and while on the road. Having all this information and the real time updates easily accessible would greatly enhance their road trip experience.
Verbal Inspiration for the App: Adventure, Freedom, Confidence, All knowing, Easy, Organized, Fun, Connection
Visual Inspiration:
1. Travel maps and Guidebooks — — Informative resource. Travel Map and Guidebooks present curated travel information in great detail. They describes travel itineraries, landmarks, location history, useful information, maps, suggested hotels, restaurants and other travel related services. The information is well written and use photos to describe the locations.
2. Roadtripper app — Suggested online road trips. The road trip app has a large selection of professionally curated Road Trip to choose. These travel itinerary are well written with suggested stops, restaurants and hotels to stop at along the route. You can alter customize the suggested routes by adding or changing the listed restaurants, landmarks, and sites.
3. Travel Journaling — Fun way to document your travels. After the vacation has ended, remembering all the amazing experiences and details can be very rewarding. Often friends and family want to hear all about the trip and it would be great to be able open up an app and show photos and notes about your trip
Storyboards:
Storyboards design potentials solutions and analysis how they may fit into different scenarios. We wanted to discover the feasibility of different ideas, review possible flaws and observe successes.
I produced two scenarios around which the storyboards and the prototypes had been created.
“Paper Prototype” — — key to understanding the design problem
Paper prototypes are a very important par the process that was used. A pen and paper sketch allows for a focused design around our main idea without falling victim to all the small details of visual design. The design clearly connected to our observed point of view and roughly showed the apps flow and addressed some of the problems that may be faced by users.
Heuristic Evaluation:
From the evaluation of the prototypes several usability issues were discovered. The most important usability issues needing to be addresses are:
- User control and freedom
- Error prevention.
- Adding more editing options such as: View Saved Trips, Edit Existing Trip, Delete Trip Start Trip Planning, and Save Planned Trip.
- Adding a “Help and Documentation” screen would help orientate the user and prevent potential errors.
Other areas that had usability issue to address were:
- Visibility of system status
- Consistency and Standards
- Flexibility and Efficiency of Use
To address the previous issues
- add a status status indication
- add an alert that a location has been added
- add a obvious way to send or share itinerary
- add a way to a restaurant hotel or attraction from the map screen.
From the evaluation of the prototypes several usability issues were discovered. The most important usability issues needing to be addresses are:
- Visibility of system status
- Error prevention and Recognition rather than recall.
- To address these issues:
- Adding an information screen or a description on the main screen to explain what the app does
- Add a homepage link
- Make a exit point obvious and easy to find
- Re-word to ‘Enter phone number of person you’re requesting’ might be more appropriate
- Add labels to the input fields.
Wireframing:
The visual design phase begins with the process of designing low to medium fidelity wireframes. fonts, colours and imager were ignored for now as we first created key UI elements, information arrangements and hierarchy an user interactions.
A list of HE violations was compiled based on the heuristic evaluation
From the evaluation of the prototypes several usability issues were discovered.
- The most important usability issues needing to be addresses are: user control and freedom, and error prevention.
- Adding more editing options such as: View Saved Trips, Edit Existing Trip, Delete Trip Start Trip Planning, and Save Planned Trip.
- Adding a “Help and Documentation” screen would help orientate the user and prevent potential errors.
- Other areas that had usability issue to address were: Visibility of system status, Consistency and Standards, and Flexibility and Efficiency of Use.
- To address the previous issues add a status status indication, add an alert that a location has been added, add a obvious way to send or share itinerary, and add a way to a restaurant hotel or attraction from the map screen.
- Add a navigation to get back to new trip and suggested trips
User Testing:
Once the fully-flushed out prototype was complete we were ready to test with actual users. A testing protocol was developed that outlined the steps and roles for executing the test and debriefing the users.
User consent was obtained. After the test the resulted were compiled in a meaningful was so as to discern what breakdowns were happening and what changes need to take place.
Ready for Testing 1 with observations
Preparation and Setup:
- The two participant will be given a printout of the consent form,
- Each participant will be using an iPhone5 to experience the “Road Trip Planning” App in a neutral location in a coffee shop.
The steps & roles for executing the test:
- Make introduction and explain study
Instructions to be read to participants:
- Provide Participant with tasks to complete:
- Press the submit button
- Select the a Suggested Road-Trip
- Choose an Attraction
- Add a Hotel
- Add Restaurant
- Subtract an Attraction
- Subtract an Attraction
- Save Trip
Observations recording: During the study the facilitator will be observing behaviour and taking notes and will be periodically taking photos.
Debriefing the participant:The purpose of this app is to help user plan road trips. It is meant to be a informative app that is easy to use. Thank you for your participation.
ACTION 1 — Select the first Suggested Road-trip
Participant 1: Very clean display of 3 different “”Your Suggested Road-trips” Logistically very easy to select the first but other then the name and a picture there is no other distinguishing features selling the road-trips from this screen therefore any other selling feature can only be found from clicking through and analyzing each road-trip in a loop.
Once on the “First” Suggested Road-trip …. More detailed information about the “First” Suggested Road-trip is presented plus … distance travelled … Days travelling … number of attraction along the way as well a link to each attraction along the drive on the road trip.
Participant 2: I like the look of this page but I don”t know which Road-trip to choose because there is not enough information about each road trip highlighted each link. Would like to know how many day the road trip would take.
Suggested Changes: Add a short description that better describes the Road-trip
ACTION 2 — Choose an Attraction
Participant 1: The attractions section is missing some key links like shopping and shows.
Participant 2: The attractions section is missing “Things to Do section and Landmarks
Suggested Changes: Add “Things to Do” and Landmarks under attractions and consider other links that may make sense
ACTION 3 — Add a Hotel and Restaurant
Participant 1: there is no differentiating factors separating one hotel from the next other then distance to attraction. More information would be helpful in making an informed decision. Knowing if a hotel offers parking would be important to know before choosing which hotel to stay in.
Participant 2: they put the quality of a restaurant and peer reviews ahead of location
Suggested Changes: Add $$$ and ***** and parking to differentiate to quality of the hotel and restaurant king
ACTION 4 — Subtract an Attraction
Participant 1: The user could not find a button to remove an attraction from the full page view
Participant 2: Enjoyed using the subtraction feature from the List of Attraction
Suggested Changes: Add Remove Attraction from Individual Attractions page
ACTION 5 — Save Trip
Participant 1: Having a check mark before save and after save was confusing
Participant 2: I liked that i could save my work
Suggested Changes:
Use colour to indicate saved work
Design changes based on user testing
Add a short description that better describes the Suggested Road-trip
Use colour to indicate saved Road-trip button
Add $$$ and ***** and to differentiate to quality of the hotel and restaurant
A/B Online Test Plan
The final test the must be performed on the prototype is to A|B Test a change by taking one of the above observed change requirements and redesign the app for it. this change needs to be an entity that can be quantified in a binary fashion by clicking a button, performing an action, using a filter, etc.
My hypothesis is that by adding a “brief one sentence marketing description” to the RoadTrip Route button and A/B testing it against the original page, which contains basic RoadTrip Route buttons it will be determined that there is an increase in conversion rates from the B test.
The test will determine if it is worth adding enriched content to the Roadtrip button as this link clicks through to points of sale such as hotels …restaurants …etc. Prototype testing is conducted using Usertesting.com.
The participant that underwent the A|B test came to the following conclusions:
A|B Test Results:
“I THINK I PREFER THE ONE WITH THE DESCRIPTIONS WITH THE PHOTO SO AS NOT TO WASTE TIME AND KNOW WHAT TIME FRAME IT IS FOR” — User 1 from User Testing
“i preferred the second version. it was clearer. it had a description which was very useful and intriguing.” — User 2 from User Testing
“Love the simplicity of the site, from the images and layout of the suggested road trips to the + and — symbols for adding and removing items, great idea permitting planning of road trips and including attractions, hotels and restaurants etc.!” — User 3 from User Testing
“well laid out sites with clear navigation and understanding of the site” — — User 4 from User Testing
Summary of Findings:
- Overall the users found the app easy to navigate and intuitive
- They liked that there were suggested road trips and that this was personalized information they mentioned that this felt special and they were excited from the preferential treatment
- Liked the use of photos but one user found the logo boring and bland
- They liked that they could edit the road trip, removing attractions they were not interested, and that they could add restaurants and hotels that were close to the attraction. One user mentioned that they really liked that they did not have to go to any other apps to get this information
- They found the key summary information very helpful
- Found icons straightforward
- Liked the use of symbols and found them helpful
- Some users had a hard time figuring out how to add and how to subtract an attraction
A/B Results
In regards to the A|B test 3 out of 4 users preferred the additional short description added to the suggested Road Trips listing. They found this additional information to be helpful and saved them time and prevented them from making an additional click through to an unwanted description page. They liked the road trip description and felt that it made them want to learn more. They all choose the road trip with the additional information.
One user mentioned they liked the simplicity of the using just the image and title. They did mention that additional information was helpful. Aesthetically found the additional information too heavy handed. It was a toss up for them as to which they preferred but suggested is there a way to have both, as with a hover. Maybe I can have less information, just some key information.
List of the Changes based on the A/B Test and User Testing
Changes made to prototype:
- Make the logo more interesting
- Add a short description to the Individual Road trips listing page
Changes to be done in the future:
- Add a list of benefits to the attraction and add star ratings of the attractions
- Add a section of additional attractions choices that are on the road trip route that a user can add to trip
- Add additional sections to the attractions such as tours, services, shopping, car services, ect
- Add additional information to the key information, such as to and from
Conclusion
I choose the creative brief for Glance and designed an app that assisted people in planning and viewing a road trip itinerary. This app would enhance peoples experience both during planning and while traveling on trip. The user could centralize the planning process for road trips in one app.
The app produced suggested itinerary based on information given. The trip itinerary created by the app at a glance summarizes all key information. An example of this was in the Road-trip Itinerary page that only listed the stops that the user would make during the trip. The home screen contains only the relevant information needed to be able to plan a road trip. The planned road trip can be shared by other users by either text or email.
The trajectory so far in this design and development of this project is that the scope of this project is quite large and complex. All of the information gathered from the prototypes are continuing to grow. Because of this growing scope, I must focus the development on the best trip planning flow and then continue from there research and design the best user experience. In subsequent phases, phase two, I could focus on the other functionality require for this app, while always designing the best user experience.
User testing has illustrated that we have the start of an easy to use app that allows users to plan out the start and end of a road trips and find hotels and restaurant along the route. Users found it to be a useful and easy to use app and its a good start to a much more complicated multistage development project.
