Clearview Social offer services that make social media management easy to use. With a full scope of features, Clearview Social equips businesses with everything it needs to dominate the competition and stand out from the crowd. Things such as Social Media Automation, Corporate Posting, Analytics, and Social Media Ai. Their current UI and UX were build some time ago and needed to improved. Clearview Social hired a team of 2 to re-establish the UX and UI for all their features.

Problem

1. Navigation

2. UI Inconsistencies

3. UX issues for the various features
   

Business Goals

Not only did the business want to improve their entire product, they also wanted to introduce Ai products for a launch for end of year.

Team

Nectar (Senior Product Designer)

Collaboration
Engineer Team

Timeline

10 months

Lo-Fidelity Designs

Main goals for MVP were:

1. Ability to place companies based on 4 pilars:

2. See key insights about for each company and to be able to take users to company’s full profile

3. Download feature

4. Screenshot ability

5. Be able to discover ESPs through search

I adhered to the quadrant structure by incorporating the four pillars and positioning companies within the designated areas. Additionally, I integrated a popover feature that provides brief insights about a selected company, utilizing a visual language familiar to our users.

Similar quadrants

Given our interconnected system of related industries, why not showcase similar industry quadrants? This approach would enhance user discoverability of other quadrants, encouraging them to remain on our platform for an extended period.

ESP: 1st iteration

Is it possible to facilitate interactions within the quadrant to access information without relying on a popover? I experimented with the idea of selecting a company within the quadrant and displaying the information in an iframe adjacent to it.

I tested internally if it was intuitive that users would expect the iframe to interact with the quadrant itself. Is this easier than to just a click within the company name?

After considering resource constraints and user familiarity with quickly accessing company insights, we ultimately reverted to utilizing a popover.

Launch

For launch we chose to use company logos instead of text. However, a challenge emerged regarding company collision within the quadrant. When companies were closely positioned on the quadrant, collisions occurred, leading to confusion about their rankings. I presented several solutions to the engineering team:

1. Implement dynamic text placement adjustments upon collision, shifting the text to the left, right, or aligning it to avoid overlapping.

2. Eliminate text entirely and replace the text with company logos, accompanied by a "key" adjacent to the quadrant for reference.

Working enhancement for dec 2024

To improve the visuals of ESP, we aimed to upgrade our current 1x1 company logos by incorporating full logos within our key. Additionally, we are in the process of including company names. Despite encountering an issue with company collision, we are currently exploring a new solution, which involves adding a white stroke around the text or company logo.