Dominate Design

[cooper667]

Dominate is the wrapper that loads ANNOTATE, MANAGE and CURATE (AMC).

The main features it handles are:

• Login
• Create a new account
  • Create a new team and pay
  • Join a current team by accepting an invite
• Open AMC and navigate between them, for this it likely needs some way "back" or breadcrumbs to allow navigating between them easily (You can click an image in curate to open annotate, but annotate has no way back to curate)
• Manage a user accounts
  • Change password
  • View and edit billing (this could be in Manage if it makes more sense, but all the billing logic is in Dominate, so would be better here). It could equally be a Dominate page styled to look like Manage?

Questions

• What should the user see when signing in? Currently it's a blank page...
• How does a user navigate between the tools? If we use an app bar or similar, how does this affect the current app bars in curate/annotate?

[joshuajames-smith]

[following on from #66]

This is the initial login screen.

A user who already has an account inputs their email and password. The password field has an eye icon so the user can toggle previewing their password or having it hidden. The eye icon turns green upon clicking, this is when the password is revealed while the icon is black when the password is hidden.

Is the user can not remember their password. They can click on the purple text under the text fields to 'recover my account'.

At this stage, there is two options: 1] we could have the users access their account with their recovery code and then let them change their password is the user account settings or; 2] we could prompt the users to do this by allowing the recovery code to let the user to change their password [see image below].

This is the following sign up screen. I have based this on the knowledge of what information we might need to collect for a sign-up. The side bar to the left shows the stages of the sign up process to make it clear to users where they are in the process.

The second phase of the sign up process gives the users their recovery key and some information about how important it is they store this information carefully as we can not recover the account otherwise [https://github.com/gliff-ai/dominate/issues/66#issuecomment-857515019].

The third phase is about teams. This initial screen shows whether or not the email being signup has already been invited to a team. If yes, they see the email in a box and can click to join or if no, they can create their own team or skip [ability to do it later?]. The create your team page should be a simple 'add' field, seen in ANNOTATE. The user can type the email in and press the add icon and then like the active search field in CURATE should appear below with another button to continue and name the team.

The fourth and final phase of the sign up would be the payment screen. I was not sure about payment pricing or plans, and whether the products were initially free at launch so have left it but following this they would then access the gliff software.

The navigation to AMC and account settings now lives in the top bar [already built into CURATE and ANNOTATE]. This does mean the 'upload' and 'export' function icons in ANNOTATE now live in the toolbar, rather than the top bar. The top bar contains, so far: the logo, a visual icon breadcrumb trail and a user profile icon. The visual icon breadcrumb trail uses the icons which were supplied to us in the re-branding process to document 'MANAGE > CURRATE > ANNOTATE' as the flow. As the user hovers, the tooltip lets them know which one is which. This was done as the aim of the UI is to simplify the space and the text breadcrumb trail looked more clunky and out-of-place. Although, due to accessing ANNOTATE through a click function in CURRATE, the ANNOTATE hover over will not work and should not change colour unless the user has one image selected on CURRATE. This addition does now let the user return from ANNOTATE to CURRATE.

CURATE and ANNOTATE here show how the breadcrumbs icons should look. The active software should be a black icon on a green circle. Any icons which came previously should be green icon with a green outlined circle and then an arrow indicating flow to the left. Any icons which come after the selected program should be greyed out with a grey icon and outlined circle.

If the user clicks the profile icon at the top right in the top bar they are taken to their account screen. I was not sure on pricing as I previously mentioned, but I have included what we might want to show the user. Ability to change profile picture [this might be a handy thing built-in for the MANAGE software as it can visually show who is in a team or assigned to what project], name, email, and password. These should expand to show two fields to type twice the email or password to change. The other space is for the billing details and the ability to edit them. Also possibly a scroll if we wanted to show their billing history, possibly to download a pdf invoice? The black icon at the top returns the user back to their previous screen. The breadcrumb trail is all greyed out as the user is not in that software flow.

https://xd.adobe.com/view/02f12a7e-dab7-4642-a180-5ec1331ca8f9-57a2/

[cooper667]

It might be worth a version of this page without billing info on, as most users won't be team owners, so won't see this.

Just a big version of the overview could work tho 😀

Also, we don't have profile pics, so possibly an icon for the top bar, and then remove it from here?

[cooper667]

It's also worth considering that there will be a place to regenerate recovery keys (and maybe explain them!)