LenevJ
commented
2 days ago ARW Design Implementation Review
| Start Date | Tuesday, 19 November 2024 |
| End Date | Thursday, 21 November 2024 |
| Reviewer | Lené van Jaarsveld |
| ARW Dev Site | Link |
| Design Review of ARW Dev Site | |
| Test Description | Complete design review of the ARW Dev site to ensure that visual style application is consistent and users will have a great user experience. Included in this document is wireframe examples for each screen (designed so far) that include font sizes, spacing and overall allignment of items. |
| Item | Screenshot | Comments |
|---|---|---|
| ARW Home Screen | ||
| Navbar | Spacing on navbar needs to be adjusted. Logo and navigational "buttons" such as the Profile, Search and Help each need more padding. | |
| Navbar Wireframe example (not logged in) | Grey shapes represent the spacing between items. Spacing between nav buttons should be 30px. In general space on left and right sides of the navbar (in organge) should NEVER be less than 68px. Icons should each be no bigger than 24px x 24px. Certain icons might not be equal in height and width, but measurements may not exceed 24px. | |
| Navbar (logged in) | Navbar items will adjust layout slightly to accomodate new icon (Notifications), spacing should adjust accordingly. Left and right sides of navbar (in organge) should remain the same (no <68px). | |
| Landing Page | --------------------- | ------------------ |
| Dev site implementation | Current image is much smaller than a typical screen. The height of image needs to be increased to be at least 730px. | |
| Landing page wireframe | Landing page image needs to adjust spacing when viewing website on a smaller screen. Where space between items was 80px (desktop) the spacing needs to adjust to a minimum of 30px on small device screen. The image height should remain constant (as shown in wireframe example) | |
| Small Laptop screen view of Landing Page | <------> | |
| Landing Page Buttons | --------------------- | ------------------ |
| Buttons | Font sizes is currently 18px (Bold), but should be 16px (Bold). Gap between each button should be 30px | |
| Button sizing and spacing. | <------> | |
| Footer Element | --------------------- | ------------------ |
| Dev site implementation | All List items should be left aligned underneath heading. Spacing on left and right side should be the same as in the navbar (no <68px) | |
| Footer Wireframe example | <------> | |
| Profile: Basic Information | --------------------- | ------------------ |
| Dev site implementation | Overall layout looks great, in certain areas, such as the Input fields, the spacing isn't uniform. Gap should be 30px. Between the users information and the Purpose section the gap should be 50px in height. Please refer to the wireframe example for the correct font sizes, button sizes and styling. | |
| Wireframe with Button sizing and details | <------> | |
| Profile: Organisation Information (manager screen) | --------------------- | ------------------ |
| Dev site implementation | Organisation Tabs are not in design yet. Overall layout requires a lot more design work (implementation). Spacing on the right side appears to be very small, causing design to appear as if it is to large to fit comfortably on the screen. Space on the right side of the screen should not be less than 68px. | |
| Wireframe with sizing and spacing details | <------> | |
| Profile: Request Organisation Form | --------------------- | ------------------ |
| Dev site implementation | Spacing beteen input fields appear to be smaller than they should be. Spacing between paragraph and input field should be 50px. Spacing between input fields (horizontally and vertically) should be 30px. Request form should pop up in the middle of the screen. Side panel buttons should still be clickable (if user wants to cancel their action) and shoulf not be darkened out as it currently is. | |
| Form Wireframes with sizing and spacing details | <------> | |
| Profile: Analysis Results | --------------------- | ------------------ |
| Dev site implementation | Buttons on the right side appear to be dropping of the screen. Padding should be applied to ensure the appropriate amount of space (no < 68px). Search bar is currently extremely stretched and spacing between all buttons are different. Buttons on left side panel are indicating that both Analysis Results and Support are selected even though only Analysis Results were. | |
| Analysis Results Wireframe sizing and spacing details | <------> | |
| Profile: Uploaded Resources | --------------------- | ------------------ |
| Dev site implementation | Spacing on right side of screen is not big enough. Design seems to be falling of the screen. Spacing should at minimum be 68px. Search bar is also stretched out and spacing between Filter button and Search bar is much larger than 30px. | |
| Uploaded Resources Wireframe sizing and spacing details | <------> | |
| Profile: Support | --------------------- | ------------------ |
| Dev site implementation | Spacing on right side of screen is not big enough. Filter and Create Ticket buttons should have a rounding of 2. Spacing between search bar and filter button seem slightly smaller than 30px. Currently when Support is clicked (on left side panel) the button does not turn light green as it should. | |
| Support Wireframe sizing and spacing details | <------> | |
| Profile: Support (Create New Ticket) | -------------------- | ------------------ |
| Dev site implementation | The submit buttons is very stretched out and spacing between the Submit and Cancel button is too small. The standard spacing between buttons should always be 30px. | |
| Create Ticket Wireframe sizing and spacing details | <------> | |
| Profile: Notifications | --------------------- | ------------------ |
| Dev site implementation | Current design has the tabs "floating" above the line. The tabs should rest on the line. The setting button has a light green box when button is selected, this is not a design feature. Only the icon should fill green when it is selected. | |
| Notifications Wireframe sizing and spacing details | <------> |
@LenevJ please review the design on the pages that have been made.