We managed to bring consistency to a system that lacked it. The design system was built to scale (support more symbol variety), resize (change the size of the components), contained standard and custom components with multiple standard states each.
An example of how flexible News Connect 2.0 Design System was, while allowing us to remain consisten across multiple screens.
The architecture of the design system borrowed was built for reusability and scalability, which later evolved to become the Experience Design General Architecture Repository (you can find it here Design System ).
In this design system components were resizable, overridable, and built in a consistent way to ensure memory efficiency, which started becoming a problem due to the wide array of symbols.
The design system then had three types of files.
<aside> ⚠️ Although at the time this architecture seemed to be strong, it had a significant drawbacks. UI Kit was a really complex file that tried to accomplish too much. The information architecture of the file (the way the symbols were organised) was really organic which made it difficult for other designers to explore and use.
</aside>
<aside> ⚠️ Another problem we faced was that by symbolising every single version of buttons, text-boxes, a drop down, etc. The UI Patterns file became quite heavy to deal due to memory handling issues with Sketch.
</aside>
I started doing some research into what existed to understand UI Patterns in use, and then homogenised and reduced the elements in it to create a design system that was easy to use.
Below are the examples of the symbols used within the design system that helped build News Connect 2.0. These pages were helpful in a couple of ways: