Streamlined Design With Rain

About Cheryl and Becky 

This episode, we welcome UX pros Cheryl Little and Becky Cierpich to talk about the Mediacurrent Rain installation profile. Hear how Rain, the recent winner of Acquia’s “Open Source Giants” award, can streamline your design project.

Project Pick:  

Becky: nocoffee vision simulator

Cheryl: Notion.so

Interview:

• What is Rain?
• How did Mediacurrent designers help build Rain?
• What’s included in the Rain component library?
• Are you glad that you did/ how does this benefit your team?
• How do digital strategists interact with Rain?
• Do developers like Rain?
• How about clients? What has their reaction been?
• OK, how about project managers? Do they get anything out of Rain besides a more efficient project?
• Thinking about the editorial experience, how does Rain look to a site builder?
• Is there any reason a project shouldn’t start with Rain?
• What's next for the future of Rain?

Transcript

Mark Casias: Welcome to Mediacurrent's Open Waters podcast, a podcast about open source solutions. I'm Mark Casias and with me this episode is Mario Hernandez.

Mario Hernandez: Hello, everybody.

Mark: And Bob Kepford is keeping the lights on or something cause he's not here, so it's just going to be the two of us. And this episode, we're going to be talking with Cheryl Little and Becky Cierpich to talk about the Mediacurrent Rain installation profile. How you doing, ladies?

Mark: You might recognize Cheryl from 10 seconds ago or 15 seconds ago, the more I ramble on because she's the one that does the intro for our fine podcast. So if you recognize that sultry sound, that's her.

Cheryl Little: I have to make sure I put my radio voice on.

Mark: Exactly, exactly. So we asked people for their bios and to talk about what they do, and these fine people gave us loads of information so I'm going to let them talk about themselves. Becky, why don't you start? Introduce yourself.

Becky Cierpich: Hello. I am Becky Cierpich. I'm a user experience and user interface designer here at Mediacurrent. I've been designing in the world of Drupal for almost 13 years now. It seems like forever and I've been designing much longer than that for print, for web, for everything. Here at Mediacurrent, I lead teams. I specialize in accessibility. I get to do digital strategy. I'm a student of digital psychology. I get to design icons. I recently released, or Mediacurrent released public domain through the Noun Project, a series of icons. You can pick those up there. And I have my hand in a lot of cookie jars. Most of the time, I'm actually designing interfaces and experiences for users that are quite complicated, multi-step, personalized, customized so that's actually the bulk of my work, but I do all sorts of fun things so I didn't want to leave it out.

Cheryl: Hello, I'm Cheryl Little. I'm the Senior Director of User Experience here at Mediacurrent. I'm an advocate for the user and creating an inclusive experience. I've been designing and creating art my entire life since my first Smokey the Bear coloring contest I entered in first grade and I won first prize. Like many designers that aren't newbies, I began my career in the world of print. I progressed into product design, toys and pens and novelties. And all of that led me to designing digital projects. I've been with Medi current for a little over four years. I'm based out of Los Angeles, California. Now I have the pleasure of working with both the digital strategy and the design teams to build great digital experiences.

Mark: Excellent. Excellent. And we'll learn more about them, but first we have our Project Pick and since we have two guests, we have two Project Picks. Becky, you say it's the no coffee vision simulator. Can you talk about that?

Becky: I'd love to. I was really excited about this. I was using it just recently. It's not a new tool, but it's a bit new to me and it's a Chrome extension and it allows you to change your view of websites based on all sorts of different, low vision conditions, colored deficiency conditions and it allows a lot of customization of how that looks so you can get a real good feel for how other people might see a website so when you're trying to work on accessibility issues and try to understand them better, communicate them better to people. This is a great tool. And so I definitely recommend it to anyone who has that sort of need. No coffee vision simulator is what it's called.

Mark: And it's also good for anybody. I mean, not even developers, but anybody to maybe test their site in it, just to get a good idea of what they're dealing with. Cool. And, and Cheryl, you brought up notion.so. So, what is that?

Cheryl: So, notion is an all-in-one workspace. I'm, I don't know if you guys are like me, but I'm always taking notes and looking for like a way to make my job easier on a day-to-day basis. And I'm leaving a note in a Google doc or an Evernote or in a note on my Mac desktop and I get confused of where I left the note, so notion is pretty great. And not only gives me an area for notes and docs, but also a knowledge base. And I can also have my own custom JIRA board, so I can have a list of tasks and organize them based on what's in process or what I need to do in the future. It also has a lot of prebuilt templates, even for designers, for example, there's this whole section for designers, so I'm really excited about it and I'm using it on the free free right now and I think I'm ready to sign up for the purchase version because it's such a great app.

Mark: Is it a cross platforms as well? Or is it just the desktop?

Cheryl: I believe it's an app, so I'm pretty sure that it's available on mobile, but I haven't explored it that far.

Mario: I'll have to check it out. It sounds pretty cool.

Cheryl: You can also import from Evernote and Google Docs.

Becky: That sounds awesome.

Mark: Yeah. I usually spend my day trying to figure out how to make my day more difficult, so this is a fresh take.

Cheryl: That's what makes you special, Mark.

Mark: Let's go get into what we're talking about. The Mediacurrent Rain distribution installation profile, whatever you want to call it. Yeah.

Mario: What exactly is Rain?

Becky: Well, I can answer that. I like to use an analogy. I think of it as a meal kit. So when you're cooking, you want a wholesome, nutritious, quality ingredients and a meal kit is something that gives you a lot of those things out of the box, ready to go so that you can add whatever special enhancements and customizations you want to add to your meal. You know, any number of things become possible with this, like bootstrapping jump-starting kit that you start out with. And Rain is just like that. It's a lot of pre-packaged, pre-configured, it's a box of goodies and it's been really helpful thus far on a number of our projects here at Mediacurrent.

Cheryl: Just like it's important when you're cooking, it's also important to start a project with a clean slate, clear, clean base, and make sure everybody's on the same page. And it also is similar in that all the cooks are in the same kitchen.

Mark: "Too many cooks..." Please, sir, don't sing. So how did Mediacurrent's designers help build the Rain profile?

Cheryl: Well, Rain is a component library that was created to solve a need, to have a standard library that we use as a starting point for our projects, a place where the developer and the designer and everyone on the team can begin the project with a baseline of components from the very beginning. We were on a project a few years ago for a higher education client. We had a discovery session with them and they really enjoyed all of the ideation we had and they had such high hopes and dreams for their site. They wanted that wow factor that is oftentimes, we run across projects, they don't have the budget that they need to, to develop that wow factor. So we were able to leverage Rain to help us with the reuse reusable component library that's available out of the box. All we needed was a basic installation profile and some CSS magic, and we were able to give them the wow factor with great results in a very happy client in the end. And, to note, we also came in on budget. Since that project we've evolved our internal process to include a component library that we've built in Sketch. So now each designer, when they start up a project, every component is available at the click of a button. So desktop, tablet, and mobile is all been considered. And just from a dropdown menu, we can easily, very easily add a component to a page.

Mario: So yeah. So what is included in Rain? You mentioned component library. Can you give us an example of some of the components that are included?

Becky: Well we based our selection of components on the most frequently used forms of delivering content that we found. We, you know, we looked at the past, I don't know, a couple of years and looked at the common denominators that we saw in our projects and we chose those to lead out with. I think we have maybe 10 different components, but they all have like lots of variations, like a two up, three up, four up cards. And we have forms that are, you know, active, forms that are complete forms that are incomplete. So there's a lot of, and of course each one has desktop, tablet, mobile versions. So our design team has our wireframe library and it's built a Sketch symbols and each one is consistent with the developer's end of things. They don't see it the way we see it, but it's all mapped field by field and bit by bit. So, you know, we are able to show the client like, here's what you get, and of course, before we do that, we get to make the call, like, what do we want to change? What do we want to add, subtract, you know, enhance? And as we go through our collaborative process, we do make changes to that. But having that baseline to start with has been really, really a big step up and like efficiency boost for the team.

Mark: So besides that, what are some other benefits that or things that Rain would benefit, working in the team structure?

Cheryl: Well, so far it's been, we've had great success just in time savings alone. We've saved design time in the area of 50, 50 to 75% for a lot of our projects. So when you can, you know, create a wireframe and save that much extra time, the sky that can be the limit for the extra things you can do with that time that you have available in the budget. It's so fun to see how far we're able to push the boundaries of the basic install profile and use CSS magic, and a minimal backend effort to make these a little bit fancier or just a little, just take them to another step. These components are so flexible.

Mario: That's great. Yeah. You obviously don't want to have a set of components that are so hard-coded that it's hard to adjust them right to your needs. So that's a great thing to to hear there. So I know that Rain is not just for developers or site owners, but it's also helps digital strategists. So how are digital strategists interacting with Rain?

Becky: Yeah, well, us designers and the developers, the strategists, we kind of gather around the components. We look at them, we talk about, you know, plans. How do we take the content that makes sense and tailor that to functionality that we want to add that makes sense for the project? And like I said, this is our starting point, you know, and the strategists are really typically kind of removed from the process. They come in before design, they come in before development, but when we bring them in and we show them the components we have to work with, it helps them to understand what's there, the different amounts of content that work well with different components. And a lot of times we can say, "Here's the component I want to use. Can you write content for this or what content will fit in this?" And so it becomes like a really good collaboration with these, these Legos almost in the middle of the circle, and we're all sitting around and building things together. And then once we get something really nice here to show the client, here's the little castle we built you, what do you think? And, you know, it goes over really well.

Mario: That's, that's neat because like I said, you know, many times, at least in the past, right, there's never been a time where a strategist can even visualize, right? What some things will look like, and this way you actually can literally visualize what the components will look like and they can strategize based on that. That's pretty neat.

Cheryl: Yeah. It was really cool because we're able to give them recommended character counts so they can literally write the copy, you know, to be pretty exact, and we can show them what a visual representation of what that would look like. So it really is really good at helping us. I think the most important thing is the bottom line, form and function are working together here, one's not following the other, we're not having to go back and redo anything later on because we realize, oh, there's a lot of texts that needs to go in here and it's not going to work and we've already developed it and it's too late now, right? So we're able to figure that out way earlier on in the process.

Mark: And that's I already know my answer to this question, but I think I'll ask yours since you're the guests. How do you think developers are feeling about the Rain profile?

Cheryl: They actually love it. They love the idea of a standard components that we all began with. They love having all the fields mapped out. It's really good for all of us to have a common starting point. What needs to be noted as a change is as, or as things that we know to call out. So as soon as we change something in our wireframe, we know that that's an alert. We need to either annotate that or have a conversation with a developer or let them know that hey, we're going to modify from what we began with, which is often done for many different reasons, but it's our cue to either annotate or have a conversation with the developer to make sure that things aren't going awry in the design side of things and they're kept in the loop and they understand what the expectations going to be in the end, because they're the ones that are going to have to build it, right? So we want to make sure and keep them in the loop.

Mark: Yeah. And that's pretty much that's my answer is I've been able to take the components out of Rain and apply them in other places as well. So we've used the same kind of ideology for a couple of projects where we're not even using Drupal or that installation profile, but there it is. We already know what the fields are going to be defined. We already have a baseline as to what the components are going to be defined and it just makes that go so much quicker.

Mario: One of the things that I know clients, when they come to us, they don't want to be boxed into a solution where there's so restrictive, right? That they can really scale it or modify. How, how do they like Rain? What is their reaction when you mention Rain and their process for using it?

Becky: Well, once we explain it to them, they really love the fact that they're getting a meal kit. You know, they, they understand that it's not a cookie cutter site that they're getting. They understand that we start here and then we customize, and this starting point allows us to add all the whizzbang pop things that they want, that otherwise they might not be able to get as much of, and we can do interactive pieces, more storytelling, more motion, additional functionality. You know, we get a lot more that we can work on because we have this efficient start.

Cheryl: Once we show them the different types of sites that have been built on Rain, they're kind of amazed at how flexible it is and how far we can really push it with just a little bit of CSS magic. And I say that because I'm looking at Mario, he's an addition there, not me, but we have a great front end team that does some really great work. And they're able to really do some great things with it. Reinventing it into something that you wouldn't imagine.

Mark: So we've talked design, we've taught digital strategists talk developers. We don't want to forget about project managers. How do they feel about it? What do you think they get out of using that that as a base start?

Cheryl: Well, it includes a style guide. So that really helps as far as the installation profile itself. So that displays all the components and that those match all of the basic wireframes. So theming can begin earlier in the projects. I think that makes the project managers happy. We can show progress for the client sooner and the front end and the back end developers can also work simultaneously without stepping on each other's toes. The PMs appreciate the significant savings it can make to a project budget. They get to be the heroes for our client by reporting that we came in under budget on the wireframes, for example. So, oh, now we get to spend some money on enhancing some, adding some cool animations or interactions or whatever we want to do to take the site to a whole other level that they normally would not have been able to afford. That really makes them happy.

Mario: That's pretty neat. You know, one user type that a lot of people forget about our site builders or the people who are the ones responsible for content editing or content creation, and so what kind of improvements or benefits will Rain provide to those people?

Cheryl: With rain comes thunder, and with the Rain installation profile, you get the Thunder admin interface. So we took the thunder admin theme and we've added a bunch of improvements. So the editorial experience is even better. This is no longer your typical Drupal interface. Our efforts to provide improvements for those folks who spend their days in the admin interface, I think are obvious. We've addressed things like improving the font sizes that were in the original Thunder. We addressed hierarchy of information. We increased the white space so it's easier to see those different types of information and find everything they're looking for. We improved the way the help text is provided. We also increased the contrast for better accessibility for those with visibility problems or even those that spend their da in the admin interface would like for their eyes not to hurt when they're done entering their Drupal content. So I think all of these are, are, are helpful improvements that an editorial person would really appreciate.

Becky: Yeah. It's a far far cry from Drupal core and it's still far the admins really like it.

Mark: Cool. Cool. So, you know, are, is there any reason to not start a project with Rain?

Cheryl: Well, I live in Southern California and we need rain, so I would say never. We always, we love rain here, but all joking aside there, of course, are always special circumstances, there are projects where it doesn't make sense. Like for example, right now we just started a project that's for a user portal. It will be a built in a custom application. This would be an example where sure, maybe some of the elements from the wireframe library might be able to use some of those to save some time, but this is going to be such a customized, specialized user experience and the installation profile itself probably won't be used.

Mario: Hm. You know, I know Markie has deeply been involved with this project and I have at least you know, being aware of some of the features that it offers. One of the options that Rain offers is an optional decoupled front end running on Gatsby and React, so this is not only great for creating a decoupled project, you know, having the beauty of React and Gatsby integrated with it.

Mark: Yeah, to that point, because I've worked on the Rain demo that we did in Drupalcon, and it was just super easy because we already knew what components, what fields were getting out, so we knew what we were going, able to put out, we were able to pull in. It made our lives really easy. That and the setup between that and Gatsby and has been super easy. We're actually even looking at other options of things that we want to work with this as well.

Mario: Yeah. And the other thing, so the Gatsby front end is optional. So if you still want a Drupal front end pretty much the default and the beauty of this also is that all these components that Becky and Cheryl mentioned, they are already pre integrated into Drupal. So when you have this up and running, the components that are already in place are already pre-integrated with Drupal so you don't have to spend time on integrating those yourself. And I know just today, in fact, I was talking with the lead of this project and we're looking into updating the style guide, which is provided by default, to Patternlab. We're going to be grading that in Patternlab at some point. And also there is plans of including UI patterns which is a module that allows you to easily integrate future components into Drupal a lot more easier via the UI of Drupal rather than doing it through code. So it's a great product and we are obviously big fans of this, but any last words before we call it off, ladies? What is the future for Rain besides those things that we just mentioned?

Cheryl: I'm really excited cause we're already planning the second phase of Rain. We have a long list of enhancements we're going to be adding, and, but we know for sure we will be including certain components. I'm not going to tell it all cause I don't want to give it away. So it's a surprise when we roll it out, but for sure, we're going to include a header and a footer because we know that obviously those are things that are needed on every website, duh, but we also want to include that out of the box mobile responsiveness so it kind of takes a burden off the developers when they roll out a site. Also, we can include, add that to our wireframe library. I also wanted to add quickly for the editorial experience, if a site is built in paragraphs, they can essentially the editor can like literally just click and the component drops down into a list with icons and the name, and they just literally can just add the component with the click of a button, so it's super easy to use.

Mario: Yeah, exactly. Cool. And finally, where can people learn more about Rain? Where can they go to learn about this in more detail?

Cheryl: Mediacurrent.com, we have a page there that talks all about Rain and stick around for the near future. We'll be adding our sketch library as a downloadable asset.

Mark: That's actually mediacurrent.com/rain, and then there's also...

Mario: Yeah, and also people can go to drupal.org/projects/rain if they want to start playing with it.

Cheryl: We're going to be adding our sketch symbol library to that page, but we've just done the work on it now it's just not rolled out yet.

Becky: And we have a whole instructional page, like a blog post on how to get started with Rain, you know, step by step walks you through how to install it.

Cheryl: Yeah. Is that linked on the Rain page? Should it be if it's not.

Mario: It's a series of blog posts, right? So I'm not sure how much of this Markie will cut off.

Cheryl: Hopefully all of this.

Mark: That's it for today's show so thanks for joining us. If you're looking for more useful tips, technical takeaways and creative insights, visit mediacurrent.com/podcast for more episodes of this show and to subscribe to our newsletter. Thanks for playing.

Resources

• Check out Cheryl and Becky's presentation Rain: A New Tool to Streamline Design with Reusable Components. 
• Learn more about Rain's content authoring tools.
• Read about our Open Source Giants award on Acquia's blog.