Product Cycle Pitch
Here is the Product Cycle Pitch that I published before kicking off the project. It is very crucial and tells what we are going to achieve, why and how we will do it but keeping our limitations in our mind and avoid all possible rabbit holes.
Title: Let's build design system
Description.
Our users really like the new features we've been adding, but many of them find the user interface to be a problem. They are not able to use the product to its full potential because of this. Here are some things our users have said:
Users feedback regarding our app interface
"the contrast of the color seems a little bit low in the UI, that's a problem when I use socialbu for long time"
"your UI isn't very easy for my eyes (my team members dislike it). Your platform isn't easy to use"
"seems not very user friendly interface"
"the interface needs some more work for a better workflow"
"not loving the interface, experienced some slowness and glitches"
"i would like to see more features like a smoother interface"
"interface is a little confusing at times"
and more...
It's all about how it feels when she interacts with the product, the gut feeling. Our current interface is visually very light, complex due to continuous add-ons, and outdated. We can't decide and make direct changes to our interface just for the sake of making it look 'cool'. That's a bad way to go.
Interface is a byproduct of a design system.
We need to develop a design system that not only consistent, self-contained, reusable, accessible, and robust but also make users feel creative, fulfilled, and more productive while interacting with it. It will serve as the foundation for our future development, making things faster, easier, and more effective in the long run. What really includes in a design system?
Two key sections:
An inventory of visual attributes (fundamentals):
- Colors
- Typography
- Spacing
- images/icons
An inventory of each UI element:
- Buttons
- Cards
- Models etc.
Fundamentals are must and should be defined in detail however the scope for UI elements is flexible and can be adjusted.
It's a two-weeks cycle.
Design System
for SocialBu
Project - Analyze Feature
Revamped User Interface
Built Design System for SocialBu
My role. Product Manager & team lead
Project description. Revamped SocialBu's user interface based on extensive user feedback pointing out issues with contrast, ease of use, and outdated design. Led the development of a comprehensive design system to enhance visual consistency and usability. Team was consist of 3 persons; designer, tech person and product manager (me). Focused on fundamentals like color, typography, and UI elements such as buttons and cards. Completed within a two-week cycle.
Users feedback
Here is what user used to say about the interface.
Users feedback before building design system for improved interface
Product Cycle Pitch
Here is the Product Cycle Pitch that I published before kicking off the project. It is very crucial and tells what we are going to achieve, why and how we will do it but keeping our limitations in our mind and avoid all possible rabbit holes.
Title: Let's build design system
Description. Our users really like the new features we've been adding, but many of them find the user interface to be a problem. They are not able to use the product to its full potential because of this. Here are some things our users have said:
Users feedback regarding our app interface
"the contrast of the color seems a little bit low in the UI, that's a problem when I use socialbu for long time"
"your UI isn't very easy for my eyes (my team members dislike it). Your platform isn't easy to use"
"seems not very user friendly interface"
"the interface needs some more work for a better workflow"
"not loving the interface, experienced some slowness and glitches"
"i would like to see more features like a smoother interface" "interface is a little confusing at times"
and more...
It's all about how it feels when she interacts with the product, the gut feeling. Our current interface is visually very light, complex due to continuous add-ons, and outdated. We can't decide and make direct changes to our interface just for the sake of making it look 'cool'. That's a bad way to go.
Interface is a byproduct of a design system.
We need to develop a design system that not only consistent, self-contained, reusable, accessible, and robust but also make users feel creative, fulfilled, and more productive while interacting with it. It will serve as the foundation for our future development, making things faster, easier, and more effective in the long run. What really includes in a design system?
Two key sections:
An inventory of visual attributes (fundamentals):
- Colors
- Typography
- Spacing
- images/icons
An inventory of each UI element:
- Buttons
- Cards
- Models etc.
Fundamentals are must and should be defined in detail however the scope for UI elements is flexible and can be adjusted.
It's a two-weeks cycle.
How we made it a great success
My usual approach for projects is make small teams to move faster and have less dependency and complexity. For this project, we had 3 person in total.
1- Product designer
2- Tech person
3- Product manager (Me)
Design system (some screenshots)
Buttons, group buttons, forms, toasts, tooltips
Color palette, typography, button sizes, icons, cards, avatar, badges
Radio buttons, paginations, spinners, list group
Layout grid, navbar dropdowns
Project - Analyze Feature
My role. I was product manager who decided scope, timeline & launch of feature
Project description. This project was done for a social media management and automation tool which supports 5 social platforms; Facebook, Twitter, Instagram, LinkedIn, and Google My Business.
Though the tool has been 4 years in the market and has 20K+ users across the globe but it was lagging behind from competitors due to not having a feature called Analyze where users can see detailed reports and insights about their social media accounts' performance (like social posts engagements, followers growth, best-performing hashtags, team performance, etc.).
A quick screenshot of completed project
Some power users interviews were conducted, did competitors' analysis and understood the tech stack of the tool to better know the possibilities. Once everything got done. I prepared a Pitch - a document with all the details like expectations, deadline, and how we are gonna achieve it.
I divided the Analyze feature into 4 sections:
- Content Performance Reports
- Social Accounts Performance Reports
- Social Network Performance Reports
- Team Performance Reports
Graph showing social media posts vs engagement insights
Hashtag analysis based on social media post reach
Top countries chart based on views
Reach vs Impression Graph
Note: I didn't code but managed the team of developers (along with the tech head), worked on UI/UX, and made sure marketing & help material is also ready to push until it was developed.
Revamped User Interface
My role. I was product manager who decided scope, timeline & launch of feature
Project description. I focused on improving the user experience of our app by refining our design system. My goal was to fix design inconsistencies, custom code issues, and reduce visual clutter, especially in areas like "Respond" and "Queues." I ensured the app felt smoother and more consistent without changing the core functionalities. This four-week project was all about making the existing features more cohesive and user-friendly.
Product cycle pitch
Pitch
How's it successfully completed:
I approached the interface development for SocialBu by starting with less critical pages, like profile settings and billing, followed by features that users don’t use as often, such as automation. This allowed me to implement the design system on low-traffic areas first, ensuring everything was refined before moving on to the main features. By the time I reached the heavily-used pages, the design system was fully tested and mature, minimizing any issues.
Completed project screenshots:
Completed project
A quick glimpse of to-dos and project tracking
Hompage design after revamping
Social calendar interface
Content performance report interface