How to Build a Design System for Optimal User Experience

So, for this module, we have been able to define a design system for our application. We took the help of the design pattern to break down our UI into atoms, molecules and organisms. And we also looked at defining the typography, styles, the spacing, how we would use images and SVGs. And combining those two, we get a complete design system for our application. So, if you look at all these pieces, they are sort of Lego blocks, right? And they can be fitted anyhow that we want. But that's not what a user experience is. If we imagine there are a lot of permutations and combinations in which these different atoms and molecules and designs can come together to build a UI. So, how should we really arrange them? How should we put them on the screen so that we get the best user experience for the users of our application ? The answer to that is templates. Templates are not a part of the puzzle. They are the puzzle themselves. What I mean by that is, let's take the example of a world map. We have these countries and let's say the countries had the different states in them and we can call them as atoms and molecules and organisms in our terminology. This boat that we see, that is the template itself. So, all these different Lego blocks are not supposed to just go around and sit anywhere on the screen and display anything to the user. Templates bring meaning to the user interface that we are building for our users. And when we combine those two, we get the user experience in our applications. So, what would that mean from our as perspective? Let's look at that. This would be a template. The first one is our own page template and the second one is our listing's page template. And the template clearly defines what part is supposed to go over. We have a search bar at the top. Then we have another widget that is supposed to show us some sort of icons and it has a title and the icons have a subtitle. And then we have another widget that can display products. And again, it shows title. It's a darker color. That means it's more prominent. And then the subtitle or description, it could be anything. And that's in a lighter color. And then we have price that's shown in a primary color of the application. So if you look at this template, the template is clearly telling us what we need to highlight from user experience perspective. And similarly for the listing's page. So what would a template be? So template is basically the entire layout that we're going to present to our users without the actual content that goes in them. Now, if you fill the content in these, that's what our users are going to see. Now, let me go back to the template. The template is basically what our user is going to experience in our app. And as soon as we fill that with the data, we get our view. So that's how we started off. If you would recall, we started off this entire journey with storyboarding. And storyboarding in app was quite similar to this. We just broke down our UI into different manageable pieces. And then we further broke them down into atoms, molecules and organisms based on atomic design pattern. And then we defined a design system. Now, when we combine all of this with the template, we get our final user experience of the app. So let's try and define user experience next. I like to define user experience as how our apps respond when the user of the app is not doing anything on it or waiting for it. So let's break it down into two parts. What do we mean by not doing anything on it? If we just look at this app that we have, the design still speaks to a user, right? The colors, how we've used the shadows and how we place the entire UI. So the combination of the typography and the styles in the spacing that builds the complete layout, basically the UI user interface is the first part. And that speaks to the user. And that's what we mean by not doing anything on it. And the second part, waiting for it would be how we build the other interactive experiences. Like, for example, we have this button. And when we click on it, it just becomes a little lighter. So that gives the feedback to the user that the action has been registered. Or when we click on this category icon, the background just changes to a little darker shade that gives the queue to the user that the action has been registered. And this is not limited to what we build in the app, but it's also a part of how an operating system behaves. Like, for example, when we push a screen on an Android device, the screen pops up from the bottom. But if you would drift on an iOS device, when we push a screen , it actually slides from the right. So those are the basic differences. They are subtle, but they build the user experience. How many of you would remember the flip board app and why it became so popular in the beginning? If you recall, the animation was different when moving from screen to screen. It was not a standard iOS or an Android animation. And that was part of the user experience of this app. So that's what we mean when we say that we want to build a user experience for the app. It's not just about believe consistent and a beautiful user interface, but also about these nuances. And that defines the entire user experience. And we just saw how the process of building the design system using the academic design pattern and building those atoms, molecules, and organisms, we could define those interactions at a micro level. We'd also see a few of these examples going forward when we'll talk about a lot of animations. So like we broke the UI down into these different smaller management pieces, we should also try to pick down the animations or interactions that we want at such atomic levels. And that would make the whole experience very, very manageable like we did for button. When we click a button, the best it just changes a little. And we did that while we were defining the button. So with that template in mind, let's start putting the UI together. We already have most of the components we need to put the service bar header that I've already built. We already had the molecules for that. The category icons we built in the previous lesson, the product which it also we have built in the previous lesson will also add a banner carousel. So we'll build the entire home page. And as you already might have guessed, as we saw while building organisms with this particular pattern building the layout is going to be quite a simple job. It's a step by step process, but it's a definitive and a simple process. So we built the home page layout in this particular lesson. And I'll leave the listings layout to students to build themselves. Though I'll build and push this into the ball applet repository. We'll start with that. Let's build this layout. So we'll add the header I already built it. It's called the feather. And it is. So it's again, we'll be using existing items and molecules. So we'll search input and the button category that we defined earlier and customizing it for showing the camera icon . And we have wrapped it inside a view, which we are using the layout type row, because we want them to come in a single line and an additional header styling that probably just adds a margin to it. So let's go to the home page and start building our view. We'll just put it below the scroll new. Let's push it down. Let's start with the header header. And it does not require any inputs for now. Next, we need to add the category widget. So we'll see category widget. And we already have it. It also does not require any input. Next, we have the product widget. So let's just add the product widget right here. And it's not that visible, but let's also add the carousel. So let's see. And once the app refreshes, so yeah, okay, so we don't want the cart icons. Let's start from now. We have our header. And then we have our category. Now there's a spacing between when fixed as the moment. And otherwise, our widget individually, they look great. Then they have our product widget and then this. So this spacing in between these widgets. And that's where our card component is now going to help us. Let's just add a margin board to the card and that should do it for most of them. So we'll go to layout elements cards. It doesn't have a style. So we'll declare a style for it. And again, we'll declare it in a global dot elements dot. So let 's declare one for card and we'll say margin bottom. And it needs to come from typography dot elements dot. We don't have it yet. So let's go ahead and define that will say card and we'll say margin button. So we can choose any name over here in typography. I'm just doing the same name. So that it's easier. And it's probably 10. And we'll play card or margin bottom . Let's save that. And and we need to add that to the card. We will save that. When we go inside. Okay, I think that was not enough. We will need more padding. So let's just make it 20. And once we do this. Okay, I think padding is here. We use the card only for the product widget, but it seems like adding card as a root element to all of these different organisms would have made much more sense. So let's go ahead and do that. Fast forward. What I did was I went inside these components and wrapped them up in card. We already did for the product widget. But now all of them have card as the root element. So we can control this spacing between here we have the card as the root element. And one other thing that I changed was if you go to card, we declared that as an array of react element. But it's not always that we require multiple general. So I've changed that to a react road. What's we name those changes and say now all of these are inside cards and that makes perfect sense. Now we compare it with the UI that we want seems pretty much there, right? Yeah, icon is a little bigger. We could make this model. But that needs to come from design and the typography in the design system that we've built so far is going to help us do exactly that with those sizes and colors and ratios are set by design themselves. Then we would not have this kind of a discrepancy. So just to recap what we went through in this entire module, we first took the storyboarding approach that we saw earlier in the first module. We broke that down into different components that we need to use. We took the help of activate design pattern to get those down into elements by badges, buttons, icons. So we had built these icons and then we moved forward to creating the widgets to a combination of different atoms. We took the input box atom and an icon to form a search box and similarly for cutting these and product widgets. And then we saw how we brought together the atoms and molecules to form organisms or widgets. Finally, we saw how all these different pieces, the Lego blocks, they don't just go and scatter themselves on the UI. There's a particular template and a position that all of these needs to go and occupy. And that's called the template. And once we fill the template with the data, we get our page. So that's the breakdown of the UI, the entire design system that we've set up in this application. What this will do is if you allow for consistency and scalability and by going through this entire module, I hope the students will realize how this is a very, very helpful and a very, very user centric way of building UIs. So with that, we have built our design system and I'll see you in the next module. Thank you.