Building and maintaining Tartan’s design system from zero to hero. Finding and resolving new opportunities to optimise the way we work within the team, with developers and the rest of the organisation.
Overview
Having the opportunity to build a product from scratch, we knew it was vital for our product to be able to grow easily to construct a system that would allow us to scale, iterate and experiment quickly.
FALL 2022 - SPRING 2023
Tart Design System
Design system for Tartan's verification product
Building and maintaining Tartan’s design system from zero to hero. Finding and resolving new opportunities to optimise the way we work within the team, with developers and the rest of the organisation.
Overview
Having the opportunity to build a product from scratch, we knew it was vital for our product to be able to grow easily to construct a system that would allow us to scale, iterate and experiment quickly.
FALL 2022 - SPRING 2023
Tart Design System
Design system for Tartan's verification product
Building and maintaining Tartan’s design system from zero to hero. Finding and resolving new opportunities to optimise the way we work within the team, with developers and the rest of the organisation.
Overview
Having the opportunity to build a product from scratch, we knew it was vital for our product to be able to grow easily to construct a system that would allow us to scale, iterate and experiment quickly.
Challenges
One of the biggest challenges was the design and development synchronisation as we were working on a full web app (getting into progressive web app in future) which presented it’s own limitations when building components for responsive screen sizes. As we were creating a full custom UI that had to be implemented in all systems, using too little native components, it was really difficult at first to propose and build components that performed equally. We managed to resolve this by slimming off components and behaviours and creating a workflow that involved creating a custom app for each platform which allowed to review and approve how components were created and behaving before pushing to the app.
Team distribution:
Pratik Panda (Founding Designer)
Vishalika Katiyar (Associate Designer)
K Pradeesh (Associate Designer)
Key role:
UX Design, Prototyping, Visual, Research
Challenges
One of the biggest challenges was the design and development synchronisation as we were working on a full web app (getting into progressive web app in future) which presented it’s own limitations when building components for responsive screen sizes. As we were creating a full custom UI that had to be implemented in all systems, using too little native components, it was really difficult at first to propose and build components that performed equally. We managed to resolve this by slimming off components and behaviours and creating a workflow that involved creating a custom app for each platform which allowed to review and approve how components were created and behaving before pushing to the app.
Team distribution:
Pratik Panda (Founding Designer)
Vishalika Katiyar (Associate Designer)
K Pradeesh (Associate Designer)
Key role:
UX Design, Prototyping, Visual, Research
Challenges
One of the biggest challenges was the design and development synchronisation as we were working on a full web app (getting into progressive web app in future) which presented it’s own limitations when building components for responsive screen sizes. As we were creating a full custom UI that had to be implemented in all systems, using too little native components, it was really difficult at first to propose and build components that performed equally. We managed to resolve this by slimming off components and behaviours and creating a workflow that involved creating a custom app for each platform which allowed to review and approve how components were created and behaving before pushing to the app.
Team distribution:
Pratik Panda (Founding Designer)
Vishalika Katiyar (Associate Designer)
K Pradeesh (Associate Designer)
Key role:
UX Design, Prototyping, Visual, Research
Handoff highlights
Early in the process of syncing design and development it was crucial to help developers understand how animations should be implemented. We tried different strategies to make it clear, but prototyping was simply the most efficient way to do it. We defined some basic standard behaviours for the components’ first iteration. At this stage prototyping features in Figma weren’t too advanced which resulted in using ProtoPie to create high-fidelity artefacts.
Understanding possibilities
In the early stages of the library creation I experimented with building React UI components, looking for new ways for the design team to prototype and evaluate what was possible to do in the development team. This was later improvised with the dev team as it was easy at the time for designers to get involved with code and viable for me as a sole designer (who understands the basics of coding and modular framework capabilities) to build an entire ecosystem. This was however a great opportunity to learn React ecosystem and understand about other react libraries and mastering component workflow
Component iteration
Shortly after establishing our first library we went through a face-lift that required components to be updated visually. This, however, was also a chance to review the way components were structured as we were facing issues when updating or using them modularly. At the same time, Variants were introduced in Figma, making it a fantastic coincidence to create vanguardist components. We chose some of the most used and complex components to review. This small iterated set would be later the base from which the rest of the library would be updated.
Workflow optimisation
Going beyond the component library one of my main objectives while taking care of the Design System was to find ways for the design team and the rest of the organisation involved with the library to streamline the way they work with it. This resolved in many opportunities for me to build new integrations, channels and workflows that were beneficial for all the teams involved.
tart_comp
tart_comp
tart_comp was created for the Design Team so they could report component and instance issues directly to Slack. This allowed us to channel all requests into a single output to manage this requests in a more efficient way.
tart_comp was created for the Design Team so they could report component and instance issues directly to Slack. This allowed us to channel all requests into a single output to manage this requests in a more efficient way.
tart_proto
tart_proto
tart_proto was created resolve the specific pain of using different animation settings for all of our prototypes in Figma. By using Lottie, After Effects every designer could use presets that match our interaction guidelines without having to memorise them or play with settings themselves.
tart_proto was created resolve the specific pain of using different animation settings for all of our prototypes in Figma. By using Lottie, After Effects every designer could use presets that match our interaction guidelines without having to memorise them or play with settings themselves.
Team level sync
As a Design Team we set some ground rules when working on unhappy paths, notifications and other types of alerts with the product managers, developers and stakeholders. This included using a source file for all of our alert-related content. Though this was important for us as a team to keep files clean and avoid clutter, it wasn’t so practical for developers, BAs, legal teams and other members of the organisation to understand how these alerts would be displayed. While we had templates linked to the content source file it was so much easier to understand when seeing it on the layout. Looking for a way to balance both worlds I integrated a tool JIRA, which allowed anyone at the organisation to preview work in progress, alerts, task completion, milestones and checkpoints within the design team.
The Design Principles
As a result of working in a fast-paced environment and lots of changes in decisions and non standardised products, we ended up designing upon a shared but undocumented view of how our product should be designed and what objectives our experience should accomplish. To address this matter I lead the very needed initiative to create our Design Principles. They would not only help the team make better decisions but also be the root of our Design System.
In short, the idea was to build upon what we already did and not an attempt to do it from scratch, nor creating an elaborate concept of what we wish to be, but rather a result of what we’d been able to create for about 2 years.
The result was an outstanding set of principles that resonated so well within the company leadership, accomplishing one of the goals of aligning with the company vision, that the principles were pushed further to be used as company-wide principles.
To overcome next
Documenting our components is a continuous process that involves both design and development teams. Currently documentation is managed inside the Figma files. While this may be convenient in some cases, it's hard to navigate, read and might have accessibility issues. We want to make access to the Design System universal. Right now we're working on migrating all documentation to wiki kind of software like Notion, in order to make it more readable, navigate-able and findable within the organisation top-level documents.
Maintaining, developing and improving the Design System is an endless task. There's a lot of work to be done and the team is looking forward to resolve current and upcoming issues such as contribution, component naming and usage consistency.
Documenting our components is a continuous process that involves both design and development teams. Currently documentation is managed inside the Figma files. While this may be convenient in some cases, it's hard to navigate, read and might have accessibility issues. We want to make access to the Design System universal. Right now we're working on migrating all documentation to wiki kind of software like Notion, in order to make it more readable, navigate-able and findable within the organisation top-level documents.
Maintaining, developing and improving the Design System is an endless task. There's a lot of work to be done and the team is looking forward to resolve current and upcoming issues such as contribution, component naming and usage consistency.
Have a question, some feedback, or an outrageous idea? Please, please, please send it my way
क्या आपके पास कोई प्रश्न, कोई सुझाव या कोई रोमांचक विचार है? कृपया, कृपया, कृपया इसे मेरे पते पर भेजें
