PublicVibe 2.0 : A UI Revamp
This case study highlights the visual revamp of PublicVibe, a hyperlocal video news platform. The revamp journey prioritizes enhanced user engagement through refined navigation and a visually appealing experience.
PublicVibe 2.0 : A UI Revamp
This case study highlights the visual revamp of PublicVibe, a hyperlocal video news platform. The revamp journey prioritizes enhanced user engagement through refined navigation and a visually appealing experience.
PublicVibe 2.0 : A UI Revamp
This case study highlights the visual revamp of PublicVibe, a hyperlocal video news platform. The revamp journey prioritizes enhanced user engagement through refined navigation and a visually appealing experience.
PublicVibe 2.0 : A UI Revamp
This case study highlights the visual revamp of PublicVibe, a hyperlocal video news platform. The revamp journey prioritizes enhanced user engagement through refined navigation and a visually appealing experience.
Client:
PublicVibe
Role:
Assistant Product Designer
Year:
2023
Client:
PublicVibe
Role:
Assistant Product Designer
Year:
2023
Client:
PublicVibe
Role:
Assistant Product Designer
Year:
2023
Client:
PublicVibe
Role:
Assistant Product Designer
Year:
2023
Introduction
PublicVibe is a community news platform where people share local news and experiences. With a focus on hyperlocal content, it keeps users informed about their surroundings, encouraging community involvement.
The stakeholders decided to do a complete visual uplift of the app calling the project Publicvibe 2.0
Ever since the app was launched, an extensive effort was not made to establish a visual brand identity.
Through this revamp the team wanted to acquire users from all age groups.
Also using this opportunity to reduce the existing onboarding churn.
Note:
This project involves only a visual uplift on the existing experiences, without making any significant changes in the existing UX flows.
PublicVibe is a community news platform where people share local news and experiences. With a focus on hyperlocal content, it keeps users informed about their surroundings, encouraging community involvement.
The upcoming 2.0 version requires a visual revamp to improve user experience and appeal to all age groups. I've been assigned to execute this revamp within a two-month timeframe.
Note:
This project involves only a visual uplift on the existing experiences, without making any significant changes in the existing UX flows.
PublicVibe is a community news platform where people share local news and experiences. With a focus on hyperlocal content, it keeps users informed about their surroundings, encouraging community involvement.
The upcoming 2.0 version requires a visual revamp to improve user experience and appeal to all age groups. I've been assigned to execute this revamp within a two-month timeframe.
Note:
This project involves only a visual uplift on the existing experiences, without making any significant changes in the existing UX flows.
PublicVibe is a community news platform where people share local news and experiences. With a focus on hyperlocal content, it keeps users informed about their surroundings, encouraging community involvement.
The upcoming 2.0 version requires a visual revamp to improve user experience and appeal to all age groups. I've been assigned to execute this revamp within a two-month timeframe.
Note:
This project involves only a visual uplift on the existing experiences, without making any significant changes in the existing UX flows.
Objective
To do a visual uplift of Publicvibe and reduce user onboarding churn.
My role & team
The entire project was led by me under the guidance of Sreekanth ( Design Lead ) and Prajwal ( Associate Director - Product ) where I did the following:
Research
UI Design
Testing
Prototyping
Cross Collaboration
Presenting to stakeholders
The challenges
To establish a visual identity and theme for the UI revamp that aligns with stakeholders' vision and leaves a lasting impression on users.
Establishing a framework for design library to get started. Such that design systems can be built upon it in the future.
Working in an agile sprint, constantly aligning stakeholders, PMs, and devs before the handoff for each flow.
Finding the theme
Designing an app theme involves creating a visually appealing and consistent appearance to help users navigate easily. For PublicVibe, understanding the product's values was vital. Stakeholder interviews and competitor research provided valuable insights for creating a memorable theme.
Demographically:
A large chunk of the active users lie in the age group of 18-34.
% of male users >> % female users.
On top of this, since PublicVibe, is a hyperlocal, video news app that also caters to tier 3 users, we decided to explore the themes that would resonate with these inputs in mind.
Designing an app theme involves creating a visually appealing and consistent appearance to help users navigate easily. For PublicVibe, understanding the product's values was vital. Stakeholder interviews and competitor research provided valuable insights for creating a memorable theme.
Demographically:
A large chunk of the active users lie in the age group of 18-34.
% of male users >> % female users.
On top of this, since PublicVibe, is a hyperlocal, video news app that also caters to tier 3 users, we decided to explore the themes that would resonate with these inputs in mind.
Designing an app theme involves creating a visually appealing and consistent appearance to help users navigate easily. For PublicVibe, understanding the product's values was vital. Stakeholder interviews and competitor research provided valuable insights for creating a memorable theme.
Demographically:
A large chunk of the active users lie in the age group of 18-34.
% of male users >> % female users.
On top of this, since PublicVibe, is a hyperlocal, video news app that also caters to tier 3 users, we decided to explore the themes that would resonate with these inputs in mind.
Designing an app theme involves creating a visually appealing and consistent appearance to help users navigate easily. For PublicVibe, understanding the product's values was vital. Stakeholder interviews and competitor research provided valuable insights for creating a memorable theme.
Demographically:
A large chunk of the active users lie in the age group of 18-34.
% of male users >> % female users.
On top of this, since PublicVibe, is a hyperlocal, video news app that also caters to tier 3 users, we decided to explore the themes that would resonate with these inputs in mind.
After further, brainstorming and discussions with stakeholders, we decided to go with the modern and sleek design theme.
As it can convey a sense of sophistication and professionalism while being visually appealing and easy to navigate.
Note: Due the time and resources constraints, the devs suggested to keep the design library in sync with Google's Material 3 guidelines.
After further, brainstorming and discussions with stakeholders, we decided to go with the modern and sleek design theme.
As it can convey a sense of sophistication and professionalism while being visually appealing and easy to navigate.
Note: Due the time and resources constraints, the devs suggested to keep the design library in sync with Google's Material 3 guidelines.
After further, brainstorming and discussions with stakeholders, we decided to go with the modern and sleek design theme.
As it can convey a sense of sophistication and professionalism while being visually appealing and easy to navigate.
Note: Due the time and resources constraints, the devs suggested to keep the design library in sync with Google's Material 3 guidelines.
After further, brainstorming and discussions with stakeholders, we decided to go with the modern and sleek design theme.
As it can convey a sense of sophistication and professionalism while being visually appealing and easy to navigate.
Note: Due the time and resources constraints, the devs suggested to keep the design library in sync with Google's Material 3 guidelines.
Final Designs
Let's look into some of the main screens and flows that were revamped.
Let's look into some of the main screens and flows that were revamped.
Let's look into some of the main screens and flows that were revamped.
Let's look into some of the main screens and flows that were revamped.
Splash and onboarding
Apart from the visual revamp, the onboarding churn was yet another challenge we had to solve.
Apart from the visual revamp, the onboarding churn was yet another challenge we had to solve.
Apart from the visual revamp, the onboarding churn was yet another challenge we had to solve.
Apart from the visual revamp, the onboarding churn was yet another challenge we had to solve.
The challenges
X% of users were dropping off during onboarding. We needed to analyze the entire journey and identify screens with major drop-offs.
Reduce average onboarding time and ensure alignment with theme.
Existing onboarding flow
Existing onboarding flow
Existing onboarding flow
Existing onboarding flow
After analysing the onboarding funnel, we observed that the dropoff % for each screen was in this order
District selection screen % > State selection screen % > Splash %
After analysing the onboarding funnel, we observed that the dropoff % for each screen was in this order
District selection screen % > State selection screen % > Splash %
After analysing the onboarding funnel, we observed that the dropoff % for each screen was in this order
District selection screen % > State selection screen % > Splash %
After analysing the onboarding funnel, we observed that the dropoff % for each screen was in this order
District selection screen % > State selection screen % > Splash %
The old splash screen was a static one. For the new one we decided to make it dynamic, and showcasing elements that tell about the app. The transition between logo to a location pin highlights the hyperlocal aspect of the app.
The old splash screen was a static one. For the new one we decided to make it dynamic, and showcasing elements that tell about the app. The transition between logo to a location pin highlights the hyperlocal aspect of the app.
The old splash screen was a static one. For the new one we decided to make it dynamic, and showcasing elements that tell about the app. The transition between logo to a location pin highlights the hyperlocal aspect of the app.
The old splash screen was a static one. For the new one we decided to make it dynamic, and showcasing elements that tell about the app. The transition between logo to a location pin highlights the hyperlocal aspect of the app.
New onboarding flow ( Manual Selection )
New onboarding flow ( Manual Selection )
New onboarding flow ( Manual Selection )
New onboarding flow ( Manual Selection )
The onboarding flow for the user who decides to find their location manually.
The onboarding flow for the user who decides to find their location manually.
The onboarding flow for the user who decides to find their location manually.
The onboarding flow for the user who decides to find their location manually.
New onboarding flow ( Auto Selection )
New onboarding flow ( Auto Selection )
The onboarding flow for the user who decides to find their location automatically.
Note:
In case the app fails to fetch the correct location in time, the user will be redirected to the manual selection flow.
The onboarding flow for the user who decides to find their location automatically.
Note:
In case the app fails to fetch the correct location in time, the user will be redirected to the manual selection flow.
The onboarding flow for the user who decides to find their location automatically.
Note:
In case the app fails to fetch the correct location in time, the user will be redirected to the manual selection flow.
The onboarding flow for the user who decides to find their location automatically.
Note:
In case the app fails to fetch the correct location in time, the user will be redirected to the manual selection flow.
Video Cards
Old video card page
Old video card page
Old video card page
Old video card page
New video card page
New video card page
New video card page
New video card page
In the new video card page design, we created room to accommodate ads.
The location selection and creator profile info, both are accommodated in the top bar. Once the user land on to the video card page, the top bar changes to the creator info after 2s.
In the new video card page design, we created room to accommodate ads.
The location selection and creator profile info, both are accommodated in the top bar. Once the user land on to the video card page, the top bar changes to the creator info after 2s.
In the new video card page design, we created room to accommodate ads.
The location selection and creator profile info, both are accommodated in the top bar. Once the user land on to the video card page, the top bar changes to the creator info after 2s.
In the new video card page design, we created room to accommodate ads.
The location selection and creator profile info, both are accommodated in the top bar. Once the user land on to the video card page, the top bar changes to the creator info after 2s.
Below are the different card pages format.
Below are the different card pages format.
Below are the different card pages format.
Below are the different card pages format.
Detail Page
Old video detail page
Old video detail page
Old video detail page
Old video detail page
New video detail page
New video detail page
New video detail page
New video detail page
Different detail pages layout ( light and dark theme )
Different detail pages layout ( light and dark theme )
Different detail pages layout ( light and dark theme )
Different detail pages layout ( light and dark theme )
Popup
Old popup design
Old popup design
Old popup design
Old popup design
New popup design
New popup design
New popup design
New popup design
Different popup pages layout ( light and dark theme )
Different popup pages layout ( light and dark theme )
Different popup pages layout ( light and dark theme )
Different popup pages layout ( light and dark theme )
Discover
Old discover page
Old discover page
Old discover page
Old discover page
New discover page
New discover page
New discover page
New discover page
Full discover page ( light and dark theme )
Full discover page ( light and dark theme )
Full discover page ( light and dark theme )
Full discover page ( light and dark theme )
Profile flow
Old profile page
Old profile page
Old profile page
Old profile page
New profile page
New profile page
New profile page
New profile page
Edit profile flow ( light and dark theme )
Edit profile flow ( light and dark theme )
Edit profile flow ( light and dark theme )
Edit profile flow ( light and dark theme )
Party and leader page
Old leader page
Old leader page
Old leader page
Old leader page
New leader page
New leader page
New leader page
New leader page
Reporter, leader, and party page ( light and dark mode )
Reporter, leader, and party page ( light and dark mode )
Reporter, leader, and party page ( light and dark mode )
Reporter, leader, and party page ( light and dark mode )
Key learnings.
Understanding the values of the product enables you to find the right theme for it.
Have to understand the painpoints of stakeholder, PMs, and devs such that everyone is on the same page.
Ensuring accurate screen dimensions, and visual consistencies across the screen.
Carefully understanding the user journey to craft a delightful experience.
Start with the first few mainscreen to get the feel of the new them. And then proceed with other flows.
Understanding the values of the product enables you to find the right theme for it.
Have to understand the painpoints of stakeholder, PMs, and devs such that everyone is on the same page.
Ensuring accurate screen dimensions, and visual consistencies across the screen.
Carefully understanding the user journey to craft a delightful experience.
Start with the first few mainscreen to get the feel of the new them. And then proceed with other flows.
Understanding the values of the product enables you to find the right theme for it.
Have to understand the painpoints of stakeholder, PMs, and devs such that everyone is on the same page.
Ensuring accurate screen dimensions, and visual consistencies across the screen.
Carefully understanding the user journey to craft a delightful experience.
Start with the first few mainscreen to get the feel of the new them. And then proceed with other flows.