Heartwood Educational Collaborative is a Waldorf inspired, nature based, homeschool program. With a group of dedicated parents and staff, this newly re-established school needed a new brand and website all under an impossible deadline..
Front End Wordpress Developer
Partnerships & Planning
For this project, I partnered with a front end developer that specialized in Wordpress sites. At the kick off meeting, I reviewed the project brief and intake forms with a group of seven stakeholders. I worked to align the team behind a MVP by prioritizing the needs of the business and the website visitor. Once the end goal was established we began planning, assigning and setting deadlines for content development.
Company Who & What
Content and Design
With an aggressive timeline most of my user research was gathered during a phone meeting with nine stakeholder including enrolled parents and office staff. With the legacy website analytics and the project brief, I initially conducted a verbal survey of the group. During our conversation, I gathered many user stories and insights about the school. I also specifically heard common admission questions from new parent callers during intake. From my notes, I outlined target audiences, key motivations, assumptions and current website pain points.
• Homeschool resource.
• Frustrated with few local school choices
• Presently on another school's waitlist
• Wants connection with school community
• Lower priced private school
• Understanding the admission process
• How to start enrollment process.
• Location of forms on website
• Who to contact about specific topics
• Enrollment requirements
• How do I donate?
• After site visit user will call school
• Offer free parent resources to increase conversion
• Resource on school blog will increases donations
• Easy admission process will increase enrollment
• Active participation in the local community will improve enrollment
• Website will be tool to organize school community
With an outline of the legacy site, the school administrator, developer and I tackled the formidable challenge of pruning and grouping the content. Over the course of three meetings we created an information architecture that reflected the user needs. Once established a content delivery schedule was made to mirror the developer's site build plan.
• Shorten topic summaries
• Clear headings titles
• Define sections (drop down menu)
• Group category submenus (section links)
• Submenu links should be accessible via top level navigation
• Organize submenus links with top level navigation
• No content more than three clicks deep
The legacy site was extremely content heavy. Filled with curriculum and resources for an internal audiences. The site navigation were topic centered without consideration for user's end goals. Admission flows were often four or more clicks deep. Ready access to vital information like site topics, school contact information or the mission and vision of the school were not readily apparent.
From my research, I designed a dual layer navigation. A upper right hotkey navigation that contained task driven flows that echoed the site analytics and user's needs. A logo level left navigation with drop downs that organized the site curriculum content into three target audience sections. The footer became a collection of summary elements including logo, contact information, site navigation list and mission statement.
From the beginning the client had a clear vision of their brand story and mission. So invested that they required no logo and naming suggestions for this project. It was my task to create a design system that matched their school vision.
I built a nature based color system echoing sun, sky, plants and earth to highlight their nature based school. These colors were used as section indicators.
From stakeholder conversations, I learned old fashion serif fonts were something to avoid. So I choose the san-serif Roboto light and Open Sans for their easy readability and modern look.
Before building the wireframe, I researched common UI patterns at other private school websites. I wanted to see if our site map and information architecture were working under any false assumptions. I found that our work was in-line with best practices. I then built three low-fi wireframes that also include the proposed color system.
Once the wireframes and navigation was presented and approved the site build began. With a higher fidelity prototype many content details and iterations needed to be managed and approved. This process involved one or more daily check-in meetings for each section.
When things are under a tight deadline so often the research phase of a project is where clients will push to cut corners. Understanding the user and their end goals are foundational in building any easy to use website. Yet this feels like working backwards for most stakeholders. Balancing the role of being a user advocate while holding the client trust can be difficult but once demonstrated reveals such obvious value to the stakeholders they cannot imagine anything else.