The Project Solution is a non-profit organization with a focus on funding small scale infrastructure projects in rural communities throughout the world.

The Project Solution’s website had not been updated in years and the team was looking for a complete overhaul of the site’s architecture and design. A special focus was desired on the projects they helped launch as well as a fresh, modern design that emphasized the positive energy and passion of the group.

  • Launched

    May 2018

  • Industry

    Non-Profit

tps Desktop
tps tablet
Tablet

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.

tps old design 1

Old Homepage Design (left). Old Sample Project Page (right).

tps old design 2

Close Up of old (sidebar) Navigation Menu.

User Experience

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.

tps layout 2

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.

tps layout 1

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:

  1. An introduction/mission statement
  2. What We Do
  3. How We Do It
  4. Our Impact
  5. How to Get Involved
tps layout 3

Homepage Wireframe.

Design Strategy

We began the process of our design strategy with some key ideas provided by The Project Solution team:

  1. Their organization reflects bright colors and positivity.
  2. The projects take place at beautiful locations.
  3. 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.

tps typography

Playing with different typefaces and combinations. Top Heading/Paragraph Fonts: Nunito/Nunito Sans. Bottom Heading/Paragraph Fonts: Lora/Open Sans.

tps colors and buttons

Round 1 color palette (left top) and final color palette (left bottom). Button style combinations (right).

tps design layout 1
tps design layout 2
tps design layout 3

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.

tps highlight wireframe

Wireframe close up of the "Project Updates" section.

tps highlight design

Final design of the "Project Updates" section.

Final Design

The final design incorporates bright, positive colors, layouts arranged in storytelling formats throughout the website and large visuals to promote international community.

tps design final

Final layout samples from homepage.

tps design final 2

Final layout samples from project pages.

Conclusion

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.