HSBC Kinetic

Maintaining standards with the UI library

I took ownership of the Kinetic UI toolkit and evolved it for new tools, workflows and products.

  • Product design
  • Design system management
Background

Taking ownership of a foundational library

When I joined the Kinetic team there was already a well established toolkit that was being used by the team of around 8 designers. The toolkit consisted of a sketch library and an iOS library housing the built components in Solidify. The library was also setting a new standard within the bank and was well regarded at the time.

I was asked to look after the library and help maintain the standards soon after. I would be in charge of adding new components, maintaining standards and keeping the library working well for our design team, fixing any components that weren’t working correctly and keeping up with new features in Sketch.

01

Typography improvements

One of the biggest complaints from our design team was the way type styles were being managed. At the time, type styles were being created ad hoc for a particular use, and named semantically. This led to an unordered list of type styles with unintuitive names like “Label 3” and “XXXXX” (find examples). It was so specific that the same size and style would have differently named entries depending on colour or alignment. Sometimes the line height would mis-match too. It was hard for a designer to discern a type hierarchy and I found personally that I was co-opting type styles for things they weren’t originally meant for.

One of the first things I did was to simplify the type stack into a standard hierarchical list, starting with the largest sizes and styles, and down to the smallest. As we were targeting iOS only at this stage, I kept the naming convention loosely based on Apple’s own format, with “Title Large”, Title 3” and so on.
I took care to relabel each type style in such a way that the library components wouldn’t break when a designer linked the sketch library, and also matched up with the existing table of styles with the previous naming convention, so that I could communicate the changes with the dev team.

Some styles didn’t line up exactly with the hierarchy though. We had some specific styles that were being used only for forms and specific components. I grouped these appropriately in sketch, in a way that discouraged their use in general design layouts..

This all happened in a separate sketch file (I was maintaining two versions of the file at this point, to keep new components in each library), and released the library as a V2.0, encouraging designers to only move over to this library for new journeys they were working on.

Luckily there was minimal disruption to the design or dev delivery, and the change was felt to be a big improvement to our designers.