Case Study: Online Passion Reader
Every year, during the week of Good Friday and Easter, many Christians throughout the world spend time commemorating this period. At Gracepoint Church, one of the things that they do over the years is reading through a collection of articles that help educate their members what this special week is all about.
The Problem
It’s no secret that we’re living in an era where each successive generation has shorter attention spans. While there are ways to combat this¹, the problem that we face is that these timeless articles cannot be truncated to some abbreviated format. The concepts themselves are a bit abstract, which requires a bit of explanation to get the full message across.
The Solution
Thinking of the average high-schooler as our main demographic, we decided to create a website that aims to be—
- More visual. Since we can’t cut do the content, we tried to raise the appeal for each article by providing enticing and relevant graphics (and in some cases, animations).
- Not as overwhelming. Two years ago, we tried solving this by updating the content into a easier-to-read PDF format. However, with all the articles combined, that netted out to 115 pages (weighing in at ~100mb). Thus, it was a high emotional hurdle just to read a single article. By putting it on the web, article by article, this does away with that.
- More aligned with the common reading experience. We’ve included expected duration of how long an average person should read, as well as a (rough) category of difficulty of the article.
My role
As the Creative Director for this project, I was responsible for—
- Creating a workflow that touches the website, exporting out to PDF, and animation creation via After Effects.
- Designing the overall website — fit for both desktop and mobile.
- Ensuring the developers have the specs that they need, using Figma as the main source of truth. I also helped them understand the framework we were using (Svelte & Tailwind CSS).
- Working with small team of illustrators to provide illustrations for each of the articles.
- Creating assets in After Effects, to be exported as Lottie animations.
- Gathering feedback from youth teachers and college students to improve upon our designs.
Tech Stack
Given that the team was pretty green, I’ve made decisions that enabled us to (A) work in a lean way, and (B) pump this out pretty quickly²—
- CodeSandbox — enabled all of us (developers and designers) to be on the same page with regards to progress. CodeSandbox also has a neat Github to Vercel integration, which allowed us to make deployments quickly and hassle-free!
- Tailwind CSS—allowed devs to quickly apply the correct styles. It helped that the designs took this into account early on, so that there’s 1:1 parity between design to code.
- All designs done in Figma—this allowed me to give feedback to the designers quickly, but also, it enabled us to quickly pump out the animations (thanks to the AEUX Figma plugin).
- Lottie animations—simple enough to export from After Effects, but just enough hooks on the dev-end to give us full control. Super helpful in timing scroll animations as well as other interactions.
- Spline 3D—with extra time to spare, I had the added bonus of playing around with Spline. I think the added delightfulness that came from this was just 👌.
Receptivity
Overall, the reception has been positive. Here’s a small sampling—
Thank you sooo much devs and designers!! Can’t imagine how much work went into this. I’m going to share this with my family!
This if fire. Feels like I’m reading on medium. Thank you.
This is so, so awesome! Thank you all for the hard work put into this project … the same articles feel different (in a good way!) with the visuals and easy-to-read text.
[1] TikTok has mastered the short-form content as a delivery platform.
[2] Full turnaround time, from design to deployment, was a little less than a month.
