Recently I joined a fin-tech company as a product designer. My initial task was to do a heuristic evaluation of the product. During my research, I found that the main issue in the product was the lack of consistent design elements. In order to overcome this issue, I am planning to create a design system for the product. But I am kind of confused like from where should I start? Any inputs/advice from you guys is really appreciated.
I am in a similar situation. And the worst thing you can do to yourself is believing that there is any one way a design system needs to look like.
In essence, a design system is a manifestation of rules intended to be followed when designing. Those can be as esoteric and tangible as your organisation needs it to be.
Here's how I would approach it:
- Start with collecting current patterns, look for inconsistencies amongst them and in an iteration, unify them where reasonable (for example, different hues of the same color need to become one).
- Start some form of manifestation for those patterns. This can be a google doc, a website or a pdf - it does not matter, what matters is that it is getting manifested in some form of thing that can be found outside of your or your design teams mind.
Depending on the brand/product that could already take a while but will be immediately valuable. From there on you can start questioning those patterns and identifying their origin or the underlying principles that cause those patterns to exist, potentially changing them, creating new ones.
I would highly recommend these videos from InVision
Thanks. Will look into it
Hi there! I strongly suggest you to pick any of predesigned design systems for Figma, React or Angular. It's flexible, adjustable, full of reusable patterns. You can import it locally and use as your starting basis. Some organizations already tried this method, saved months of working hours and came up with a modified system according to their mission. They're completely satisfied with such a quickstarter, in terms they're bypassed basics of learning Figma system from scratch, bypassed a pixeljob as well and other dummy routine. Real users sharing their experience here https://setproduct.com/testimonials
maybe point out that you created that one
That’s awesome. You’ve solved 1/3 of the design system problem.
Does your ‘design system’ come with a style guide and real front end components to match?
I clearly understand that, and the answer is - yes, we have it. Still in beta but it matches your 'design system' requirements as 3/3
How big’s the company? Do you want to build an actual design system with actual coded front end components or are you just looking to build a style guide with a Figma/sketch/whatever library? What kind of front end resources do you have at your disposal? What’s the current front end framework, if any? How much buy in do you have for a ‘design system?’
More than happy to help but need way more information.
The basic idea is to create a sketch library. And forgot to mention that the product is an android app and there is no chance to release it into other platforms.
Do the inventory → Identify different implementations of one pattern → Design new reference version of the pattern (or use the best from the previous one) → Rinse and repeat
...I am planning to create a design system for the product. But I am kind of confused like from where should I start? Any inputs/advice from you guys is really appreciated.
That's virtually impossible to answer. None of us work with your company, work on your team, have insight into your heuristic evaluation, we don't know your users, don't have any insights to data about what's going on, etc etc