Team — SDA + SuperFriendly
March 2016 — May 2016
- Component design
- Front-End development
- Pattern library creation
- Design production
- Paper airplane aviation
- Persona development
- UI kit creation
- Identity extensions
We’re gonna talk about the collaboration that we did, I guess this is about a year ago now, when we built a design system for the Adventist Church and a pattern library. So what I want to talk to you about is just kind of what the details of that look like and how it went. Overall, from your perspective, maybe you could talk a little bit about how you felt about it, cause we are looking back a year later.
The work that we had SuperFriendly do was a great project and it’s been probably one of the best things that I have gotten to work on in a long time. The project has continue to grow since you started, thanks to the good help that you did to get us going and we have seen a lot of acceptance and growth in what we’ve been doing and we’re rolling out quite a few sites based on the work that you started.
That’s awesome! So cool to hear. I always love when we can hand off work and then the client’s like, oh we’ve extended it way past what you delivered. I think that’s a great thing. Well maybe you could tell me a little bit about and tell people listening a little bit about how you got to SuperFriendly. So like what was the thing that you were trying to solve and how did that all lead you to hire SuperFriendly for this?
Before I joined, before I came to this position that I am in now, the person that was here before me, back in I believe it was 2013, they were undergoing a redesign of the adventist.org website, which is our main public facing denominational site. And part of the process, the thinking kind of went, “Hey we’re doing this design, there’s lots of churches that are doing stuff and different levels of the organization have websites.” And we need to make this available to anyone and make this in a way that is flexible so that anyone can use it at different levels. Over the course of the project, they kept that in mind but what they ended up getting was not based on timing and budgets and whatever, was not as flexible as they wanted it to be from the beginning.
When I joined in this job in 2015, that was one of the things that I had seen this project from when it was officially launched and was really excited about it but really wanted to see a more in depth pattern library and a design system really that we could use at different levels to kind of take the pieces and put together a site that had the similar feel but not the exact look and feel like a carbon copy of one site to the next. So when I came here, I believe Andrew [King], my predecessor had been talking with Dan a little bit, I had followed Dan’s work for a number of years online and in your speaking and just have always been impressed with what you’ve done. So when we started talking shortly after I joined here, I think it was in the fall of ’15, 2015 and have kinda continued till we got to start the project the beginning of last year.
We had worked on a handful of design systems and pattern libraries up to that point, but I think when we started talking, it dawned on me that the scale of what we are talking about, so if you could talk a little bit about that. From what I recall, there’s 70,000 churches worldwide and there’s a bunch of publishing houses and divisions and different languages and media centers and all of it like all of these potential users of a design system and pattern library. I thought, “Wow, this could be used a lot and this could be used by a number of people.” And at the same time, it was simultaneously exciting but also overwhelming: how do we get the requirements even around all these stuff. Maybe you can talk a little bit about how you were thinking about all that?
Our church is a worldwide church, we have over 19 million members over 80,000 churches. Many of those churches have their own website; many of them don’t. We have publishing houses, we have clinics, we have hospitals, we have schools, we have the second largest parochial school system in the world and we have all these institutions that many of them are building websites. And a lot of the time, they build a website and then they, you know it lives the course and then they start over or they redesign it or they update it, however that goes.
And as we were looking at it ourselves and we said, “Look, we’re gonna foot the expense because we need to build this. But we also would like to have a common branding standard that goes worldwide,” so that when people look at a Seventh-day Adventist website, they say, “Oh yeah, I recognize that from something I saw over here.” And we wanted to make that available as wildly as possible. The market for where this can be used is quite large. Just at the headquarters itself here, we run over 120 websites and that then expands out as we go into our 13 divisions and then those are made up of unions that are 60 unions around the world. We have conferences there and then the local churches. So yes, there is a lot of area for growth and a lot of potential of where this design system could be used.
I remember one of the things that kind of jumped out at me initially was, in order to get all the powers to be to basically give you the liberty to do this project, I remember that you printed out these little thumbnails; this was so impressive to me. I wrote an article about this called “Selling Design Systems”. You printed out these little, I guess there were 3×3 thumbnails of all the websites that you made just in your office for that year or something like that and then you mounted them on this blackboards. Can you talk a little bit about that? Like what drove you to do that? Why did you do that? Who did you show that to? What did they say when they say that? I remember that being a real impactful thing for me, I’m curious from your perspective how that went.
When I came into the job, I found, started to look around and see what the scope of the work that we had to do was. And as I was looking at site after site after site, we did a survey just around our headquarters office just to try and get an understanding of how many sites there were, what the URLs were, what they look like and I was struck by the huge variety and there was very few common elements that you saw between the sites. And only after sitting down and looking through these things one after another did I realize that we needed a better way of visualizing what this challenge was that we had before us. So I went through, took screenshots of all the websites, not every page obviously but the homepage of every site. And I did them up in basically I have little three by three squares and my first initial idea was, I’m going to make like a deck of cards almost that I can just put down on a conference table and throw out there and kind of scatter around.
And that was good but then we made some more and we put some binding on the edge so that you could kind of flip through it and then we ended up mounting them on five pieces of mounting board. And I remember I would take it around and take either the booklet or the board or just the stack of cards and hand it to different people and say, “These are the websites that we have.” And I remember one person took it and started flipping through it and he’s like, wow. He’s like, “This is all from one site? These are all the pages from one site?” I said, “No, this is one page from every site.” Oh, wow and it’s this stack that’s probably inch and a half thick of cards. So it was a really good visual. I know I used it, I know my boss and administrators above me took that and used that and it was very helpful in helping the administration understand the scope of what we had and really the challenge before us because there was nothing cohesive about anything that we were doing.
I think that that was just such a smart move because I remember, starting the project, we had such good buy-in already from all the people that we talked to because they already understood what the problem was. They were able to actually visualize it like, look at the disparity that exist here, oh now we understand why we are gonna do this project. So even for me and my team coming in, we had a lot of buy-in, people understood the problem that needed to be solved and we could all kind of worked together to actually solve it. Now you know we didn’t have to do a lot of education as to, well here’s what we’re doing and here’s why we are doing it and now what are we going to do about it. I think a lot of that was already solved.
I’ll talk a little bit about what we did at first and I’m curious as to your perspective on, like is that pretty atypical for you, is that how you normally kind of go about things? I know one of the things that we tend to do is, before we even kick off a project officially, meeting in person in a workshop and some of the ideas, we talk to a bunch of people. So we came to DC for a day or two and talked to some people around the conference that everybody was attending there. We talked to program directors and we talk to division heads and we talked to people that were in charge of marketing and we talked to a bunch of people to understand their pain points. What are the things that need to be solved and what are some of the common sentiments around here? Even people who don’t work together but people that maybe have the same job across the world, how do they think about what their job is in relation to the website or maybe some digital platform that they maintain? And then, we took all that stuff and we got in a room with you and your team and we just kind of talked about that stuff for a day or two. Can you, like it’s okay if you don’t remember any of the details but can you talk a little bit about what that experience was like for you and your team? Just sort of like sitting around a table, you know we did a bunch of cut and paste exercises too. Like what was that like for you?
The process that you went through of talking to so many different people, from various levels around the world was huge, it was important in several different aspects. Number one, it gave us the opinions and the viewpoints of these different people. I mean you listened to them; we weren’t in the room. So the goal was to have it unfiltered and let them say anything they wanted. You got to hear all of that and brought it back to us kind of in a synthesized way, an anonymized way. And the other thing that it did was it helped these people see, the other people that you spoke with, it helped them see a little window into the process and into the project and gave them a bit of a buy in that they had an opinion and they had a part in the process. And I think that was also important because the previous process, they just didn’t have time to cover that much ground and I remember hearing a lot from people saying, “Oh well no one talked to us,” or “What does this have to do with us because it’s built just for the headquarters, it’s not something that we can use.” Even just a couple days ago, just late last week, I got an email from someone that you had talked to and they said, “Hey, whatever happened with that project?” And I can say, “Oh well here, let me tell you where we’re at and here’s a link and here’s some things,” and they were saying, “Can we use that now in our division?” So you know sitting around the room, I think that was important for us to listen to, to hear that feedback and hear the opinions and the point of view from people that we don’t normally get to interact with on a daily basis.
For somebody listening who maybe has a similar job as you, maybe they run communications at their organization or marketing or something like that, maybe you can tell them about what kind of team you constructed on your end. So who were the stakeholders on your side, who were the people that worked with us and then I can say what was my team comprised of.
We had the, she wasn’t able to be there a lot of the time, but we had the Chief Information Officer and the CISO, the Chief Information Security Officer. They came in for part of the day. We had an assistant communication director there with us who works in the department with me. We have an office of Global Software and Internet and I had him join in the process and he’s been a key driver. He’s responsible really for a lot of the websites in this building as well as other places and these people also, in addition to helping through the process of the project have been really key in helping to evangelize the project as they go around and talk to people in their circle, so that they can come back and point back to the project that we did and say, “Hey here’s something that you can use.” I’m trying to remember who else we had on the team. I think that was kind of the basic team that we had though.
I also remember that at some point during the kickoff meeting, we did break off to discover that one person had a very specific skill in making paper airplanes fly. And so I remember sailing paper airplanes through the office there, through the general conference office and making some of the janitorial staff mad.
Yeah we have a large atrium that’s perfect for paper airplane throwing.
On my end, we had a pretty small team that I thought worked really well together with the people that you had brought on your side. T.J. Pitre was doing all of the development work and working on the pattern library itself. I was doing most of the design work. Crystal Vitelli was our producer, just trying to keep on everything on the rails. Seth Hannah was a design apprentice who did a bunch of design production work and Rob Adams did a bunch of ethnography to start us off. And I remember to specifically speak to one of those pieces of work.
Rob put together a handful of personas based on the interviews that we did and I remember using that a lot throughout the project because we would say things like, we’re gonna make something for, I forget their names off the top of my head but Sam and Sarah were two of the personas and so this piece that we’re making are for these two people or these two type of people but not really for these two other type of people even though that we recognize and can sort of acknowledge that they were going to be stakeholders in this process but that the initial project that we were doing was really focused on a handful of personas and not for others. Is that something that you’ve continued? Is that something that like do you still use that language? Do you still refer to some of that research at all or like has it evolved?
I still have those personas taped up on my whiteboard in my office and I still talk about them when I talk about the project. When I present about what we’re doing and what we’ve been doing, I’m getting ready to go next month and present in Europe about the project, and that’s something that we talk about is, who is this for? And I think that’s really important for us to keep in mind because I work on things on a different level than say someone at the local church. And to understand that I have a different understanding than they do and I need to think about what their point of view is and what their understanding is of the tools that we build is great and really important.
Also, let’s talk a little bit about the production. What did you need made? We did a bunch of research and we did a bunch of exercises, which are great, but that has to turn into something actionable that you can take and extend. So what did you need made? What did we make? Did we hand it off in the right format? Did you use it, did you have to modify it? Maybe talk a little bit about that kind of stuff.
One of the things that I was looking for as a take home was a pattern library. We had a site, we had a couple sites that were using this same basic design but there were three or four years old. We wanted that updated; we wanted it to feel fresh but we didn’t want to have to rebuild all of the pieces that we had. So we wanted something that would be more customizable, so it didn’t feel like an exact copy of this same site, we wanted people to be able to feel like this was their website. If this was a church website, if this was a division website, we want it to reflect the local area. But basically, we were looking for getting some more flexibility out of what we had.
In the end I guess we walked away with a Pattern Lab install with all these patterns prebuilt to replicate one website. And one of the things that you Dan and your team kind of pushed us to was, “We’re not going to build every iteration that could be built. We’re not gonna make tools through this first project that will cover every website that we come across.” You wanted to get us on a good footing to get started, to provide a foundation and that was something that we decided there in that initial meeting was, we want to build a foundation but it’s not gonna answer every single question to every site that we come across.
So when you handed off the project, we were able to take that information and take that system and rebuild our main adventist.org website based on that. And that was launched in October, I think we handed off in May sometime. So it took us some time to get that, to get our site retooled. But in the process, we’ve ended up, in the interim, we’ve ended up adding may different patterns, many different templates, different iterations as we’ve talked with our divisions and other entities. They’ve said, “Hey we want to be able to do this, we want to be able to do whatever it is.” And so we’ve talked through it and we’ve taken the pieces, we’ve added new pieces and been able to build on what you started us off with.
I think we started in February of last year and we went till about May, so about two to three months later. So at the end of those three months, I remember we came out with ALPS, The Adventist Living Pattern System. Has that name stuck around by the way?
It’s still there, yeah.
Yes, awesome. Every good design system needs an acronym or at least a name right?
So The Adventist Living Pattern System, so that’s out and you sent me an email a short time ago, a few months ago, reporting on how it’s doing. So maybe you can share some of those statistics, like has it seen some adoption? Have people picked it up? Have they started to use it? What does that look like?
Yeah, absolutely. So we’ve started using it on our flagship website since October. And prior to that, we had I think four other sites in our, or maybe it was six other sites in the headquarters building here, who kind of beat us to the front with that. But that’s okay cause that’s what it’s there for. We have iterations of it running now in TYPO3, that’s available for anyone in our organization to use. We have it in MODX. This week, we’re planning on launching our WordPress theme that T.J, we hired him to build the WordPress theme for us. So, that’s coming along. We will have a Drupal theme hopefully by the end of this month available for people to use that use Drupal.
I think when I emailed you, I think we had around 300 sites that had started using the ALPS system already and I didn’t get a chance to pull numbers this morning so I can’t give you a good number for where we are today. But I know it has been growing because I have been working on a lot of sites that I see in process. People have come to us and said, “Hey how can we do this?” So we are building more and we’ve got more coming out. I know with the WordPress theme coming out, we have several just in the office that we said, “Hey we have the tool for that coming up right now.” So we now have this tool and we’re able to use it and continue to build on it.
Well Brent I have two last questions for you as a round out. So the first one is that, hindsight being 20/20, we are about a year away from when we first started this, a year later, what are some things that we could have done differently? What are some things that they could have gone better as you look back at the work that we did?
I don’t have anything really that jumps to mind; I know that’s probably not what you’re looking for. But the feedback that we got from your team and the level of insight that we got from the work that you did, from the research, from the design and just being able to bring in the team that you put together for our project and they just kind of hit the ground running and they were really a part of the team as we worked through this. And obviously, I should say they felt like a part of our team. And so, as we worked through this project, they brought so much insight and information and skills to our team that we continue to rely on till this day.
Well last question for you. Somebody in your position, maybe they work at their organization, maybe they are managing a handful of sites and they recognize the same disparity that you recognized earlier. You know, we have a ton of sites that we’re managing, they don’t look consistent, there’s no consistent user experience or look and feel or code based or anything like that, what advice would you give them on getting started in putting together an initial pattern library that they could evangelize to their organizations? What would you tell them on how to get started and maybe things to look for as they progress?
Well I think when you’re looking at a situation like that, you obviously have to know where you want to head with it. And we had the goal of building a common visual library and the team that SuperFriendly put together for us was so helpful because we didn’t have the in-house skills to get that started. We didn’t have either the time or the resources to build that out. And even if we did, we didn’t all have the know how, all the tools and things that you guys brought to the table for us. But this is something that we have seen even up to our administration as a tool to help us save money but also to help us bring our brand together so that we have a common visual guide going forward. So this has been a huge important project for us and I’m just excited that we get to use it.
Awesome, great words of wisdom there. Thank you Brent for spending the time to chat with me today, this is really helpful and always good to talk to you.
Thank you Dan, I appreciate all that you’ve done and I appreciate working with you going forward in the future.