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