Lessons

Lesson Info

Exercise: Nordstrom Case Study

now it is our exercise time. So before we get into it, um, I want to Let's do a case study first. So we have, um we're doing a case study on Nordstrom's e commerce. Eyes on North home is awesome enough to let us use them as an example. So these are your sons home page, side by side. So this is towards the beginning of January and very quickly we can notice that yes, we have a header. It is like very traditional e commerce site. We have a footer, and then even the footer there is like a There's a I guess we can call this like a pre footer, or it's like another way to, um, promote other types of seven. Here's like the traditional footer, where you have a very quick navigation of, like all the other links, all the other pages that you can go to. And then there's, like the social media connection. And then there is the terms and condition and the copyright notice. This pretty sander, um, what I like to look here is look at how dynamic the content can be in the middle. So this is towards th...

e beginning of the Gym of January, where, UM this is like the standard stuff and maybe because it is New Year's, it's is telling you Hey, why not try something new? So it kind of resonates with the user. And now let's look at it this one again. So this is taken, um, around like January 20th and still the same thing. So there is header. But notice that we have this thing here. So it's actually giving you a call out on Valentine's Day already, and it says Valentine's Day is Saturday, February 14th. Find a gift. They'll up shop now and then. If you look at here, this is actually talking about the rewards program. They have race so you can have dynamic content that caters to people at different times of the month or a different times of the year. Um, I am pretty sure that if we take a look at the website in December is just probably already is all that is all Kurtzman's Christmassy, right? And then there's probably like a big end of the year sale that they would do. Um, so So, um, if you look at the composition really quickly, we him pretty much break this now into, um, this is a sections, right? Like, don't be scared about the images. Always try to, like, break it down into modular design, cause us says how what design is. It's kind of like Tetris. If you think about the containers themselves, right, This'll is one thing, and this can be once, and then they have some spaces. Um uh, and then when you are here, you get, like to forward banner, right? And then what you get to the footer is actually a four column, and I think once you see the grid, all of a sudden, it looks a lot friendlier. You're like, OK, yeah, I can do this. I can see where this is going. Um, and for example, here I can actually start with a banner, um, and then coming down all the way here. Notice that it's still January. But they have the little Valentine banner up already to just kind of brainwash you into, like, buying Valentine's buying Valentine's gift. Right? So there's that little things. Um, let's see in the navigation. So here we have the top naff, um, and notice that they do leave a little space here is OK to not fill up every single thing, because over here they actually popped in a Valentine's gift, um category for you to shop so specifically for Valentine's Day. So it's always dynamic is ever changing? Um, let's see. So, for example, if if now is in, if it's march, um, all the Valentine's Day content will be gone. But you might see it being replaced by their like annual cell. So you can also see this category being replaced by other types of sales When holidays is approaching in my just just tell you holiday gifts, right? And then all these is going to change dynamically. And then maybe it's prom season rays, and now they're all the content is very prompt driven. So you will start seeing a lot of formal dresses for guys that stress shirred. Sometimes you even noticed this, too. So they might. There might be two different versions of the home page, depending on your gender. So if you're a guy, if you come to know, um, if you come to north, rooms page on the you sign in and the website knows that you are a male. Maybe this is all guy stuff. Great. Like it doesn't matter about shoes. Is of the matter of out Keesey lingerie like you care more about. Maybe like watches, dress shoes, slags, etcetera. And okay, so these are two different versions of the home page. Now let's look again like towards the end of January. Now look at how big the Valentine's Day saying it's no so you can see like it grows over time here. There's no Valentine's thing, and then here is just a little bit. And I was like, in your face right, bye bye Bye. Um, let's see. So the same thing up top here. So still header Notice that we still have the Valentine's gift navigation up there. Um, and as you can see from here here to here, here is our pre footer. So, um, talking about signing up for email? Um, signing up for see? What is that? This is like the upcoming sales. And then notice how, after I've been browsing for a little bit, the website knows what I've been looking at. So I guess I've been looking at shoes and then now is actually showing me the best sellers. So this is also algorithm driven, and that's something that you can use to integrate it right? So it's like keep your website fluid and keep it exciting. And then let's see. So to break this down again, like obviously, there's a lot of images on this Web site on this page right now looks pretty jarring. So if you look at it says, this is this is one chunk. So if you break it down, let's see more to love this guy. See? So now they're all broken down into little sections. And actually, if you want, you can also dio have you can also do track analytics on this page, right? I'm pretty sure they're probably doing that now, too. So you can also track how far down have you scrolled? So if these content is not exciting, maybe people only scroll down to here and then they loved right, that's that can all be tracked. And then you might even say, Okay, I want to compare. Um, I want to compare which sales which cell is performing better. So I can also track, um, the click rate of where people are clicking. And if you really want, you can also conduct some usability test called eye tracking, which is really cool. It's where, um, you have your participants install a software on their laptops. So any any laptop that has a front facing camera, they can do this. So you install the software and you have been calibrated. So bye bye, calibration. You're actually say Okay, several of the laptop. Now look at the top left corner, right. And then now look at the top right corner and I look at look at the four corners and then now they're ready to track your eyeball movement, which is like, it's really cool. And then now they can have a heat map of where you're actually looking. Um, there's pros and cons. I think it can be expensive because you have to recruit participants. You need to spend time on conducting this test. Um, think study shows that you need to get at least 29 eye tracking results for it to be, um, to it, for it to be l East. Have some good results, or at least to start seeing some trends. Anything lower than 29. Just biased data or bias statistics. Um, so it's really cool. I think if you have a chance, definitely use it. All right. So we've gone through the home page already. You can You already see how dynamic it can be, depending on the season rate and then depending on what you're really trying to push. And I think that's something. If you're the sold sold designer on the team, obviously, is all up to you to desire what to put. But I think if you do have the opportunity to work with the content strategist or even the visual designer, it will be really cool for you guys to collaborate and come up with something that's sustainable. And, um, it really drives the marketing strategy home. So now we're gonna take a look at, um, these. I would call them category pages if for something more technical. I was even called these index pages because this is an index off the products that we have, depending on the type of products they are. So we have men's dress shirts on we have woman's sweater section. Um, what we have here is the same thing. So we still have our heather. It doesn't really go away, Um, and that we have our footer and I think by keeping the header consistent, it really reinforces that. Hey, I m now shopping on North Room. If let's say North from changes the whole thing suddenly or like takes out there logo, I think it would be jarring to the audience and say, Wait, am I so shopping on the first row? Did I just fall off the page mysteriously? What's going on? Right? And here's the same thing. So you have your header, you're flutter. And because here we are shopping for, um, dress shirts, we also have side navigation that that you can use to narrow down your search. So over here we have You can search dress shirt by fit by brand. Or you can also read more on how to measure or finding your fit and dress. Sure, so these air the stuff that wouldn't hence your purchase, Um, for a woman sweater. You can also see parameters as Onley unique for that category, such as, um, you can filter your result by styles, so you can say, OK, I want a cardigan sweater. I want a cashmere sweater, etcetera. Um, you can also photo down by brands or by trend, so you can have graphic sweater or you can have fuzzy sweater or you can have cropped sweater so those two are consistent. And another consistent thing is like a call out, right? So immediately when you click on dress shirt, you see okay, I am admin stress for a section. I think it would be really weird if you click on then structure and the issues she's shows up shoes because it otherwise is like Wait, I didn't click on shoes. Are you showing me shoes? So this also reinforced. This is I get direct feedback to the user saying, Yes, you are on this water's section. Um and then we also have besides the these sub categories over here about maybe browsing via brand browsing via fit. We also have this filter section here that you can narrow your result down by size, by color or by price. And then what happens here is really interesting because now, after going through all the um, consistent element on a website actually on men's dress shirt is actually feature featuring this section that tells you how do you find your perfect fit? So here is a great opportunity for them to say, Okay, this is This is our regular. This is the trend virgin. This is extra trim, so you can see that they think this is my speculation, but they probably think people don't don't really have an idea of what kind of fit they are. So that's why they put this up on top before the filter. So they actually push the whole section down, then sneak this up on top, right? Compared to woman sweater, where things sweater, just wastewater is pretty straightforward and you don't really have fit here. And so what they do is they actually remove this section, they don't have that. And what they do is they actually promote another brunch saying, Hey, this brand is have have some new arrivals race. So even though even though what we have here is a four column layout, you can actually take the 1st 2 away and replace it with an ad right? Like that's doable. That's flexible. Or maybe we might be doing a annual sale, and what we can do is we can actually, um, instead of that doing that over there, we might have a four up, and then we might have like a a big banner here Less says, and you'll sell. It is just drives home the point of Hey, there's a sale going on. Um, go find it. Um, or you might say when instead of having this shirt over here, we might also think about Okay, well, maybe we we present a shirt first, right? And then when we get to the mid section, maybe here is a banner across that tells you like I can't find your size. So here is actually like a support section that kind of gives a visual break of the product, and then it actually, and by doing some users housing, you might find that Oh, yeah, people do click on. There's a lot because they were so confused about what size? They're worried. Um, so these are all doable. And as you can see over here, we have related products, and these are all dynamic, right? And then as long as you create a consistent sale layout that it doesn't matter, what type of content is feed into here? We know for sure that this is an image. And then after the image, we have, um, product title. And then after that, We have, um, want to a little bit of the product description. So, as always, we clearly defined that in our war fray. It doesn't matter what type of information is feed into here, and as long as we set up the structure here, it doesn't matter if this is a can find your size banner or whatever banner it is. We as always, we define a space for it than the condom strategists, or the marketing team can feed whatever into it. And I think that's what keeps websites dynamic. Cool. All right, so I think Let's take a look at um, now is an example of an accessory page. So if you click on accessories, see how how it changes. So this is a category page that specific on woman sweater. This is a catapult category page on accessories and notice again that now like way also have a different layout. So listen, this can be both for men and for woman. So that's why I think they have some neutral stuff here. So they have a mix of men's stuff, and then when the woman's items and then they also have another, um, banner on Valentine's Me day or seasonal promotional Zoff. So again, the same structure here. So we have our subcategory, subcategory, we have our header header. But notice how we can really have fun with this section and really play with that so you can say OK, so this is probably, um four column, right? If we want to split thus out in this center. So this is actually a four column age, But I'm gonna use up all this too. Feature feature. Um Oh, no jewelry. And then over here we're gonna pull in some our them about trending items. Just because I think is beneficial for people to see what's trending now and take a look. Hey, this one has a 40% off call out and notice how it doesn't break away the structure that much. Right. So you can definitely create some you can really have some fun with also the price point. Um and then it shows you what What the price was before. So I was like, OK, this scarf is $98 before, but now it's $58 right? And then it also tells you how many percentage off you're getting, so it just reinforces your purchase decision and you're like 40% off. That's a really good deal. I really want to buy it right. It gets you to click on it. Um, let's see. So over here I can say yes. Um, I want to pull in the featured collections that I'm selling so I might be selling Valenti's Valentine's Days gift. Um, vacation accessory. So they might be sunglasses, beach bags or luggage. Um, here's also here. So stories Men's washed her A. So if we can just clearly defined that Hey, this is a section for you to feature collections to the marketing team that it doesn't matter what they put in here as only as we specify a dimension for the graphic and then a character count here. Then we will have the structure consistent but the content dynamic. Cool, right? Uh, last not least. Let's take a look at what happens when you click into that scarf rate, so it's like 40% off. Oh my gosh, I need to get it. So you click into it and what you see is still the same thing, header keeping it consistent, making sure that you know you are still on the same website. But now look at the focus. So now we have a big co out of youth clicked on this scar, and we have our gallery here. Like you can You can take a look at, um, different product shot. The right product. Shock is big. Sexy usually were like, Oh, my God. Yes, I want that cashmere scarf. Um, here you have some products, elections, details, so you need to pick a color and pick a quantity before you add it to the cart. Otherwise, the card is gonna be confused. So if you just click on after shopping back without specifying a quantity is gonna spit back on areas like, Well, how many do you want? A. Great. Give me a quantity here. Um, notice how the add to shopping bag is red, right? Is like right there. So when you first load the page, that's where your eyes are going to go. That's your focus. Um, usually, that is the most thing. That's the most on obvious thing you see. And then that's the call to action. Right? So what is the culture action here? It's add to shopping back. I want you to at this thing to my shopping bag, and then everything else is just supporting content. So big, sexy, image supporting content. So you want to add on you want at the scuff to your bag? Um, the review section here is all Well, hopefully they're all five stars, right? Because, um, reviews or customer endorsement will only add it. Add to, um you wanting to buy this scarf? So, uh, so this big chunk, it's all reviews, and here are some read more. So notice that, um, some of these sections air expanded and collapsed. So, for example, shipping in returns, we might say that while shipping and returns are not that useful or they're not, you don't really need to read it to make a purchase decision. But it is there for you when you need us. So that's why we have, like, a little link for you to read more on that, um, checking check. Store availability is probably not needed right now if you're purchasing online. So those air like secondary links that you can click on. So that's why I think that's why they made a decision to collapse it. So it is there for you. Um So here we have two more dynamic sections. So this one is the frequently blocked together race. So if you are looking at, um, maybe a luggage bag, right? Frequently bought together might be other traveling related things. Um, another another section for you to reinforce your purchase decision is complete. Completing the look. So this is a chance for, um, cost cross selling some of the other products. If you buy this scarf, check this out. You can really get this lipstick cause the red matches each other. And you really want that lipstick to match your scar? Um, you can also buy this bag, or you can buy that bracelet. Um, and if you run out of items to show right notice. Here. We have five images here. We only have four. That maybe we do a little, Um, we have a little on another action call out that says, Hey, we have more items. Check it out, Seymour. Here. So that's where you can click on it. Um, let's see. So again, there's also, like, all the algorithm algorithm in arithmetic driven content race. So there's also the recently viewed so it stores all your reason. Leave you. So it has a record of what you saw. So if you see something and that you're just comparing, maybe this is a great way to remind you. Hey, you saw this item before, so you can click on here to go back to it? Um, let's see. So the same footer so again you can notice how you can see that the header and a footer keeps a keep us grounded and let us know that Hey, we're still in the North's room browsing experience. But you can also notice how dynamic the content can be when you're being different parts of the website. But using the same type phase, using the same call out, right? Like using the same they have they use a serif typeface for their header and there so for their page header and for their section header. But for although, um, copy, they used us san serif typeface. So if you are keeping it consistent, then people will feel like Oh, yeah, this is a very consistent browsing experience, So I just I'm so in the same place. But hey, look, those pages exciting race. So this is kind of a law Quick case study of what you can do with a website