BCJA Website

UX, Art Direction, Visual Design, Web Development January 2013 Visit Site

A charming and user-friendly website reboot for the Atlanta-based private elementary school Berean Junior Christian Academy

Berean Christian Junior Academy (BCJA) prides itself in supplying a state-of-the-art private elementary education with smaller class sizes served in charming and artistic classroom settings. Needing a new site that bespoke their brand and could be self-managed, I set out to create a usable product that visually matched the charm, fun, and rigorous commitment to education that the school prides itself in.

The previous iteration of the site was several years old. BCJA’s web needs had evolved but the structure, navigation, technology and content update process of the website hadn’t. Finding relevant information on the site was a chore, so my work had to begin with information architecture. A process which started with creating a detailed inventory of everything in the site and weeding out stuff that was irrelevant.

Inventory

The work of organizing existing information and identifying what information might be missing, needs to be accomplished with the end users in mind. So I created personas based on information about the school’s existing user-base and the stakeholder’s target market demographic. These personas would serve as decision-making guides throughout the entirety of the design process.

Personas

Harnessing the results of a card-sorting exercise performed by target users, I created a revised sitemap that greatly simplified the navigation by aiming for a balance that would result in both narrower breadth and shallower depth.

Sitemap

Moving on to designing the visual and interactive dimensions of the site, I began, as always, by brainstorming with a sketchpad, a pencil and a big eraser.

Sketches

Drawn designs were translated into digital wireframes to spur discussion and iteration on layout and interaction. Responsive design concepts were also translated although time and budget constraints would postpone their implementation in the final product.

During this stage one of the solutions for the interface was making areas frequented by users more prominent on the front page by placing the site’s “Quick Links” prominently “above the fold”.

Wireframes

Figuring out which direction to take when it came to visually skinning the final wireframes was made easier with the creation of style tiles.

While skeuomorphic leaning design styles have become the anathema of trendy designers, I opted to make effective communication with the target audience the guiding principle in my visual design decisions.

Styletiles

High fidelity wireframes were created and the final layout and terms were vetted using click tests. Click tests revealed that certain labels were more effective than others in reducing confusion and bringing about desired user interaction results.

Click test

Finally I developed the site on the Wordpress content management system using standard technologies: HTML5, CSS, Javascript/jQuery and PHP. The launch of the new site and subsequent tweaks in the following weeks concluded a process that was fun, rewarding, and most importantly educational, both for BCJA and for myself.

BCJA Revamped Website