Think Like a Developer to Design Better Structured Content
Lindsey Gates-Markel presented “Think Like a Developer to Design Better Structured Content” at UX Camp Winter 2021. Enjoy!
Senior Content Strategist, Pixo
Lindsey leads content strategy at Pixo, working with teams of clients, designers, and developers to explore the space between what exists and what is possible. She loves dumb questions and metadata.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Oh, I hope so. Okay, I can see the Slack, so if you have any major issues… Let me know in the slack. Thank you to Nicole. My name is Bama, my pronouns are she, her. And you have arrived at my dog for UX camp. I think like a developer to design better structured content.
Thank you very much for being here. I really appreciate it. Thanks to rust and the Chicago camp team, are making this possible into my fellow presenter, I’m really honored. Happy teacher today. Oh, and hi to anyone watching this in the future via video, I really hope it’s cool there.
Right. In this talk today, this is all about creating a shared understanding, so I’m gonna spend a little bit of time introducing myself and my perspective and who I think you are, and then going over some terms, I’m actually gonna turn sick off for a second. Contending plate was distracting me though, I love her. Ginger some terms today to make sure we’re the same page and make sure I don’t inadvertently move in one behind, I’m gonna go over a case study, that’s the framework for the sole top. I’m gonna spend a little bit of time, quite a bit of time on user stories as a basis for collaboration among our team, especially with developers, perhaps we’re gonna dip our baby toe into content modeling, I think Content modeling is a really useful skill. It was a huge step up for me in my work when I learned how to do that, but it also took 10 hours of intense work shopping, so quick and dirty Content modeling is habitat for me, and then at the end, I’ll just mention some mindset shift if frankly, tools and techniques are just a little too much right now in which case to all get it.
I’m a content strategist, I’ve been a content credit PICO in Urbana, Illinois for almost six years now. Pica, a consultancy of about 25 people, so as a consultant, a lot of my job in tales communicating complex ideas or at least unfamiliar ideas, so people who don’t work in the same space that I work in or that we work in, the text base, I’m most often work on websites in the higher ed space, especially the college level, it’s my fried and mother, and I really need a new head shot, I was watching all the head shots cycle through them between talk today. I was like, I look… Well, I put on the Marne business sweater to give you the impression that I am a business woman, but then there was a lot of talk about business roads in presenter Slack, not to give you filipescu, I can definitely contribute to that conversation, so… There we go, a little bit of business robe for you. And now we can begin. So questions I’m often trying to answer in my work as a content strategist and consultant are number one, of course, what content will best serve the site’s users, and that includes a lot where the users or their needs, how do we find out there? What is the organization trying to cross all of this.
And then what components image by Bester vet content of the structured content. Particular structured content of this talk, I cool that I say to her.
I assume that you are someone who works with developers in some capacity, maybe it’s not as collaborative as you like, but some capacity, you work with developers on a team, you design new stuff, you probably I think focus more on the front end of a website than the back end, and if you’re like… Those are two of the terms I’m gonna talk about. And obviously, you care about doing good work because you’re here at USC, and that’s so cool. So I also want to acknowledge that you are probably just a person trying to exist in the… Now that we are in, maybe the now of this week is a little bit less trestle in the… Now, the last week, maybe not, I don’t know, but I wanna acknowledge how absurd and has occasionally felt to be prepping a talk through all of us saying like, maybe you could do more and work a little bit better at your job.
So I just wanna want to encourage you to take what you need from this talk and leave the rest, some of this… Maybe it’ll take them percolating and years down the road, you’ll be like, Oh, I think I can use that thing I learned, and that’s also the point of me listing just a couple of mindset this at the end anyway. I see you, and I care for you.
Terms that I will probably use interchangeably back-end, when I say back-end, the author interface, offer UI, the admin, this is the area of the site where authors typically log in and add and edit content, the part that most people don’t see on the website. Therefore, the front end is the visually designed part, it’s like the website, what most people think of a website, when you go to the URL here at the front-end, developers, I might say engineers, we use engineers at 60… I’m gonna try to say developers since it’s in the title of the top, the folks who write the code, programmers have Talbot a case study today.
So the case study is a new website for a school of architecture, we have just finished the discovery phase, what we hold the discovery phase at pixel and we’re moving into design, there aren’t hard lines between these phases, of course, we try to be as collaborative as possible, throughout them and make them a little bit fluid, but in general, we’re wrapping up what we have learned phase or we’re moving into the… What are we gonna build Payson
Case? I imagine we all define this a little bit differently, so in this case, what we did in Discovery entails a lot of this, there’s a content inventory and an audit to get at what are the important files on the site page, the pavers, and what’s the quality of them.
There’s a peer site review where the client would have given up a few peer organizations or schools, maybe some competitors to look at, so that I could look at their sites and maybe you want a few good ideas, see just what is this space like schools of architecture oral interviews. Lots of interviews, interviews are somehow even cooler now in the remote time because they used to be phone calls and now there like this, I go, people’s faces and I’m making friends.
In my mind, so a lot of interviews with current students of all types, alumni, faculty, staff people who touch Leaside, ’cause we’ve not such a website to draw out stories about their interactions, their perspectives and experiences with the school and weekly work work sessions with the client as well.
So if you do this kind of work with you, I think you probably do, because you’re here, we know that the interviews are really the heart of the… Every phase learning, we see my experience by Lam shot talking to people, drawing up stories, like I said, and in these interviews we’re really not focusing on the website at the end, I like to give a five minute… At the last five minutes, I’m like, and now, you have any… Even for the website, do you have any thoughts on the website, but we’re not asking the people that we interview to provide solutions for the website because that’s not their back, that’s supposed to be my back, so we’re asking for these stories and very human holistic… There’s a lot of words that really the business robe enhances all those words, a very holistic view of the school and what it needs to express and what its users need.
So what we’ve gotten from those tasks are priority content in general, who the audiences are and what their highest needs are for the site.
Eight to 10 goals for the website overall, and then a bunch of these crunching human detail that I have on the slide that don’t fit into the above categories, but actually I think they do probably fit into all of the above categories and more just… These things that are rattling around in my head. Seller, moving into the design phase that I can’t talk to see about commit interviews and that same eleventh.
So this is what we’re really focusing on today. I think this is sort of the heart of UX and trying to create a good user experience. Right, so of those two questions that I focus on, typically it’s the second one that we’re moving into with the design face, what are the components and the page types that will best or the content that we need to express on the site… A structure content, baby. Structured content, when I say structure content, I mean page types or post types and components, page type, a replicable piece of content on the site that is typically a whole page, faculty profile is a common example of the news post, maybe an event, you click to add on the back end, add a new faculty profile and then it… And you get a whole form with all the fields you need for that page Pollitt publish. Great, hopefully, components are uses blocks that you used to build custom pages on the back end at a text block had an image back at a video block, shuffle them around, and each of them comes with their own set of field as well, anything like square space, any kind of system like that uses component blocks, so you’re familiar with this user stories, so I wanna make sure I…
So I’m usually the only UX or content person on a project like this, and the only one who… I will have been the one who led the discovery, and now I’m gonna be the one who’s leading the wire framing and the beginning of designing the pieces that we’re going to build.
And I often feel like an increasingly… As I get older, I’m not actually 12 years old or whatever, as my Fisher implied, the longer I go in this kind of work, the more I’m like, I cannot be the only person doing this, I need input from the entire team. I don’t know what all the possibilities are in. It’s not that controversial of the concept, we need multiple brands on this, or at least I need someone or bounce ideas off of.
So I don’t think we should restrict our work to what only I can conceive of, like Please don’t put that on me, so… And don’t put that on the work… So the question I’m asking is, How can I share what I know for those crunching human details in a way that empowers the rest of the team to be able to contribute… So here’s an example of a need that became evident in the discovery phase, the School of Architecture needs a way to showcase faculty and student work.
I know this because they told me. So I think this is something that would have come out really early and discover when we start talking to faculty and staff or they’re like, We don’t have a way to do this, can we please put our work on the site in a way that makes sense? They can add images, they can add text that they don’t have a structured way to do it, that is really customized for them, for their work, some notes that came through from Discovery that feel really connected to this and urban obvious way, perspective. Graduate students wanna see faculty work, when a grad student applying to any program, probably they’re looking for what kind of research and what kind of work faculty does, so they can see if they’re gonna get support on their topic or their niche or whatever it is. And we know that on the website, they’ll wanna start sharing alumni work also in the future, so this is something that has a long-term effect, is something that they’ll need for a while.
And I have this contextual knowledge, again, crunchy rattling around. It doesn’t really fit into a wire frame, but I’m just thinking about it and it feels relevant from how that their programs are now focused on these program areas, they have five program areas, faculty specialize in them, students some sort of major in them, especially send them… And they want this to be really prominent on the site to reflect the importance in the program, and also people often don’t really know what it means to study architecture, a high school student doesn’t know what it means to study architect or they might be like buildings, but they don’t know what it would mean to be an architecture student, so that sort of everything we’re doing for the site.
Again, How can I share what I know in a way that empowers the rest of the team to contribute… The super Mojo is here to remind me that I have sort of a mostly big metaphor about superstition, this is like as a group, our team, we need to create a delicious soup, I’ve gone out and talked to all the diners, and I know their allergies and their preferences and I can come back to you and say, Okay, we need to check, you need to take… We salary… We don’t want, I don’t know, Luton or some other type of thing, but I don’t wanna be the one who writes the recipe, I want to care about all this… You’ve had that… We put this description, all the sops that you’ve had that like you put this description that we wanna avoid… I want the input of the entire team as possible, so I could send them my 15-page PDF that we give the client, and if the client won’t read, I could trap everyone in a room until I’ve conveyed every nuance of all of the things in my brain. I can talk about this because I have done them both, but these aren’t great learning sales for most people, this doesn’t work, so I pause it at a user story that help…
A user story, if you’re familiar with user stories, I’m guessing that you use them maybe as part of an actual framework, and that’s great. And we love this. I don’t know that what I’m presenting here today is really part of an Agile framework is about user stories, maybe it is, but I hope that it’ll help you collaborate more and maybe move faster in the way that Atwood… So typically, when I’ve written user stories, it’s to describe the functionality of something that’s already designed, so we have a wire frame, we have probably a design mock-up, we work together to do that, and now we’re saying, okay, now let’s say what all these… So, but there’s no rule that says that you can’t write user stories in vary in detail, Brier degree the detail. So I’m gonna walk you through writing user stories to define and share what you know without finding the solution yet, and Billy’s talk earlier, he talked about the divergent… Divergent thinking versus convergent thinking. Are we gathering ideas? Are we focusing right now, we’re gathering IDEO, not familiar with user stories, it’s really simple, it’s just a template that’s here on the screen as a member of some kind of group I need or want to…
Something needs to happen, so that something else I will achieve something or reach the goal that I’m trying to reach.
So for perspective, graduate students want to be faculty, research takes a letter.
Duarte student. I need to see you what research topics and for faculty members.
So since we’re trying to gather ideas for this work post, I did make a little bit of connection here and just pull the slightest bit of critical thinking out what is relevant about this to the work post. I think it’s about seeing the research topics and fine, and seeing if they will find support for their own research, pricing those research topics on the site.
The nugget to a user story, As a prospective graduate student, I need to see what research topics interest faculty members, so that I can find support for my own research.
Great, please notice that the user story is not as a perspective graduate student, I need to see false RC presented in now 1 to 10 images, maybe they’re in a grid format, these are highlighted with these orders competent the school thing, I don’t know that that… Asti trying to help you, and I’m trying to help you, help me make this deprecation, do this with something even bigger, people don’t know what architecture is, it’s the undergrads that are confused about it, so if they see examples of faculty and student work, they can just better understand what it means to study this, right. So when to write them, any time that you need to clarify, need the requirements for the work, I think they’re useful to share with the team because of the thing I’m saying that they don’t necessarily have to define the solution, they’re just giving the criteria and anytime while collaborating with visual designers and for developers, this is not restricted to this developer, so I think gathering these user stories together based on what you know… I don’t have a set number of things. I’m not sure enough that it’s not overwhelming, and hosts a brain storming and sketching session also, sorry if you were in a Billy stock, but having people set, anyone can wire frame, anyone can draw a solution to this, and I think sharing the knowledge in this way and create sort of a, I say safe space to do, to open up the floor with some user stories really quick.
I think you can also do this for site authors, we’re focusing on site visitors earlier, but there’s also users, race per site authors, as the head of a program or department, I need to be able to edit page is relevant to my department so that the admissions in fermenting can stay up to date.
That’s important, we want you to be able to do that. So that’s something that’s a permission issue, right, that I could pass to developer and say, You need to do this for this person, clarifying who and why to keep the conversation as human as the work should be. I wrote persona trashing. I don’t really want a trash persona, but I think persona can be a little bit dangerous, I think they can be a little bit of a slippery slope. I have an MFA in fiction writing to persona… Maybe I’m just speaking for myself, they kind of invite embellishments.
So I think the user stories can create a similar human touch of why, why is it important and who is this important for…
And bringing users need to the table, I’m gonna keep hammering at home, creating a shared understanding of what you define the need and what is undefined, the solution… You can define that together. Okay, real quick, I wanna go back to this persona thing about the why, it’s really important to remember, I think in any intense where you’re defining a user’s whole, I think it’s a red flag if you’re defining the why or the goal of a user, restricted to the website that you’re building, or whatever the digital product is, they are building, it’s really solid this to sit Treader story that’s like, as a prospective grad student, I wanna see examples of faculty work on the site so that I can enjoy the faculty work on this wonderful website. People are trying to make decisions about their real lives for the things that we’re building, that to me is why this whole field is important and why the work we do matters, and so make that reason or the goal, the last part of the user story, please try to stretch it outside of the bounds of the website, what’s the decision for the life of the point that this person’s on in their life that they’re trying to achieve? It doesn’t have to be momentous.
Probably not about the content. Modeling, my favorite thing. Okay, we’re talking about it in dirty content modeling. It does, we need to talk about the author interface, how can we use what we know to help improve the author interface, not just the front of…
We have the wire frame for our work post type or it is… Look at it, beautiful. I could send this wireframe to the developers and say, through this task, this is a comment that a real developer EA sent to me through the staff, complete this, please. For someone who actually have to build this as the person who’s probably gonna be the last one to touch this product, it raises a lot of questions, there’s a lot of unknowns in this, what does this link to this thing required human, what kind of options here… And if we sent the front-end design for the record, they would also still have this question, the reason tablespoon has to make these decisions on black period, if you don’t make them as a person who has information that could contribute to this, a developer will make them and I am not saying that that is good or bad in any sense necessarily, but probably you are a better person to have to put in… I like to have input and to have it say about this, if you don’t do it, a developer will make these decisions or at the 11th hour when they’re literally writing code and being like, Okay, we’re gonna push this tomorrow, they’ll be pinging you on sacking, be doing something else, OBE like, I don’t know, eight.
And then you’re making decisions take on nothing or I guess the third option is we could all more it entirely and it which… Sure. Oh, this is my emoji impression of sending a wire frame to a developer and telling them to develop the back-end, how can I share what I know in a way that Empower side authors to create content like a really rich… Good back end. I think your content model can help. So this is in the background here, you see an example of content model capital to papal, this is a spreadsheet, this is a giant, beautiful spreadsheet that it has all this information and it… That’s not what we’re talking about today. Please take a workshop, Takeda class on this. O-U-X is also really good at or thinking about the type of information metadata and one goes together, it’s official definition, it documents the components and the content types, page types and metadata that defines them and the relationships with team, but Lindsay says you can start with just a text tetouan start with the bullet to lens.
When we have the wire frame, we know roughly what the pieces of the structure content will be, have that wire frame, we see titles, photos, whatever we have opinions about the content based on what we know that will serve to structure best. And as I mentioned, we have a wireframe for visual representation, so to begin, you can think about answering two questions on how would you label this eerie author and what kind of data might this be… How would you label this first side author. So this is the very top of the work post wire frame, this hopefully it’s not too much you can buy the tower asking a side author to provide content for these… What would I call them?
Like really, it’s almost in the wire frame, I would call that a project titled, this is a list of creators, I know that there might be one, that might be several… Featured image is gonna be at the top of the page, each image gets opex or accessibility, maybe we’ll throw a caption on there or not.
And what kind of data is… This might be really unfamiliar for some of you to some common data types, in case it’s unfamiliar, are plain text rich text, which last formatting options on old metallic, maybe a link in Texan, an image in images, they’re friends, URL, IOR.
These are examples of data types that could go into a content model, there are many more, of course, but these are the foundational ones, I would say plan text or rich text, like I said, Rich… Next formatting options. So for this chunk, I would say project title, this is Plain tax creators of plain text, so none of these references anything else on the site, this is all… It goes into the form, it gets published on the front-end, banovina, we’re making a work post type.
So if you share this wire frame and your quick and very content model with developers, again, you may have to trap them in a room, a virtual room for this well, worth it. At the beginning of designing, before anyone’s building anything necessarily, show this, ask these questions and… Or the conversation with a little more shared understanding, this is essentially a gut check, like this is what I’m thinking, does this seem like it’s in scope, what jumps out at you as a developer or someone who has built things like this maybe in the past, what don’t I know that could improve this again, am I not thinking of something just because I don’t know to think of something, and maybe what are some ways that we could add to this in the future, who was pricing some enhancement based on animations, like pulling ideas from the room on how we can enhance this in the future, once it… But I think we can avoid, probably not a void, but at least experience less, go create this way, a little of ambiguity books within the team and on the back end making the other interface and frankly pain and suffering.
That’s what I want for you.
Less of it as a investing for you and only… Maybe you’re like in… Thank you. I would rather lay on my couch and watch my day fiance, in which case I say go, go for my friends. I think there are mindset shifts that we can make that get at some of these test developer thinking, which is not really a real thing, but thinking in terms of, this is something that has to be built, like someone…
Is this a critical thing? Or is this an extra thing… This to me, leans into the fact that development can be unpredictable, and often as something is being developed like, Oh no, we thought this would take X number of hours, and actually took XXXX number of hours, we might need to make some decisions or help the client make decisions, whatever your situation is. What this means to me is if we’re building a car is having four tires essential to being a car, how about having a blood box? I’m speaking in deep metaphor here, so hopefully this is a critical thing to what we’re building, or this may be an enhancement or something that we could go later… Having in your mind.
Nope. And is this the same thing? Or is this a new thing? The best example I have of this is, say, we built a text book, and then I design a text and image box, excellent academic, it’s text and wait for it, and in it, right next to that text, I design those two things separately and I come in to a developer or developer might say, or maybe a textbook image is just an option for tilak. When do you think about that? And I would say, Don’t talk to kidding. I would say… You’re so right. Thank you to bring that up. Yeah, this is the same thing for using… In some, I encourage you to write user stories at any degree of the UK, I encourage you to start content modeling quick and are help inform the back-end, avoid scope creep, all those things.
And it’s okay to start where you are, this is the process, this is a journey, so don’t be intimidated, you can just start by practicing his mind, such, Dean, I’m here for you and I believe in you.
Thank you so much for being here today. I really, truly appreciate all of you, thank you, I’m gonna get all up in the slack and answer your questions and address all your comments. I really appreciate it. I’m not on Twitter because I love myself. I went to see the pixel engineers that I work with most often, who I spoke for, but did not let speak today, they’re all at the bottom. And they’re all great people. Thanks.