MY ROLE

Product Designer and Webflow developer

duration

May 2020 - Nov 2020

Design TEAM

Grace Linh (Product Designer) and Jaclyn Fierro (Director of Development at EECS)

TOOLS

Figma, Sketch, Webflow, Weglot

Enhance website's user experience

Erie Elementary Charter School

Erie Elementary Charter School (EECS), based in Chicago, aims to foster a community where students and adults learn self-management, social awareness, and responsible decision-making. 

The school was funded by the Erie Neighborhood Housing, a comprehensive social service agency. Their mission is to empower their community, the "Latinx immigrants alongside individuals and families of all backgrounds—through education, access to critical services and advocacy, working together to create a just and inclusive society." We redesigned and restructured Erie Elementary's' entire website to increase accessibility with an aesthetic and minimalist design.

THE PROBLEM

In order for Erie Elementary Charter School to achieve their mission of "fostering the Habits of Heart, Mind, and Work," they needed to be able to reach their students and their families - which meant having a more accessible and user-friendly website for both English and Spanish speakers. Erie Elementary also receives public funding but relies heavily on private donations to ensure its students' high-quality teachers and extracurricular activities, which also meant that they needed a website that would also be accessible to their donors.

VIEW LIVE

RESEARCH

HEURISTIC ANALYSIS

For this project, Grace, my design partner, had brought me onboard during the initial design stage. The project was behind with an initial launch set for the upcoming fall semester in 2020 and they needed another designer to bring the project up to speed. Before diving into the designs I looked over the previous website designs, existing annotations, and conducted a quick heuristic analysis to understand what changes needed to be made to optimize the experience for the faculty, students, and their families.

Erie Elementary Charter School (EECS) wanted to give their website a refresh that would showcase their mission to empower, educate, and elevate students to confidently enter a path of higher education and was accessible to non-native English speakers/readers. So I combed through each page looking at the visual hierarchy, aesthetics/design, responsiveness, cognitive/visual overload, readability, and accessibility.

Heuristic analysis

WIREFRAMES TO DEVELOPMENT

We went through several iterations of concepts for responsive designs before implementing the designs onto the Webflow platform. As a team of two designers and no developers we quickly discovered the constraints of our designs and had to make quick iterations to the designs as we developed. For example, as you can see on desktop v1, we initially designed an overlay of text and imagery. Unfortunately, while developing onto Webflow we discovered that the design did not translate well and had caused responsive issues as the device changed from desktop to mobile. Although this process had set us back we gained valuable knowledge on the limitations to our designs and worked with what was available to us at the time.

Simplified the pillars text and images layout for responsiveness that also reflect the students of EECS

Secondary menu (v1) and tabs menu (v2) designs did not respond well when developing onto Webflow

ACCESSIBILITY

Since Erie Elementary serves a large Latinx community with about 50% of the students speaking Spanish as their first language, accessibility was one of the top priorities. EECS' previous website had one or two paragraphs translated into Spanish but a majority of the text were all in English. To better serve the students and their families we looked for solutions that would allow the EECS community access to all pages not only in English but also in Spanish. In the end, we decided to use a translation integration tool, Weglot, to seamlessly translate all the website pages from English to Spanish without interrupting the design or experience.

"We went from having no real translated information to being able to serve our families needs in this way." - Jaclyn Fierro, Director of Development
Weglot tool allowed for seamless translation from English to Spanish

TRADE-OFFS

Along with the design changes, we had to trade-off some other features/integrations such as the Google calendar announcement integration for Facebook Newsfeed. Although it did leave an large empty space on the right side, it was the best solution for our client. Since the client regularly updates their Facebook account, the integration was not only easier for the client to manage but it allows for realtime announcements and events.

We also switched the team layouts to an Airtable integration which allowed the client to easily make changes/additions without assistance or manipulate the design.

Google Calendar tradeoff for Facebook Newsfeed

Airtable integration for team management

Design Changes Overview

Throughout the design process we kept our goals for this project in mind:

  • Accessible to non-Native English speakers
  • A clear visual hierarchy with visual and cognitive balance
  • Inspiring and reflective of the EECS community
  • Drive online donations

Homepage

Donation Page

RESULTS

Since launch in September 2020, Erie Elementary Charter School's new website was able to:

  • Provide immediate and relevant information to their community which includes contact information of faculty and staff, COVID updates, and other announcements
  • Enrollment process was clearer, concise, and easier to access online
  • Allowed families to easily sign up for events such as their first virtual Open House
  • Family members can easily access the community-wide calendar and add it to their own schedule
  • Volunteer application process was streamlined
  • Documents such as sign up sheets, parent handbooks, etc., that helped the Parent Committee support the EECS families, were accessible online
  • Reach to families who primarily speak and read in Spanish
  • Gained 144 new followers on LinkedIn
  • Credit card donation transaction increased from 5% to 34%

Credit card donations made between September 2019 - March 2020 with donations made September 2020 - March 2021 increased from 5% to 34%.