TSV Analytics
An SaaS Predictive Social Media Management Platform
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."
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
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.
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.
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:
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."
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.
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.
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.
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.