St. James Episcopal Day School

Best In Its Class

Project Type Website
Period 2015-2016
Role UX Designer, UI Designer, Front-end Developer

Setting the
stage for success

St. James Episcopal Day School is an award-winning, private, faith-based school serving students from Pre-K to 5th. They were looking for a new website that would give them a distinct identity amongst the competitive market.

To do this, it had to show off all the things that made them special, like their personal, 1-on-1 approach to teaching in a warm, nurturing environment, exciting opportunities for students in STEM, and even their functioning broadcasting studio.

The new website was to be catered towards prospective families and give them a taste of the amazing educational foundation their students would have at St. James.

St James Photography

The project team took a tour of the campus to get a feel for the environment and culture.

Discovery

I always begin my process with researching the client, their particular market, and their competitors—this project was no different. After my initial findings, I created an agenda for a kickoff meeting with the client. During the kickoff, I worked with the St. James team to identify problems with their current website and collaborate on ideas for possible solutions.

I like to get a feel for the environment firsthand, if possible. I got to tour the school campus early on in the project, which allowed me to get a sense of the unique culture of the school and even shoot some photos that would later be used in the design.

Planning

After the initial discovery was complete, I moved onto planning. In my process, this usually includes building a sitemap, which is a document that outlines the page structure of the website to ensure all content is accessible and accounted for.

I also design wireframes, which represent the user flow and content structure of the website’s pages. What is helpful about wireframes is that they focus solely on the experience of the user—not the look and feel. This allows my clients to separate visual design from the layout and functionality of the website so we can make adjustments as needed before final development. The St. James team was very helpful and responsive in making sure all elements and content pieces were accounted for.

St James Sitemap

Design

Once the website had an approved plan, I moved onto visual design that was heavily directed by the St. James’ brand and the goals of the project. I like to start with a style guide of design elements to give the client a visual reference of the look and feel before proceeding to designing out full page designs that are built on top of the approved wireframes.

For St. James, I prominently incorporated the school colors—including their signature plaid pattern found in the school uniforms—and some of the photos I got from the in-person tour. The result is a cohesive look that is distinctively theirs.

Development

Based on the initial sitemap, I began development the website. I built it on a Content Management System (CMS) in order for the client to be able to easily add or update content and keep the website fresh. Not only is it important to continually renew the content from a user experience perspective, but it helps in regards to search engine optimization (SEO) as well.

For St. James, I used ExpressionEngine CMS, which is a great platform for my clients to work with as it allows for a lot of customization with an easy-to-use interface.

St James Wireframe & Styletile
St James Responsive Devices
I knew I was going to work well with Lynsey from the start of our project. She listened to my team’s needs and ideas, and she offered advice and expertise. Re-building our school’s website came with many challenges, and Lynsey embraced all of them. She kept us informed every step of the way and met each and every deadline. I was thoroughly pleased with the final project, and people still rave about our site! I will not hesitate to recommend her work to my friends and associates.

Helen Butts, Marketing & Advancement Director, St. James Episcopal Day School