 Let's get going. So today we're going to quickly cover defining content first design and then we're going to show you what content first design is through a few example projects we have on our learn site and then we're going to talk about starting a project content first. This content for this webinar is based off of some articles from again our learn site the balsamic wire framing academy. So you can check those out we will link to all of the content. On the webinar page wants to be released and so here's more we do these things called process behind interviews I recommend you checking them out you'll get some previews today. So what does content first design mean? It's actually really simple it's the content determines the layout or the design so I'll have Amelia Barnes one of the people I interviewed explain it because she does it much better than I do. You know you can explain it really simply content first design is you decide the content before you decide the design right and I think the simplest way to make a case for it is you just have to know what you want to say first before you decide how to say it so you can't say oh I know my book should have an orange cover until you know what your book is about and it's the same for our website right you can't say oh we're gonna put a big picture a big hero image because that's what's trendy right now well I mean maybe that works but maybe it doesn't work too you have to know what it is that you want to convey to people first and then everything else falls around it and that's that's the basic idea of content first design. I love that what I love the most is that she talks about what's trendy right now and I think that's really important to understand that your content you need to think past trends when you're designing something and you need to think about what you're trying to say and who you're trying to say it to first and then you can layer on your branding and your visual design so I thought that was great. One thing I wanted to call out is I feel like content design is having this moment right now and there's a lot of people working on content there's content designers it's a much more popular job but this idea that content first has been around for a very long time. Jeffrey Zeldman's tweet is from 2008 and I think it's just a reminder that this has been a thought for a long time and that writing and how you say what you want to say is more important than how you visually show it or you should consider it first because it's it's really important so what I want to do is design in the absence of content is not designs decoration I wanted to throw a visual example of that so I took a screen grab of YouTube you can tell I have younger kids because there's lots of you know YouTube YouTuber videos on it but I think this is a great example of showing content first and if you remove all the text you can still see it but it's a lot different so a lot of the screen is made up of content right and YouTube is actually a really interesting example because it's pretty well designed and you can still guide yourself around YouTube without words because their their text I'm sorry their icons and their images do a really good job but icons and images are content as well so if you remove all that it's really just a blank canvas and I think what I like in my mind what I think about is when we start a project because it's digital and it needs an engineer to build it it needs someone with a lot of technical skills to make it a real product we sort of forget you know that it has to be simple we need to start first with what we're trying to say before we think about any of that other stuff so we really visualize building things as this really complicated process and I intentionally left the iStock water mark on it because I thought it was funny just adds to the complexity but we really want to show this simplicity of we want it to make it feel like it you know an infant's toy or a toddler toy and that's through content so what do we mean by the content term determines the design is we start and we really just focus on what images and words do we need to convey our message and then after we decide on that we can work on tons of different types of layouts that fit that content so if you start a project content first and you feel like you have a lot to say about your product that's fine and write it all out gather all the images really work on that content and then start designing it and you know like here for content one and design one maybe it's got a really full website then and you have a lot of content there's a lot of stuff there maybe you don't want that what is great about starting content first is you can go back and edit down all of that content you already built you have content to here and then design number two and it's a much more simple minimalist website that they're probably going to be easier to use but if you didn't start content first you may be trying to cram content one into design two and it's just not going to work and it's going to be time consuming and kind of difficult all right so that's my little spiel about what content design is let's show some examples so we're going to kick it off by showing what I call system-based design versus people-based design and this is the project that Emily Barnes presented in her process interview where she worked for the United States government redesigning the finance campaign finance website for the federal election commission and what they started off with was a design that was focused on systems and what they ended up with through content first design was something focused on how people think about it so here's Emily so back when I worked for the government I worked on the digital transformation for the federal election commission which is the group that tracks how all money is raised and spent in federal elections so if you wanted to look up you know who donated to Hillary Clinton or how much money she raised like that is the organization that knows the answer to that and they have been doing open data since they were founded in the 70s which means that their website was a really early government website which also means that it is pretty outdated when we got to it and the way their content was organized was based on form so if you wanted to know how much money Hillary raised you needed to know which form that got reported on to the fec and they all had like numbers and nobody understood um how to find that information so even though the website content was organized in a way that completely made sense to the organization it was okay all of the like form c information is on the form c section there was no way to find out the information in a way that humans understood it which was what is Hillary Clinton doing um so when we approached that website you know we we've turned all the data into an api that was the most important thing right so we could access it in different ways at different times but we organized the content around the way people understood the content right so you could find things based on the candidate you were looking for or the person who donated that you wanted to find out what information they were doing and by starting with the content rather than the organization um or rather than our assumptions about what the content should be it made the website something that people could actually use i really love that it's i think it's such a great example and i think a lot of people um maybe here but i know a lot of people work in big large enterprise organizations where the design is determined by how the organization thinks about its own data in its own content um and if you come at it from a content first plus a user perspective a people perspective you're going to have a much better experience so i wanted to show a few screenshots from the original design they started with and if i wanted to look up this video the interview is before the last presidential election and so it was older candidates but you know if you want to look up what a specific candidate is doing now you are using the site you'd have to go to data catalog here and then you'd have to go into candidate disbursements and enter their name and then you get a listing you'd have to know all that stuff you'd have to really play around with the site and then through the content first and sort of people first lens they redesigned it to be like this and this is what's currently um what their site is like now so that using a content first design using a people first design they understood people want to either look up candidates and how much they're making or contributions from specific people and they broke it up they made it much easier to use and then they also redesigned um what a candidate's page looks like so that you can easily search their data they made it way that we would expect it to work so and if you're working in a large organization remember that your mental model of your data is probably not going to match what your user's mental model is so if you want to start content first or work content first you have to understand the organization system and also understand your customer's perspective and then redesign it so the content and design is focused on how the user is expected to to present it all right let's talk about redesigning an application this is a more recent interview that I did with a content designer from Mozilla who worked on the totally new redesigned UI refresh of the Firefox browser um and it's an awesome project and I'll have Betsy kick it off so the project is based on read the project example is based on the application menu that she redesigned with her team and I'll have her talk about how she started the project so our first kind of step is to gather data to make some decisions we know what our menu is and I kind of reference this early in the interview of how we want to kind of go on that detective finding mission and start gathering some data see if previous user research has been conducted talk to people the organization who are really familiar with this this feature or aspects of this feature that we can use to inform our decisions so I love that um as you can tell from pretty much any design project it always starts with research and content design is no different she supplied us with this great image and it kind of showed off what they learned from their you know research background context building earlier in her interview she talks about leveraging institutional knowledge and trying to understand why it is the way it is now so that you can have a better understanding of what why what was decided on and what you can do to move forward um this next clip talks about their content first approach and how they move forward after they gain gain all that knowledge as far as the content design process what is the first thing that we do um if you have worked with a content designer before you will not be surprised to learn that we love a good table we love a good spreadsheet Billy's laughing well I might put a question on you Billy why do you think that is I think it's just easy to organize information yeah we do love a good table and although the tables are the use the use of them is like you said to organize information I alluded to earlier how we had this menu that had a lot of different items in different places where should we put things where goes what where do things go um and we actually got this really good guidance from I'm going to do another shout out here to um our senior design manager Michelle who has been in the content strategy field much longer than I have and when you are looking at a daunting task in front of you how am I going to organize all this content where do things go I know I know that it isn't right I don't know how to fix it instead of trying to fix it she advised that we take a step back and just start grouping like items together it's simple like anyone can do that right and it kind of helps you take some baby steps into how you're going to solve it eventually so the table yes it could be overwhelming and depending on the size of the project sometimes they do get really big and these spreadsheets have multiple tabs and oh my gosh um but if you can start organizing the information you can start thinking through it and you can start getting ready to actually write we organize these what we call semantic groupings it's a little bit of jargon insider content lingo but essentially just means putting things that are similar together and just by grouping those in this table it started to help us see not even necessarily what we were going to keep or what we were going to move or what we were going to cut but what went with what and so that helped us move forward and how we were going to make decisions about how we were going to organize this menu I love that so I think that's such a great takeaway is that if you feel like doing this or if you're starting your your project content first you're doing a content audit the first thing you can do is take everything and try to group it to what makes sense logically you know as UX designers we do this a lot in card sorting it's the same type of thing you can do this with your users with whoever you know is the end user or people that work in your in your company and it could be something you do together but trying to understand what goes with what is a big will be a big help when you're trying to do a new design because you're already organizing it in a way that makes more sense so after semantic groupings this is what they work on. The design team at Firefox have started to incorporate wireframing in our process for several reasons and when I talk about wireframes I deliberately chose this screen to show you how low fidelity it is and how just kind of basic it is so we actually started doing wireframes in google slides we call them wire slides and this is literally just drawing boxes it is drawing rectangles lines so it wasn't too difficult nothing too fancy what wireframing helps us do is it helps us kind of move beyond that scary table stage and start organizing the information in the appropriate hierarchy and it's really low barrier to entry it's really easy to just start editing to start putting words in and to start thinking through how you're going to put you know where in this menu are we going to put certain items what we have found is that this really low fidelity wireframe process is also an excellent way to start getting alignment and to start bringing other people into your process so there's questions that come up a lot of when do you do stakeholder reviews how do you make sure that people are aligned in my response to that is as often and early as possible and if you can use a wireframe to align your team you're going to the next phases in visual design is is just going to go so much more smoothly because you already have the content set I love it I feel like she's promoting the process of wireframings for us because that's exactly how we feel here at balsamic also what I love is that this simple idea of using Google slides to make really simple wireframes that can be easily shared I love it her whole the way that she talked about it their whole process of you know doing some background research leveraging the institutional knowledge taking and all the data and then trying to group like things and then turning those into visual artifacts to then share with people and to get feedback I think it's a great process I did try to make a content or take data from a website and turn it into a excel sheet type image and this is what I came up with it's not great but you get the point all right let's move on to our next project redesigning a feature I really love this because it's just another approach to considering content first and I think this is something that will resonate with a lot of you know entrepreneurs and solopreneurs who work on these smaller projects so let's I'll do a little background this is about a product called lead honestly in an interview with the designer and the creator of it she how and how he is redesigning a specific feature and he will let us he'll talk about it there's a process of adding an employee to the product and we've gotten a lot of questions and feedback just of you know why is certain information asked why is this information not asked what's the experience for an employee I can't see that how do I know what that means and kind of just like getting an understanding like what all that is and so for for a while I just started engaging people and asking them what would you expect what would you like what's the optionality you'd be interested in trying to get a sense of like what that is and I've since started just redesigning that process of how to add an employee and yeah it also like it started in the simplest like like I was trying to like go like low fidelity to high fidelity in this process and I'd say in this scenario I started at like no fidelity like I mean I love that I just like it was literally all copy like I I just created a Google doc and was like let me write the copy for the interface let me and like let me stage it out like because there's basically there's three steps in a completion state right so it's like step one like we need to know the employee's name and email address great we got that cool and like in that there's also the option like do you want to send them a welcome email to like to lead honestly or not right because some people don't want to and they want to be able to invite their team members themselves and kind of engage a different way so I just like wrote out what that would look like step two is a little more comprehensive because it starts to say like all right one like when do you want to meet how often do you want to meet do you want to install like a Google calendar integration to put this on your calendar and if so what time do you want to meet what's the duration of the meeting right it's like that and then the last part is what playbook do you want what type of questions do you want to ask this team member there's a lot because then it's like well what's a playbook and what are the types of playbooks and what are sample questions from them things like that and I literally just put it on a google doc and went to those customers who had had like questions and said like give me feedback like what do you think I'm like literally hadn't even put like pencil to paper on any of it and just iterated on the copy to try and make it make more sense I really like that so here's the example of the word doc that he created and what I love is that he got like he said it sounded like a very complicated set of you know lots of different options lots of things that can happen lots of choices you have in the experience and all he did was make a google doc and sort of mimic very crudely what an interface would look like and then sent it to the same people that were asking him questions and and providing feedback to his product and said like is this better to does this make more sense and so he spent a lot of time just iterating in google docs and then went right to code and redesign the interface because he already had the product there he just needed to update it because he needed to change it based off of what people were needing from him and I thought it was such a really interesting process during his interview I think he had another great quote that I liked is that he always starts with words even if he's just sketching because you know content first the content really is going to influence the design and I think this is a really cool way that you can approach content first especially if you're tech savvy so you know take customer feedback and then make copy iterations with customers it works great if you have a mature product and you're getting that customer feedback and you have the ability to make the changes to the product and I think it's an awesome way to do this no fidelity design or content first design so here's another image of his product if you're interested I like to kind of contextualize what he's building so that was it for redesigns now let's talk about how you can start content first for a new project I think starting content first for a new project is similar to starting it just as any other project you want to start with some research some background information building that context and then once you start thinking about it you need to do stuff like site maps and user flows you need to know exactly what pages you want on your site you can debate this with your team and I'll come up with what pages do we need and then from there you know what content are we going to need if it's more of an app app based product or something that you need to do things on and not just sort of learn things you can build you know user flows this is an example that we have on our wireframes but if I'm going to you know pretend this is Instagram and I'm designing the change profile feature of my site I need to know all of those places that are going to need micro copy I want to make sure that the words I'm telling them throughout the experience of this process are going to help them along and be the best you know copy they can be so I can start here I can say I have seven different interactions I'm going to need success language I'm going to need error language I'm going to need confirmation language I want all of that to fit within our brand within our voice and be clear to the user the next thing you can do is something called a competitive analysis so really try to understand the what's going on and you know the field that you want to play in let's say what are other businesses doing already what messages there are they trying to communicate I actually made this Google sheets that Google sheet template that you can download in the content first article and it just a really simple way to capture what's going on what values are they communicating how are they writing like what ways are they expressing themselves what are their key differentiators or their features that they they promote and who's their audience who are they talking to can you really understand by how they're you know their language who's their audience is that match your audience this is another great way to do this I apologize for not having the supporting image of where I text where I got it from I'm going to add that before I make this a PDF for you guys but I thought this was great too this is another great easy way to do a competitive analysis so say I'm in I'm kayak here and I want to see what the other groups of business and regular travel companies are doing but I'm going to talk about what features they have but also add how I feel about them and that'll help me build sort of my positioning about how I want to build how I want to produce my work and how I want to write about it and you know if I understand that I don't like the way certain people talk about it will help me figure out ways I can talk about it better so the next thing you can do and I think this works really great with marketing based websites and like homepages and landing pages is something called content modeling I did not add a screenshot here but we have this as an article on our learn site and I think it's fantastic you should check it out what I really like about content modeling is it really reminds me of the wire framing process with visual design so content modeling is you start with really really broad topics and then you start filling in the fidelity of it as you understand it more so another great thing about content modeling is you can kind of think of it as like a brainstorming workshop or like a design a mini design sprint and you can get together with your whole team and kick it off so what you do is you start out by discussing the goals of the site or the project you know what are you trying what do you want the audience to come away with what are the must-haves from the business perspective and then what's the priorities and communicating all this to them what's the order of importance so you can use a whiteboard you can use post-it notes and to start writing out what do you want people to know what's the most important things and then after you have all these major content blocks you think need to be on your site organize them how you think they'll flow on the page but the next thing you should do and you shouldn't forget about this is try to then understand what your customer's perspective is what do they need to know what's going to help them move forward what's going to benefit them what is their perspective I like using these illustrations that we have on our learn site so I just added in there and that represents this so what you do is you take your idea of how the page should flow and then try to match up what you think the customer's perspective is side note you can also totally talk to your customers and get their perspective about what they want or what they need and then you you know just like try to match them up to what content blocks you have if you're starting to see information that is you think is more important to the customer move those blocks higher up on the page and then the next step is really simple you can block out the content in wireframes in whatever fidelity you want you know each of these is a wireframe and you can start writing more and more content if you're not comfortable um writing uh if you're not comfortable in the wireframing phase and you work better in like you know the google doc phase you can totally do that too take all those content blocks and start writing out every piece of content that you have on your page and then you can put a minute at the wireframe and that's all I have you know I just realized I did not have a recap slide so sorry but um that's it