The Brief
Our main brief was to establish a foundational design system to align Intapp’s professional suite of law and financial products on mobile and web. My initial role was focused in the codifying the visual language and creating the component library. 
In addition I also updated the visual language from a dated experience to something that feels current and matches client's modern professional expectations. 
Diamonds in the rough
First we conducted an UI inventory of Intapp’s disparate applications with their own look and feel – gathering variations of page types, elements and styles. We identified design patterns used across their applications and later defined an appropriate navigational model and layout structure. 
Inventory also helped me to analyze all the style variations and gave me the building blocks to unify the visual language. It also highlighted how fractured the experience was across their products.
Visual language
While the rest of our team continued with the design system patterns, I focused on codifying the visual language while pointing out possible areas of improvement. For example I found out that there was dozens of different shades of grey used across the product suite, or that there was some accessibility issues with the primary color usage. 
Documenting everything systematically also helped to highlight the gap between the current state and our main stakeholder's vision of a modern software. 
Extreme makeover
The original scope included only a light refresh of key visual components, but as it become apparent that more heavy lifting was needed, we did a quick pivot from our project plan. Instead of working on the design system, I spent a few days exploring new visual concepts based on my understanding of the brand, the product and client aspirations. The aim was still not to re-think the wheel but to visualize what could be possible within the current boundaries.  
This work then helped us to frame the discussion about the new visual style and find a direction that everyone was happy with. No small task considering we had opinions from several stakeholders from C-level to branding and product people.   
Motion design
I also did some quick motion design studies to help with the decision making about navigation model.
Building the system 
Using the chosen direction as a guidance I then extended it to an updated version of the visual language and created a new component library to support the ongoing design system work. This was also a good time to address the issues with accessibility and usability with their current experience, like creating a bespoke, accessible color palette for data visualization.
Th component library included around 80 components and that's not counting all the various states. In addition to component library, I also created comprehensive rules for typography, color, spacing and data visualization.
Mobile app
Parallel to our work, the client’s mobile experience team were working on the app update and naturally wanted to integrate the new design language to their next release. To support this we created a few examples of mobile designs and also added some mobile variations to the design system, like adjusted typography and spacing rules. 
Design evolution
In addition to a foundational design system, we delivered a fresh modern take on consulting software, while reforming what the company does best: leading with trust and authority.

Before

After

🛠️
Year:
2019 

My role:
Visual design, UI design, motion design, UX design
Back to Top