UI Kit
For this year, the COS 301 department has decided to start a new method of mini project assessment by giving the students a great opportunity to create something they can themselves one day use. The Graduates Portal is a website that allows CS and IT graduates of the University of Pretoria to find, link with and communicate to prospective companies looking for qualified students and for the graduates themselves to find jobs. The project itself is a multiyear project and each final year group of subsequent students will build on that which was done by the previous year’s students. The project is made up of multiple teams each tackling a separate feature simultaneously and each team is made up of the same nine roles. These roles communicate across feature groups so that there is cohesion and minimal confusion to execute a smooth project.
The project itself is 8 weeks in duration split into two phases or “sprints/splints” to allow students the opportunity to change roles and have a different experience. By the end of the first 4 weeks, we will demo to the project owners what we have completed.
Phase/sprint 1:
- Project Manager – Dhashin Reddy
- Business Analyst – Maryam Mohamad Al Mahdi
- Designer – Matthew Marsden
- UI Engineer – Matthew Marsden
- API Engineer – Unaizah Mahomed
- Data Engineer – Markus van Tubbergh
- Back-end/service Engineer – Emmanuel Khoza
- Testing – Jade Peche
- Dev Ops – Keelan Cross
The feature that the SQL group is in charge of is the UI Kit for the new UP graduate’s portal. The creation of a UI kit means developing a library of general UI elements that the teams across the Graduate Portal project, that are managing any type of front-end development, can access to add onto their client-side web pages. The goal of this feature is to ensure that each team can free up their creativity to focus on their perspective unique features rather than general components, as well as to ensure a consistent design logout throughout the Graduate Portal.
The other feature teams can apply the components in the UI Kit as they see fit and can even change what they deem necessary. Our goal for the project is to design, implement and manage the UI Kit for the portal and not every single UI component that every team comes up with.
-
The UI kit will require/contain the following UI components:
-
All components
- Functional requirement(s)
- Scalable between mobile and desktop
- Functional requirement(s)
-
Navigation bar
- Functional requirement(s)
- Display tabs to different webpages
- Indicate a way to show that a mouse is currently hovering a tab
- Functional requirement(s)
-
Header
- Functional requirement(s)
- Display introductory content (e.g. logo)
- Functional requirement(s)
-
Footer
- Functional requirement(s)
- Display any copyright data
- Functional requirement(s)
-
Buttons
- Functional requirement(s)
- Clickable
- Display a possible action name
- Enable users to add the following functionality - deliver an event once clicked on
- Functional requirement(s)
-
Dropdown menu
- Functional requirement(s)
- Clickable
- Display a list of options
- Enable users to add the following functionality - if an item on the list is clicked it should lead to either new webpages or an event.
- Functional requirement(s)
-
Cards
- Functional requirement(s))
- Display a descriptive image related to its purpose
- Provide any necessary text to further describe its purpose
- Clickable
- Indicate a way to show that a mouse is currently hovering over it
- Enable users to add the following functionality - once clicked on an event/action should be delivered.
- Functional requirement(s))
-
Tabs
- Functional requirement(s)
- Clickable
- Enable users to add the following functionality - once a tab is clicked on it will lead to different webpages or actions/events
- Enable users to add the following functionality - Display a descriptive name of a webpage it will lead to once clicked
-
Notifications
- Functional requirement(s)
- Clickable
- Display a number symbolizing the number of unread notifications
- Enable users to add the following functionality - Once clicked on it must lead to a webpage where the unread notifications are situated.
- Functional requirement(s)
-
- The UI kit will be lightweight, considering it will only contain a few general UI elements. The fact that the UI kit is lightweight makes it easier to manage, ensuring that it will perform fast and reliably.
- The UI kit will be easily integrable and accessible. The kit will be a single file of code containing 2-4 grouped components that will be uploaded into the developer's branch once released. Once each team updates their branch after the release of the UI kit, they will have to access the library and be able to use it as needed. Access is achieved by simply including the file.
- The architecture will be made in such a way that the feature will be easily adaptable to changes (updating or creating new components).
- The UI elements will not be implemented within one file rather grouped into separate files ensuring separation of concerns.
- The UI kit will have a few dependencies ensuring low coupling, therefore, having a minimal effect on the runtime.
- The architecture will be simple, ensuring that its implementation focuses on one task at hand and does not ask users questions when implemented.
-
Project manager: Mr Dhashin Reddy (u18169253)
- Tasks completed during sprint 1:
- Ensured that there was good communication between the group members.
- Put together a plan to proceed with our feature considering the project playbook and made sure it was followed.
- Planned and coordinated group meetings.
- Communicated and planned with other project managers and business analysts to put together our initial feature list.
- Ensured that each team member knew what they had to do by when.
- Managed the group and the group tasks.
- Tasks completed during sprint 1:
-
Business Analyst: Ms Maryam Mohamad Al Mahdi (u19009977)
- Tasks completed during sprint 1:
- Produced a list of possible features during the beginning of the project and discussed it with my team.
- Did research and educated me and my team as to the purpose, requirements and constraints of our feature.
- Produced detailed documentation of the purpose, requirements and constraints of our feature (in the wiki under requirements).
- Stepped in once as PM during one of our group meetings on Blackboard Collaborate when our PM struggled to connect.
- Attended all team meetings on Blackboard Collaborate.
- Came up with a solution as to how the UI kit should be managed (requests to update or add features through Google forms).
- Tasks completed during sprint 1:
-
Design and UI: Mr Matthew Marsden (u18080368)
- Tasks completed during sprint 1:
- I have designed a first draft in Adobe XD.
- Created a finalized version of the first draft called final version 1.0
- Reviewed the first draft with the other designs
- Completed the base design called final version 2.0 from designer meeting feedback
- Revised the UI Kit and updated it to Version 3.0 from UI Kit requests.
- I have updated the wiki with each of this revisions and progress.
- Completed UI Kit version 4.0 with mobile components.
- Tasks completed during sprint 1:
-
API: Ms Unaizah Mahomed (u20426799)
- Tasks completed during sprint 1:
- Done research on Storybooks for Angular components.
- Contributed to compiling documentation on the Storybook.
- Attended SQL group meetings
- Researched how to use angular for UI components.
- Began creating the UI components with Angular.
- Tasks completed during sprint 1:
-
Backend-Service: Mr Emmanuel Khoza (u17088799)
- Tasks completed during sprint 1:
- Did research on Storybook and Nx
- Compiling Storybook documentation
- Building UI components through storybook and angular
- Attended meetings and gave feedback where I could
- Tasks completed during sprint 1:
-
Data: Mr Markus van Tubbergh (u20453222)
- Tasks completed during sprint 1:
- Attended all team meetings on Blackboard Collaborate
- Learnt Angular as well as the Material framework in order to contribute to the Storybook
- Pivoted from Data Engineer role to help with UI engineering
- Contributed to the Storybook document - the purpose and mission statement thereof
- Took minutes for the team meetings (as uploaded on Blackboard)
- Was present and contributed in team meetings for Data Engineers on Discord
- Presented an overview on GitHub of what the requirements for the UI Kit are and should be
- Tasks completed during sprint 1:
-
Testing: Ms Jade Peche (u20438151)
- Tasks completed during sprint 1:
- Attended all SQL team meetings on collaborate
- Learnt about Jest for testing Angular Components and Git Actions
- Complied a test plan document for unit tests specific to the UI Kit Feature
- Compiled a test log document for tests specific to the UI Kit feature
- Collaborated with the other testers (on discord) from the other feature groups to formulate an overall testing plan for the project including unit tests, integration tests, end-to-end testing and usability testing
- Tasks completed during sprint 1:
-
Dev-Ops: Mr Keelan Cross (u19151952)
- Tasks completed during sprint 1:
- Read Angular, Nx, Storybook, and other Documentation
- Attended group meetings, discussed my role with the team, as well as our feature and how we would approach it.
- Communicated with other Dev Ops in a meeting, meeting was recorded and minutes were taken.
- Actively partook in several GitHub discussions regarding UI Kit as a feature, the System Requirements specification, the differences between the responsibilities of the CI/CD team and Dev Ops in general, clarified the goals we Dev Ops were required to have met by the end of Sprint 1.
- Communicated with the team regarding shared responsibilities of maintaining and creating the UI kit across roles.
- Assisted other Dev Ops members when the pipeline broke on 2022/03/23 and learned how to use the GitHub Actions set up by the CI/CD team.
- Tasks completed during sprint 1:
This document describes the Feature Test Plan for the UI Kit feature of the graduate portal. The UI kit will provide a variety of UI elements that will be available for all the teams working on the graduate portal, therefore these UI elements will need to be tested using usability tests. We cannot do unit tests, because there is no functionality to the components in the UI Kit – the functionality will be added by the other teams that use the components.
UI Kit Requirements Documentation
- Navigation bar
- Tabs
- Buttons
- Cards
- Dropdown menu
- Footer
- Headers
- Theme
The tester will perform usability tests for every UI component using their knowledge on user interface design and multimedia practices.
- Testing will commence when the UI components have been created
- Testing will continue if/when new UI components are added further along in the development process
- Testing will end when all possible UI components have been tested and have passed the tests
- Each test will be documented and logged in a Test Log Document/Rubric
- Each entry of the log will have the following information:
- Name of component
- Date tested
- Creator of component
- Tester
- Pass/Fail
- Comments
- If a test fails:
- The UI engineer will be sent the following information:
- the name of the component that failed the test
- The reason the test failed
- Possibly a solution to the problem
- Once the UI engineer or another team member has resolved the issue, the component will be tested again.
Tester: Jade Peche
- Responsibilities: Test planning, test documentation, test execution
- Create test plan document
- Create Usability Test Rubric
- Generate tests for each UI component
Software Requirements:
- Visual Studio Code
- Node.js
- Angular CLI
- Test Plan
- Test Case Document/Log
Tester: Jade Peche Date of tests: 10 April 2022
The purpose of this document is to show the results of the usability tests performed on the components of the UI kit created by the UI engineers and designers. The tests will highlight whether the components are effective, efficient and user friendly and don't disable the users in any way. If the components pass the test, the components will be pushed to the repository. If they fail the test, the UI engineers will be informed, and the components will be retested until they pass the test. The next few pages contain the results from the usability tests performed.
Creator: Unaizah Mohamed
Creator: Markus van Tubbergh
Creator: Matthew Marsden
Creator: Emmanuel Khoza
Creator: Emmanuel Khoza
Firstly, all components will be made using angular and uploaded to the graduate’s repo via a feature branch from your forked repo.
Projects must be created in Angular. Libraries must be created using the Nx console and commands, not by Angular CLI. Components must be generated via the Nx console and not by the Angular CLI.
HTML5 must be used where applicable. Meta tags must be included declaring who created the component and what the purpose of it is, as well as a short description of the component so that it is searchable in the library.
All CSS must be done in files with the extension SCSS. Tailwind must be included as a dependent framework for CSS. No Bootstrap styling may be used. Make sure to use a very specific class name as style selector for the elements and not something as general as “.button”, because this can override the styling for many elements which is not necessarily intended.
Must be done in files with the .ts extension. No functionality may be given to components outside of visuals and animations. Components need to be exported as modules for other groups to import and use. If it is something general that will be used on every page, then links can be hardcoded (e.g. links in a navbar), but otherwise functionality must be added in the constructor of the component so that the UI engineer can edit the link or text of the component.
Tailwind.