Website Restructure
New sitemap, page templates, and content to better illustrate projects and serve non-profit site users.
Client
PANGEA Established in 2011, Pangea Educational Development (Pangea) is a 501(c)(3) non-profit organization working to close the gap on childhood literacy development in communities across Uganda through sustainable, evidence-driven learning programs.
Role
Information architect, content, copy
Challenge
The project began as a small request to create a new 'program template' and populate it with content showcasing Pangea's key initiatives. As we worked together to define the organization's content goals and complete a project brief, I learned that in addition to showcasing the non-profit's work, they wanted to encourage site visitors to consider purchasing storybooks from their online shop. As a result, we broadened the project scope to accommodate.
Project tasks
Organize site structure to reflect Pangea's priories
Migrate the site to the latest version of Squarespace to access a greater variety of template designs
Fill in style gaps as there was no existing branding guide
Develop content for new 'Work' section and template for the project sub-pages
Solution
A few sitemap adjustments
Before reworking the structure to focus on the non-profit's priories, I broke down the current sitemap structure to get a complete picture of the site. I noticed a few things were off, like the 'Donate' position in the top-level navigation, lack of footer, and the 'Pangea publishing' link (one of three active projects) in the primary nav.
Original sitemap - pangeaeducation.org
Revised site structure
Next, I sorted the topics into groups and arranged the hierarchy based on priority. I added a footer nav and simplified the top-level navigation to About, Work, Shop, and Donate to focus on Pangea's calls to action: donate and shop.
Revised sitemap - pangeaeducation.org
Move logos from 'Partners' page into the 'About' content where they'll be more visible and eliminate the existing 'Partners' page
Rearrange 'Join us' sub-pages by grouping the volunteer and internship info onto one page and adding a new page to apply to become a partner
Add 'Research' page for users to explore the non-profit's research initiatives and for other organizations to consider collaboration
4. Add three new pages summarizing Pangea's main projects and move the 'Pangea publishing' project under the 'Work' section for consistency
5. Move 'Shop' out from under the 'Pangea publishing' page and into the top-level navigation to draw site visitors attention and eliminate an extra step in encouraging sales
6. Move Blog to the footer as since it's not a big part of the content strategy and add new pages for 'Contact us,' 'Events,' and 'Forms'
Template and style updates
To access the full assortment of templates and styles, we migrated the site to the latest 7.1 version. The organization specifically wanted to use full-width images in the content blocks, but the earlier version of Squarespace had limited template options for full-bleed photos.
After the migration, I selected fonts and colors to complete the site styles. Without any branding or style guides to work off, I used the existing fonts and colors as a starting point and pitched a few updates.
I pitched a new serif style for the body copy to link to the organization's goal to improve literacy. To signify education and growth, I proposed a more natural shade of green to replace their current turquoise-green. In the end, we aligned on a refined color pallet using the existing turquoise-green and updating the headline font from Oswald medium 500 to regular 400.
Color pallet with more natural shade of green to evoke growth.
Final color pallet for site, featuring existing turquoise-green.
Content strategy
Starting with the new 'Work' hub that would house the three project pages, I mapped out the main questions that the page content should answer for users.
What projects is the organization currently working on?
Why does their work matter?
What kind of impact is it having?
The slideshow below shows the order, purpose, and CTA's for each block of content planned in the second draft of the 'Work' page. Each section of content helps to answer one of the user questions above.
1. Intro block
Page title and summary paragraph of the organization’s work.
2. Mission block with map
Map visualizes the 48 languages spoken across the country of Uganda to help answer the question - why literacy? CTA links to the ‘Mission’ page in the ‘About’ section.
3. Overview of active projects
Serves as menu for project landing pages and gives the user an at-a-glance overview of active projects.
Optional CTA for ‘View past projects.’ Consider adding a ‘past projects’ page to document completed work and add credibility.
4. Impact block
Overview of the scope of work over the years. CTA to ‘learn more about ways you can help’ is a low pressure way to lead users to the ‘join us’ page in the ‘About’ section. Alternatively, this CTA could be more aggressive with a direct donation message.
5. Project feature block 1
Summary of each active project with ‘Learn more’ links to the corresponding project landing page.
5. Project feature block 2
Summary of each active project with ‘Learn more’ links to the corresponding project landing page.
5. Project feature block 3
Summary of each active project with ‘Learn more’ links to the corresponding project landing page.
6. Team member quote
Adds context for who this organization is with an image and quote from a team member.
7. Meet the team
CTA links to the ‘Team’ page in the ‘About’ section.
Developing fresh content
In creating new content, I took my knowledge from existing site content and conversations about the organization to populate the pages with copy and images. As I drafted the layout and copy, I edited it down to ensure each block of content serves a unique purpose and added to the page as a whole.
See the progression of the re-designed ‘Work’ page below.
Draft 1
‘Work’ page content outline, version 1
Draft 2
‘Work’ page content outline, version 2
Final version
Final published ‘Work’ page
Outcome
The results were a new sitemap structure focused on Pangea's goals, new styles, and an updated 7.1 Squarespace template featuring full-width images. I also created content for the new 'Work' section and a 'program template' for the 'Pangea Publishing' project page.
New project page for the organization’s Pangea Publishing program.
Final version of the ‘Work’ page.