UI: High-fidelity Mockup - Create User Profile

[anitab-org]

UI: High-fidelity Mockup - Create User Profile

[mtreacy002]

Update:
Hi @anitab-org/bridgeintech-maintainers. Here's the Create/Update User Profile Mockup.
Note: I divided the form t be 3 different section because we have 3 different tables related to each sections:

1. Personal Details section - MS schema User table
2. Additional Information section - BIT schema User_Extansion table
3. Personal Background section - BIT schema Personal_Background table.

This one here is for Personal Details section:

[meenakshi-dhanani]

In the user profile, may be we just add a * to show if all the fields are mandatory. It looks good otherwise :)

…

On Thu, May 28, 2020 at 12:39 PM Maya Treacy ***@***.***> wrote: Description As a student, I need create a high-fidelity Mockup on Create User Profile, so that I can move forward with my planning stage. Mocks as per initial proposal *Figure 4.6. Create Profile* [image: BridgeInTech MockUp - Create_Profile] <https://user-images.githubusercontent.com/29667122/81495112-3d36da00-92f1-11ea-8aed-9935103e6a03.png> Acceptance Criteria Update [Required] - must have section title Update Profile - Personal Details - must have Username field with accessible field pre-filled with the username - must have Email field with non-accessible pre-filled with user's Email - must have `Name field with accessible pre-filled user name - must have IRC ID field with accessible placeholder - must have Interest field with accessible placeholder - must have Bio field with accessible placeholder - must have Location field with accessible placeholder - must have Occupation field with accessible placeholder - must have Organization field with accessible placeholder - must have Skills field with accessible placeholder - must have Cancel button - must have Continue button Definition of Done - All of the required items are completed. - Approval by 1 mentor. Estimation 1 day — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/anitab-org/bridge-in-tech-backend/issues/23>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADM6DFJ3DLJ6VMM44TO5M4LRTYE2TANCNFSM4NMZ5ZUQ> .

[mtreacy002]

In the user profile, may be we just add a * to show if all the fields are mandatory. It looks good otherwise :)

mmm... as we're using the MS table on this, the default settings of these fields for User profile on MS are not mandatory (so the mandatory ones are just the one from Register form). Perhaps only one field qualified to be mandatory, which is Name. Do we still want the asterix * in there?

[meenakshi-dhanani]

Then maybe would it make sense to have a * for name so that it is clear that is mandatory? On Thu, May 28, 2020 at 1:13 PM Maya Treacy <[email protected]> wrote:

…

In the user profile, may be we just add a * to show if all the fields are mandatory. It looks good otherwise :) … <#m_-2246566368792970018_> On Thu, May 28, 2020 at 12:39 PM Maya Treacy *@*.***> wrote: Description As a student, I need create a high-fidelity Mockup on Create User Profile, so that I can move forward with my planning stage. Mocks as per initial proposal *Figure 4.6. Create Profile* [image: BridgeInTech MockUp - Create_Profile] https://user-images.githubusercontent.com/29667122/81495112-3d36da00-92f1-11ea-8aed-9935103e6a03.png Acceptance Criteria Update [Required] - must have section title Update Profile - Personal Details - must have Username field with accessible field pre-filled with the username - must have Email field with non-accessible pre-filled with user's Email - must have `Name field with accessible pre-filled user name - must have IRC ID field with accessible placeholder - must have Interest field with accessible placeholder - must have Bio field with accessible placeholder - must have Location field with accessible placeholder - must have Occupation field with accessible placeholder - must have Organization field with accessible placeholder - must have Skills field with accessible placeholder - must have Cancel button - must have Continue button Definition of Done - All of the required items are completed. - Approval by 1 mentor. Estimation 1 day — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#23 <https://github.com/anitab-org/bridge-in-tech-backend/issues/23>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADM6DFJ3DLJ6VMM44TO5M4LRTYE2TANCNFSM4NMZ5ZUQ . mmm... as we're using the MS table on this, the default settings of these fields for User profile on MS are not mandatory (so the mandatory ones are just the one from Register form). Perhaps only one field qualified to be mandatory, which is Name. Do we still want the asterix * in there? — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <https://github.com/anitab-org/bridge-in-tech-backend/issues/23#issuecomment-635172624>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADM6DFMKBGJ5N3MKGZNMZZ3RTYI2HANCNFSM4NMZ5ZUQ> .

[mtreacy002]

Then maybe would it make sense to have a * for name so that it is clear
that is mandatory?

yup, will add it now 😉

[mtreacy002]

Update:
added asterix * for the Name field 😃

[mtreacy002]

Update: Change the buttons at the bottom

1. User Profile - Personal details

[mtreacy002]

Update:
2. User Profile - Additional Information

[mtreacy002]

Update:
3. User Profile - Personal Background

[mtreacy002]

Link to file

[mtreacy002]

Update:
Modified User Profile - Create/Update pages with My Space for Main navbar and added sub navbar under this tab

so, when user logged in, they can select the My Space tab on main navbar to get to their own My Portfolio, MyProfile and My Contact pages. Under Members tab we'll have the same sections but without `'My...' on the sub nav titles.

Here're the mockups

1. User Profile - Update Personal Details

2. User - Profile - Update Additional Information

3. User Profile - Update Personal Background

Here're what user can see when they click on the My Profile tab (to view their profile)
4. User Profile - Personal Details

5. User Profile - Additional Information

6. User Profile - Personal Background

[mtreacy002]

Update:
Hi @anitab-org/bridgeintech-maintainers. Changed my mind on the sub nav under My Space section. Now it has Request History instead of My Contact

(will only put one image here to show the change. But have changed the relevant tabs in the Figma file)

[mtreacy002]

Note for Reusable components:

• Sub-Navbar for Member users (under My Space main-navbar tab)

[foongminwong]

Suggestions:

• Change IRC ID to Zulip username or explaining what IRC ID is
• Remove Exit button

Note: 3 pages for one user profile

[mtreacy002]

Suggestions:

• Change IRC ID to Zulip username or explaining what IRC ID is

mmm... the issue is not all organization are the same, some might use Zulip, some might use Slack or other rIRC tools. Can I just add a ? icon so when user wants further information, they can hover or click and we give them extra information saying "IRC is an Interactive Relay Channel. e.g, Zulip, Slack, Skype, etc"

• Remove Exit button

Yup 👍, will do that.

Note: 3 pages for one user profile

Yup 😊