UI Kit Design.

For this project, I learned to craft the UI Kit using Brad Frost's Atomic Design Methodology for a more efficient workflow. Before jumping into building any components, we first needed to decide on a UI direction. I started my design process by browsing through various design inspiration websites, reading up documentation from reputable design systems, and looking into UI kits available in the market for a better understanding on what a UI kit is and the pieces needed to build a good one.

To determine the UI direction, we first designed a dashboard to be used as a "model" during our exploration phase. After several rounds of iteration, the combination above served as our foundational style guide throughout the project. This helped us decide on the choice of typeface, it's type-scale, the foundations of our colour system, as well as a suitable set of iconography.

With a UI direction set in place, we started building our components library.The image above illustrates how I utilized the atomic design framework in my design process. I learned to first create a simple checkbox with different states. Then using the checkbox, I combined it with a label component to form a proper labeled checkbox option. Once done, I was able to apply it to various situations such as a search feature's filter options or a 'terms and conditions checkbox' in an account creation flow on a website.

In this UI kit, some of the components I worked on are - checkboxes, radio, buttons, switches, toggle, date pickers, verification pin, tabs, charts, headings etc. Apart from these, I also assisted on several other components such as the data table, input fields, description lists, stats, and so forth.

After establishing a good variety of components in our library, we worked on a couple application screen examples. These are mainly of a specific flow to show how the UI components can be used in different projects. In this part of the project, I assisted on designing a job search platform's page design and a dashboard authentication flow. Through designing the application screens, we were also able to pick up on areas in the design system that required adjustments - namely the type-scale and colour system.

With the example screens done, I got to work on the UI kit's marketing components. These are ready-to-use templates of sections one would typically find in a standard website's structure such as header sections, a contact us form, testimonial sections, and so forth. For each section category, I designed 3-4 variations and all templates were designed for both desktop and mobile.

Some of the key takeaways for me in this project was the importance of attention to detail and the practicality of a design. Standardization is a fundamental practice to have when designing for a cohesive UI components library. I realized I wasn't very consistent when it came to things in this aspect. Some situations were my inconsistency when deciding on different objects' border radius, or the padding sizes I used across different elements. This is something I need to pay closer attention to in the future.

While I was working on the table and graph components, I also learned that in designing for data visualization, it is important to not only pay attention to the aesthetics of the presentation but also whether a specific design choice is practical when applied to real data. Should any future designs I work on involve data visualization, I'll dive deeper into dashboard research before making any design choices.

Prior to this project, I had very minimal experience using Figma. Words like design systems, components, variants were all foreign to me, but thankfully, not anymore 😊

In the beginning, I would spend a ridiculous amount of hours figuring out the best way to design and break down components. Now that we have reached the end of the project, although I am still far from knowing the A-Zs of a design system, I feel that I have learned a lot and came a long way since the start.

Before I wrap up this case study, I would also like to extend a big thank you to Mei Kwan for this learning opportunity. Due to my unfamiliarity with the software and scope, I initially found the project quite challenging yet at the same time, intriguing. Despite the ups and downs, I am happy to say that I thoroughly enjoyed every second of this learning process!

Going forward, I would love to explore more projects in the UI/UX field and hopefully have a hand in designing for products across different industries.