**Project Title **: UI Improvements to PublicLab website.

Mentors : Jeffrey Warren, Gaurav Sachdeva, Atibhi, Emmanuel Hayford, Sidharth, Mayank Pathela-1

**Student **: Gautami Gupta (gautamigupta54@gmail.com)

Project Repository : https://github.com/publiclab/plots2

Project Details :

I was given the task to revamp the UI of the PublicLab website. I collaborated with Lekhika in this project. Our main aim was to improve the UI of the following pages : People's page, Questions page, Individual Tags page, Profile page, Tags page, Dashboard and Main front page. We created issues for each page and then add checklist of tasks and assigned them to ourselves. This method has proved to be great in synchronising and breaking up of tasks.

For keeping a track of the to-do issues and completed issues/PR, we created a github project and a main planning issue which helped us record our progress. Technologies which I mainly worked on were Ruby on Rails, Bootstrap, CSS and HTML.

Planning issues for each page :

• People's page
• Search results page
• Questions page
• Individual Tags page
• Profile's page
• New sidebar design
• Dashboard design
• New Front page design
• Follow up bugs

Other issues I have worked on :

• First timer only issues
• Front page design(link to the issue)
  • Header and topics in footer implementation submitted as a gist :

Features I implemented for the new UI of the website :

Merged PRs:

• "Add user's location" functionality on the people's page, clicking on which, a modal appears through which a user can add their location. (link to the PR)

• An ellipsis feature on the people's card, which encapsulated information about the user like # of research notes/wikis, joined time etc. (link to the PR)

• The design for the text area, for any user to submit questions which eventually links to the questions form. (link to the PR)

• Fixing the orientation on tags page.(link to the PR)
• Adding a recent question section on the questions page which has a list of recent 3 question links.(link to the PR)

• Adding the main tags card to the header in the new design which is card consisting of tag name, tag's wiki link, 2 lines of wiki content and an ellipsis which has information like, stats, RSS feed, follow/unfollow buttons etc. (link to the PR)

• Adding a sidebar to the individual tags page as per the new design. It has a map, link to people's page and related tags.(link to the PR)

• Correcting the edit profile form which happened due to Bootstrap 4 update (link to the PR)

• Aligning the disoriented stats page (link to the PR)

Pending PRs:

• Restricting the display of user bio to 100 characters on the profile page and adding a read more and read less link. (link to the PR)(ready to merge)

• Building topics cards for the sidebar which has information about the number of people following the topic, subscribe button and an ellipsis encapsulating the remaining info about the topic.(link to the PR)(ready to merge)

• Building a modal which has options of templates form of post, question or issue on the Individual tags page. I have implemented the desktop screen version, what is remaining is the making the modal responsive.(link to the PR)

• Adding login/signup modal on the new questions page. (link to the PR)(ready for merge)
• Dashboard new design implementation.(link to the PR)

Future work :

Even though GSoC has come to an end, I will be working on completing the front page and the dashboard which are not completely implemented. Also, since the UI revamp has a lot of corner cases which were left out, I will be working on the bugs in the UI as well. I would also like to work on redesigning the blog page which wasn't mentioned as our task for the summer. PublicLab is now converting their website pattern to be completely topic based, which requires a lot of brainstorming in the case of corner cases and their implementation. I will be a part of PublicLab in the future and will help in the UI improvements of the website.