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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Managing multiple businesses is demanding, particularly for social media managers who lack a centralized tool for KPI tracking. The time-intensive process of researching and scanning new media also detracts from 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.
KICK-OFF MEETING
In our kickoff meeting, we reviewed the existing platform, carried out competitor analysis, and devised further client queries. Our investigation highlighted that users grapple with a plethora of data but lack clarity on next steps and data navigation. Hence, the client sought a redesign that is intuitive, actionable, and user-friendly.
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.
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 FLOWS
After evaluating the current navigation using client-provided user stories, we noted that users couldn't access the "Blog" or "About" pages. This led us to devise the user flows presented below. My work centered on the "Blog Page" and "Article Page" of the client's existing site
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 Blog Page and About Us Page.
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. The client already had a set color palette that he wanted to work with, so we incorporated TSV's brandmark and color styles (green/navy) in our style guide.
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.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
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.
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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Managing multiple businesses is demanding, particularly for social media managers who lack a centralized tool for KPI tracking. The time-intensive process of researching and scanning new media also detracts from 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 demo if desired.
KICK-OFF MEETING
In our kickoff meeting, we reviewed the existing platform, carried out competitor analysis, and devised further client queries. Our investigation highlighted that users grapple with a plethora of data but lack clarity on next steps and data navigation. Hence, the client sought a redesign that is intuitive, actionable, and user-friendly.
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.
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 FLOWS
After evaluating the current navigation using client-provided user stories, we noted that users couldn't access the "Blog" or "About" pages. This led us to devise the user flows presented below. My work centered on the "Blog Page" and "Article Page" of the client's existing site
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 Blog Page and About Us Page.
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. The client already had a set color palette that he wanted to work with, so we incorporated TSV's brandmark and color styles (green/navy) in our style guide.
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.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
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.
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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Managing multiple businesses is demanding, particularly for social media managers who lack a centralized tool for KPI tracking. The time-intensive process of researching and scanning new media also detracts from 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.
KICK-OFF MEETING
In our kickoff meeting, we reviewed the existing platform, carried out competitor analysis, and devised further client queries. Our investigation highlighted that users grapple with a plethora of data but lack clarity on next steps and data navigation. Hence, the client sought a redesign that is intuitive, actionable, and user-friendly.
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.
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 FLOWS
After evaluating the current navigation using client-provided user stories, we noted that users couldn't access the "Blog" or "About" pages. This led us to devise the user flows presented below. My work centered on the "Blog Page" and "Article Page" of the client's existing site
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 Blog Page and About Us Page.
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. The client already had a set color palette that he wanted to work with, so we incorporated TSV's brandmark and color styles (green/navy) in our style guide.
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.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
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.