Frontend Overview

[mtreacy002]

This epic is to track discussions on BridgeInTech Frontend related matter:

1. Structure
2. (reusable) Components
3. Assets
4. Colors
5. Interactions
6. Path
7. GUI Prototype

[mtreacy002]

Initial idea as per the proposal:
List of MockUps

Related to All Users

Register (figure 1.1)
Login (figure 1.2)
Homepage (figure 1.3)
Companies (list) (figure 1.4)
Programs (list) (figure 2.1)
Mentors (list) (Mentees is not shown as one of the MockUps because it has similar layout to Mentors) (figure 2.2)
Company Portfolio (figure 2.3)
Program Details (figure 3.1)
Mentor Portfolio (figure 3.2)

Related to Company User

Create Company Profile (figure 3.3)
Create Program (figure 4.1 - 4.3)
Send Request (figure 4.4)

Related to Mentor/Mentee User
Application Form (figure 4.5)
Create Profile (figure 4.6)

Link to file

Feature flows

Figure 1.1. Register

Figure 1.2. Login

Figure 1.3. Homepage

Figure 1.4. Companies

Figure 2.1. Programs

Figure 2.2. Mentors (same for Mentees)

Figure 2.3. Company Portfolio

Figure 3.1. Program Details

Figure 3.2. Mentor Portfolio

Figure 3.3. Create Company Profile

Figure 4.1. Create Program 1/3

Figure 4.2. Create Program 2/3

Figure 4.3. Create Program 3/3

Figure 4.4. Send Request

Figure 4.5. Application Form

Figure 4.6. Create Profile

Notes for MockUps:

• CRUD functionalities will be only available to the user who is the owner of the information on the page. E.g:
  • On Company_Portfolio, the ‘edit’ and ‘+’ only visible/accessible to Company user.
  • On Mentor_Portfolio, the ‘edit’ and ‘+’ only visible/accessible to a Mentor user.
• on colour scheme:
  • Green highlighted area indicates the ‘Required’ features as stated in the Project Features.
  • Yellow highlighted area indicates the ‘Nice to have’ features.
  • Red highlighted area indicates the ‘Future’ features.
  • The form with only black/grey and white indicates it is also ‘Required’ features (except if a certain area is highlighted in red - ‘Future’ feature).
  • Red arrows (on Company_Portfolio, Program_Details and Mentor_Portfolio) indicate the functionalities that will be hidden to non-login users.
  • Yellow arrows (on Company_Portfolio, Program_Details and Mentor_Portfolio) indicate that button visibility will depend on the Program ‘status’.
  • Green arrows:
    • On Mentor_Portfolio, ‘Mentor Request’ button links to ‘Send_Request’ in MS; the ‘Company_Request’ button links to ‘Request_Form’ in BIT; ‘Profile’ links to User_Profile in MS; and ‘Background’ links to Personal_Background details in BIT.
    • On Create_Profile MockUp indicates fields that will be filled with existing data taken from MS DB if the new Login user is a new Mentor/Mentee user to BIT but an existing user of MS.
  • Blue arrow on Company_Request_Form indicates the fields where options in the selector will be taken from existing data in BIT DB. ‘Program URL’ will turn grey and auto filled with data once Program ID is selected.

[mtreacy002]

Notes to self:

• Register page - Fig.1.1

  • add Timezone field so that when user register, the user extension table can get initiated with user_id, is_organization_rep and timezone.

• Create Organization Profile (before it's called Create Company Profile) - Fig.3.3

  • to decide: does organization timezone have to be the same as its representative timezone?