TSV Analytics

An SaaS Predictive Social Media Management Platform

Image alt tag

TSV Analytics is a predictive social media management platform aimed to facilitate the creation of more effective content by social media managers.

PROBLEM

Managing many businesses is time-consuming, especially when social media managers must manually filter through their data since they lack the tools to organise and view all their KPIs in one place. Social media managers also spend a lot of time researching and skimming through fresh media. The process is tedious and takes away time from actual content creation.

SOLUTION

We streamlined the data filtering process for users by providing new screens that simplified a previously complex system. We also created a welcoming landing page and adjacent pages to inform users about TSV and provide a way for them to request a product demo if desired.

MY ROLE

UX/UI Designer

TIMELINE

Overall: 6+ weeks
Design & testing: 6 weeks

TOOLS

Miro, Zoom, Figma, Slack

PROCESS

Research, Ideation, Wireframes, Design, Hi-Fidelity, Prototype, Developer Handoff

01/ DISCOVERY

KICK OFF MEETING

My team and I started our process with a kickoff meeting, during which we became familiar with the current platform, conducted competitor research, and brainstormed additional questions for the client. We identified current user pain points through questions and research. The main issue is that users have access to a large amount of data with no clear next steps or ways to navigate and utilize the data. The client desired an intuitive, actionable, and helpful redesign.

KEY TAKEAWAYS

. Show the value that focusing on social media through analytics provides
. Observed that the original design is inconsistent throughout.
. TSV site should be "intuitive, actionable, and helpful."

TSV Analytics
TSV Analytics

COMPETITOR ANALYSIS

As part of my research for TSV, I analyzed the competition, particularly Sprout Social and Brandwatch, for more ideas. These competitors, I discovered, fell short in terms of user-friendly interface design and demonstrating the value of advanced AI systems like TSV. TSV Analytic's goal is to make social media managers' lives easier and their processes more effective.

Key Takeaways:
. Every brand showed how it provided value in one or two different ways.
. Each brand used a cohesive UI style throughout the site
. None of the competitors offers a demo

TSV Analytics

02/ IDEATE

USER STORIES

The client was able to decide on 5 user stories he wanted our team to focus on. The user stories were based on the current features of the original website design.

As a user, I want to be able to learn more about the company and its mission.
As a user, I want to be able to view all the blog posts.
As a user, I want to be able to view a demo of the product.
As a user, I want to be able to update my filter feed.

TSV Analytics

USER FLOW

We examined the current navigation based on the user stories we received from the client. We discovered that if a user followed the site's present navigation, they would be unable to access the "Blog" or "About" pages. Thus, based on all the information we had studied, we built these user flows below:

I focused on creating the "Blog Page" and "Article Page" for the client's existing website. I started by learning about the current platform and then researching industry standards for blogs. The client's previous blog page lacked a search bar, lacked a page filter, and had spacing and sizing issues. Throughout the project, the layout and flow went through several iterations.

TSV Analytics

WIREFRAMES

We utilized Figma to develop mid-fidelity wireframes for our user stories. Despite working in a five-person team, it was critical that the product appear to have been created by a single designer. To accomplish this, we went through multiple wireframe iterations and held numerous collaboration sessions. As a team member, I was in charge of designing the following screens:

TSV Analytics

STYLE GUIDE

We developed a complete style guide to ensure design consistency throughout the project. This guide covered core design elements such as color palette, typography, button layouts, and components, providing a framework for ensuring all design decisions are consistent. For icon usage, we drew inspiration from existing social media platforms, including hearts for "Likes"/"Favorites" and fire emojis for "virility score."

TSV Analytics

03/ DESIGN

UI ITERATIONS

For the UI iterations, each team member created their own version of the About Page. The team then conducted a comprehensive review of all designs, ultimately selecting the top three for further development. After several rounds of review, including a final review with the client, UI Iteration #1 (my UI iteration) was approved as the client liked the organic style of the light mode design. 

TSV Analytics
TSV Analytics

HIGH - FIDELITY DESIGN

The style guide aided us in transitioning into our hi-fis and finalizing our screens. I worked on selecting the appropriate colors for the "Blog page" and "Article page" to replicate the playful feel of the client's original blog page. I chose to keep the green color from the style guide as the highlight color for the pages, and I used a linear group of colors to match the banner image.

TSV Analytics

04/ DEVELOPER HANDOFF

ANNOTATIONS & MEASUREMENTS

To wrap up our project, we wanted to provide the client with all the necessary information and tools for a seamless development process. We incorporated annotations for designated functions, CTA paths, and element spacing measurements to minimize confusion for developers and stakeholders. Our annotated screens serve as an example of the level of detail we included to minimize any potential confusion during development.

TSV Analytics
TSV Analytics

05/ REFLECTION

TAKEAWAY

Collaborating with TSV Analytics on the redesign of their platform was a valuable experience that showcased my skills as a UX/UI designer. Through effective communication with the TSV Analytics team, I was able to identify their needs and goals for the project and design a solution that addressed their pain points.

One of the challenges I encountered was navigating the complexity of the TSV Analytics platform and the technical limitations of their existing website. However, I was able to use my expertise in UX/UI design to create a visually engaging and intuitive blog page that incorporated TSV Analytics' branding and unique features.

Throughout the project, I prioritized effective communication and collaboration with my team which was key to the success of the project. My experience with TSV Analytics demonstrates my ability to work effectively in a team environment and to use my skills in UX/UI design to create solutions that meet the needs of clients.

The project taught me that flexibility is crucial in design, especially when dealing with unexpected challenges. Working with my team, we identified creative solutions that allowed us to maintain project momentum, and this experience reinforced the importance of iteration and adaptation in the design process. Moving forward I’m excited to contribute to new innovative and impactful design projects.