# GRM website new design [feedback & suggestions]

<p>The GRM site is well designed but missed to inform the end-user what GRM is, where it was established and fields, highlighting GRM services and roles, focussing on GRM mission considering site visitors who don't know the GRM mechanism, and turning them into donors.

UI should be aligned with our organization's **brand guidelines** and try to reach the state of harmony between its internal parts and apply the **unity principle of design** `colores`, `buttons,` `font type`, `icons`, `scale of elements`, `emphasis on the GRM impact` and focus on the `content` which helps to improve the user's experience</p>

**Here are some of the sections and suggested design:**

### NAVIGATION BAR
* Change the font type, font size, color
* Make the dropdown menu clear to grab the attention of the end-user and easy to direct him.
* Hoverable Dropdown to notify the user you stand here.

> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/about

<br>

> 
> Better solution: https://www.unops.org/

<br>

### HEADER SLIDER
* Fix the bug in the slider when clicking on arrows/Pagination.
* Change the font size, color, and the location of the text.
* Add CTA button <strong style="color: #e85d3e">(JOIN US, DONATE, MAKE YOUR IMPACT, GIVE A GIFT</strong>)
* Add `contact us` button and `social media` links with differentiating the actions buttons to improve UX not being frustrating

> 
>Better solution: https://www.unops.org/>

<br>

> 
> Better solution: https://www.oxfam.org/en

<br>

### GRM definition section
As mentioned above, the GRM section needs to highlight GRM services and roles, focussing on GRM mission considering site visitors who don't know the GRM mechanism and turning them into donors, and we can add the role of the UN.

> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/about

<br>

### HOW DOES IT WORK?
Redesign section with icons, images, content packaging, and replace lists with the **CARDS** component. To make it more readable.

Add <strong style="color: #e85d3e">READ MORE/DISCOVER MORE </strong> button if we have many information and details.

> Visuals are essential to creating content that will help your business stand out and draw in an audience. Not only does imagery help make text-centric content more readable, digestible, and memorable, but it can be used to craft compelling messages that speak volumes without using a single word

> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/about

<br>

> 
> Better solution: https://www.unops.org/

<br>

### NUMBERS "Material imports from October 2014 to today"
* Make it more visible and colorful
* Reduce counting time

> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/about

<br>

> 
> Better solution -1: https://www.unops.org/
>
<br>

> 
> Better solution -2: https://www.globalgiving.org/aboutus/

<br>

### SUCCESS STOREIES

We have success stories in two places (**section on home page** & the **separated page** we can reach from menu bar). The design and content are the same in both.
I see the success story page should be provided the whole story with all photos and focus on the impact of GRM roles.

1. **SUCCESS STOREIES PAGE:**
> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/lists/SuccessStories

<br>

>
> Here is a good example for UNOPS INTERFACE.
> https://www.unops.org/news-and-stories/stories/finding-light-amid-yemens-darkest-times

<br>

2. **SUCCESS STORIES SECTION:**
Moreover, we can redesign the success stories section and make it more interactive and look nice.
Here is Material UI component with motions, so that we can customize it according to our content.


<br>

### THE ROLE OF THE UNITED NATIONS
This section's design looks like notepad, it missed the contrast and the emphasize concept to focus on the role of the UN and so we can use a variety of techniques to bring attention to this area by adding UN Logo, some photos, and CSS.

> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/about

<br>
<br>

> 
> Better solution : https://palestine.un.org/en

<br>

### HOW TO USE PAGE
Replace lists with photos, icons, colorful boxes, and dividers to make them readable.
> 
> Current GRM design: https://grmreporttest.azurewebsites.net/#/how-to-use

<br>
<br>

> 
> Better solution : https://www.fao.org/statistics/en/

<br>

### Additional sections:
* TEAMS MEMBER
* PARTNERS LOGO
* GOOGLE MAP which locates the projects
* News/ Twitter section.