Navigating the world of stock investment can be daunting, especially for newcomers. smallcase tackles this challenge head-on by curating baskets of stocks that align with key ideas driving the Indian economy. Through thorough research and analysis, smallcase creates these baskets, making it easier for investors to choose strategies they believe in. This approach removes barriers for those entering the investment arena, allowing them to invest confidently in well-researched stock baskets tailored to future trends.
When I joined smallcase as one of the early designers, the product was in a phase of rapid growth — constantly shipping new features and enhancements. With the team expanding quickly and operating in a fast-paced environment, we began to notice issues with design inconsistencies and redundant design quality assurance processes that were causing delays for the business.
Problems identified
- Inconsistencies in components: Variations in font size, color, and spacing were noted across different products, leading to a lack of visual harmony.
- Absence of a centralized source of truth for design: The lack of a well-maintained reference for design components resulted in potential inconsistencies across products.
- Redundant design QA efforts: Due to the aforementioned inconsistencies, repetitive quality assurance checks were necessary for the same components in different app releases, consuming valuable time and resources.
- Lack of comprehensive design documentation: Essential information such as design processes, best practices, and component specifications was not adequately documented, hindering efficient workflow and knowledge sharing.
We started tackling problems with a bigger goal in mind rather than just fixing issues for the present moment. This led us to consider transforming our component library into a full-fledged design system. Good amount of research was conducted to determine the best approach for building a design system, leading to the adoption of Brad Frost’s Atomic Design methodology. This methodology’s core concept of developing design components served as the foundation for our approach, ensuring consistency and efficiency in our design process.
Atoms serve as the fundamental building blocks of our design system, encompassing elements like typography, color, icons, spacing, and shadows. During the implementation of this system, we discovered a multitude of font sizes and colors in our UI inventory. This realization led to a streamlining effort, reducing the number of font sizes and colors while simplifying our color library by using a more concise selection from our brand colors.
On the other hand, components play a pivotal role as main elements that introduce interactivity to the user interface and are extensively utilized throughout the development process. Although components can be further categorized into molecules or organisms, we opted to categorize them collectively under “component” for straightforward navigation and ease of use.
The documentation process began in Zeroheight before transitioning to Storybook as a living document. Each component was meticulously detailed, outlining specifications, use cases, and best practices. This comprehensive documentation served as a centralized reference, reducing inconsistencies, and fostering seamless collaboration between designers and developers.
The implementation and utilization of the design system, accompanied by thorough documentation, marked a substantial enhancement in the design process. To boost efficiency even more, the team introduced a meticulously organized file structure and adopted consistent nomenclature practices. This not only streamlined the design workflow but also addressed the challenges of redundant design QA, inconsistencies, and overall accelerated the speed of the team’s workflow.
Moreover, the design system played a crucial role in harmonizing communication across design, development, and business teams. It established a common language and understanding of app components, leading to a more cohesive and efficient collaboration.
