VProud — Redesigning Responsive Website


  1. To redesign the responsive website
  2. Help users navigate through the site with ease
  3. Educate users about creating a private & public accounts and
  4. Familiarize them with a troll-free website.

Product Overview:

VProud is social networking plus a video blogging site for women. Their target audience is typical American women, whether that be a homemaker, a single mothers, working women, a teenager, mothers of special kids, divorcées, women having marriage problems or health problems, etc. Women want to talk to someone apart from friends and family. She wants to share and discuss her problems with other women facing the same issues or have faced such issues and seek help. Considering the mental state of women, VProud has a feature of creating a Private profile to help provide a very safe and troll-proof site.

  1. To redesign the existing responsive sites for VProud.tv.
  2. The new design should address promoting the community aspect of the site & help target users connect together.

Client needs-

  1. Users drop off rates.
  2. Navigation was not categorized and named properly.
  3. General layout organization of both mobile and desktop designs.

Website Research-

1. Content Inventory:

To understand the work and flow of the website in detail we started off with the content inventory.

2. Competitive & Comparative Analysis:

The competitors of Vproud according to the client were only Facebook. To identify standard features, see how others approach design problems, and identify opportunities to differentiate or innovate I found out more competitors who had a similar concept like YouTube, Vimeo, Vine, Instagram, and Cosmopolitan website. We researched them and understand how their content was organized, what different features and functionality they provided, and how certain user tasks were completed.

3. Content Blocking:

The reason behind doing content blocking was to compare how the contents like the main content, supporting content, secondary content then images or videos, navigation, etc are organized on our Vproud site as well as on the competitors' sites. This gives an idea about how quickly and easily users can find content that we want them to look at in a particular order.

4. Data Analysis:

We were given access to the Vproud Google Analytics were found out that most of the traffic coming to VProud was through Facebook. They did come but were not able to find what they were looking for, ultimately leaving the site. Most of the traffic was from the USA of which 20% were male. Users were interested in only a few topics and the rest of the topics on the site were left unnoticed.

Synthesis of Research Data :

  1. The user found certain terminologies confusing.
  2. Users were not able to navigate and find topics they were interested in the navigation.
  3. Users did not understand the use of public and private logins.
  4. Users did not know how to contact other users besides following them or replying to a comment another user has made on a video. — all users tried the ‘start a new conversation’ button.
  5. Users didn’t understand the ‘V’ button is a ‘Like’ button.
  6. Users didn’t like that they must choose email for private and social media sign up for public. They want to make the choice of which login they use for both.
  7. Users were confused by the troll icon.
  8. Users thought they can start a private conversation by clicking on add new conversation and not upload a video.

User Research

1. Heuristic Evaluation:

While conducting user tests on the current VProud site we saw that the site had a lot of usability issues. To find out more problems, we got into detail using the heuristic principles of Jakob Neilson.

We gave users a few tasks to complete like creating an account, finding a topic of interest and checking out the list of videos under that topic, and posting a video and starting a discussion.

  1. Users were not informed about their location on the site.
  2. They were not given any message when logged in or while switching the profiles or after posting a video on the site
  3. The use of “V” icon as a like icon and troll icon was not matched with the real world
  4. Lack of help and documentation regarding Private and Public accounts.

2. Surveys:

Surveys are a good method of collecting quantitative and qualitative data. We wanted to know how people deal with sensitive issues. Do they share it with close ones, ask for help on social media, just read articles related to it, take an active part in an online discussion forum, or just google it.

3. Interviews:

Surveys are good to understand what people do, but they don’t give information about why people did it or what made them take a particular decision. So to understand why people took a particular decision and have a one-on-one discussion to gather targeted information we conducted interviews of people who had to fill out our survey. We interview 8 people and we recruited them based on how active they were on social media sites.

Findings of Survey and Interview:

91% of users don’t enjoy online discussions.

83.7% of users will Google to find answers to personal issues.

75.5% of users thought discussions would be more effective if they were able to connect to the actual person instead of being anonymous.

53% of users have apps relating to helping them with personal issues of those users, and 31% turn off their notifications for those apps.


1. Card Sorting:

User in-progress (Card Sorting)

Users were facing several problems navigating through the VProud site, they did not understand certain terms used on the navigation like the daily fem, body, originals, etc. So we conducted user research methodology of card sort to understand how users will organize/arrange existing information and what they will call or term it.

2. Feature Prioritization:

VProud is a content overloaded website. According to data we collected from google analytics, user tests, interviews, and card sorting what we found out was users were interested in doing and going through only certain sections of the sites. Hence we decided to prioritize features based on user research.

We collected a lot of data from the surveys, interviews, and card sorting methods. Synthesizing data that we received from each method gave us more clarity in solving the problem of the VProud site.

Below are the persons and their scenarios that we created for focusing on design efforts of solving the user’s problems.

Persona/User Stories

For the stakeholders to understand the problem in their website it was necessary for me to let them step in the shoes of users. Hence we created 2 persona telling their story and why they want to users of Vproud.

Persona and their story

Users' Task

  1. Create a VProud Private and VPublic account/switch between your accounts.
  2. Find and comment on the video related to pregnancy or sex.
  3. Report someone for trolling.
  4. Share a video on Vproud and start a discussion.
  5. Connect/reach out to a woman who is having a similar issue
  6. ‘Like’ a post.


We synthesized the data collected from the user research and came up with a simple, easy-to-navigate new site map for the VProud site. Below is the image of the new site map.


We created low, mid, and high fidelity wireframes and prototyped them to test them and synthesize the data.

Low Fidelity Wireframes
High Fidelity Wireframes

User Testing Result

  1. Users were educated about creating private and public accounts on the VProud site.
  2. Users were able to understand terms and navigate easily through the website.
  3. They were able to like, comment, and report on particular videos or comments.
  4. Adjust notification settings on both the accounts public and private.

Future Goals

Upload videos directly to VProud.tv using the Youtube or Vimeo link instead of opening them on Youtube or the Vimeo website.

Forum Integration

Detailed Troll report

Originally published at https://medium.com on September 15, 2016.



Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store