Usability/Interaction Design/Visual Design/Information Architecture

[tangospring]

IA

Delete Contact Us page, put in the header: phone [spelled out -- is it needed though?], and email [mailto: link]. In the footer: add address [linked to the map, distinct pin on the map?, use standard set of social icons icons for Facebook, LinkedIn, Twitter -- see CCF website for example].

Header content:

CCF Logo with map icon overlay (Google pin might work). Byline: "Map of projects funded by Community Capital Fund" One (flat) button on top of project list: Add Project. Add Project is toggle button, it opens/closes side panel with form from next to the project titles panel.

Usability

Entire map should fit on the screen without scrolling. Put Google map in smaller resizable box. Font size is too small in project description on Google map (especially for mobile devices). If no projects exist under specific category, display: "No projects in ... category. Add Project.[link]". Preserve project category in the form, which opens to add new project.

Interaction Design

Currently, user has to click "Find Me" to view projects, when page loads. On load, project categories should be populated (View All category should be active).

Google map: Close open project description when user click anywhere outside open project description (in current implementation, but see lightbox and side panel recommendations). Hide pins for unselected project categories. Alternatively, since project descriptions are long, display project description in a large lightbox overlay popup, and add "View on map" link to description. Better yet, treat project titles as toggle tabs: the tabs would open side panel to the right of the titles panel with project description [with "Close" button displayed in the description panel].

Project list (will have up to 50-200 entries): Order alphabetically. Add typing filter on top of the list.

Visual Design

Normalize luminosity of category backgrounds Preserve color of project category in the project title list (reduce luminosity, preserve the hue and saturation). Font size: use the same (smaller) font size for project title as for project categories. Use bold font weight for project categories. Google Map: Pin color should be the same as category color. Use smaller 'close' icon [X] to match the font of the description. Use white background for descriptions instead of grey. (in current implementation, see lightbox popup for alternative).

Mobile layout

Project categories: instead of buttons put in dropdown list, underneath Google map.

[tangospring]

In this implementation, pins on Google map will open popup with project title and category only.