Writing for Atomic Design: How to Create Content in a Pattern Library

Presenter: My name is Rachel Delaunter. I live in Manassas Virginia. I work in higher education and worked in marketing communications at Virginia Tech. I've been working at [unclear] since 2012. We help 30 higher education programs do redesigns in WordPress. We have moved to a modular pattern library for CMS. The benefits are well-documented, but we've noticed common challenges for content creators and the backend users. We wanted to share what we've learned to help. I wanted to go through what a pattern library is. There is a lot of terminology around that. How they affect the authoring process and issues for migrating content and preparing for the switch.

I will leave time for questions at the end, so use the form at the bottom of the page. Anything I don't get to; I will answer afterward. We tend to use atomic design, which is an organizational method devised by Brad Groth. It's his birthday today, apparently. Atomic design uses atoms, molecules, organisms to establish hierarchy to make higher organisms like templates, pages, etc. You can combine fonts, buttons, text and link styles and combining them to make a molecule and several molecules can make an organism. They can be interactive design elements to elicit behavior from users.

We worked with the Smithsonian George Mason university. The only thing the author could control was the box they could type in. The styles were limited to bold, italics and inline images. A complete pattern library like this one for Oklahoma State University. It drives a whole range of user behaviors. It encourages messaging and uses persuasion that brings that out in users and communicate it from the author's perspective.

Atomic design breaks down content into parts that are for specific actions. We can test the components for accessibility so authors can use them in all kinds of situations and design a flow down their page. But that has a few things that have changed for CMS users in a template-based CMS. In that case, the developer builds templates, and it's not optimized for responses or customizable without a developer. If I wanted to give users something to choose from, I would've had pieces to do that. Or if I wanted to call out a deadline, and the only options I would have a paragraph breaks or things like that. An author can control the layout from within the CMS in an atomic system. It requires different skills for content authors.

You might be familiar with advanced interfaces for page building, but authors might have trouble switching and they get overwhelmed with decisions. You can pick your layout, but CMS users have to be familiar with terms and know what things might look like when they decide what their content goes in. You can get into some terminology difficulties as well. You can provide a better user experience, but it also introduces new roles for content creators to get used to. They need to get used to what patterns are called, and when to use them, as well as how they work. Many CMS users weren't trained for this. Some places pass it off to a specialist, but a lot of places don't.

A lot of content comes from staff members or admins or faculty members and it gets disseminated to people who can post it. Structured formats are not new in writing. There are press releases and academic journals. They are used to following that flow that meets the users' expectations and they can glean that info quickly. They can extract the meaning from the words quicker than a non-structured system. A pattern library breaks it down into chunks and meets the audience expectations. Like blocks on the same level, or things that look promotional.

For authors, they have to rethink how they think about flow and text. It's not a blank slate, but an intentionally crafted experience that is meant for several different environments.

The Smithsonian have content creators that need to see the patterns hiding in the text that you might get from the dean or faculty. There is an application link at the top that stands alone and there is an opportunity to use a display pattern to help that. It talks about the 3 courses you need to choose from, so someone migrating this page over would need to see these things to get it to something like this. This is the same thing. You have the apply button at the top and the 3 courses in a routing format. The text had to change a bit, but it says the same thing. It becomes a tool for writers to use. They need to have a mental model of what their pieces are to craft their text. It goes away from the prose writing technique and goes to a more interactive experience.

Sometimes content that was fine before won't fit into the new patterns. This can be difficult for pages that have a mix of routing purposes and academic content. There are a couple things to send people to in this case, so inserting the new pattern pieces can create havoc for long paragraphs. Length isn't the problem as much as it is that it's not designed to fit the same way.

Text that looks good in a text editor might look different on the page. A long word might -- this. Just a mockup but the long words you can't change can have a big impact in the pattern you have in mind. Thinking about how to make columns line up is not something that the people delivering the text have in mind. The same thing. This is a pattern from Oklahoma State University. Images can look different on a desktop or tablet. You might be able to put 3 next to each other on a desktop but it might look like a barrier on mobile and make it look like the page is ending. Tablets can be sneaky. The image at the breakpoint is bigger sometimes than a desktop site. They might have to think about how to resize or use different aspect ratios when submitting images.

Everyone has a learning curve when learning a new pattern system, so I wanted to walk through trial and error on a contact page I created for the Smithsonian Mason page. I am just trained as a writer. On my first attempt, I tried too hard to use the fancy styles. They were out of balance on the page. The social media was something new they wanted to add and take out of the menu bar, so I wanted an image teaser here, which made it look too important. I had 3 different ways to contact people and I had to delineate the choice between the 3. It's not easy to scan or fit the content you need. The mailing address isn't usually the most important thing on a content page, so it's too heavy, so I flipped it. The mailing address is at the bottom but it's too heavy. I wanted the 3 choices to stand out and the sidebar is too long. You can have trouble with that with more links in navigation, which authors don't think about.

Using bullets made better use of the space but it still looks odd. I ended up killing the green callout box and added the contact info and a new H2 at the top to define the parts of the page to give those equal weight. It meets the compliance for keeping level headers in order of hierarchy. I asked a developer how to hide the navigation menu that was redundant. This page was at root level so we got a checkbox the users can add in there. It's an option for pages like this and it's not doing a good job.

5 attempts later I placed a simple contact page that had 50 words. What we thought would be a 5-minute move overtook longer for someone that was experienced, so it can be overwhelming to someone who is new. We need to plan plenty of time for migration. They don't think about that. They think putting the content into the new system is as simple as copy paste, but it's not.

Changing to a pattern library system is something that people will have to learn how to do. Thinking about what users what to know, when it's just a [unclear] you can think about the text you want to present, but you have to start thinking about what the users want and what buttons should say. You have to think about what the user wants. You have to get rid of the layout that has to look exactly as you are asked. You have to change headers and columns and you have to make sure people have the authority to do that. You have to think of a page as a single step to a user's experience. It's not a document, but a piece that has routing choices.

There are a couple of things that we found help people when they switch. We are thinking about content as text, but it's about thinking of the people and processes behind them, as well as the standards they have to meet, which is new for some colleges and institutions.

You are not going to need to do these processes with everything on the site, but you have to take a close look at some, whether they belong to multiple groups or if you have the autonomy of your website. These pages usually have internal and user goals in the same spot. Things that mix those and things the user looks for and what we want to say for them. People that care about that content and finding how they feel. If you identify the pages and you find out who you need to bring around the table and you find out people feel left out, you might have an iceberg under the ocean situation.

These pages to focus on are usually academic program pages, financial aid, housing, career info, etc. Students are looking for those and filling out those forms. It’s not always the most glamorous pages. The home and about page might be gorgeous but the undergraduate pages might get more usability. News, directory profiles and destination profiles, things where you know the text won't change or promotional pieces.

Once you identify the most important ones is to look at them one by one and analyze the goal. We work with 8-10 on each site to meet users' goals. What is its job? What do users want to do on this page? They might be wanting something we aren't ready for them to do it yet. Think about what they know and need to know on the journey and where it should be. It's important to think about what a page's content should ideally be and not what's on the page now. In this example, this Emory school of Medicine we marked this up as things we would bring forward, but there might be things that aren't here. That's a good thing to ask stakeholders.

We do core model exercises. The creator did this exercise and we have used it a lot with content production teams to think through goals. Not just for writers, but care about what goes on the page. It helps the internal goals and user tasks. You give them a box to fill for users.

They might not think other pages besides the homepage is important, but they don't think about people that googled it and came into it with no context. You need places to send people and put it in the larger site flow. The core content is like the box with the blinking cursor in it. Giving them something that floats around in the background and help them think through it is what we do. Once you have the page goals planned out for the main pages, you need to work through those pages to get their ideal content into a good user experience. This activity is not just for writers or designers, but it's the act of cutting things up and saying what goes into each pattern. It helps stakeholders visualize it in a way they aren't used to. It gives you a break as a person that might have to change a word or headline when they can see the act would be like.

We have another exercise we do. There is a description at the end of the slides so you can see them and use them with your teams. This exercise we do with content production teams and subject matter experts. There’re higher level faculty members that don't think about this stuff. We show them wireframes of pattern designs like feature boxes. It's a matter of what's yours. We do groups of 2 or 3 and they can do different versions of a page. Everyone can do the admissions page and compare students to faculty to see how people do it differently. We do different pages for time’s sake a lot. They have to choose pieces and we cut them apart. Multiple people can make quick work of cutting it apart. If they take the core model exercise, they can use it as a reference. They can take that content and write it in there and cut it up. It doesn't have to be real, but they can put words for what its' going to be and make a prototype of a webpage. You can even use a paper prototype with users to see how they interact.

In person workshops aren't an option now, so we have worked with a company and this is their pattern library. We used Miro which is a whiteboard tool. We chopped the pieces up and asked them to take the pages they were thinking about and the plans for the template and copy and drag them to the bottom part and still move things around. We like the paper format for this because it brings out conversations and it's an impermanent solution. People are sketching. The biggest thing is to get people to think in chunks and matching it in the CMS.

After you thought through those pages and see how they will change, and you know what you are doing, you can use some of the new good will you have built and make standards. We find that most the places people need to add are usage component guidelines. Once you work with the components with people, you get an idea for what people want to use and how. Emory had routing blocks at the bottom and people didn't have images, so they were trying to use them on parts of the site that didn't need brought colors are routing. So, you can give them guidelines using workflows, etc.

The training component is part of the experience as well. It is an organizational change that will take time, so building relationships is important. It's a brain shift that they need to make from thinking of things they were thinking about into chunking things up. You do that by practicing. Giving them practice and giving them frame of mind to think about things. Pattern library formats comes with these skill requirements to get it right. It will take a big shift that is hidden. It takes time and commitment, but it is possible to get everyone on board. It just takes planning and expectation management.

These slides will be on the talk page on the website. It shows the examples and paper prototyping seminars if you are interested. That's all I have. I can take questions.

Room Host: We do have a few questions that came in. And 5 minutes left. Someone asked, "do you or did you use analytics to define key pages and come up with internal and user goals?"

Presenter: Yes, we do use that. Especially when I was talking about financial aid or other things faculty might not be excited about. Analytics tell you the what but not the why. You learn that a certain percentage of searches are about a housing page, so you need to think about that for example. Analytics help bring those ideas to the top. The page with the highest views isn’t always the ones people are looking for. So, analytics is just the what and not the why. If you are changing your information, you need to drive the users where you want them. You need to think about how people get to a page and what they know when they get there.

Room Host: Do you implement AB testing on critical elements. Home, contact pages, etc.?

Presenter: We will do that sometimes to settle fights! An ecommerce site might do it to decide if a button should be blue or red, but the design system is not as rigid. You need to think about the text on the buttons, so it can be calls to action, but also, we have done them for navigation. We have had a group that was launching a campaign website and they wanted to name the button after the branded name of the campaign. They all have a name and logo, so they wanted that, but users weren't getting the idea. They wanted to add to donate to the campaign, but it looked different. We can do tree tests to ask what they think goes under here or where they would expect something to show and they will tell you. AB and tree testing can be helpful but it's usually about more words and patterns.

Room Host: At our school we are migrating to WordPress. We chose to build the pages using atomic design and used pattern lab. Are you using a platform for the design templates you create?

Presenter: Yes, we do exactly that. We were working in pattern lab, that's the Brad Frost one. We have moved to fractal. Our developers could tell you the reasons, but we like that fractal can -- I can organize that with style guides. We can put the usage guidelines. Fractal let us add front matter and links to accessibility guidelines so we could control the organization of those better. I haven't worked with pattern lab in a few months. We do use fractal and Twig. Our developer would love to tell you about the workflow.

Room Host: Awesome. With that said, we are at perfect timing. Thank you, Rachel!