Why is there a need to improve the product library?
Reeeeeee-cap!
When @Federica Micheli joined the team and worked on her magic for Cloud, she noticed some accessibility and usability issues with the design components. I, on the other hand also realised that there were inconsistencies to the usage and styling of the components across all products. And we also have designers that came forward, asking for additional components to be added.
With all the issues and feedback being highlighted we realised that this is something we need to solve as we scale. And so, the project was born.
Accessibility Testing
“Accessibility is the inclusion and making sure you’re including, everybody…”
And that is what we’re trying to aim, one step at a time. We did a couple of internal discussions, mainly within the UX and design team - trying to understand if what we felt and experience with our brand colours and fonts was merely just an assumption or if it is something deeper than that. The results were a bag of mixed reactions. And so, we decided to dig deeper.
We then took the font sizes and brand colours to go through a series of accessibility testing. What we got was what we assumed in the beginning. The colours didn’t meet the passing score. And so did the body font. The universal body text size is 16px and we’re displaying it at 2px smaller.
And so, we worked on proposing new accessible font sizes and colours that we think is best to apply to the components. It all went well except for the colours. Upon consulting the design team we realised that the colours that worked on the product doesn’t work on the brand collateral. And so, we made the decision to pass the torch to the design team to help us come up with accessible colours that can cater across Tyk’s brand.
@Katrien Verlindendid her magic and poof! But it was not as easy as waving the wand and the new colours pop out just like that. No. Katrien went through a series of testing ensuring what she churned out is applicable across all collateral. It is a long process. And a heavy one. To know all about her process, please wait for her update coming out soon.
What other magic have we done to improve the overall usability and accessibility for our users?
Below are some of the work we have done to improve components in the library,
Applying new accessible colours to all components
Updating the typographic scale to improve readability
Updating button colours and rules by introducing primary and secondary action
Updating the icons to new styling.
Updating tags styling and introducing a new colour to differentiate it from buttons
Introducing modals (warning and danger prompts) to interrupt users and demand an action
Introducing dialogue boxes (Info, success, warning and danger) to inform users about critical information, require users to make decisions, or involve multiple tasks
To view the product library, please click here.
What's next you might ask... A while ago, I spoke to our UI developer, @Laurentiu Ghiurand one of his advice is to take a few flows from each product, apply the updated components and go through testing. And that’s exactly what we’ll do next.
And then it comes to a point that everything seems to be working well. Now what’s next? We’ll have to work with the FE team in collaborating to update the Github library and apply these changes product by product. It is going to be a journey.
So, why is there a need to improve the product library?
The reason is probably the same with why you want to improve your fried rice recipe or why you want to improve your sleeping habits.
It’s all bout that experience.
That experience when you take a first bite of your improved fried rice. That umami… Or, that experience of waking up better after going to bed before 10am for the past 1 week. And that’s what we want to do, we want to constantly improve so that our users can experience the best with our products. What we’re trying to achieve is not only about how it looks, but how it feels and ease of using it.
And... we're kinda working on that last bit...
Ease of "Using It"
Remember earlier I mentioned that we want to do our best to eliminate inconsistencies? This can be achieved when all of us understood on how to apply the same design language. It’s not just about applying them but how we should apply them.
So this includes giving rules which consist of the UX best practises, tone and voice of the UX copywriting, examples of do’s and don'ts of applying these components. So this is actually part of the bigger picture that we’re trying to solve to improve that overall experience of our product and its users.
With guidance from @Sandra Lindholm, we're currently working towards creating a design system which all of us can refer to as a source of truth. To read more about the benefits of design system, click here.
And we have come to the end of the blog. I hope you enjoyed the blog and if you have any feedback or ideas of how we can continue to improve. Give us a shout @uxteam.
