Brief
Foundation Academy Charter School needed a modern, mobile-responsive website that both reflected the school's brand and philosophy. The requirements were to build a simple and clean interface utilizing breathable negative space. The website's primary goal is to attract quality educational instructors, teachers, and administration. Secondary, because they [a charter school] only receive 70% of the public funding a public school receives, needed to appeal to potential and current philanthropists. On the front-end, the website also should feature information for parents, admissions and legally required literature.
Final three mock-up choices for the Foundation Academies website.
At Design Sprout, we truly believe in the value of a high quality education.
We feel that Foundation Academies embodies a direction we would like to see the modern education system work towards: a scholastic program that fosters discipline, creativity, and an unwavering perseverance to seek higher education.
While there are many obstacles in providing all young Americans with the educational foundation needed to move on to a university, we see success in Foundation Academies. Your mission gives us hope.
Process
We always begin with research. We spent a lot of time to learn about each business's specific field and develop an understanding of where both client and competitor's are succeeding and where they need improvement.
We are interested in how each client’s industry operates, and with our understanding; we provided Foundation Academies with a web presence that reflected their educational values and brand.
Often during this step in the process, we have conversation to generate ideas and continue to learn more about the business. In this case, we were fortunate to work along side Graig Weiss (CEO of Foundation Academies) and Eugene Underwood (Director of Communications), who provided their insight, direction, and copy for the Foundation Academies website.
After researching Foundation Academies and a number of well-established charter schools, we audited their current website and social media platforms. From our audit we developed a keyword strategy for the future sight and a more intuitive sitemap to simplify a user's interaction with the future site. This lead into the next step of wire-framing the website's layout and future functionality.
An example of wireframing for Foundation Academies website.
UI / UX
We started with trying to figure out all the moving parts. We developed the desktop and mobile wire-frame architecture to plan the layout for the site. Our final designs provided the client with a visual aid that now follows the experience a user will have when interacting with the website from their PC and mobile device.
We mapped out exactly what a user will experience when navigating the site. From the home page to the outlaying site, we developed what we believed to be the best route to connect the user to the content. This included drop-down menus, search bars, and header and footer navigation.
We also planned the necessary functionality needed for the site; what it does and does not have to do. Simple, yet functional was the goal.
This included where users will be able to access the Foundation Academies’ news feed, donations, calendars, sponsorship information, email contact forms, information about the school, and links to your social media network.
We provided the client [Foundation Academies] with a comprehensive analysis of our plan for the website’s functionality with both a visual (wire frame outline) and a written explanation on our thoughts behind our decisions.
After approving the wire frame and functionality, we proceed to design the visual elements that would represent Foundation Academies' brand.
Two examples of mobile user interface.
Theme
For the Foundation Academies website we proposed a custom “Foundation Academies” theme to be integrated into WordPress. This theme is tailored to represent a combined vision for the look and experience of the site. The theme integrates an identity system that we crafted to breathe life into the Foundation Academies brand. We wanted our users to clearly recognize the design choices and the voice of the institution.
Development
We will built the website using WordPress. We implemented custom HTML5, CSS, and Javascript, and applied it to the “Foundation Academies” theme. We will also utilized the versatility of Beaver Builder to give staff, employees, and future members the ability to quickly and easily log in and make changes. We then implemented any desired functionality previously decided upon. This included automated systems utilizing the connectivity of Zapier to connect MailChimp (the email platform) to Twilio (a voice and text API) to seamlessly add new subscribers follow by text message notifications. This functionality was crucial in giving staff the ability to notify parents of school closings and job-seekers notice of current employment opportunities.
Q/A Testing
After the site's completion we did brief QA testing for the website on all modern browsers (Chrome, Safari, Firefox) and devices (iPad, iPhone, Android) to ensure everything is running smoothly on all platforms. It is our goal to fix any bugs prior to launch and with the collaborative effort of both Design Sprout and Foundation Academies team we tested each system.
