About me

Name: Parth Mittal

Email: mittalparth22@gmail.com, parthmittal.201ec243@nitk.edu.in

Github: mittal-parth

LinkedIn: https://www.linkedin.com/in/mittal-parth/

Gitter: mittal-parth

Affiliation: National Institute of Technology Karnataka Surathkal

Field Of Study: B.Tech in Electronics and Communication Engineering

Location: Bangalore, India

Time Zone: UTC + 05:30

---

Project description

This project aims at improving User Interface/User Experience (UI/UX) related features across PublicLab.org. This includes better interlinked navigation between wiki and related store pages, adding a suggestions page, developing a category tree interactive feature and other improvements that aid or enhance the overall experience on the website, particularly for educators. Some are navigational, some are stylistic, and some introduce new interfaces or ways of browsing content.

---

Abstract/summary (<20 words):

As teachers increasingly use PublicLab.org in the classroom, we are looking to improve a collection of User Interface/User Experience (UI/UX) and related features on the platform.

---

Problem

The project can be divided into the following major goals:

1. Better Interlinked navigation between wiki and store pages

2. Template for random generator

3. Navbar search box improvements

4. Topic Tree

5. Date-Picker for /tag pages

6. Changing information hierarchy on profile pages

7. Streamline the process for teachers becoming moderators (to be done)

1. Better Interlinked Navigation

• Backend

  The different approaches can be understood using the below flowchart:

_{Fig (i) - Interlinked navigation frontend flowchart}

• Frontend

  The corresponding different approaches for the frontend can be understood from the below flowchart:

_{Fig (ii) - Interlinked navigation backend flowchart}

2. Template for random generator

• Backend

  Can be understood from the following process flow diagram:

_{Fig (iii) - Random generator backend process flow diagram}

• The following code snippet displays a general overview of the above proposed idea:

  app/controllers/wiki_controller.rb

  app/models/tag.rb

• Frontend

  One of the three ways can be adopted:

  a) A list of nodes same as the look on /subscriptions/digest

  

  _{Fig (iv) - Random generator UI: Idea-1}

  Pros:

  • Consistent with the PublicLab design language as it has already been implemented on another page.
  • Offers a Call to Action to the user because of its spaced-out look.
  • Can be lazy-loaded.

  
  Cons:

  • Takes up more space - would lead to a long page with a lot of scrolling.

  
  

  b) A compact grid of nodes:

  

  _{Fig (v) - Random generator UI: Idea-2}

  Pros:

  • Ability to insert more content in lesser space.
  • Keeps the length of the page short.
  • Can be lazy-loaded.

  
  Cons:

  • Might fail to grab the user's attention because of its compact look.

  
  

  c) A list of cards on the sidebar:

  

  _{Fig (vi) - Random generator UI: Idea-3}

  Pros:

  • More coherent look - preventing a long content page.
  • Grabs readers’ attention even without reading the current wiki entirely.
  • Would go well with the interlinking of products look, as discussed earlier in fig (ii) Product Slider.
  • Versatile with different types of content.

  
  Cons:

  • Cannot be lazily loaded - might affect page loading speed.
  • Grabbing the attention of the user might also lead to distraction.
  • Edge case: Might look absurd on wiki pages with significantly less content as the sidebar might become longer than the main conte
    

• More suggestions - Add a User Feedback option

  An additional link entitled 'Improve Suggestions' can be added to refine results based on user's interest. This link would then open up a modal to take user input.

_{Fig (vii) - Improve Suggestions}

_{Fig (viii) - Customization modal}

Here

• Views and Likes accept numeric input
• Date range displays a dropdown menu to choose from preset date ranges
• Choose Tags allows the user to select multiple tags. The tags would be the normal tags associated to the wiki.

---

3. Navbar search box improvements

• Backend/ Implementation

  • Since we want to manage two different ways to search, we can divide the typeahead dropdown into sections.
  • One section with a link to "Search for this term" leading to the /search?q=<> page.
  • Another section displaying all the suggestions with the heading as 'Tag Pages' to indicate that all suggestions below this heading would lead to the /tag/<> page. This can be achieved using Bootstrap's menu header
  • Since the dropdown menu is loaded using the Bootstrap-3-Typeahead plugin, I wish to add the above two items using jQuery.

• Frontend

  

_{Fig (ix) - Navbar search box}

---

4. Topic Tree

• The topics and subtopics mentioned on https://publiclab.org/wiki/topics can be used to group topics.

• I wish to achieve the UI using Bootstrap’s Collapse component. Each major topic would form the headers of the accordion, and subtopics will be displayed when the accordion opens.

  

_{Fig (x) - Topic Tree}

• However, each major topic here (say, water) also has its own wiki (https://publiclab.org/water-quality). Since clicking on the major topic now opens or closes the accordion, it wouldn't be intuitive for the user to click on only the text to read about the major topic. Thus, we could also have each major topic's wiki as a subtopic inside the accordion. This may require some renaming like soil -> soil-quality to avoid repetition/ambiguity.
• A new route and controller action for /topic-tree will also be required.

---

5. Date Picker for /tag/__ pages

• An option named custom can be added to the current list of options in the drop-down menu of Sort By.

• This would then trigger a modal to allow the user to choose a date range. I wish to achieve it using Bootstrap modals. Here is a look at the possible UI:

  

  _{Fig (xi) - Date Picker custom}

  

  _{Fig (xii) - Date Picker modal}

• The backend code would use the past month and past year columns/options. I propose using jQuery to pass the selected range to query parameters for easier filtering.

---

6. Changing information hierarchy on profile pages

• Backend

  The current nodes are fetched via this line

  /app/views/tag/_profileCard.html.erb

  The definition of find_nodes_by_type can be found here:

  /app/models/tag.rb

  This can be modified to have an optional author_id parameter to fetch records that are authored by the user only.

  /app/views/tag/_profileCard.html.erb

  /app/models/tag.rb

• Frontend

  The output produced on the profile page would be like this:

  

  _{Fig (xiii) - Information hierarchy on profile pages comparison}

  Since the all posts would be by the same user now, the name of the user can be removed as well, which would appear like this:

  

  _{Fig (xiv) - Information hierarchy on profile pages suggested look}

---

Timeline/milestones

_{Fig (xv) - Timeline}

---

Post GSoC

After completing the GSoC project, I would catch up with any issues or needs that might arise with the implemented project. I intend to continue being part of the Public Lab community by helping maintain the plots2 repository, assisting newcomers, opening new issues and reviewing PRs.

---

Needs

I would like and appreciate constant guidance, support and feedback from my mentors and others involved in the community regarding my work. I would need the dataset of all the nodes on the PublicLab website to discuss about the threshold values for the random generator. I would also require the collection IDs of the product collections on the Public Lab Store (depending on the approach adopted for the interlinking of products).

---

First-time contribution

I have been an active member of the community since January 2022. From the beginning, PublicLab has been a very welcoming, supportive and fast-moving community. I have made my contributions through Pull Requests, Issues, Weekly Community Check-Ins, and being active on Gitter for the plots2 project.

Links:

• Comments
• Issues
• PRs

---

FTO Issues

Since my project involves a lot of UI changes, minor issues are bound to be left behind. I will be using this as an opportunity to create as many first-timer issues as possible to welcome newcomers. Since there are multiple approaches to a goal, predicting an exact number of issues would be difficult. However, some of them that cover a broader range are as follows:

• Convert plain string to translation string at various places wherever required.
• Alignment issues
• Issues regarding responsiveness

---

Experience

I love creating new and exciting projects through programming and I have experience working with Ruby on Rails, Django, Bootstrap and React. Here are some of my notable projects:

• College Inventory Management System - Full Stack Web Application to facilitate sharing of resources in college clubs. The system provides access to specific features based on roles, namely, Admin, Convener and Member.
• Cash Flow Minimiser - Front-end application to help users visualise and minimise cash flow among multiple transactions. It utilises Min Heaps to achieve optimal time complexity.
• Progressive Web Application with OAuth 2.0 - An application that can be installed offline as a PWA, allows Sign-In with Google using OAuth, media and Speech-to-Text input.

---

Teamwork

• I am a full-stack Web Developer at IRIS, NITK, an online student-led Information Management System (MIS) portal developed on Ruby on Rails, digitizing all administrative and academic activities within my college. I have worked on developing a multi-role approval flow system, adding conditional fields support to the Forms module, refactoring and enhancing the Faculty Appraisal Module - all of which included lots of UI/UX work and constant collaboration with the team.
• Previously, I have also contributed to the open-source organisation Zulip. Here is a link to my contributions at Zulip.
• I am part of the Google Developer Student Clubs at my college where I have helped organise various tech-related events.

---

Passion

I really appreciate how PublicLab tools help make the world a better place. I resonate with the project as solving real-world problems has always been at the forefront.

Secondly, I love how the community is very supportive and welcoming to newcomers. I have always received quick responses and constructive feedback from the community, which is the best part about it. I also like the concept of Weekly Community Check-Ins as it feels like we are a well-knit community even though we have never physically met each other.

---

Audience

Since the project is concerned with UI/UX changes, it would impact almost everyone using the PublicLab.org website. Importantly, it would enhance the experience of educators using the website.

---

Commitment

Since I am entitled to no other major commitment during my summer holidays, I plan to give 40-45 hours/week till July 17th. Thereafter, I can devote 15-20 hours/week due to my academic work. However, I would ensure to make up for it by working for longer duration during the vacation.