Silicon Valley Education Foundation Website

This pro bono project was a real team effort involving volunteers from Taproot Foundation, of which ’Berta was a one, and the Silicon Valley Education Foundation (SVEF) staff.

Previously, another Taproot volunteer team had designed a website for ALearn, a nonprofit that helped underserved youth learn about and pursue educational opportunities and careers in STEM. ALearn then merged with another local nonprofit, Silicon Valley Education Foundation, to form one entity with a combined mission to serve the underserved student community. A second volunteer Taproot team was tasked with redesigning a new website with the branding of SVEF and the content of both previous websites—no easy task as the organizations had organized their information differently and had extensive resources and information that needed to be presented in a cohesive and easy-to-navigate way.

website shown on laptop and phone

Home Screen on Laptop and Phone

Full-length Home Screen

’Berta’s Role

After initial in-person meetings, ’Berta worked remotely with the team, which included a project manager, web developer and client staff over the course of about six months. In her role as visual interface designer on the project, ’Berta with closely with the team to:

  • Interview the client about their wants and needs, and to prioritize their wishlist for the new site.
  • Research and identity a suitable WordPress template (Create) to use as a starting point for the new site.
  • Create several rounds of wireframes with sample text to get buy-in from the key SVEF team stakeholders.
  • Work closely with the developer to provide assets and to communicate CSS styles.
  • Once custom coding was complete, worked with all hands on deck to generate pages and troubleshoot functionality issues as they came up. Thought the team chose a template, there was still the need to customize functionality and add new plugins in the mix, creating some issues that needed to be ironed out with further customizations.
  • Went in after the client created pages and worked to streamline the page builds and standardize styles.
  • Worked with the team to interpret 49ers brand guidelines for a specially branded sponsor page.
  • Created icons and other infographics, as needed.

Previous SVEF Website Screens

Below are a few sample screens from the previous SVEF website that was a combination of the ALearn site and SVEF’s previous site, post merger.

The SVEF team did a lot of heavy listing to reduce the complexity of the menu structure, and to streamline and consolidate the text and information.

website screenshots

Previous Website Screenshots—Post Merger

Previous Main Navigation—Before Streamlining

Wireframes and Process

After extensive conversations with the client, ’Berta created wireframes based on the Create WordPress template as a jumping off point for structure and functionality, though the team did end up adding several plugins to and creating custom code to enhance functionality and add desired features such as the Leadership page grid and the sub nav sticky menus.

 

website wireframes

Wireframes

website screenshots

New Website Screenshots

menu navigation

Improved Streamlined Navigation

Results

The resulting site is much easier to navigate and cleaner in design and presentation—presenting a unified SVEF brand and clearly communicating the organization’s mission and activities. The site JUST launched less than a week ago, but already the team is getting positive feedback from users. Stay tuned for further results as they come in.