chrishobcroft
commented
4 years ago Here is a proposed design for the UX flow:
State 1 - immediately after app launches
Show camera view only with flash on and microphone on etc. (no network required yet)
_This way if their device isn't powerful enough to generate an Ethereum address, then they still see their live camera feed.
State 2 - After creating / looking up local Ethereum Address
(no network required yet)
Display Eth address in puce #faf5ef
At this point, there should be a transient notification saying that the app has copied the app's wallet's Private Key to the clipboard. This way, the user starts to learn that their 0x... address is related to a Private Key.
This way, if the user has no internet connection, they will still see that they have an Ethereum address with Public Address and Private Key.
State 3 - After started streaming
Immediately after the app attempts to publish to the rtmp endpoint
Add "off-air" symbol in puce #faf5ef (see asset below)
This way, they get an idea that they are not "on-air", even if they have an internet connection
State 4 - When balance becomes available, e.g. from Infura (or Connext?):
Show address and balance in green #00eb87
This way, they know they have direct access to the money they control.
State 5 - When connecting to rtmp endpoint is confirmed:
When it becomes clear that the connection to the rtmp endpoint has been made, and content is streaming.
Show "on-air" in green #00eb87 (attached .png file below)
This way the Publisher knows they are "on-air"
State 6 - After the ENS reverse name lookup has found that the address has an ENS name:
The app should query ENS with the Ethereum address, to see if there are any names associated with the address.
Show the ens name in green #00eb87
This way, a user can start to address their content using their private key on ENS webpage, to aid in content discovery - perhaps as part of this feature request on the Consumer app :)
State Transitions should Fade
All state transitions should be fades - like in this video demo: https://youtu.be/NNOeU8NLEEs
Font
All fonts rendered using LL_AkkuratMono_OTPro (attached below)
Assets
colour-0 = #faf5ef puce colour-1 = #00eb87 green
note: these colour codes should be configurable during the build of the app, and perhaps even just denoted as colour-0 and colour-1
Font: LL_AkkuratMono_OTPro.zip
Implement a "Live" status indicator that switches from grey (when not connected via RTMP) to red (when connected)