Dashboard Revamp (Stage 2)

[neruthes]

Metadata

Field	Value
Previous Stage	#70
Figma Link	figma.com/...
Expected UX prototype due	2019-11-12
Actual UX prototype release	2019-11-13
Expected engineering due	2019-12-15

Catalogue

• Dashboard internal navigation structure minor adjustment
• Create Persona UX adjustment
• Connect Profile UX adjustment
• Delete Persona UX adjustment
• Disconnect Profile UX adjustment

Left For Future Stages

• Database Backup
• Backup Persona UX adjustment
• Import Persona UX adjustment
• Debug Tool UX adjustment
• Misakanet UX initialization

Navigation Structure

Desktop Browser Extension

Generally, Dashboard is opened in a new tab. In such scenario, we do not need a way to exit Dashboard.

Stand-Alone App, Big Screen

Min-width: 1024.

In addition to the case of Desktop Browser Extension, we need a way to exit Dashboard. Simply add an AppBar above at the top left position, within the pseudo-drawer.

Stand-Alone App, Small Screen

Max-width: 1023.

In this case, we need an AppBar which has a close button at the top-right corner for exiting. Also, in the sense that we cannot use a drawer button to invoke the drawer, the items in the drawer will be shown as tabs below the AppBar.

Dashboard Home

• Multiple sections:
  • My Personas
  • Add Persona
  • Database

My Personas

Component: Persona Card

Component: Profile Row

• Vacant Mode
  • Show a blue text button to connect a profile
• Filled Mode
  • Show a black text label to display the username with a leader @ regardless of site-specific conventional representation of usernames.

Modes

• Standard Mode
  • Hover Persona Card to show "Edit Name" button
  • Hover Profile Row to show "Disconnect" button
• Name Edit Mode
  • "Save" button never hides
  • Other operations do not interrupt name edit mode

Create Persona

• Step 1: Set name
• Step 2: See success screen, be suggested to connect a profile
• Step 3a: Quit
• Step 3b: Connect a profile

Backup Persona

Import Persona

Delete Persona

Connect Profile

Disconnect Profile

Database Backup

Database Restore

[SunriseFox]

I sometimes think the configuration is too complex and confusing, more after memo words were implemented and will be even more after this if implemented. We should think as a user with only a basic level about using social media and crypto, not a designer that designs a too complicated masterpiece with limited user experience.

[yisiliu]

I sometimes think the configuration is too complex and confusing, more after memo words were implemented and will be even more after this if implemented. We should think as a user with only a basic level about using social media and crypto, not a designer that designs a too complicated masterpiece with limited user experience.

good point - let's show this to a "real" user

[neruthes]

Good point, but also note that Dashboard Revamp Stage 3 will include Initialization procedure.

[neruthes]

Also, if we really wanted to avoid exceeding the level where "real" users feel difficult to understand, we should not have started supporting multiple networks and multiple personas. It is always a science of balance.

[neruthes]

Note:

"Connect Profile" procedures may be subject to changes according to the arrangement of #409. Specifically, when the user clicks "Next" in the Connect Profile popup dialogue, the user will be directed to the profile page.

It may be good to deliver #409 and #369 in the same release.

[SunriseFox]

This seems not at all like what I could finish within this month... It contains lots of work apart from the UI aspect. Some more days may be required.

[Jack-Works]

why do we need a "base64" mode?

[neruthes]

@Jack-Works There are alternative backup methods. I just leave Base64 as a placeholder. Other ways should employ the same interaction design. Options remain open for discussion.

[neruthes]

Update:

We may pass the #194 (with private key) payload into Base64 encoding as the result of Base64 persona backup payload.

[SunriseFox]

Filename and save place cannot be enforced. So displaying such information is not possible.

[neruthes]

Filename and save place cannot be enforced. So displaying such information is not possible.

So we may skip this step. When the user clicks "Backup" button in the Database section, the user will get the native download prompt.

[SunriseFox]

:gai_hui_qu_le:

[neruthes]

Update:

According to the discussions in #407, the persona creation modal will include a mandatory password field.

[Tedko]

@neruthes Request a QR code identity tsf functionality within the same milestone. We should not ship any stable ver without the QR code identity tsf functionality.

[neruthes]

@neruthes Request a QR code identity tsf functionality within the same milestone. We should not ship any stable ver without the QR code identity tsf functionality.

Will be added in Stage 3. Consider releasing Stage 3 together.

[neruthes]

Backup alert is removed. No need to implement it in this stage.

[neruthes]

Update:

Changed this line of text.

[neruthes]

Note:

We later agreed that the connecting component (Figure 1) may be embedded in the webpage, and may be delivered before #409.

---

• Figure 1:
  •