User Experience Design

UX design involves five key elements: strategy, scope, structure, skeleton, and surface. These elements collectively work to ensure a seamless and effective user experience.

1. UX refers to the overall experience a user has while interacting with a website, focusing on usability, accessibility, and the pleasure of the interaction. UI deals with the visual elements of a website, including layout, color schemes, typography, email design, and interactive elements. Both are integral to creating a seamless and engaging user experience.

UX design is the process of creating websites that provide meaningful and relevant experiences to users, such as a mobile app for online shopping that is easy to navigate, ensuring a smooth checkout process, and featuring intuitive elements like search filters and personalized recommendations. Engaging a design agency can help bring such projects to fruition with expertise and efficiency.

Welcome to another deep dive. And this time we’re tackling a topic that’s often right under our noses. But we barely notice it. Really cool stuff. It’s UX design. Yeah. We’ve got some great sources you shared about UX principles, how the design process works, and even what it takes to be UX designer. Yeah. So let’s break it all down and give you a solid foundation. Awesome. You know, it’s funny. We interact with the results of UX design, good or bad, like every single day. Yeah. But we rarely even think about it. We really don’t. It’s true. I mean, think about like when you’re on an airlines website, yes, and you’re just like, hmm, where do I click next? How do I change my search without starting all over again? Exactly. That’s bad UX design. Yeah. Yeah. That’s the frustration, right? That’s the why is this so hard feeling. That’s bad UX, good UX design. You don’t even notice it. You don’t even notice it. It just works. It just works. That’s the goal. Seamlessly. Yeah. So to use another metaphor, it’s like those apps that you use. Where it just flows. Yeah. You just know what to do. Totally. It feels intuitive. It’s guiding you. Yeah. Yeah. Yeah. Without you even realizing it. So I’m starting to see how impactful this can be. Like we’re talking about user centricity. One of the core principles. Yeah. Absolutely. Wouldn’t you always design with the user in mind? You would think, right? Yeah. But you know, you get caught up in technical stuff or business goals, or even just as a designer, your own personal preferences. Yeah. Yeah. And you can kind of lose sight of that core user. Lose sight. Yeah. Perspective. Okay. So how do you stay focused on the user? Is it as simple as asking people what they want? It goes beyond just asking people what they want, I would say. It’s about truly understanding their context, their goals, their pain points. It involves research, observation, even a bit of empathy to step into their shoes. Right. To really see it from their perspective. Yeah. There’s that great quote from to kill a mockingbird, you know. You never really understand a person until you consider things from his point of view, until you climb into his skin and walk around in it. Yeah, that’s it. So that’s what we’re talking about. Right. Empathy piece is so huge. Yeah. Yeah. Yeah. Now what about simplicity? That’s got to be a factor. Absolutely. That’s another key principle. You know, sometimes designers in a quest to create something innovative or cutting edge, they end up with something overly complex. Yeah. Or those websites where it’s like a million drop down menus and you can’t find anything. Right. Right. Like trying to do too much. Yeah. Yeah. But good UX is often about stripping things away. And unnecessary. Yeah. Decluttering that interface and just making it straightforward and intuitive as possible. So it’s finding that balance between like functionality, but also simplicity. Exactly. Think of it like a well organized library. Yeah. You want to be able to find the book you’re looking for without getting lost. Yeah. In a maze of shell. Okay. So user centricity, simplicity. What else makes for great UX design? Consistency. Users should be able to predict how the website’s going to behave based on their previous interactions. Right. Right. I shouldn’t have to relearn the rules every time they go to a new page. Right. Like imagine the add to cart button was a different color in a different place on every page of the site. Oh man. Talk about frustrating. Yeah. Charring. Totally. So consistency creates a much more predictable, easy to navigate experience. It’s about giving the user those cues so they know what to expect. Visual cues and patterns. Yeah. For sure. Yeah. Okay. So we’ve got these fundamental principles down. Now, how does this actually play out in the design process? Where does a UX designer begin? It usually starts with research and empathy like we talked about, but it goes beyond just the user. It’s about understanding the business goals, the competitive landscape. Really defining the problem that this website’s trying to solve. So like detective work almost. I like that analogy. Gathering all those clues. Right. Yeah. Yeah. Forming your hypothesis before you even start to design anything. Exactly. Yeah. Okay. So once you’ve gathered your clues, what’s next? Then you move into ideation. Right. You start to brainstorm solutions, explore different design approaches. So this is where creativity comes in. Big time. Sketching out ideas, creating wireframes, starting to visualize how the user will interact with that interface. Right. So it’s not just about aesthetics. It’s really about problem solving. Absolutely. It’s strategic. Yeah. Yeah. And finding those elegant solutions that meet everybody’s needs. Yeah. The user and the business objectives. Now this isn’t a one and done sort of thing. Right. No, UX is very iterative. So you test things out. You test it, gather feedback, refine it, test it again. Okay. So it’s evolving. Constant cycle of learning and improvement. Yeah. Okay. How does that testing part work? So lots of methods, but one of the most valuable is usability testing. Okay. Imagine you’re watching real users as they try to complete tasks on the site. Oh, interesting. You can see where they get stuck, what confuses them, what frustrates them. So you’re getting real world feedback on how the design’s working. Exactly. Yeah. That’s fascinating. And their feedback is invaluable for identifying those rough edges. Yeah. Yeah. And refining it for a better experience. So it’s not just what you think will work. It’s about seeing how people actually use it. 100%. So it’s really interesting. We’re seeing how UX design is so much more than just aesthetics. Yeah. It’s about empathy, problem solving, and a really deep understanding of human behavior. I think that’s a great way to put it. And, you know, as our lives become increasingly digital, the role of UX design just becomes more and more crucial. Totally. So we’ve got the principles, the process, and this idea of testing. Yeah. But who’s doing all of this? What does a UX designer actually do? Yeah. A UX designer, you know, in a way, they’re like an architect of the user experience. Okay. They bridge the gap between humans and technology, making sure our interactions with these websites are intuitive, enjoyable, and ultimately, you know, meaningful. Okay. But what does that look like? Like on a day to day basis? Yeah. What are they actually doing? I mean, there were many hats. They do user research, analyze data, create those wireframes and prototypes, conduct usability tests, collaborate with developers, advocate for the user throughout the entire process. Doesn’t make a pretty diverse role. It’s a lot. Yeah. It really requires that blend of creativity, analytical skills, and just a passion for creating those positive user experiences. But it sounds rewarding too, you know, to be shaping those experiences. Yeah. It’s a good feeling to know you’re making a difference in how people are interacting with the digital world. So we’ve talked about how UX designers approach their projects, how they use testing. Are there other methodologies or disciplines that play a part? Yeah. One that’s closely related is something called human computer interaction, HCI. Okay. It’s really focused on understanding how humans interact with computers and designing interfaces that are intuitive and efficient. So bridging that gap between human behavior and technology, like we were talking about. Exactly. That’s a central theme in UX and HCI principles inform everything from the placement of buttons to the flow of information on a website. Okay. Making sure that our interactions feel as natural and seamless as possible. Do you have like a real world example of that? Yeah. Think about those doors where you’re never quite sure if you should push or pull. The worst. Right. And you end up feeling awkward, like you’re doing something wrong. Yes. Exactly. Well, that’s because HCI principles haven’t been applied. That makes sense. A well-designed door handle. You just know how to open it. It just works. You don’t have to think about it. It just works. And that’s what we’re going for. That’s what we want, that effortless interaction. Whether it’s a website, a door handle, whatever. Yeah. It’s about eliminating that cognitive load. So you can focus on the task. Yeah. Not how to use the thing. Exactly. HCI is all about making it natural, frictionless. Really interesting. I feel like we’ve covered so much. We have. But we’ve only just scratched the surface of this whole UX design world. There’s so much more. Yeah. But this is a really great foundation to have. Okay. So we talked about user centricity, simplicity, consistency, the design process, usability testing, HCI, the role of a UX designer, starting to get a picture of how it all fits together. It all works together. Yeah. To shape our online experiences. And as technology keeps evolving, understanding these principles becomes even more critical. For sure. Okay. Let’s quickly recap what we covered in this first part of our deep dive. Sounds good. We started by emphasizing that good UX design often works invisibly in the background. Creating that smooth and enjoyable experience. Yeah. We looked at the core principles, user centricity, simplicity, consistency, that are behind every design decision. The foundation. Yeah. Then the iterative nature of the design process, testing and refining, testing and refining. Based on that user feedback, so important. Yeah. Yeah. And we touched on the crucial role of HCI. Making those interactions intuitive and efficient. Absolutely. Yeah. And finally, the role of the UX designer champion for the user, bringing together that creativity and those analytical skills to really make those digital experiences sing. So if you’re listening, and this has piqued your interest, don’t stop here. We’ve just laid the groundwork. There’s so much more. We’ll be back. Absolutely. To unpack even more about what makes a great user experience. Yeah. And we’ll look at the connection between UX and UI design. Stay tuned. Stay with us. Okay. So we laid some solid groundwork in part one, talking about some of those core principles and processes that drive UX design. Yeah. But how do they actually translate into a tangible user experience? What are the pieces that UX designers are working with? Great question, because it can feel kind of abstract. Right. Yeah. The there’s this framework that I think can help break it down and called the five planes of user experience. Okay. Or you can think of it as a pyramid. I love a pyramid. Makes it feel manageable. Five levels. Okay. So let’s start at the bottom. The foundation strategy. Okay. What’s that all about? That’s where you define like the foundation for the whole project. You’re aligning the business goals with user needs. Right. Like what’s the purpose of this website? What problem is it solving? How’s it going to benefit both the user and the business? So like setting the stage, making sure everyone’s on the same page about what we’re building and why before we even start sketching out ideas. Exactly. Without a clear strategy, you risk creating a product that’s maybe beautiful, but pointless. Right. Or it’s functional, but it doesn’t really resonate. No, it’s solving the problem. Yeah. Okay. So strategies, the foundation, what’s the next level up? Then you move to scope. Okay. And that’s where you define the features and the functionality of the product. Like what content is going to be included, what tasks can users perform? What are those boundaries? So it’s like the blueprint outlining what the website will and won’t do. Precisely. Foundation, strategy, blueprint, scope. What’s next? Structure. This is all about how the information is organized and how the users navigate through the site. Okay. Break that down for me. Sure. What does that actually mean in a practical sense? So, you know, think about like organizing a library. You wouldn’t just randomly shelf books. Right. You would group them by genre or author or subject. Right. Yeah. So people could easily find what they’re looking for. Right. So structure is about making the website intuitive to navigate. Exactly. Okay. This is where we think about things like information architecture, user flows and site maps. Okay. Information architecture. What is that? Sounds kind of intimidating. It sounds more complicated than it is. It’s basically like that library analogy. It’s how you structure the content in a logical way. So users can find what they need. Exactly. Think of it as like the blueprint for how the information is going to be laid out. Gotcha. And user flows, that’s creating those paths for the user. Like imagine you’re mapping out. Yeah. How a user would move from one page to another to complete a specific task. Okay. And site maps. Site maps provide like a hierarchical overview of all the pages on the website. It’s like the table of contents for a book. Gotcha. Okay. So structure about creating that clear, intuitive path for the user. Now I’m guessing the next level up is where things start to get a little more visual. Yeah. So the next level up is skeleton. Skeleton. And that’s where we start thinking about the layout of the page elements, where are the buttons, where are the menus, the overall like visual hierarchy. Okay. So this is where we start taking those kind of abstract concepts and turning them into something concrete that users can actually see and interact with. Exactly. This is where we’re doing like wireframes, which are like blueprints for each page showing where the content’s going to go, the images, the interactive element. So like the bare bones. The bare bones. Yep. Yeah. Not worrying about the aesthetics yet, just like pure functionality. Gotcha. And at the top, the peak of the pyramid surface. This is where it all comes together. This is where it all comes together. This is where we make it pretty. This is where the visual design comes in. Yes. The colors, the typography, the images, the overall style, that’s all happening at the surface level. Okay. So we have this UX pyramid, strategy, scope, structure, skeleton and surface. Really helpful way to visualize how it all fits together to create a well rounded user experience. Yeah. And it’s not necessarily linear those levels. They often kind of overlap. Inform each other. Yeah. Now you mentioned earlier, there’s a distinction between UX and UI design. Yes. I feel like people get those confused all the time. Can you break down the difference? So UX, think of it as the overall experience that a user has with a product while UI is the specific interface they’re interacting with. Okay. So UX is the big picture. Big picture. UI is the details. The details. UX is like planning a delicious meal and UI is arranging the food beautifully on the plate. I like that. So they work together, but they’re focused on different things. Yeah. And I think our listeners really interested in how this plays out in real world examples. Can you give us a couple? Absolutely. So one example, designing for accessibility. You know, let’s say we’re building a website for a museum. We want to make sure that everyone, regardless of their ability, can access and enjoy the content. Right. So you’re not just designing for like the average user. Yeah. You’re really considering all those edge cases. Exactly. So things like alternative text for images so that users with screen readers can understand what’s happening visually. Captions for videos, for people who are deaf or hard of hearing. Make sure the site is navigable, just using a keyboard for people who can’t use a mouse. It’s about creating an inclusive experience for everyone. Yeah. Where everybody feels welcome and they can fully engage with the content. Really important. Yeah. And then usability testing. I know that’s something we’ve talked about a bit. Yeah. But can you elaborate on that as a concrete example? So let’s say we’re designing an e-commerce website. Okay. We can conduct usability tests where we observe real users as they’re trying to use the site. Yeah. Can they find products? Can they get through the checkout process without any problems? And from that, you’re getting feedback. Real world feedback. About how to improve. Exactly. Okay. I get it. Make the shopping experience as smooth and enjoyable as possible. You know, it reminds me of the time I was trying to book a hotel online. Oh. And the website kept asking for the same information. Oh, no. They’ll grow it over again. I just gave up. That’s the worst. Yeah. That’s definitely a usability issue. They should have done some testing. They should have done some testing for sure. Okay. So we’ve talked about the five levels of the UX pyramid, the difference between UX and UI design and the importance of things like accessibility and usability testing, a lot of ground covered. We have. But I feel like there’s still more to explore. There’s always more. Yeah. Okay. Before we move on to the final part of our deep dive, let’s quickly recap. Sounds good. What we talked about in part two. Okay. So we started by unpacking those five levels of the UX pyramid, strategy, scope, structure, skeleton and surface. Those building blocks. Yeah. That’s the framework. Right. Yeah. Then we talked about the distinction between UX and UI design. How those two disciplines work together. Yeah. To create a great product. And finally, accessibility and usability testing. So important. Yeah. Making sure that we are creating inclusive and enjoyable experiences for absolutely everyone. Absolutely. Okay. We’ve explored the foundations of UX design, delved into that process, touched on some real world examples. But what else is there to uncover? In this amazing world. Yeah. Well, in the final part of our deep dive, we’re going to explore how visual hierarchy shapes user perception. Okay. And influences how people interact with information online. Sounds good. Stick with us. We’re back for the final part of our deep dive into UX design. You know, I used to think websites and apps were just about the coding and the graphics. Yeah. But now I’m seeing there’s this whole other layer of strategy and user psychology. It’s a whole other world, isn’t it? It is. It’s really fascinating. And you mentioned this idea of visual hierarchy at the end of last part. Yes. Can you remind us what that is and why it’s so important? So visual hierarchy is basically how designers guide your attention on a page. It’s about using those visual cues like size, color, contrast and placement to signal what’s most important. So like a roadmap for your eyes, telling you where to look first, second and third. Exactly. Think about a newspaper headline. It’s usually big, bold, maybe even a different color. So it instantly grabs your eye. Right. Right. That’s visual hierarchy at work or a stop sign. Okay. Bright red, octagonal shape. It stands out from its surroundings. You can’t miss it. So it’s not just about aesthetics. It’s about communicating effectively, guiding the user’s attention. Exactly. So a well-designed website will use visual hierarchy to lead users through the content in a logical way. Make it easier for them to find what they need, understand the key messages. So like I’m being guided without even realizing it. Exactly. That’s the thing about good design. It often works invisibly. Right. You’re not consciously thinking, oh, there’s the visual hierarchy. Right. It’s just a smooth experience. You’re just having a smooth and enjoyable experience. But behind the scenes, that designer’s carefully crafted it. We’ve orchestrated your attention, leading you through that content. Okay. So we’ve talked about visual hierarchy as this way to guide attention. Are there other ways that it’s used in UX design? Yeah. So it can also help create a sense of balance and visual appeal. Okay. A well-balanced page is more visually engaging. It’s less likely to overwhelm the user. So it’s about that sweet spot, you know, like drawing attention to the right things, but also creating a harmonious experience. Exactly. Yeah. And another key aspect of visual hierarchy is establishing a clear flow of information. Okay. So by strategically placing elements, we can guide the user’s eye through the content. Think about like a comic book. Yeah. How it uses panels and speech bubbles to guide the reader through the story. Yeah. Okay. So you’re creating a visual narrative. Exactly. Yeah. Okay. So when it comes to implementing visual hierarchy, what are some of the techniques that designers are using? Well, one of the most fundamental is size. Okay. Larger elements tend to attract more attention than smaller elements. Makes sense. You know, think about a heading versus body text. The heading is usually larger to signal its importance. It’s like shouting versus whispering. Exactly. Yeah. What else? Color is another powerful tool. You know, bright contrasting colors tend to stand out more than say like muted or monochromatic palettes. So that’s why call to action buttons are usually bright colors. You want to make it really clear to the user? What action you want them to take? We’re action to take. Yeah. Okay. Cool. And then white space. White space is also really important. So that’s like the empty space around element. Oh, it’s crucial for creating visual breathing room. I can see how that would be important. You don’t want to overwhelm. Yeah. You don’t want it to feel too cluttered. Right. Great. So white space helps to kind of isolate the elements, draw attention where it needs to go. So it’s not just what you put on the page. It’s also what you leave out. It’s both. Yeah. For sure. Okay. And typography, you mentioned that too. Oh yeah. The choice of fonts, the font sizes, the font weights, all of that can contribute to visual hierarchy. So even something as seemingly simple as the font can play a big role. It can make a big difference. Not only can it enhance readability, but it can also convey emotions and reinforce the brand’s personality. It’s amazing. I feel like I’m seeing websites in a whole new light now. Yeah. It’s kind of like a secret code, isn’t it? It is. It is. And now that I’m aware of these principles, I can’t help but notice them everywhere. I know, right? It’s like, oh, that’s what they’re doing. It’s fun to start analyzing those experiences. Yeah. And appreciating the thought and the intentionality that’s behind good design. Yeah, for sure. Well, we’ve come to the end of our deep dive into UX design. This has been fun. It has. We’ve explored so much from those core principles to the design process, to this idea of visual hierarchy. Hopefully, this has been helpful for our listener. Absolutely. And if this has sparked your curiosity even more, don’t stop here. There are so many resources available. Yeah, you can take courses, there are communities online, all sorts of ways to keep learning. Yeah. And remember, good UX design is all around us. It’s in the websites we visit, the apps we use, even the physical products that we interact with. So by understanding the principles behind it, you can appreciate those experiences more, but also contribute to creating a more user-friendly world. Great note to end on. Thanks for joining us on this deep dive. My pleasure. Until next time. See you later. Keep those user experiences top notch.