UI: High-fidelity Mockup - Register

[mtreacy002]

@mtreacy002 commented on Thu May 14 2020

Description

As a student,
I need create high-fidelity mockup for Register,
so that I can move forward with on the planning stage.

Mocks

Initial idea (per proposal)
Figure 1.1. Register

Acceptance Criteria

Update [Required]

• must have all the fields for Mentorship System user registration:
  [ ] name
  [ ] username
  [ ] password
  [ ] confirm password
  [ ] email
  [ ] terms and conditions check box
  [ ] need mentoring check box
  [ ] available to mentor check box

• must have Organization and Mentor/Mentee check box

• must have Signup and Login buttons

• must have view/hide password field options

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Estimation

1 day

[mtreacy002]

Update:
@isabelcosta, @ramitsawhney27, and @foongminwong. Here is the high-fidelity for Register page I made using justinmind as suggested. Color code are taken from AnitaB.org logo color mix.

Link to file

I'm no designer so I know this is far from ideal. Please do give me your opinion on this. If you like this as it is, please give your approval by using ✅ on this post. Thanks heaps.

PS: I couldn't find ways to arrange the exact distancing between components on justinmind. Still working my way around this tool ☺️ . Also, @isabelcosta, I can't see any where the share button, so I upload the file onto BridgeInTech Google folder instead.

While waiting I'm going to open an issue at backend repo and start working on the API endpoints and CRUD operations for this page.

[foongminwong]

Like your design! When a user checks 'Yes' for 'Do you represent an organization?', will an extra space pop up so that the user can enter his/her/their organization?

[isabelcosta]

@mtreacy002 about the share button, we can troubleshoot this in our 1:1 this Saturday ;)
Excited to see this mockup 🤗

Questions that came up:

• Is the "Available to be a mentor or mentee", relevant to an organization profile?
• if you are just registering (you are not a logged user), are you supposed to be able to see Programs, Organizations, mentors and mentees etc?

[mtreacy002]

Thanks, @isabelcosta.
On your questions:

Is the "Available to be a mentor or mentee", relevant to an organization profile?

Yes, because:

• only a user can create an organization. When they register, they register as a user, not as organization. But the answer to Do you represent to an organization will initiate the User_Extension with the new registered user Id so when they login at a later session, they are allowed to create an Organization profile then create a program/s.
• a user doesn't have to be available as mentor or mentee but this (having checkbox available to be a: ... will give them possibility to volunteer as a mentor to any program (perhaps the organization might even requires its representative to be available to mentor at least to one of the programs it's offering).
  Also this will make it possible for the rep who is interested to apply to a program offered by other organization as a mentee (depends on the organization they representing, which might allow this to happen).

if you are just registering (you are not a logged user), are you supposed to be able to see Programs, Organizations, mentors and mentees etc?

I would love to think so, this is so:

• the general public becomes aware of the potential of joining as mentor/mentee/organizations
• to meet BridgeInTech aimed as a pool talent where organizations who are looking for a potential employee can browse mentor/mentee profile/mentorship program history within BridgeInTech and see what skills they (mentor/mentee) have accumulated from the BIT programs. As for mentor/mentee, this gives them opportunities to promote themselves as skilled worker.

If the general public wants to be involved in BIT, they then need to be registered.
What's your thoughts on this, @isabelcosta?

[mtreacy002]

Update:
I've made adjustment to the Register page. I've added Both as the 3rd options for Available to be a:.... (as per the recent change made on Mentorship Android UI).

[mtreacy002]

Like your design! When a user checks 'Yes' for 'Do you represent an organization?', will an extra space pop up so that the user can enter his/her/their organization?

@foongminwong, atm, I''m thinking that with this checkbox, if it's ticked (==true) once the user data related to User table is recorded in MS schema, the new user id will be used to create an instance of User_extention in BIT schema. When the user login for the first time, they'll be taken to the Create Profile - fig.4.6 then Create Company Profile - fig.3.3 pages. The user can also be given a chance to then take their time to when they want to create an organization profile (but this can only be done after this user fill in their user profile). Maybe we can put a Skip for now button for this.
Also, they can only create a program when they've completed the minimum information required from the User Profile and Organization Profile that will be needed for creating a Program.

[mtreacy002]

Hi @anitab-org/bridgeintech-maintainers, I have something I'd like your vote/opinion on.
Atm, I have separate tabs for Mentors and Mentees (lists) because originally on Mentorship System we're not allowing a mentor to also be a mentee. With the recent change (Both as 3rd option on Available to be a:... question). Now I'm thinking of just putting the Mentors and Mentees together in one tab. I'm wondering what's the best name for this tab. Options I could think of:
🐯 Participants
🐼 Professionals
🦊 Collaborators
🐨Members

Or maybe you have another option?

[mtreacy002]

Note to self:

• Need to add Login button to alternate between SignUp and Login pages.
• Need to add Timezone field to register page (to initiate the users_extension table, we need: user_id, is_organization_rep, timezone)).

[isabelcosta]

@mtreacy002 I like 🐨 Members :) but I'm biased since I am using that on mentorship system. I feel it's less specific about the roles of the users. Then you can specify in the item in the list thst represents a user. This is my opinion :)

[foongminwong]

Some comments:

• To follow the current UI design on mentorship-android, change the check buttons of "Mentor, Mentee, Both" to radio buttons
• I would prefer Members (Participants is a little too common, Professionals sounds a little related to organizations, Collaborators might confuse users who join BIT that they might be working on projects)

[foongminwong]

Remember to let users enter email address for registration

[mtreacy002]

Update:
Register page (now using Figma)

link to file

[mtreacy002]

Update:
Hi @anitab-org/bridgeintech-maintainers. I've made tiny (but important change) to the Register page. Now it has the Timezone field so user can tell us their timezone at the time of registration. this will be a selector from list of Timezone enum.

The list of timezone as overlay

[mtreacy002]

Note for potential reusable components:

• Text input field

• Password input field

• Selector input field

• Availability type radio buttons

• Is organization representative radio buttons

• button

• form container

• check box and text

[meenakshi-dhanani]

Hey @mtreacy002 looks good, I however have an alternate approach. We can think of the RegistrationForm/Register as a component, when you see a repetition/duplication while creating other components, you can then extract it out to a reusable/common one. If you pre-plan this, I'm afraid we may cause a certain amount of over-engineering. So start off with one component, and wait till you see duplication to extract.

[mtreacy002]

Hey @mtreacy002 looks good, I however have an alternate approach. We can think of the RegistrationForm/Register as a component, when you see a repetition/duplication while creating other components, you can then extract it out to a reusable/common one. If you pre-plan this, I'm afraid we may cause a certain amount of over-engineering. So start off with one component, and wait till you see duplication to extract.

Agree. I was actually thinking about that too... Making it as Form level (Register Form) as component will probably help make it faster to be reused rather than adding field one at a time... 😂. Thanks for the tips, @meenakshi-dhanani

[mtreacy002]

Update:

To overcome the issue blocking issue#26 backend, the Register form needs to be modified as below:

Can @anitab-org/bridgeintech-maintainers mentors please approve this change so I can apply the backend change accordingly.
Thanks beforehand