Design System is not a barrier for UX
I have come across many situations where designers feel that they cannot be innovative while using Design Systems. I thought about writing something which could help designers understand how to fill this gap between
user experience and visual design.
Choosing design elements from design system is different than thinking about the user experience of the design.While we work on the user experience, we do not think about the design elements or controls to be used. It is purely based on the feature’s usability aspects or user journey and their goals.
Design systems are mainly applicable for enterprise level apps where this scenario fits in. It helps to create unified experience.
Website design or marketing content does not fall into this category. Design system contains the styles and UI elements to be used, the best practices to follow, the responsiveness checklist, typography, colors, etc. These are the areas which are are not defined in the stage where you think about the user experience of the product. It is curation of the look
and feel along with the branding of the product.
Idea stage
At idea stage we discuss about the things that helps us reach closer to the solution and to know the needs, pain points and goals of the user.
> Feature discussion
> Target users
> Goals
> Pain points
Conceptualise and Define User Experience
At this stage we discuss about the user journey and flows for product/feature we build, so that it gives the intuitive experience to the end users.
> The target devices
> Human interaction and access to the system
> User’s approach
> Usability aspects
UI Design
At the visual design level we decide on the layout along with placements of the elements on the screen. It is more of the styling and appearance of the product at this stage. This is the step where Design System comes in picture.
“We NEED NOT look at Design System and then work on our ideas. It should be other way around.”
By the second phase you are almost clear about the journey user will take or what inputs will be required and what will be the task flow of the design. Design system helps you to pick these elements as per your use case and create a quick design without spending much time in thinking about the UI elements.
There is ofcourse scope in innovation of design even when you follow these steps. First we should understand innovation does not come from the UI, it is seen in the User Experience we decide.
This article is not about the design process. It is about understanding the gaps between certain design steps in processess and how to address each step.
“We already know UX means how user feels and experiences while using your
product.”
- Deciding about user journey is UX
- Planning about human interaction with system is UX
- Thinking about devices, resolutions, usage is UX
- Brainstorming about access to system is UX
- The Approach we take to solve a problem statement is UX
Let’s see an example where I will explain, where and when Design system plays a role so that you get a better understanding.
User Experience of Search Feature
This is the search results design flow. At this stage we will only think about the usability and intuitiveness of this feature. How user will navigate and what input should be taken from user which will give better results is what we will aim for in this stage. This is applicable for any feature for that matter not only search. There are various parameters to think through the user experience for any feature or product. But, by now it must be pretty clear what we will do at this step of the design phase.
Basic questions involved at UX stage are:
- What inputs should we take from user?
- How can we optimize the flow to minimum clicks?
- What should be the approach of the user to search data?
- Can we use any new technology which takes less human efforts and enhance this flow?
UI Design of Search Feature
This is the stage where design system comes in picture.
At this stage we will only think about the elements/controls to use which will make this UI user friendly and give it a better look and feel while maintaining the branding of the product. For example, If you see the first screen, there is one input text field and listing to show the search results. So this styling is already defined in the design system. We just have to grab them and use it. Simple isn’t it???
Basic questions involved at UI stage are:
- How should we layout the information?
- Should we use calendar control or date input field?
- Should we show maps visualization while searching or simple text field?
- Should we use normal input box to type the numbers?
- Will it be more intuitive than pressing ‘+’ ‘-’ or simple text field will suffice?
There are ofcourse more of such questions which designers can ask at this stage. Above questions should give you a fair idea about how your questionnaire type should be. However, we just have to make sure it only gets details about user and business goals, needs and pain points.
By now you must have got pretty much idea about what distinguishes these two areas. :)
Along the way while we shape our product designs, we will come across some new elements which do not exists in the design system. There might be some newer layouts coming in picture. You can always present your ideas to the design system team to keep enhancing it.
However, before presenting the ideas, make sure you check the scalability of the design elements and also follow the brand guidelines.
“Never design an experience by randomly surfing the images because when you look at random design inspirations, you only notice the UI elements they are using and not the experience or design flow beyond that. This might restrict your mind to think about the innovative features it can have.”
Nonetheless, it’s fine if you are using proper channel to see inspirations :)
But…
Some designers feel tough to choose elements for representation of the data. So in case you also face similar issues then you might take some time and first understand the basic usage of various UI elements/controls and their best practices. Checkout below courses in case you want to start with level below before you start designing.
Hope you liked it! Thanks for reading! ✌️
