Case Study

Telling A Story: The Wyndcroft School

Front-End DevelopmentVisual Design

Founded in 1918, the Wyndcroft School wanted a modern website and online presence that excites new students their families.

The Problem

It had been years since The Wyndcroft School had redone their website and student/family portal. The site was no longer in step with the marketing goals of the school. The Wyndcroft School brand was not well represented and the existing site was not optimized for the kind of information site users wanted to see.

Role

While a Finalsite employee, I contributed to the creation of this new responsive website as the lead web designer and lead web developer on the project. Finalsite is a leading provider of cutting-edge web solutions for private and independent schools.

Homepage Header and Masthead View

Process

Information Gathering

A survey was shared with the school to discuss their golas and vision for a new website. The survey dived into school branding and current marketing strategy. As designer on the project, this information was reviewed and an initial call was held with the client to further discuss the goals, structure, and look-and-feel of the new site.

Design

The design for this site was created in conjunction with the actual site build-out rather than using Photoshop or Sketch to create mock-ups that get passed off to a front-end developer to implement. Doing these two phases of the site creation together saved the team a significant amount of time and allowed us to explore animation and interaction design earlier in the process.

The design went through a series of revisions with the client until approval was received. Iterations were presented using prototyping and Invision. During the design and build out phase, a project manager and I were in contact with the client to ensure a fantastic final product.

Build-Out

The new responsive website was built upon Finalsite’s Composer platform. Front-end development work made use of Git versioning control, Gulp JavaScript task runner, JS/JQuery, Sass, and a variety of JQuery plugins.

Homepage School Information Tiles
Example Interior Elements
Example Mobile Views
Homepage Calendar and Footer Treatments
Landing Page Treatment