A dérive through a city is a free flowing path from a start location to an end destination. It allows the user to discover various parts of a city and experience the city at its finest.
I tried to capture this experience through my mobile application. When a user first opens the application, they'll see the Splash Screen. This will eventually transition to the Categories screen. They can choose the type of end destination they want, whether it be art, bar, cafe, shopping, etc. In addition, on this screen, they can toggle whether or not they are "curious" as well as the settings for their route to the destination. I chose to put everything here, because it is the main screen of the application. In the demo, we select "cafe".
Once a user selects a category, they will see a list of destinations under that category. Underneath each item will be a distance, Yelp rating, as well as review count just to give each user a preliminary opinion regarding each location. In our demo, we select "Sightglass Coffee."
In the Location screen, we see detailed information regarding the location. This allows us to better understand and determine whether or not the location is a good location. A user can confirm this by hitting "Set Destination."
On the Invite Friend screen, a user can invite any friends in the area that marked themselves as "curious". Simply click on a name, and it will highlight. For our demo, we select "Kim Kardashian." Click Invite Friends to go to the next screen.
On the Time Screen, a user is prompted to select a time for arrival. However, they must include a 10 minute buffer in their time selection as seen by the prompt. This screen will appear with the time toggle view visible already to the default ETA + 10 minutes from now. Once this is selected the following screen will appear. And then a user can finally start a derive.
Screenshots for the Mobile Application
Screenshots of the Watch Application:
The watch aspect is relatively straightforward. In terms of navigation the watch shows step by step directions and an ETA for the user to follow. Upon reaching the destination, it will show the "Arrived" screen.
If you are invited to a derive, you will receive a prompt on your smartwatch.
Link to bitbucket repo:
Video Walkthrough of Framer.js:
Sketch files:
Comments