Lessons

Lesson Info

Example: Charts and Spreadsheets Design

We are going to stay on the laptop because we're going to look at a spreadsheet, because everyone loves spreadsheets. So, I tried to come up with a good example here. I thought that we could stick with the bakery, and here's why. I wanna make this a little bit smaller, just so we can see the whole thing. Here we go. So, this is our bakery, and we need to manage and get a good view of who is working when. Maybe we don't want to use software that does this, so we're doing it in a spreadsheet for now 'cause we just are afraid to invest that money, or whatever reason it is. So, let's look at this spreadsheet. It's our August schedule. We've only got the first week in here. So, think about the information here, okay? We have dates across here, then we have the time slots. So, in the morning, we've got different people working. We've got barista one, two, bar back, and a manager. And then in the afternoon, we have barista one, two, bar back, manager. And then we have all the people, Mike, Je...

ssica, Sydney, all these people. Sometimes there's an open. I guess no one's working that day. OPEN in caps. And then below, we have a bunch of notes that someone's kinda shoved in here. So, on Monday, it looks like, oh no, that's Wednesday. See, I couldn't even read this spreadsheet, that's how bad it's designed. So, on Wednesday, it says "Opening notes: "be ready for the 7:00am delivery." Friday, there's another 7:00am delivery. But on Saturday, they're closing early for a company party. Okay, so let's look at this, and this is only a week, so you might be thinking, Sarah, this isn't that terrible. But let's imagine what happens when, how do we go that direction? When we add in more weeks. And just to, what is it, Thursday? I think if we drag this, it'll automatically do, yes, exactly what I wanted, okay. 'Cause it helps to have real numbers, otherwise I feel like this won't be as effective. So, let's just stop there. So, this is the August schedule. It's terrible now, right? It's really hard to read, there's a lot of information going on, your eye is kind of getting dizzy, I think. So what are some adjustments that we could make to this spreadsheet? Well, let's think of the content, first of all. So, the first thing I would do, we have two kind of areas of focus: morning shifts and afternoon shifts. To me, that seems important, so I'm just, and maybe this won't be how it ends up in the end, but just if I'm thinking through what I would be doing as the designer, I might be going like this. Okay, check. Immediately, I wanna make it clear that we have the morning and the afternoon schedules. Maybe, though, maybe I wanna make afternoon darker for whatever reason. I might change my mind, but okay, so now it's easier to see the difference between morning and afternoon sessions, right? You're definitely nodding, 'cause now you've learned all these principles. So, the next thing that strikes me is this. This is the whole month of August, and it's really difficult to see where a week stops and where a week starts. If we go like this, it's hard. But you know what else is hard right now? Did you notice? Well, what time is Sydney working on that day? Oh, I have to scroll all the way back there. That's annoying. Or no, who is Sydney, like what shift is she? So, what I would do, talking about the functionality of this. Maybe you've done this before, but now you can freeze that, so it's that balance of function and visual that I'm thinking about as the designer, because hopefully it's good-looking, but if it doesn't function, it's kinda useless, back to the point we made at the beginning of the class. So just that improvement alone is now making this more functional. But the other problem we wanted to try and solve was we don't know where the weeks start and stop, right? So here's what I might do. Let me think about this. First thing I might do is this. At the end of each week, so it looks like we're here, at the end of each week, I would want to indicate that it's the end of the week. I need some type of visual cue to let people know we're starting a new week, we're starting another week. So, I would add, oh, we didn't make a copy of this. You'll just have to remember how bad this looked in the beginning. Actually, let's make a copy just now. Okay, so we're on Sunday, so what we would want to do is I'm going to add a border, and you can't see it yet. We're gonna make it huge. That is looking nice. So now, Monday, Tuesday, Wednesday, Saturday, Sunday, we're gonna do the same thing, and you're gonna see how, and I'm gonna do it to this one. Gotta remember this is backwards. So now, 'cause we now can kinda have a before and after. Actually, let's make these, that's not too much work. Okay, now we kind of are where we were in the very beginning. So we've gone from this, all the weeks, what the heck is happening, don't know where a week starts and stops, to now. We clearly can see morning and afternoon, and we can see the weeks, right? I think it's a lot better. Hopefully you're seeing, as we are going, week one, week two. Let's do the rest of it, just because we can. Copy these, 'cause I want a little bit more on the end here. There, 21, 22. Okay, good. Now what else is jumping out to me as a designer? Here's something that's jumping out. This top row of dates, it's important that we see the day of the week and the number, August one, August two, August whatever the number is. But I think, as we're scrolling this way, once I'm kinda in the guts of it, I don't know what week of the month I'm on. Maybe that's important. I don't know, I've never owned a bakery before or had people, but I might do this, to be honest. I might insert a new row up here, and let's make sure, yeah, we gotta go this way. I might insert a new row, and this is getting cut off, but that's okay. I think if we go like this and tell it to overflow? No, it's because we froze this. I know what we'll do. We'll just put the title over here. This is going to annoy me. It's getting cut off. There. Center, we'll make it bigger, 14, there we go. So now, what I wanted to do was make it clear, week one, week two, week three, week four. So, what I would do is I would do this. I would, that's going to annoy me, so I'm gonna make this row black, this text white, and then, I think I might make this row, let's just see, I might change my mind. See, I told you I didn't have this totally, I didn't prescribe what I was going to do, 'cause I wanted to kinda do it for real. So okay, can you tell where I'm going with this? I wanna make it clear what weeks we're on, so I'm going to maybe, oh, I just had an idea. To make it super clear, week one, okay, cool. Then we want to merge these guys. Week three. But my mind's like two steps ahead of us right now, so let me go back. So let's imagine these are all the same color. Hold on, that has to be white because I can't stand it. So, week one, week two, a little better. And now we blew the border there, but we're not going to fix it. So, week one, week two, okay. But what I also might do, just getting a little off the deep end here, but just to make it even clearer that we're in a different week, I might alternate the header colors of each week so it's super, super clear. So, week one is a little lighter, week two is a little darker. Then we get into week three, which we need to type out the title for week three and merge all those guys. But we should complete it so you can see. Week three, we wanna center. And then let's do week four because we can. Week four. Woops. Week four, center that guy. Now, oh, we need to make it dark. So, now can you see, woops, it's all backwards. It's like I'm in the crazy kitchen from that example from earlier. Okay, so remember where we were in the beginning. This is all our employees who are working in August. If I quickly said who's working barista shift two on Saturday, August 11th, hmm, good luck finding that. However, if it's like this, it's a lot easier because we can see week two, okay, we gotta look over here somewhere. Barista two, okay, there. But because we locked that column there, barista two, August 11, Mike is working. So, a lot easier both functionally and visually as well. Now, we could keep going on this and spend a lot of time. One other thing that I would do is the following. Notice down here, notes. If we're kind of analyzing the content and seeing how people in our company have been using this notes column, it's kind of becoming obvious that there are notes that are being left for each shift, opening notes and closing notes. So instead of having them all just live in this notes column, what I might do, and I actually may not like this after I do this. We will see, 'cause design is really all about experimentation. Sometimes I have an idea, and then I do it, and I think that was the worst idea in the world, but it's not 'cause I'm a bad designer, it's just because, when you see it in the context of the rest of whatever you're designing, you realize there's probably a better solution. So, notes. Now I already know why I'm not going to like this, but let's pretend. So, automatically, because, woops, okay, copy. Now our notes have more context because they are closer to, they are in better proximity to the thing that it relates to. The opening notes are by the opening shift. And I wanna go like this, and then I want to wrap these because I don't want them overflowing, and I want everything to go to the top so it's aligned. And then copy, copy this. Let's see, we're not going to do this for all of these. Put that there, then we can get rid of opening. Let's copy, copy, woops, paste that there. Then let's also. There's not too much effort to do this, so you can really see it happen. Okay, then we want them to match 'cause we're designers now, so we need to go like that, and now, so I don't love it, but I would figure out a way to make this work, but the functionality of this is that the notes, each shift now has notes, so it's a lot easier. And if I'm working the morning shift, what would easily happen is I would miss these notes if we only had one notes row, not column, one row. Up here, at the top, now that each shift has a row for notes, less likely I'm going to miss that. If I were to spend three more hours on this, which I'm not going to subject you to, I would start to think about things like what is really crucial about this content that maybe I could use design to help solve. I think, thinking from a business perspective, I think it would be very important to make sure that those shifts that are open or not accounted for yet are really, really standing out. So, you can actually set rules in your Google spreadsheet to say if a column contains the word "open," make that text red. I'm just going to do it manually, but you could really do that so you don't have to do what I'm doing right now and go change the color of all these each time. But instantly, if I'm the manager now, I can see where my open shifts are, where everything went. And we're back here 'cause everything's backwards, and I can easily see that. Another idea I had, which I'd have to see if it actually looked good, but I could maybe see a color code each person. That could get kinda rainbow, so we're not gonna take this any further, but hopefully you can see now, we started with something that was good, it had the information, we could get by with this. Would the scheduling person probably get a lot of questions, or have people end up with open shifts where they were missing employees, or people missing these things that the opening shift had to do 'cause the notes were down there and they weren't up at the top? Simple changes like this are definitely going to impact, I think, how this whole team would use this spreadsheet for sure.