The Tally CIS user interface (UI) was initially created using a pre-made library of UI elements. While this approach helped in quickly building a prototype or when speed was of the essence, it proved to be insufficient as the system grew in complexity. The library did not accurately represent the brand, and the UI implementation became chaotic over time, leading to inconsistent user experiences and expensive technical problems.

Updating the UI provided a great opportunity to revamp the system and offer users a modern, efficient, and effective UI.

Assessing the current UI involved creating a system map to understand the types of information that users needed to comprehend and manage. It also required direct observation of users interacting with the system, assessing corporate brand guidelines, determining their suitability for a SAAS product, and engaging with the development team to understand the technical implementation methods.

Developing a new UI required creating a set of UI principles that assisted with decision-making, following best practices, and incorporating brand representation. Additionally, the happiness factor was considered.

Testing and feedback were crucial to ensure the new UI met user needs. This involved creating prototypes and conducting System Usability Scale testing to gather user feedback and determine effectiveness.

Implementation required developing a Visual Style Guide, updating the technical platform to recent versions, a strategy to transition from the old to the new UI, and addressing any affected functionality, such as Test Automation.

The key output was a style guide to assist developers and product teams with visual styling and layout principles. With this, rollout to customers of the new styling was initiated.

The results were very positive, as they helped raise awareness amongst Product Owners and Business Analysts about the importance of effective UI, such as consistent page layouts, font sizing, form layout, and information hierarchy. Moreover, the UI was much fresher and represented the brand better, resulting in improved user experience.