About Me

Name: Isha Gupta

Affiliation: Indraprastha Institute of Information Technology, Delhi

Location: Delhi, India

Project Description

Abstract/ Summary (<20 words)

Public Lab UI improvements

Problem

Public Lab has various features well divided into different pages. There are some pages that need improvement in their design so as to increase user interaction and make them use the website to the fullest.

Implementation

Initialisation: Making card partials for different types of cards

• Card Design- People's Page

• Card Design- Tag's Page

• Card Design- Question and Answer

• Card Design- Research notes and Wikis

• Card Design- Comments

Part 1: Profile Page

• Features which can be present on a profile page:

  • user's data should be encapsulated into a single page

  • the user should be able to access their activities easily.

  • The current design is too cluttered, although it includes all the information.

  • This information, if organized in a better and more appealing way, will interest the user more.

  • Utilize the available space to the maximum, but not overcrowd the page.

• I think that the current amount of information is a lot to be present on just one page and we can represent it in a much more organized manner

• Suggested Changes:

• Firstly, we get rid of the activity graph, as there are very few users who have a proper activity graph, which looks good, but most of them have a sparsely populated and it basically looks like an empty grid and doesn't offer many conclusions.

V/S

Even a very active user has a less populated activity graph\

1. In the sidebar, we waste too much space to show a profile picture and associated tags in a vertical column. The profile picture's size can be reduced and the tags can be put in a box in one place. This way, we can increase the size of the rest of the page and get rid of the sidebar. We also show the user's basic information in a more concise manner now.\

2. The cards in each of the tabs like research, wikis, questions etc are too cluttered

This should be changed to show 3 cards per row with a little more information about the node, also the less important nodes are given as links in the about me section, so as to not overwhelm the user with a lot of stuff on the page.

1. In the proposed design, a "Tell us about yourself" placeholder text has been inserted for those who haven't written their bio. For those who have, this will contain the text and a "Read More" button which will collapse that div and display all the information about the person. This will save space and also, won't be too empty for people have a little to write in their bio.

2. The size of the map has been reduced because not everyone sets their location and it shouldn't take up a quarter of the space in the page. The map is but below the bio to give the information about the user in one place.

1. A map interface to display recent individual content on a map

2. Deprecating the activity graph, we present a more interactive graph which would contain nodes of different activities by the user.

3. This graph would look something like the one that is implemented for tags. < https://publiclab.org/tags >

4. Instead of fixing this map on the profile page, a toggle button that would toggle the User's location and User's activity graph will be implemented.

5. Clicking on a node in the graph will open the corresponding research note/question/comment etc in a new tab.

6. There will be color differentiation for different types of post.

Complete View:

Part 2: Dashboard

• Currently, the dashboard shows different kinds of notes like:

  • Comments

  • Questions

  • Questions which have been answered

  • Research notes

  • Events

• They are shown in the order of how recently they were posted.

• The problem with this is, not every user is interested in everything that is happening on the site. Dashboard is a feature for the signed up users.

• The idea of a dashboard is to provide a personalized experience to the site's members and give them information about topics they are interested in and are relevant to them.

• This is very important so that the user doesn't miss out on the updates on things they have subscribed to.

• If the user wants to "unsubscribe" to a particular post or tags contained in that post, clicking on the cross button on the card will:

• Unsubscribe the user with that post ie the function to unsubscribe will be called and the user will be unsubscribed to this, after which the post will be removed from the dashboard.

• The card will slide out of the dashboard and next card will appear.

• Another problem with the current design is the lack of consistency. There is a mixture of different kinds of posts and the color differentiation is

  • Not proper to tell which post is of what type

  • Doesn't look appealing to the user because of the structure in which the dashboard is made.

• To solve this, card display should be used (which is being used at multiple places in the new design) and each card should be clearly marked with what kind of post it is.

• The sidebar should include a map containing the location of the user, below which, the activity related to that place is mentioned. This would encourage the user to be more involved in what goes on at PL.

• People get motivated to see active contributors. In the implementation of "Featured Users" , the most active users should be displayed. This should be displayed in the sidebar, and the users who share location with the current user should be marked with a star.

• To generate the interest of users, we add a "Trending" activity section that would suggest some tags for subscription that can subscribed using the multiple tag subscribe button.

• A "Recent Activity" section in which all the posts, in decreasing order of their dates are displayed.\

• We can implement a "Recommended Tags" feature which would show some tags based on user's history and make them available for multiple subscription:

• For this we can using caching at user's system.

• Or we can keep a count of many times some tags were visited and suggest tags according to that.\

• For NEW MEMBERS:

  • During Sign Up, we ask the user to subscribe to some tags.

  • When the user successfully signs up, they are subscribed to those tags.

  • The dashboard is then displayed to them according to their preferences.

  • This way, the user's interest is maintained in the site from the very beginning.\

• Immediately after the sign up is completed (and we have the user in our database), we show the above modal and the user subscribes to the tags.

  • The selection will be done through hidden checkboxes.

  • A request is sent to a function written in subscription_controller.rb that subscribes the user to these tags and redirect them to the dashboard (instead of the subscriptions page, which is the normal flow).

Complete View:

]

Part 3: Questions page

• Current Questions' page is very cluttered and in one go, the user doesn't get the idea of what can be done here or how to efficiently retrieve information.

• There are 2 parts to redesigning this page:

  • Asking a question

  • Getting answers

• Asking a Question:

• Right now, asking a question doesn't help the user in writing a good question, and doesn't offer proper space to do so:

• To give the user a better experience:

• Convert the field to an entire text area

• Autocomplete inside the text area, when the user begins to type

• Give a tooltip/accordion/collapse to give tips on how to write a good question.

• Getting answers:

  • "Trending Topics" tags can be displayed and on clicking on a tag from there, questions having that tag are displayed. There will be a small text box to enter the topic (with autocomplete), and corresponding questions could be displayed.

  • Each card will contain only the questions related to that tag.

Part 4:  Subscription stats page

• The current subscription stats page is a big JSON containing tags as keys and the number of users subscribed to them as values.

• To organize it into more conclusive data, number of subscriptions can be grouped in intervals and displayed like this:

• Corresponding to every interval, are a couple of tags having those many subscription.

• On clicking a bubble, it expands and shows all the tags which have subscriptions lying in that range.

• The size of the bubble (expanded or contracted) is proportional to the number of tags.

• This makes a pure data page interactive and more informative.

• Some work is in progress on this at < https://github.com/publiclab/plots2/issues/4603 >

• For doing this we will have to write a function that iterates over the JSON hash puts each tag in it's correct interval along with

• The JSON data will be preserved in another route.

Part 5: Per Tag Page

• Currently the per tag page gives some information about the tag, some related tags to subscribe to and the activity involving that tag.

• But we see that the page is too cluttered up, with all options at one place.

• To improve this UI, we firstly need to give some space to different elements.

• The "read more" will be a collapse and display the text about the tag.

• Next, we need to put up the notes related to this tag. We can do it in the same way as proposed in the Profile Page design ie: Displaying each post in cards design.

• We will be having a toggle button in Questions' tab that would toggle between "Recommended Questions" and "Featured Questions" which would give the suggested and best questions on that tag.\

Part 6: People's Page

• People's page arranges the users according to how recent their activity is.

• It also shows a map that has pins to the location of the users with most recent activity.

• Currently, the data is displayed in rows in table, but the problem with that is:

• It's not space efficient.

• It looks too simple

• It's static data

• Users viewing this page should be able to follow users from here itself, so there should be a follow button next to each user (it should be marked if the user is already being followed by the current user)

• Instead of table, card display should be used.

Part 7: Adding template selection when creating Wiki page

• When a user creates their wiki page, they should be given a choice of a template to start with.

• This makes it easy for the user to create a post.\

• On selecting a template, the textarea in the editor will be filled with the template body and heading.

• This can be achieved by simply sending a request on template selection and rendering the text to set as a default value in the textarea.

Part 8: Search interface

• Current interface is too plain and simple.

• We can modify it to promote more searching by our users

Part 9: Search results

• The current search results' All Content tab looks very raw in terms of its tables.

• The rest of the tabs have a card format.

• To improve the All Content tab, we can organize it in table like panels, which are:

  • Better organized

  • Better looking

• More informative\

• "More results" will open the tab of the corresponding heading and show all the results there.

Timeline

PS: I would be opening atleast 2 FTOs every week. Also, smaller and more related tests with each design will be implemented along the way itself, so as to ensure a smooth flow. Card Design: Current design for displaying different types of nodes (research notes, questions, comments, tag information etc) is very cluttered and unbounded. To resolve this, each node will now be represented through a card format, with basic information on the card and different types of nodes having different options in a popover.

Profile page implementation

Dashboard implementation

| Time Period | Work | |------|------| | June 7- June 9 | Right sidebar: User's location, using which, we display featured projects in that area. Also, some featured/most active users for the current user to follow, with the nearby users starred. | | June 10- June 15 | Personalized Dashboard: Not every user is interested in everything that is happening on the site.The idea of a dashboard is to provide a personalized experience to the site’s members and give them information about topics they are interested in and are relevant to them. This is very important so that the user doesn’t miss out on the updates on things they have subscribed to. Sign Up tags: During Sign Up, we ask the user to subscribe to some tags .When the user successfully signs up, they are subscribed to those tags. The dashboard is then displayed to them according to their preferences. | | June 16- June 21 | Recent Activity Dashboard in which all the posts are displayed in decreasing order of their dates. & Tags: Recommended tags specifically for the user to follow (history-based) and Trending tags on the site & Alignment of the entire dashboard | | June 22- June 24 | FTOs, Documentation, Blog, Reviewing PRs |

Questions' Page

Individual Tag Page

People's page

Subscription Stats Page: Display Subscription stats in a more informative way

Wiki Templates

Search Page and Search Results

Wrapping Up

Needs

I would be needing the guidance of mentors and I am open to any kind of help or input from other contributors.

Contributions to Public Lab

I have been actively contributing to Public Lab since December and I have worked on different types of issues, from minor to major and involving different aspects of the project (frontend and backend both). I am an active member of the community and have helped my fellow members with their issues and also opened some first-timers-only issues to welcome new contributors. I have made about 16 commits to the plots2 repository and I am well-versed with the codebase. I have also tried to expand MapKnitter to welcome new contributors and am in a discussion on some projects there as well.

I am working on some issues currently as well and hope to continue to do so!

Here are the issues reported by me:

https://github.com/publiclab/plots2/issues?utf8=%E2%9C%93&q=is%3Aissue+author%3AIshaGupta18

Here are my merged PRs:

https://github.com/publiclab/plots2/commits?author=IshaGupta18

Weekly-Checkin opened by me:

https://github.com/publiclab/plots2/issues/4844

Some activity on Mapknitter:

https://github.com/publiclab/mapknitter/issues/338

https://github.com/publiclab/mapknitter/issues/327

Experience

I am a first-year undergrad pursuing CSE at my college.

I am a part of the core team of Google Developer Student Club, which trains young developers on mobile and web development, and is an excellent platform to organize community workshops and showcases, apart from learning new technologies.

I have worked with Ruby on Rails for about 7 months now, which I learned at Coding Ninjas (https://codingninjas.in/courses/classroom-web-development-course) , which has taught me RoR from scratch so I am well-versed with the platform. I am also comfortable with Data structures and algorithms and am fluent in C++, Java, and Python.

Apart from this, at the front end, I have worked with and confident in HTML, CSS, JavaScript, and Bootstrap.

I am a member of the development club of my college, Byld where I get to organize and attend sessions about upcoming technologies.

In school, I was part of the cyber society, and have participated in numerous inter-school competitions.

Teamwork

I have worked in several group projects in my school and college, especially on IoT and on environmental projects in school called "Vasudha" (meaning Earth in English) every alternate year that dealt with a specific type of environmental problems like the issue of non-biodegradable poly bags, global warming, waste management etc. and required us to conduct surveys, analyze the results and propose solutions.

Apart from this, in open source, I have contributed to Public Lab only which has shown me how powerful a community is and how helpful people are. I felt so motivated when I my peers helped me in merging my PRs and I felt so good in helping them and welcoming newcomers to work out their solutions.

I get self-motivated whenever a bug is resolved and I move towards completion of some task I am doing. The best feeling is however, when one of my PRs gets merged. I feel confident about the fact that something I coded is being used somewhere.

Passion

Living in one of the most polluted cities in India, and pollution, which has always given me the sneezes through my childhood, Public Lab very much gets me interested in making the world a much cleaner place.

I am passionate about solving real-life problems, things that help people, even in the tiniest possible way.

I have always been interested in designing things, the reason why I pursued Photoshop was to see creativity come to life. Through this project as well, I want to use that creativty to make solid designs and make user experience better.

Audience

Since this project is all about UI, the target audience is the entire user base who uses Public Lab. For the community to expand and things to grow, a good user interface is required, to improve user experience, so that users are able to use the site to its best purpose.

Commitment

I completely understand that proceeding forward with this project and completing it is a very serious commitment and I will be fully dedicated to completing it because I am very excited in creating something new and useful and would be more than happy to work on it!