Project Goals & Objectives
The four person team who make up the board of the organization were looking to have their outdated website better reflect their mission and aesthetics. Showcasing their projects and an opportunity to grow their donor base was to be the main objective of the new site.
Old Homepage Design (left). Old Sample Project Page (right).
Close Up of old (sidebar) Navigation Menu.
We started with an extensive look at their current site’s structure and created a new blueprint that removed unnecessary pages, combined repeated content and streamlined user flow.
Bird's eye view of the rearranged site in the form of a site map.
The project archive became an essential focal point of the redesigned site and we included a robust filtering system to better sort through them. “In Progress” projects are now highlighted at the top of the “Projects” page and users can sort through completed projects by year, location and project type.
Each individual project now includes highlighted images, important statistics, a description of the problem & solution, contributing donors and a progress timeline that displays each stage of the project as it unfolds.
Projects Archive Page (left). Projects Single Page (right).
A homepage is a critical first impression to any user. We took special care to communicate all the important aspects of The Project Solution’s story as the user scrolls down the page. When you visit the homepage, you can see that the blueprint consists of the following concepts:
- An introduction/mission statement
- What We Do
- How We Do It
- Our Impact
- How to Get Involved
We began the process of our design strategy with some key ideas provided by The Project Solution team:
- Their organization reflects bright colors and positivity.
- The projects take place at beautiful locations.
- Community and working together play a huge role with local residents.
A moodboard was created consisting of a collection of photos, colors and designs from across the web to get a sense of the tone and direction for The Project Solution’s new design. We then further refined our ideas by settling on a few key color choices, typography/button play and high-level layout concepts.
Playing with different typefaces and combinations. Top Heading/Paragraph Fonts: Nunito/Nunito Sans. Bottom Heading/Paragraph Fonts: Lora/Open Sans.
Round 1 color palette (left top) and final color palette (left bottom). Button style combinations (right).
Sample design layouts in early stages.
Single Project Enhancements
Sometimes, initial ideas presented in wireframes are meant to be simple but blossom into something much more interesting in the design phase.
This happens to be the case for the “updates” section on each project page.
When a new project is added to the site, it is usually still in development. The board wanted to give its users the ability to view progress as it grows toward completion. The request was straightforward—an image and a caption for each update.
As the design came together, however, we determined a visual timeline of progress may be more engaging than a simple grid of images. This new layout displays important moments and builds the story behind each project.
Wireframe close up of the "Project Updates" section.
Final design of the "Project Updates" section.
The final design incorporates bright, positive colors, layouts arranged in storytelling formats throughout the website and large visuals to promote international community.
Final layout samples from homepage.
Final layout samples from project pages.
The new site was created to have a streamlined navigational structure in order to direct users into the most relevant content which fit the needs of the organization. Large scale images were added to provide visitors to the site a strong visualization of the work being accomplished by the nonprofit. A new filter system was developed to give visitors the ability to search the history of projects. The projects themselves incorporate a timeline visualization as a storytelling tool showing the development journey from a concept to a finished infrastructure project in a community.