Summary

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..

 

My Role

UX/UI Designer
UX Researcher
Branding

Team

Front End Wordpress Developer
School Administrator
Enrollment Director
Board President
Office Staff
Parent Volunteers

Timeline

6 weeks

Scope

Define
Project Brief
Kick-Off Meeting
Contextual Inquiry 
Research
User Research 
Competitive Analysis
User Personas
Interviews
Site analytics
Development
Information Architecture
Site Navigation
Content strategy 
Website Map
User Stories
Design
Content Development
Visual Design
Style Guide
Color System
Typography
Build
Wireframe
Prototype
Content input
Image optimization
Wordpress site 

 

Define

Yurt Classroom

Yurt Classroom

Requirements

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.

Project Brief

  • Objectives

  • Visitor Goals

  • Audience

  • Company Who & What

  • Website Goals

  • Content and Design

  • Competitive Analysis

  • Site Needs

 

Research

Personas

Personas

User Tasks

User Tasks

Personas

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.

Motivations

• Homeschool resource.

• Frustrated with few local school choices

• Presently on another school's waitlist

• Wants connection with school community

• Lower priced private school

Frustrations

• 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?

Assumptions

• 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

 

Development

 
Site Map

Site Map

 
Info Architecture wIP

Info Architecture wIP

 

Information Architecture

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.

 

Site Matrix

• 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

Website Navigation

Problem

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.

Solution

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.

 

Design

Heartwood Style Tile

Heartwood Style Tile

Design System

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.

Colors

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.

Typography

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.

 

Build

Website Wireframe

Website Wireframe

Wireframe

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.

Prototype proposal

Prototype proposal

Prototype

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.

 
HERO-Heartwood.jpg

Key Learnings

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.