Bloomberg Second Measure
Fintech Analytics, B2B
Designer // Team Lead
From stuck, to scalable
Second Measure offers rich set of products for analyzing company performance data, from data delivered directly as a feed, to a full-fledged analytics web app. When I joined, theyʼd achieved strong product/market fit, and were ready to make a leap in quality to really dominate their market. But their web app wasn’t up to the task.
This project focused on making the web app scalable for future development. We started with an audit of other solutions on the market. From there we consolidated ideas, tested prototypes, and shipped it.
From a process point of view, we needed to roll out changes in a gradual fashion, both so that engineering could keep up and so that users wouldn't go into shock. Luckily, users loved every update we made, thanks to significant research.
(all data in the following screenshots is fictitious)
The Team Challenge
In this project, I was both the primary designer, and the design leader. My team of designers was busy working on feature development, so I needed to coordinate the release timing of their work, in relation to the roll-out of the new layout.
Further, during this period, I had to build up a second Sketch library for the new layout, so as not to corrupt their ongoing work. We put Abstract to good use, with a clear branching strategy to get us through the transition.
The Brand Challenge
In parallel to this project, Marketing was about to wrap up a brand revamp! Everything from the logo to the brand colors was changing, and we needed to account for that in release timing.
The Product Challenge
When I had joined, the founders had pointed to their app looking for something “more modern.” In reality, what we needed was much more than skin deep. There were a number of moving parts to think about:
Core functionality was buried in a non-intuitive UI. Especially filtering, the key to any solid analytics platform, was floating in the middle of the page.
Far too little screen real estate dedicated to the data itself.
No design system or components library, so development was slow.
The Quick Win
Ok, I admit it, we did slip in a quick win before launching into the full-on redesign. Iʼm somewhat infamous for my “quick declutter” projects. I like to give the company a satisfying result they can point to right off the bat, while deepening my relationship with engineering.
For Second Measure, that meant working with the template they had and moving things around just enough to make some more space on screen for our fabulous data.
You can see the beginnings of moving all those filters to a single location:
We stuck with this look for nearly a year before moving onto the real redesign. In the meantime, the engineering and data teams worked to untangle the code that was blocking the more advanced filtering abilities we needed. And the design team doubled down on understanding the user, and pushing out feature development.
Getting to the Solution
Setting up a components library would eventually make things better, but we certainly didn’t want delay value to users by front-loading our own problems. Together with engineering, we decided to tackle a complete redesign. They would componentize it as we went along.
We needed a guiding light. We chose to focus on making filtering options dead simple to find, without stealing screen real estate from the data.
Step 1 – Audit Comparable Products
“Stand on the shoulders of giants” they say. And so we did. To make filtering intuitive, we knew weʼd have to adopt known patterns. I ran an audit of about a half dozen tools and websites.
We really dug in on e-commerce sites, as these have some of the best filtering and sorting UIs on the market – optimized for ease. A lot of analytics tools are overly complicated, and that wasn’t the result we wanted.
Step 2 – Basic IA Best Practices
Separating the analysis functions, from the account management functions, from the directory search was a necessary starting point.
The core differentiator for the analysis features was that they required the user to have searched for a company in order to view them. That made “search” the primary function to kick off any analysis.
Combined with what we learned from the filtering audit, we had the skeleton in place:
Search is front and center
The analysis menu is contextual to the company search
Directory and management are not contextual
A common pattern for filtering across all analyses was a combination of quick-access filter pills, and a collapsable filter panel.
Pushing all of this to the edges of the screen left plenty of room for data.
Step 3 – Prototypes and Validation
Weʼd been checking in with the business team throughout the process, but now it was time to really put them to work! Eight of them vetted multiple iterations of the prototype until weʼd ironed out the really gnarly issues.
Then we ran a usability tested with six clients, scoring their ability to accomplish common tasks with the new layout. Another iteration to make corrections, and we were ready to move to development. Once the dev environment was up, the whole company participated in a Bug-a-palooza where they slammed our dev server, surfacing over 100 issues.
From edge cases, to missing documentation; from odd click behavior, to feature requests – we collected it all. Working with PM, it got prioritized, the necessary was fixed, the rest was backlogged. We trained the business teams, coordinated messaging with marketing, and gave everyone a FAQ to answer any client questions.
Then we shipped.
Engineering had a solid components library in place, with a backlog to tackle the remainder. The filter panel allows us to add or alter new options as fast as we are able to write queries for them.
The design team also had a shiny new Sketch component library. We were able to quickly convert any work in progress from the old to new layout with minimal disruption, and we’ve since moved on to standardize on page types and reusable layouts.
Warm nʼ Fuzzy
Everyone loved it. The recruiting team was proud to do candidate demos. The support team could finally start all their responses with “In the filter panel…” instead of writing a detailed click-by-click explanation depending on the page. The sales teams sold it. The account managers took the opportunity to reach back out to their client lists. The development team was proud!
But particularly heartwarming were these three, simple words from the companyʼs very first customer:
LOVE the redesign!