UX showcase Saas

Tradable bits


uX | UI | branding

Project overview

Tradable Bits is a market leading all-in-one CRM platform for marketing analysis, fan engagement & advertising in the Sports and Music industry. Created in 2008, it had seen innovation and ambition lead it to a powerful and comprehensive suite of tools which was ready for it's next stage in User Experience. I came onboard as the primary designer responsible for an overhaul from Brand Identity to User Research and everything in-between.

Complete UI and UX platform design for SaaS tech company

The problem

Rapid development of complex proprietary tools had led to a powerful platform, at the expense of a refined user experience. It was time to audit the existing tools, and apply the UX principles which are often (understandably) overlooked in fast paced start-ups.

Business & design goals

The tools were there, the functionality to radically improve clients' results had been identified and built, but the brand identity didn't reflect a top of its class product. The branding needed to match a high quality product, and reassure potential clients that it was the real deal.

As with the rebranding, a full UX & UI overhaul was needed to accompany and emphasise these sentiments. A frictionless and intuitive experience was required to reach the levels of mass adoption the sales team were striving for.


At this point there was no design system; no defined text styles, different icon styles, button styles etc. Page layouts were often in different formats for similar tools.
While each separate section could function independently, it lacked the cohesiveness of a complete product.

Many parts of the platform were difficult to interpret and utilise. A double-header style nav method made it common for users become confused when navigating. There was little to no help text or usability prompts to help users decipher a tools purpose and functionality without personal training. This amount of complexity is a barrier to client adoption and a pleasant user experience.

User Interface inconsistencies
An example of the discrepancies in button styling


Logo redesign and rebrand showing old logo and newly designed logo

A brand refresh was identified as the initial step in the process. This would be completed quicker than the UX work needed on the product, and would allow the sales team to start working with new marketing collateral and ad campaigns sooner.

The previous branding was showing signs of age and didn't represent the cutting edge tech company Tradable Bits had established itself as. There was almost no guidance or direction on the new branding, just one stipulation; the logo had to incorporate a reference to the the Giant Pacific Octopus. This was chosen by the founders as it represents the same values they saw in their company - adaptable, intelligent, multi-talented, with it's home in the Pacific North West.
After upwards of 100 different logotypes being produced and iterated upon. The following brand identity was settled upon.

Brand identity design Ireland
Brand Guidelines Document Logo construction
Brand Guidelines Document with colour scheme
Brand Guidelines Document text styling
Brand Guidelines Document text usage
Brand Guidelines Document logo best practices
Brand Guidelines Document Logo design good and bad examples

UI Refresh

To begin the UI overhaul, I first conducted a review of the platform and analysed areas for improvement. I identified standard elements which needed to be consistently used throughout the platform. This, combined with text styles and standard colours led to a robust design system which could be used to transform the existing product. I found that there were many superfluous containers, borders, and shades of grey in use. This led to a messy and unclear experience for the user, examples of this can be seen below.

Previous UI example
Examples of the old user interface before improvements.

The following assets were used in the creation of a new design system for the platform. Colours were aligned with the new brand identity to form a cohesive experience. A bespoke icon collection was also created featuring 120+ unique icons.

Design style guide button styling with CSS
Design style guide standard text elements
Design styleguide colour scheme
Design style guide table guidelines
Design style guide entry form input fields
Design style guide date picker UI elements

Once these elements had been defined and completed, the process of applying them to the existing interface could begin.

UI redesign animation

UX Improvements

At this point the UI updates had greatly improved the primary identified challenge of inconsistency, next up was to tackle the issue of complexity. The most pressing UX issue was the navigation; a complete overhaul was needed and after conducting research with key clients, I decided a sidebar implementation was the best option. This offered the user some key benefits:
1. We could remove a significant piece of content from the main section of the screen, allowing the user to compartmentalise the content they were ingesting. This mitigated the overwhelmed feeling which was reported by many users.
2. The sidebar layout allowed us to efficiently display the current page, and all other relevant pages/sub-pages. Before there was often confusion as to the user's current location on the platform and this made it very difficult to navigate and led to a poor feeling of confidence from the user.

UX Platform redesign animation

The most complex tool on the platform was an automated ad creation interface, which allows the user to create and launch advertising campaigns on multiple social platforms at scale. A key improvement in reducing the complexity was the introduction of collapsible parent-child elements. This established a strong hierarchy and allowed the user to comprehend the tool much more easily.

UX agency improvements
The above shows the before and after of the new organisation layout.

Key takeaways

In roughly a year of work, a complete UX & UI overhaul was planned and executed which allowed for a vastly more comprehensible and useful suite of tools. This paved the way for increased customer retention & satisfaction, and a more confident & empowered sales team. The new product helped attract some of the biggest sports & entertainment names in the world who remain engaged, enthusiastic enterprise clients.

More Projects

Lollapalooza AR Tower

Make it Happen

Ready to kickstart your project?
Click below to start making the dream into reality.

Let's Go!