One Story: Jesus-centred curriculum for kids and youth

A responsive design that totally encapsulates the goal of the product: to help children and youth realize their value in the Kingdom of God.

One Story is the popular kids and youth curriculum program for churches (formerly from The Meeting House). Their curriculum includes toddlers through senior high, each one uniquely branded, and dedicates much of its resources to properly equipping leaders in the church. When they rebranded One Story, they asked me to design and develop a new website to go along with it.

How I helped:

Many screenshots from the One Story website on multiple iPads

Telling one story with photos. Lots of photos. One Story’s website uses collages to show individual stories of children and youth coming together to become “one story” as part of the Kingdom of God. There are over a dozen different collage styles for the page header alone, and many collage styles for sections within individual pages as well.

The page header of the Early Years curriculum page on the One Story website

The page header of the Kids curriculum page on the One Story website

The page header of the Jr High curriculum page on the One Story website

The page header of the blog on the One Story website

Designed for conversion. One Story’s curriculum is broken down by age bracket. For each age bracket, the website generates a landing page designed for conversion. These landing pages include a custom page header, introductory videos and walkthroughs of the curriculum, the scope and sequence for every year of that age bracket, a list of everything that’s included, and a call to action. These pages even have their own colour schemes, so One Story Kids and One Story Junior High can have unique brand elements.

A screenshot of the top-level Curriculum page on a tablet. The page gives an overview of the curriculum for every age bracket. Each age bracket has its own collage.

Speedy under the hood

Loading dozens of images for a page header alone could dramatically slow down the website. To get around this, One Story’s website automatically creates multiple different size variants of each uploaded image. It loads the smallest possible version of each image, depending on the size of your screen, and only loads the images when they’re in view — so the site only loads what it needs to. This keeps the website blazing fast, no matter where or how it’s viewed.

Screenshots of the different curriculum pages on the One Story website. There's a screenshot for Kids age bracket, the Junior High age bracket, and the Early Years age bracket. Each screenshot is displayed on a tablet. The tablets are slightly stacked overtop of one another.

The details are in the design

One Story’s website doesn’t only rely on images for its impact. It also uses colour to differentiate between curriculum tiers (curriculum for Kids has a different tint than curriculum for Jr. High). Finally, the “S” in their logo is weaved throughout the site, with the curved elements of the “S” playing a large role — the reader feels almost like they’re reading content that exists inside the logo itself.

“My team asks for Nathan anytime we need software help. We can always expect excellence, professionalism, and ease when we work with him. His designs never fail to amaze with clarity and beauty and his code does everything we need and more. I would recommend Nathan in an instant.”
Lucas Belem The Meeting House

The One Story website is easy to work with. The team can easily add new pages with a huge variety of components, page header styles, and more. One Story’s creative team can choose from accordions, image and video carousels, product listings, featured resources resources and posts, testimonials, and much more. This gives One Story’s team of creative people an astounding amount of breathing room for their own art direction. No two pages ever have to be alike.

A screenshot of a different part of One Story's home page on a tablet. This home page gives a brief overview of the curriculum and resources available to One Story subscribers. There are multiple layouts visible here that do not appear elsewhere in the site. — The website has enough layout options that each page remains visually unique, while remaining a part of a cohesive whole.

The One Story home page and the One Story site menu on a mobile device. — The complexity of the user interface on a desktop scales down beautifully to mobile.

The page headers of the Kids Curriculum and Our Pricing pages on a mobile device. — On mobile, alternative image layouts are used for page headers that reduce the number of visible images so the site stays speedy.

A screenshot of the Curriculum Contributors section of the About Us page on a tablet. — Even small elements, like the images of the curriculum contributors, contain tiny Easter eggs. Hovering over any of the black and white contributors' photos reveals a photo from their childhood in full colour. After all, we were all kids once!

The scope and sequence of the Kids Curriculum, presented on a mobile device. — For each age bracket, a detailed curriculum page includes the full scope and sequence for that age range.

Screenshots of the One Story Parent Blog presented on mobile devices. — A blog lets One Story share tips and tricks for parents who want to engage with the material with their kids.

“Nathan has been a dream to work with from the beginning to end of our project. He not only designed and built a beautiful, creative and functional website that met our objectives, but he was able to partner with our team right from the beginning to understand what we wanted to accomplish through the project and partnered with us to come up with the best solutions to get us there. From creative designs to writing in copy to fill our gaps, he wasn’t just trying to get the job done, it felt like he had joined our team and was working with us to achieve our objective.”
Chris Vandijk The Meeting House