Design Documentation

Description:

//description of the overall design objectives

1. UI Kit

Overview:

The UI Kit design that will be used to create the UI Kit and its components for the UI Engineers to utilize. The creation of the UI Kit was first based off of a first draft used to test design options.

Documentation:

First Draft: This first draft was intended as a starting point for the UI Kit design.The UI Kit was designed using Adobe XD for the creation of the wireframes. Inspiration was drawn from the Bootstrap UI Kit example in Adobe XD for the various components and the colour scheme used was taken from the UP Logo.

First Draft Original Document: https://drive.google.com/drive/folders/1Zn1WLGapaXL-ddRL6HaUzjWKPAsotTZ2?usp=sharing

First Draft Wireframes Preview: https://xd.adobe.com/view/708a8731-1ab7-402a-adfd-d691194b24b0-25d9/

    

Final Version 1.0: The final version 1.0 was created based off the the first draft and the first designers meeting around the UI Kit design, the main changes were the removal of multiple designs for all UI Kit components, revision of header and footer designs and the addition of templates for possible design combinations.

Final Version 1.0 Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 1.0 Wireframes Preview: https://xd.adobe.com/view/6e6af053-a90c-4ac9-9051-0e3a29915ded-3b39/

    

Final Version 2.0: The final version 2.0 was the first complete design and the base for all additions to the UI Kit designs. Removal of all but one design for each component was done (card colour combinations were still present as they are interchangeable) as well as a final template design. Revision to the colour palate was also done both in presentation and in colour additions. As this is the first complete base design, images for it will be shown below.

Final Version 2.0 Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 2.0 Wireframes:

    

Final Version 3.0: The final version 3.0 involved addition of colours for Notifications as well as a disabled version for buttons.

Final Version 3.0 Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 3.0 Wireframes Preview: https://xd.adobe.com/view/ee695777-1c99-4f58-bfe2-af89ad3d22bd-bb3a/

    

Final Version 4.0 (Mobile inclusion): The final version 4.0 included mobile components that needed to be redesigned for scalability. The designs were based off of Tshego Manthata's (@SeePeeYou) designs as well as feedback.

Final Version 4.0 (Mobile inclusion) Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 4.0 (Mobile inclusion) Wireframes Preview: https://xd.adobe.com/view/71851d74-ae93-4208-b7ea-146d761c4084-24d6/

   

Final Version 5.0: The final version 5.0 includes revisions of mobile component header as well navigation menu.

Final Version 5.0 Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 5.0 Wireframes Preview: https://xd.adobe.com/view/eaea7342-093d-4872-a08e-6a8af4ceb848-bfb9/

   

Final Version 6.0: The final version 6.0 includes an admin console version of the UI Kit.

Final Version 6.0 Original Document: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

Final Version 6.0 Wireframes Preview: https://xd.adobe.com/view/9d6bc299-ed53-4d1b-9cd1-8539f28d943a-c838/

Contributor: MatthewRobinMarsden (Matthew Marsden)

2. Mobile(PWA)

Overview:

The Mobile/PWA Designer's responsibility is to ensure mobile-friendliness/responsiveness of the components designed throughout the whole application. As part of the designers' documentation, the Mobile/PWA Designer has to ensure that every webpage has a corresponding mobile design adaptation. To guarantee that the components used throughout are mobile-friendly, the PWA designer would have to collaborate extensively with the UI Kit Designer amongst other groups.

Documentation:

Wireframes

UI Kit mobile/PWA adaptations

Mockups:

A few Example pages for the PWA

contributor: Tshego Manthata (@SeePeeYou)

3. Login

Overview:

The login page allows users to log into their existing accounts (created when registering). Users login using their email and password.

Documentation:

Wireframes:

Mockups:

contributor:

Reece Stephenson (@ricecakesreece)

4. Register

Overview:

The register page allows users to register for access to the graduates portal, this requires a name, surname, email and password.

Documentation:

Wireframes:

Mockups:

contributor:

Reece Stephenson (@ricecakesreece)

5. Request For Access

Overview:

A student profile will have buttons to download their Academic Record, Transcript, CV, Certificates, and a link to their Capstone Project Github. The buttons will indicate the status (inside each corresponding button) of whether the company representative has access to the resource. The status for each resource can be "Request Access", "Pending" or "Download". The statuses will have appropriate accompanying icons. When a resource becomes available, the button text will say "Download" and the company representative (user) will be able to download the requested resource.

This feature will only be enabled and visible for company representatives.

Adobe XD Preview Link: https://xd.adobe.com/view/516c5c76-f7be-49e0-979a-2f8dc0817c53-043f/

Documentation:

Wireframes

Mockups

Final Web-based Mock-up:

Request for access within the web-based Student profile page:

Final Mobile-based Mock-up:

Request for access within the mobile Student profile page:

*The mobile student profile page will be scrollable, allowing for the request for access feature to sit slightly off-screen at the bottom.

Contributor: Dylan Pietersen (@dylan2894)

6. Student profiles

Overview:

Documentation:

**Wireframes**

**Mockups**

contributor Mohamed Nizhar Aboobaker (@NYZCoder)

7. Company profiles

Overview:

The company profile is the place for companies to showcase themselves to prospective students looking for work. The design of the company profile page attempts to show what information will be present on the page(as decided by our Business Analyst) as well as how this information will be formatted. As you can see below there are 2 outlines of the design for the company profile. The first of these designs is what any user will see once they have clicked on a company profile to view. The second design is an outline of what the company profile will look like as it is being edited by an authorized company representative, this design includes rough versions of pop up menus that might need to be incorporated in order to allow for all data elements to be editable.

Documentation:

Wireframes:

Primary page:

Page when editing:

Mockups:

Primary page: Page when editing:

-Banner changes colour when hovered over, once clicked the file explorer will open allowing the user to select a new image.

-Buttons to save changes while editing the page are available.

-The settings icon has become a save icon to save all changes and get out of editing mode.

File explorer to upload new banner image:

Popup to edit the company representatives:

Popup to edit the company socials:

Mobile version:

Contributor:

Steven Schormann (@Steven-Schormann)

8. Company rep profiles

Overview:

Documentation:

Wireframes:

View Profile:

Edit Profile:

**Mockups**

Contributor:

Sean Nkosi (@siphoxnkosi)

9. Students explore

Overview:

The Student Explore page will serve as a platform to find potential future employees, or in the case of a student, to find potential business partners. Based on the signed in user's tags (interests and/or achievements), relevant students profiles will be shown in a brief summary (card) format, detailing important information about the student. This will aid Companies/Students in their recruitment process by helping them discover and contact graduates that suit their exact business needs.

Documentation:

Wireframes The following wireframes demonstrate the Student Explore feature layout, components and the flow of the website when certain components are clicked.

Mockups

Please use the linked Figma project to demonstrate interactive components.

https://www.figma.com/file/9t9FpGeWPWDKeCv4Y2HlKq/Student-Explore?node-id=0%3A1

Desktop Mock-ups

The following screenshots show the Student Explore page when just opened, with expanded filter tabs as well as expanded navigation bar.

Mobile Mock-ups

The following screenshots show the Student Explore page when just opened and with expanded filter tabs.

contributor

Daniel Azmanov, u20441135 (@d-azmanov)

10. Company explore

Overview:

Students will make use of this feature to browse the companies that have signed up on the system. They will be able to search for a specific company or filter the companies by certain categories to be determined, e.g. industry. This feature will have its own page on the site where a feed of all the companies will be displayed as well as the search and filter options. A default feed will be displayed after opening the page that will update routinely to display newly registered companies.

Documentation:

Wireframes

Mockups Default View: On Click/Hover: Mobile - Default/On Click:

Revised Mockups after collaboration with UI Engineer

contributor:

Charlotte van Zyl (@arlo216)

11. Students' blog

Overview: Students/companies will be able to view the blog as well as comment on the blog posts they wish. The editor (user with special permissions) will be able to see an "editor" button near the nav bar, which upon clicking/tapping on they will be taken to the "student blog editor" page where they can post, edit posts, delete posts and delete comments.

Documentation:

**Wireframes** 

Web: Mobile:

**Mockups** 

Web:

Mobile:

contributor Mumtaz Malik (@MumtazMalik01)

12. Stories (reels page)

Overview:

This feature will allow the user to upload a short video clip or image and add tags. Their upload will be presented on the reels explore page. A user will have the option to remove their own posts and report any inappropriate content of other users.

Documentation:

**Mockups**

Desktop:

Mobile:

contributors D. Whiteford M.Gotte

13. Notifications

Overview:

Notifications will be used in different aspects such as sign up and email validation through the use of emails. A notifications tab where students can view posts by other student profiles.(in-app) A CV request notification for when a company requests to view the profile of the student. An upload notification to confirm the success of an upload by a user for example a document, photo or post.

Documentation:

**Wireframes: ** Mockups: This was an initial Mockup using Angular Material without the UI Kit. Using UI Kit 2.0 and Mobile version respectively

Mockups for Student Requests/Student Responses.

Angular Prototypes for Student Requests/Student Responses. https://drive.google.com/file/d/1KtrI5ftT-KaKfreZopozrsAnbGZpXcWO/view?usp=sharing https://drive.google.com/file/d/1z4M1cHqhnQD3rlfvF1jZx4-Rta1q4uBG/view?usp=sharing

Contributor: Aryan Ramnand (@Aramnand)

14. Admin console

Overview: Admin Console used to manage user content and user permissions and roles.

Documentation:

**Wireframes**

**Mockups**

contributor Tariq Carrim

15. Storage

Overview: The Storage page displays the files that has been uploaded by the student or that needs to be uploaded, this page allows the student to upload, download and delete files.

Documentation:

**Wireframes**

This is the page the user will see on the user's first attempt to upload a file, it shows the list of files that needs to be uploaded

Mobile view

Clicking on any of the list of options in the picture above will lead the user to this view, the user either choose the file they want to upload or choose to cancel the whole process

Mobile view

Clicking on the choose file button will allow the user to select the file, if the file selected is within the constraint we have put in place, it will either lead to :

1 - this page that shows the status as being safe to upload and also still give the user an option to choose a file just in case the user has a doubt of the file selected, also an upload button to confirm the whole process and a cancel button to stop the whole process

Mobile view

or

2 - this page that shows the status as being an invalid file with reasons being the file isn't a pdf, txt or zip file and also still give the user an option to choose another file, also a greyed out upload button and a cancel button to stop the whole process

Mobile view

Clicking on the upload button will show the file is being uploaded as shown below

Mobile view

Once the file is done uploading, a status message will be given to show that the file has been successfully uploaded as shown below

Mobile view

The user will be redirected to this page upon completion of the whole process as shown below

On the mobile version though, there won't be the delete button, upload button, download button and file extension, it will just contain a list of files

upon clicking on file of choice, it will link to this page below

The above page contains the name of file, file extension, the various icons (delete, upload and download buttons)

Here is the link to the Wireframes

Kindly zoom out to see all frames, both mobile and Desktop view are in the same page because of the limited access to certain features on the free subscription

**Mockups**

Here are the Mockups

Mobile View

Mobile view

Mobile view

Mobile view

Mobile view

Mobile view

Mobile view

Mobile view of link from clicking on any of the files in the picture above

Here is the link to the Mockups

Kindly zoom out to see all starting frames of the prototypes, both mobile and Desktop view are in the same page because of the limited access to certain features on the free subscription

contributor GO (Olumayowa) Shoderu

16. Hosting

Overview:

The status page displays what is being hosted, version number, health check and version Api. Also shows what services are active in a specific environment.

Documentation:

**Wireframes**

Mockups

Mobile View

contributor Musa Besmond Mabasa

17. Authorization

Overview:

Attempts to access unauthorized pages will be met with either a 403 page or error pop-ups.

Desktop

Pop-ups

Mobile

contributor hamza-torres