A personal side-project, in which I created a design system for JTC Guitar - an online learning platform that provides guitarists with a huge library of practice materials.
The main purpose of the project was to get more comfortable with Figma. I have used Figma for a while now, though I was aware I could improve my process and production.
I chose JTC Guitar as the product I will conduct this project on. The reasons being, I myself am a user of this product, making it comfortable territory. I also saw various areas that could be improved upon. These improvements are based on my own hypotheses and have not been tested on users.
In order to make the use of components consistent, I experimented with making use of nested components. This effectively created a single source for how each component is made, creating a consistent experience. This also allowed for single changes to the master component, to then affect each instance of that component.
The design system was created with accessibility in mind, from the ground up. The system was broken into sections based on the atomic design method and breadth of use.
In order to ensure the end product is consistent and accessible, the foundations need to be well established with acessibility built within. Therefore, the colour system was created with contrast ratio in mind, the typography system was created with readability in mind.
As mentioned earlier, these components are based on master components, allowing for consistent use and making it a lot easier to make large scale changes.
With the atomic design method in mind, it quickly became clear that certain page areas were being replicated many times and it would therefore benefit me in turning these into reusable components. Such as the left navigation panel, certain page headers, and the filter side sheet.
