OKR 1: Create a foundational, deeply-rooted pattern library

As we talked about in the previous post, Measuring What We Do, the only way to know you have accomplished something is to create a goal, and then set measurable objectives to accomplish it. So for this first quarter of the ALPS system our first objective is the following:

Objective 1: Create a foundational, deeply-rooted pattern library

While there are many different types of sites, with a variety of needs in the Adventist church that ALPS could help, we have to start somewhere. This phase of the product is not about checking every box with comprehensive options and an exhaustive list of widgets and layouts that can be built using the system. This phase is about giving us a good place to start. It’s about creating a foundation that we can use to build our future on.

A new 'molecule' component: 2 column hero carousel.
A new ‘molecule’ component: 2 column hero carousel.

Let me give you an example of this. As we have been progressing through this build phase with Superfriendly, we realized that there was an element that we needed for the “local” version of the Adventist Design Framework theme that was not included in Adventist.org. So I wrote up the documentation for the feature, and added it to our backlog. After a brief discussion, Crystal Vitelli the project producer from Superfriendly, challenged me to build it myself using our Pattern Lab.

I’ve built plenty of websites before and I have no problem writing HTML or CSS. I was confident I could do it, but wasn’t sure how long it would take me. So I rolled up my sleeves, checked out the code from GitHub and dug in.

How long did it take me? The actual time I was wording in the code was probably 1.5 hours, but I’d guess that 70% of that was just learning how Pattern Lab did things, figuring out how the SCSS was organized, and reading through existing CSS to learn the what the classes did. Once I had learned that, it was simple. And the amazing part is this: I didn’t have to write one line of CSS or Javascript to add this new component to the system.

That is what we mean by foundational pattern library. It’s something that we can use the original pieces to build and expand on in new and innovative ways. Will we always be able to add components without adding CSS? No. But this is a starting place what we can use to expand and grow from.

So how will we measure that? That where our key results come in.

Key Results

  1. 1,800 Adventist websites (15% of the 12,000 sites) make obvious use ALPS.
  2. 57 websites made by the General Conference (50% of the 114 sites produced by the GC) make obvious use of ALPS.
  3. The first Adventist websites built for these languages report 0 issues when building:
    1. Mandarin
    2. Spanish
    3. English
    4. Hindi/Urdu
    5. Arabic
    6. Portuguese
    7. Bengali
    8. Russian
    9. Japanese
    10. Punjabi
    11. German
    12. French

Yes, those are some big numbers and high goals. We have thought long and hard about how we can accomplish this, and I am confident we can make great strides towards that.


  • | April 28, 2016 at 12:32 pm

    Great work Brent and Superfiendly. While those seems like high goals, I’m positive we can collective make them.