Supporting data-driven investment decisions
Supporting
data-driven investment decisions
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.
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.
Project Summary
Industry
Fintech, B2B
Year
2018-2020
Role
Designer, researcher, team lead
Results
From stuck, to scalable
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 components library for the new layout, so as not to corrupt their ongoing work.
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 components library for the new layout, so as not to corrupt their ongoing work.
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.
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.
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.
No design system or components library, so development was slow.
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.
No design system or components library, so development was slow.
The Plan of Action
The Plan of Action
1. Get a quick win under our belts
2. Audit comparable products
3. Implement basic Information Architecture best practices
4. Iterate on prototypes
5. Launch!
1. Get a quick win under our belts
2. Audit comparable products
3. Implement basic Information Architecture best practices
4. Iterate on prototypes
5. Launch!
Step 1. Quick Win
Step 1.
Quick Win
Step 1.
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 in our 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 in our Quick Win.
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.
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.
Step 2. Audit Comparables
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.
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.
“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.
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 3. Information Architecture
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.
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 4. Validate Prototypes
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.
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.
Results
Results
Then we shipped.
Scalability — 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:
Then we shipped.
Scalability — 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!