Design - Profile screen updates

[dzinzyura]

Goal:
Introduce an updated vision for Profile screen, QR-code and Share profile option.

Affected metric:

• UI/UX enhancement
• Ease of data handling

Description:
Create designs for Ethora profile screen (mobile). Please, use this mockup and description for future works:

QR-code pop-up:

Profile screen (old):

Image and description can be changed as well.

Reference:

PROFILE SCREEN EPIC

[phwizard]

Regarding this:

Note this is a modal window so can be shorter vertically, doesn't have to take the whole screen (unless you think making it a full screen improves UX) and then makes sense to keep the "X" button as now to close it rather than the back button if we keep it a modal.

[polipivnenko]

Developed designs for user profile screens.
@phwizard @dzinzyura

[dzinzyura]

thank you @polipivnenko

thinking about 2 things:

1. Blurred image - I need to check if this hard to implement with Roman. maybe we can replace the blurred image version just with a solid color (like in telegram on iOS) to make this screen simpler to interact?

2. I'm not sure we need this 3rd screen option. maybe we can simply have just the second and make it scrollable. as for me, it looks a bit complicated for user to click on this "square" button to again move down the Documents section and click on buttons. or maybe you a have more detailed scenario / screen / user flow for further interaction with this button. if so, please, let me know.

@phwizard @Egatlov

[phwizard]

Blurred image - I think that should be doable, but yeah let's hear from @RomanLeshc

3rd screen

If we are to get rid of one of the steps here then I would say we don't need the 2nd screen, but instead the 3rd screen top area finishes here:

I agree that the square button could be confusing / excessive, instead I would have same UI there as in 2nd screen, but without buttons.

Regarding whether to keep this all as a 3-step transition, I think here too we should ask @RomanLeshc and maybe see how it works when implemented. This is something that depends on UX and the feel of it. It might look and feel great if there is a two-stage collapsing and unrolling of the top area, one with buttons and one without buttons, depending on how much user scrolls up or down.

[RomanLeshc]

I guess the blur on the image and transition to it should be considered as part of the 3-stepped animation. As I understand, we can try to create something like we have in telegram, when we go into the chat, click on chat setting and scroll down.

IMG_6765.MP4

@phwizard @phwizard

[polipivnenko]

So, should we keep the background blur after all?
@phwizard @dzinzyura @RomanLeshc

[dzinzyura]

@polipivnenko lets leave the blurred version, we'll try to implement it. if there be any issues we can go back to a solid (white) color one.

[polipivnenko]

@dzinzyura @phwizard

[polipivnenko]

Updated version with coins
@dzinzyura @phwizard

[phwizard]

Couple notes here:

1. There might be cases where Coins and blockchain features are disabled / hidden in the app. Many clients prefer to use our engine just for the basic digital wallet / ID and messaging functionality.

Thus, coins and transactions counter may sometimes be hidden and the screen should look OK without them.

2. Also, it is not guaranteed that the user will have any Items, Collections or Documents. So the screen should also look OK without that bottom section. In such situation, a bare minimum implementation, only the user profile without coins and transactions counter, will be shown along with buttons and "About" text.

Further design variation idea

Taking into account the abovementioned, but also that our engine is most often used in B2B integrations lately where there would be files, documents or cases associated with the user, I think we should look into a Folder and Document centric design of the bottom section here.

I.e.:

Get rid of "Items, Collections, Documents" tabs. Instead of these tabs there will be optional Folders which can be set up either by the User themselves or managed by the backend of our Client (App Owner).

Also in this UI we may display Documents or other assets along or instead of folders.

So:

1. No Items, Collections, Documents tab for the assets display.
2. User's assets will be represented as Folders and/or Files. Shown as a list - similar to how it's done in the example app I'm showing in the screenshot here.
3. We can have search + filters input here for the documents in case User pulled down the assets list. Initially the search and filters UI is hidden.
4. The element of the list will contain following elements:

Folder:

• Folder icon (+ thumbnails of files inside the folder can be overlayed here)
• Folder title
• Folder subtitle
• Right arrow to prompt the user to tap on the folder to unfold it / view its contents
• Files count and size (e.g. "5 files, 10 Gb")

File / Document (similar to how we have it already):

• Preview/thumbnail image
• Title
• Date

Let's have a look at the design without tabs, but with folders added.

@polipivnenko
cc: @dzinzyura