Case Study 3: Design Ecosystem
Company: ListenFirst Media | Year 2020 | Type: Social Media Analytics
NPS
+ 6.75
What was handled traditionally through surveys has now been automated, resetting our NPS score to 6.75.
Weekly Active Business Units
+ 8.2%
In Q1 2022, weekly active business units increased by 8.2% to 75.29% from the previous quarter.
Monthly Active Business Units
+ 3.5%
In Q1 2022, weekly active business units increased by 3.5% to 89.41% from the previous quarter.
Background
ListenFirst's analytics platform had gone through multiple iterations from rapid feature development to expanding capabilities, all to quickly serve and support client demands and expectations. As a result, design had taken a back seat. As the platform grew in complexity (alongside an increasing customer frustration curve), it became clear that there was a need to place greater emphasis on design thinking, including visual design.
Recognizing these gaps, the newly standardized design practice aims to simplify the visual design on multiple fronts including the platform's design system (or component library). This design system will include a strong adherence to brand alignment, a simplification of the entire UI control set, a more seamless and efficient use of fonts and colors, and lastly a consistent interaction model that not only makes the entire design set up more digestible but also reflects a best-in-class, luxury platform customers can expect to get once fully onboarded.
Pain Points
Customer Support, Strategy, and Account teams communicate and work closely with clients. As such, they've been a great resource in identifying platform pain points customers have been experiencing. This was especially true with CS and Strategy as they've not only had to know the ins and outs of the system to answer clients' questions but also be able to create reports on clients' behalf.
On the topic of visual design and the system's overall UI, the overarching feedback was that the system did not lend itself well to creating clean reports. It led to cumbersome, complex workarounds for both clients and ListenFirst teams. Most importantly, the UI felt outdated. It lacked the visual sophistication of a best-in-class, top-tiered platform experience clients would expect to receive when the service and platform came with a 6 figure price tag.
Gray Background
• Grabbing screenshots for reports was often time consuming as it forced clients and Strategy team members to manually cut and crop out the gray background out of their reports.
• The way in which the gray background was executed was a huge driver in having the UI feel outdated, particularly around its layout.
• Having the gray background laid out this way created huge white space that could've been used to enlarge customers' analysis and view.
Inconsistent Layout, UI, & Usage of Space
• Different layouts across the system increased the learnability curve, making it more difficult for users to remember how to interact with the system.
• Within each layout template, the aesthetics for the UI control set along with their inherent functional behaviors were inconsistent, further leading to a steep learning curve.
• UI for buttons had similar (if not exactly the same) treatment however, they behaved differently.
• Usage of color was not aligned to branding guidelines, leading to lost opportunity in further cementing brand identity.
• Space could have been better utilized to show case more of the analysis.
• UI Controls were very close in proximity, leading to an overwhelming experience.
Scalability & Performance Issues
In addition to the feedback that was provided around the UI by the CS, Strategy, and Account teams, feedback from development teams were around scalability — each page had to be built and deployed one at a time because of a lack of a design system. This led to time consuming processes that weren't efficient or cost effective.
On the performance front, there was deep frustration users were experiencing around page load times.
Next Steps
Once we were able to identify (and isolate) pain points shared by CS, Strategy, Account, and Development teams, we've first begun by applying visual design principles/processes that would accurately translate ListenFirst Media's brand identity and modernize it's system aesthetics. From then on, we would tackle issues of scalability and performance through the creation and usage of component library artifacts, responsive grids and vertical rhythm to address performance, and lastly, a standardized interaction model through the use of a more consistent UI control set.
Building Brand Alignment & Modernizing System Aesthetics
The first critical next step we took was to connect and partner with Marketing. Here, we were able to gain access to the following:
• Branding Guidelines
• Color Palette
• Currently existing font selections
• Iconography
Once we received these artifacts, we've begun to create a list of style tiles to quickly assess which visual patterns might work best with this new line of work to update the system's UI. The style tiles include the work we've done in the following:
• Conduct a competitive analysis
• Isolate and prioritize branding adjectives
• Conduct research on color to update the color palette with their inherent meaning
• Explore open source font selections
• Audit existing UI sets that we may want to use for our design eco system
Creating Consistent Layouts / Templates
Although ListenFirst is not a mobile platform, we've applied a responsive grid nonetheless to drive consistent layouts and templates in preparation to building out a scalable, repeatable design system/component library.
Given that our client base have multiple display resolutions, we've gone through our analytics data to understand what the general display resolutions were across our entire user base. This helped us in finding a sweet spot to set the minimum desktop display based on the percentile exercise we ran through.
With this set up, we can now begin to dissect page layouts to achieve the following:
• 1, 2, 3, 4 column templates to be reused for quick deployment.
• Make usage of space consistent across all pages.
• Help inform us on designing for more complex components including tables and data visualizations.
Vertical Rhythm
Given there was a lot of frustration around performance and speed, we took a page out of what many publishing companies do — apply vertical rhythm — a way in which font rendered are displayed with consistent line-height across the page. Not only does this method assist with making text cleanly separated and legible, technical side benefits include increased page load.
Based on the final font selection we've made in partnership with Marketing, we've gone through with setting heading and base font rules. Additionally, we took it a step further by also applying vertical rhythm to every single component.
Other benefits include:
• Increase speed in shipping out design mocks.
Component Library
Once we were able to figure out basic grids and font elements, we've begun to construct a brand new set of design artifacts applying atomic design thinking in preparation to building out a scalable design ecosystem. Here, we've run various visual stress tests on existing pages to ensure core functionality was maintained whilst also looking for opportunities to remove clutter.
Final Look & Feel
Once we've designed and set up all of the pieces for our design system, we began to put those pieces together to form fully polished page templates and layouts.
Brand: Content - Grid View
%201280px.jpg)
Brand: Content - Grid View Benchmark
%201280px.jpg)
Brand: Insights
%201280px.jpg)
Brand: Content - Sentiment
%201280px.jpg)