VProud — Redesigning Responsive Website

3 weeks Clients Project.

Neha Kulkarni
Aug 11, 2016 · Unlisted

Goals:

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

Prototype:

Desktop:

  1. Mid Fidelity Desktop: https://invis.io/DV82WQEG5
  2. High Fidelity Desktop : https://invis.io/WZ84D913H

Product Overview:

VProud is a social networking plus a video blogging site for women. Their target audience is typical American women, whether that be a homemaker, a single mother, working women, a teenager, mother of a special kid, divorcée, women having marriage problems or health problem 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 help provide very safe and troll proof site.

Client needs:

  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.

Clients pain points:

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

Research

1. Content Inventory:

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

2. Competitive & Comparative Analysis::

The competitors of Vproud according to client was 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 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 compare how the contents like the main content, supporting content , secondary content then images or videos , navigation etc are organized on the our Vproud site as well as on the competitors sites. This gives an idea about how quickly and easily users can find content which we want them to look at in a particular order.

4. Data Analysis:

We were given access to the Vproud Google Analytics where found out that most of the traffic was coming to VProud was through Facebook. They did come but where 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 few topics and rest of the topics on the site where left unnoticed.

User Testing on current site:

After researching about the current product and its competitors we decided to involve users in our research to understand what problems they are facing while using the current site. We conducted user test on both desktop as well as mobile sites. We gave users few tasks to complete like create an account , find a topic of interest and check out list of videos under that topic and post a video and start a discussion.

Synthesis of user testing:

  1. User found certain terminologies confusing.
  2. Users were not able to navigate and find interested topics on 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 for public. They want to make the choice which login they use for both.
  7. Users were confused by 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 current VProud site we saw that the site had a lot of usability issues. To find out more problems, we got into detail using heuristic principles of JaKob Neilson .

  1. User 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. Use of “V” icon as 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 good method of collecting quantitative and qualitative data. We wanted to know how people deal with sensitive issues. Do they share it with close once, ask help on social media, just read articles related to it, take active part in 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 one-on-one discussion to gather targeted information we conducted interviews of people who had 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 anonymous.

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

4. Card Sorting:

Based on the results we got from synthesizing user testing data the next step we step we took was of user research. Users were facing several problem navigating through the VProud site, they were 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 user will organize existing information and what they will call it.

5. 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.

Persona & Scenarios:

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

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

User Tasks:

These are the user tasks for our personas.

  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.

Site Map:

We synthesis 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 new site map.

NEW SITE MAP

Wireframes & Prototyping:

Low Fidelity Wireframes

We created low, mid and high fidelity wireframes and prototyping it to test them and synthesis the data.

User Testing Results:

  1. User were educated about creating private and public account on 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 video or comment.
  4. Adjust notification settings on both the accounts public and private.
High Fidelity Wireframes

Next Steps:

Upload videos directly to VProud.tv instead of using youtube or vimeo link.

Forum Integration

Detailed Troll report

Unlisted

Neha Kulkarni

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade