Tradable bits

2018

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.

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

Modernise
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.

Revamp
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.

Challenges

Inconsistency
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.

Complexity
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.

An example of the discrepancies in button styling

Branding

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.

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.

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.

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

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.

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.

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