Textensor is a company based out of London with a development office in Edinburgh. They have three products; Magnum and Forum, which deal with the review and management of legal documents for court cases and mergers and acquisitions, respectively. The third product is Annotate, which is an online platform for the annotation and mark-up of documents.
All three products have vastly different brands and looks and feel. They also have very little consistency in how functionality is approached within each product.
I was brought on to try to create a more comprehensive style guide for their products, create better consistency in the functionality of their products.
Forum’s product team asked me to re-imagine the interface of the software, while still remaining tied to the current code, which had been in the process of being re-factored for over a year.
I asked the product manager about the top pain-points that the team and users were experiencing. I also asked for any personas that they used. From there I asked for any tickets or series of tickets that might highlight any problems that require UI attention. Finally I asked to speak to the Sales team to see if there were any features their clients were looking for that might be incorporated into a new layout.
From there, I interviewed and worked with front-end developers to ask similar questions and to understand the platform functionality and any other 3rd party vendor services they used (ie/ for dynamic graphs)
Textensor used Balsamiq, which is very restrictive in making mock-ups. Using Balsamiq, I created a comprehensive set of rough mock-ups covering top-tier functionality for presentation and buy-in. I proposed a cleaner, more linear look with better alignment and aesthetic balance that could be scaled between different screen sizes and platforms.
STYLE GUIDE DEVELOPMENT
Textensor did not have any style guides for any of their products and did not have any consistency in their brands.
Magnum, which is the top grossing product for Textensor wanted to apply a new style to their product. They asked me to help.
I assembled the Magnum and Forum teams together to ask if their development roadmap saw the products remaining completely separate and if so, if there were opportunities to align common elements of functionality to a complimentary style and look and feel. They said that ideally the two products should be compliment each other from a style perspective. I asked about the CSS of each product and what the short, medium and long term goal or each team were.
From there, I decided to facilitate a series of weekly, hour long meetings with product managers and front-end developers from both products, to :
a) educate teams on the importance of style guides for products and the strategy of implementing them in the development life-cycle
b) determine the scope of a complete, first phase, style guide that could be applied to both products
c) create the common elements by creative decision making, though a voting system and show iterative progress week-by-week.
Over the course of 6 weeks, I had created a rough draft of a style-guide for not only Magnum and Forum, but also the team from Annotate wanted to apply it for their product.
Annotate were able to take the style guide and apply it to their product as well as to their product’s web site.
Forum and Magnum product teams are gradually implementing the style guide changes.