The El Paso Collaborative for Academic Excellence is an education reform group that has worked for 20 years in transforming schools to ensure academic success for students in the El Paso area. With that said, the organization carried a multitude of material and information that awaited to be shown in the appropriate light. This citywide collaboration had unknowingly provided us with more than just the simple task of redesigning their website. It gave us an enriching experience that further refined our abilities in content organization and web usability.
The Old Site
The Collaborative’s prior website resembled an extremely long laundry list needing to be organized for a clear delivery of its main objectives. The deeper we dug into the previous website’s content, the larger the pile of ideas and solutions had to grow. Our mission was clear: To surface their admirable purpose, crucial presence, and great achievements to the community in ways that all users could easily understand.
Old EPACE website
Sitemap and Content Organization
During our first attempt at understanding the inner workings of EPCAE, we quickly ran into the obstacle of a very content-heavy website. The same concepts kept being interpreted differently as we went through ambiguous text and overlapping information. We had to be certain that we understood every detail. No exceptions.
Our dedicated comprehension would allow us to teach visitors about the organization’s complex components in the simplest form. We did this through conversations with the Collaborative and by breaking down the entire content piece by piece. As a result, we were able to trace back each piece to at least one of four main initiatives of the organization (they originally had six). The four initiatives would become the main themes for visitors to easily understand the larger purpose of the organization. While some content could not be strictly categorized into a particular initiative (such as their funded programs), we preserved continuity by indicating that content’s ties to its respective initiative(s).
EPCAE Sitemap
Once both parties fully understood the direction, it was time to omit all unnecessary or redundant content and only keep the most relevant material. We eliminated the user’s previous need of having to dig through filler information to finally find the buried valuable content. Clarity and simplicity was key.
Wireframe
To display the importance of the four initiatives, we decided to showcase them on the homepage with a rotating picture banner and tabs to separate the individual initiatives. This would engage the users and introduce them to the four main themes of the website.
Homepage Wireframe
The same type of organization with tabs from the homepage was transferred to each individual initiative page. Three categorized tabs were created to break down each initiative’s components. These tabs carried the labels of “In Action”, “Tools”, and “Outcomes”. The “In Action” tab refers to the initiative’s active ideas, agendas, or curriculums taking place. It represents the tangible portion of the initiative. The “Tools” tab corresponds to the detailed parts of the initiative that support the “In Action” items. The self explanatory “Outcomes” tab contains the results of the initiative. This effective structure was created to facilitate usability and understanding.
Initiative Wireframe
A separate section for the organization’s Funded Programs was created as each individual program could not be categorized into one particular initiative. Each program was given a designated page with links to its supported initiative(s). For an easy skim, we added a side section on each page to capture a quick overview of each Program.
EPCAE’s student achievement data had been an important, but hidden part of the previous website. The data was hidden behind links and large blocks of text. This time around, we decided to give it the attention it deserves by spotlighting the data with large images and clearly divided sections.
Design Direction and Colors
Education and academics became our go-to inspirations for our design. We went with a clean, scholastic look that could bring balance and organization to the new website. We additionaly created a design that could carry various academic images to increase user appeal.
Our color choices reflected a youthful and scholastic setting to go with our design. We also incorporated designated colors for the four initiatives themed throughout the website to facilitate usability.
The new EPCAE website
The End Result
We were able to transform an overwhelming website to one that is easily digestible and easy on the eyes. We are pleased to see our client’s great successes in a different light and are excited to share with you our latest web design.
Check it out online: http://www.epcae.org
