Dérive: Phone and Watch
There are two parts to this watch--a phone component and a watch component. I will present each sequentially.
Phone Introductory Video (Main User)
This application starts from the phone. Initially, the user selects his or her status: to Dériving, Curious, or Invisible. Dériving means you are the main user, curious means your watch may receive Dérive Requests and your friends can see your name when planning a Dérive, and Invisible means that you appear offline to everyone.
In a series of stages--shown by the video and the screenshots below--the main user can set up his or her trip in accordance with the project specifications.
Smart Phone Features
1) Animations
- A fade-into-view and a slide-into-view used to bring into view prompts and content respectively
- A flashing selector animation to indicate what to click to smoothly run through the prototype--inspired by the Carousel FramerJS demo
2) Scrolling
- Scrollable options--as opposed to limited to seeing items cut-off and not being able to access them
3) "Smart" NavBar
- The NavBar allows the user to have a strong mental model of the overall planning pipeline
- The NavBar item corresponding to the current screen is always highlighted
Watch Introductory Video
The main and curious users essentially have the same experience on the watch: they see a series of partially filled arrows indicating general directions to wander in and the extent to which they are doing so along with a total estimated time till arrival at the final difference.
The only differences in the app among the users are first that main users would not see the first invitation page as by definition they are the ones doing the inviting whereas the curious users would and second that every user in the Dérive will see arrows tailored to his or her own location.
As for my mockup for the watch, the only responsive interaction example was the clicking the first Accept. This watch prototype gives a glimpse into some of the screens that an actual user would see in his or her journey--so I felt providing a simple slideshow is the best way to convey my partially filled arrow concept.
Bitbucket username
My user name is "theted"
https://bitbucket.org/theted/
Comments