rivernews / tripl

Mobile app that allows multi-destination trip planning.
0 stars 0 forks source link

Research & initial scaffolding #1

Open rivernews opened 4 years ago

rivernews commented 4 years ago

Preliminary Research: the technologies, the platforms

Basics

Research on Map related RN components

How to publish app

How to navigate between screens (route)

rivernews commented 4 years ago

Designing the main use case

The original concept can be viewed here.

Now we want a more concrete user flow, step by step, so that development can be easier.

This app's main goal is to achieve multi-destination search, and trip-planning that supports the search. Overall, it wants to solve the problem that people want to access several services w/ some ambiguity or flexibility where there're many candidate places for each service; second, people want to travel to these places in a reasonable, least-cost way.

For example, I want to travel to an attraction by driving there. But as soon as I navigate and "drive" in front of the site, I found I need to find a place to park first. In this case, you can just search for parking instead as the destination. But also, if we can say hey besides searching for the attraction location, also show me parking lot nearby. This makes it clearer how your actual trip will be like.

Another example. I have several TODOs on my calendar. I want to 1. go to the drug store to get some medecine, 2. I want to print some documents so places like Fedex or UPS would do that, 3. I want to return my Amazon order so must find a Kohl (a chain department store) 4. I want to get some food nearby. Each service is not a fixed location, like for Kohl, any branch store will do. This kind of trip, if using Google Map, you'll find it hard to carry out and plan in advance. You end up searching for perhaps 1-2 items from the list. Soon it turns out the 3rd item on our TODO list is just too far away from what we've ended up with so far. You decided to just do it in other day.

Of course, the above might be a complex example, and you might not have this use case as often. But this should be more common when you're not able to go out very frequently, or your time is precious. Or the destination often takes a lot to get there from where you live. Every time you go out and drive has a large time penalty. Then you may find this app more useful.

Next, let's define a complete user flow, which can be used right away by development.

1. Input multiple locations or keywords

IMG_C60F7A824A6A-1

Allow multiple inputs. Ideally this can be a dynamic form, where a single input field displays; as soon as user start typing in it, a second input field shows up. Then third, etc.

But at the very least, it can be a single input field that is able to parse multiple keyword, by defining some delimiter, like ,, or |, if that does not collide with most of the keywords.

2. Search & overlay results

Multi destination panel

multi destination panel

Search for this area

IMG_445494B2A81F-1

Tap for detail location info

tap for location detail info

Triggering search - this is also easy to solve. Ideally we can have a button, or an icon button. But at the very least, typing a "enter" in the keyboard should start the search.

How would the search result data look like? We imagine it's a list of location objects. Since we have multiple keywords (destination), we will have several collections of locations. Nothing too complicated. But one thing we might need to keep in mind is handling pagination. Seems like even the native google map app on iOS will not do any pagination given a keyword, incomplete or complete. It just show the first 8-10 results. You will have to keep typing your keyword to be more specific, and hopefully the result list will get narrow down. So I guess we'll just not worry about pagination.

Finally, how do we display the result? My first though is we need to distinguish which keyword does a pin belongs to. As a quick idea, each keyword can be assigned a color, then its search result's pins will all use that color. You end up with many pins on the map w/ different color.

There're some extra user experience details we have to handle here. We have to keep our keyword displayed, or at least let user be able to summon them easily - also reminding users which keyword does a color represents. Help them establish that color mapping.

3. Helping users plan the entire trip

IMG_EE7CBB6AD073-1

Phases:

  1. Select the finalized, exact locations. Ordering matters, so ordering should be part of the state too.
  2. (optional) Provide the estimated traffic journey time for currently selected locations, to help user make decision. This estimated journey time will naturally exclude the time users spend at the location. Just the traveling time itself. Also, just use current traffic estimation, because we have no idea how long will user spend at a location and when a user will leave a location.
  3. Allow users to de-select (undo) their locations as well. Estimated time will have to be updated accordingly.
  4. (optional) Ideally, user can drap and drop to change the ordering, instead of having to remove several locations and re-add them.
  5. Let user "submit" their final collection of locations.
  6. Provide a way to let user start the trip navigation. Preferably, we don't have to implement all this in our app. We may do this within our app if google map API allows us, but unlikely. Our best bet would be to generate some kind of url or query, signal google map app on user's phone (let them install it if users don't have google map installed), and bring users to the google map app, fire the navigation. Or at least, show the "direction summary" in google map, with all the multiple destinations configured for the user, so that users will just have to click a single "start" button to start the navigation.
  7. Provide a way that user can easily return back to the search result, and make modification, and then submit another final plan.
  8. Provide an option for user to start over the entire search.
rivernews commented 4 years ago

Technical limitation research: for the use case

Dynamic Form (step 1)

Bottom-up Drawer (step 2)

We can also use existing themed component library. Expo has a page introducing several popular ones

React Native official doc also has a list of officially supported components. Not sure how their modal works like since they didn't provide an image for modal.

Destination Panel (step 2)

How hard it is to implement the timing & show the "search this area" floating button when users scroll to area out of the existing search result area?

Finalizing Trip Planning (step 3)

General: iPad