Public Lab Research note

Outreachy proposal: Design a new full-screen UI for

by perfectytindia | April 22, 2022 14:43 22 Apr 14:43 | #30578 | #30578

(This template is for students applying to summer code programs with Public Lab. Use this link to start writing a post:,soc-2019,soc-2019-proposals You can delete this line once you've started filling it out.)



About me


Name: Rajvi


Contact: 6202336780

Timezone: Indian Standard Time (UTC + 05:30)




I'm Rajvi. I'm currently a second year undergraduate at Indian Institute of Technology (Indian School of Mines), Dhanbad India. I started my open source journey by participating in Outreachy 2022 and have contributed for the first time for Public Lab and have some prior experience of open source with Winter of Code 3.0 (an intra college recruitment process of the technical club og our college). Until now I have taken up projects in UI/UX designing and front end web development and am looking forward to expanding my technical stack.

Resume link: Resume

Affiliation: Indian Institute of Technology (Indian School of Mines), Dhanbad

Location: India**

Project description


The Infragram project links a range of creations to make Do-It-Yourself plant health comparisons possible with infrared photography. Infragram is an online tool for analysing plant health with near-infrared imagery. One can upload images from a camera they have modified with theirDIY Filter Pack, or with their pre-modified Point and Shoot Infragram Camera. It also features live streaming from a modified webcam.**



To design a new or improved user interface for which is a fullscreen with a toolbar, solicit and incorporate input from user community and allow cross-browser drag and drop on the entire page.

Problem (Suggestions)


Although Infagram has a stable user interface, it still has some areas of upgrading and some really different features could be added which I have mentioned below:

  1. A drag and drop feature could also be added for image and video along with video resolutions which can be added in the project.
  2. Review or feedback option: This can be added to the website so that we can get user feedback frequently without organising any survey or such.
  3. Search Bar: I am planning to add a search bar in the whole website, also in the Q&A section so that the user can search for the previously asked questions themselves at once without having to go through the whole list.
  4. Login/Signup option: I was planning to incorporate a login/ signup option for the user, inspired from the public lab website.
  5. Chatbot: I can also implement a chatbot feature in the site using NLP and might need some guidance in this, but it is a suggestion from my side.
  6. Visit Counter: A visit counter can be added in the footer of the site which can indicate how many users have visited the site.
  7. Filters: Some filters can be applied in the image section where every image is placed randomly, so we can categorise them on the basis of country, so that users can easily search or look for the plants they are familiar with. And then also the basis of topography such as barren land, sea shore, etc.
  8. FAQ section: Similar to the Q&A section, a FAQ section can be added so that other frequently asked questions related to other features can also be asked.

Other common mistakes that could be corrected:

1.Colour scheme: The colour of the whole website is quite basic as similar to wikipedia, so it can be changed using some basic colours from Public Lab's website and some others which can signify the whole theme of the website.

2. Call to action buttons: While some buttons are quite distinguishable, others are not, and can be made so by improving them respective to the visible ones.

3. Fonts and font sizes: Some of the fonts in the website are not visible, which can be made by proper adjustment in font sizes, we can also use the golden ratio rule which is applied to any website in deciding font sizes.

4. Padding: There were a lot of areas in the whole website where padding could be increased and in some decrement is also required.

5. Alignment: There is some alignment issue with the footer according to me, which can be resolved by placing similar links together.

6. Links, cards, etc.: Some redirecting links, container boxes and other things might also be added to the website for better usability.

7. One more issue is that the site does not have a mobile version of its desktop site, which makes it difficult for the users who often prefer mobile instead of desktops. A solution could be to develop the mobile version of the site.

The project should be considered keeping every user and their experiences in mind. The UI of the project might be a little bit confusing for beginners which can be improved by some basic and further changes.

To implement the above suggested features and other things, I have divided my proposal in the following phases for the next 3 month of internship (If anything deviates from timeline and take more than 3 months of time, then I am open to extend my timeline and work until the project is complete)

The first phase will consider redesigning of the desktop and mobile version of the site including low fidelity, high fidelity wireframing and further UI designing.

The second phase will consider prototyping of the both desktop and mobile versions and interacting with mentors.

The third phase will consider adding other functions like different video resolutions, drag and drop full screen feature and any such user friendly features for NDVI filters.




May 29 - June 4 (week 1)

Interacting with mentors to understand the project in detail and setting up the working environment .

Design a new interface (using adobe XD and Bootstrap) for which is full screen with a toolbar, solicit and incorporate input from users

June 5 - June 11 (week 2)

Understanding the whole interface of the current website and analyzing every scope of improvement.

June 12 - June 18(week 3)

Creating low fidelity wireframes and taking insights from the mentors.

June 19 - June 25 (week 4):

Creating high fidelity wireframes and taking a go-ahead from mentors.


June 26 - July 2 (week 5)

Allowing cross-browser drag-and-drop for the entire page instead of just selecting an image.

July 3- July 9 (week 6)

Move Q&A feature into a Help menu box, Review or feedback option.

July 10- July 16 (week 7)

Add a popup "Welcome" modal container with prototyped features, also the search bar (for the Q&A section too).

July 17- July 23 (week 8)

Creating a full prototype and a working "mockup" interface with Bootstrap elements (that is not hooked up to JS yet)


July 24 - July 30 (week 9)

Iterate with user feedback and further insights from mentors.

July 31 - August 6 (week 10)

Implement the new user interface in HTML/JS - begin with an "index2.html" next to the original index.html

August 7- August 13 (week 11)

Ensuring that every feature works correctly and additional changes like chatbot, login/signup and visit counter also, adding additional features.

August 14 - August 20 (week 12)

Creating documentation of the project, creating blogs related to the whole process which can serve as a guide for new contributors.

August 21-August 26 (week 13)

Stretch goal: Designing new popups and other drag and drop features.

Final evaluation and insights from mentors.



In order to complete this project effectively, I will highly appreciate the mentors, team leaders and teammates to give me honest feedback on my work regularly and guide me in my journey of improvement.

First-time contribution


I introduced myself on the welcoming page of the public lab github and made a request for FTO by commenting below it. Then after solving those issues, my PR was approved by my mentor and then I created further two bugs,

First Time Contribution:

Issues raised: First:





I started my competitive coding journey in my second half of first year of college by learning C++. In my second year I attended some workshops on Graphic designing which developed my interest in UI/UX designing, then I explored frontend web development and learned the basics of HTML, CSS and JavaScript and other frameworks based on javascript. I also developed some projects based on that.

In the second half of my second year, I came to know about the scope of contributions related to UI/UX in open source, so I decided to participate in Outreachy and contributed to Public Lab for the first time.




I do have some experience of teamwork. One of the projects, as mentioned in my resume ( The Bureau of Police Research & Development (BPR&D) ) website redesign project ) was a team project and my team had four members, one was my immediate year senior, and the other two were my batchmates. It was really an amazing experience as I got to know how everything got combined in the end and the process was also amazing.

I have not worked in such a vast open source before, but this time I learnt that open source is a whole new world which has such vast opportunities for so many different kinds of people and has such a variety of projects to contribute to.




Public Lab's projects are really unique as plant health and environmental problems always existed and kept on increasing but I never saw such an approach to these concerns, so the whole idea of this community's projects intrigues me with its concerns with plant health and analysis of plant health with infrared imagery and also that they are encouraging and taking steps so that different groups of people can come across with their ideas.

The community members are really very helpful and considerate. During my contribution period, everyone helped me, including my mentors and other contributors. The mentors were very active and responsive to all of my queries and approaches. I am really looking forward to working on this project.**



I live in a country where agriculture or farming is a mainstream employment for a lot of people. So, there are a lot of plants, so its health plays a vital role in the agriculture industry. I think this tool will help farmers and other people related to the farming industry, and everyone of us in the long run.

And for that, a user-friendly interface should be created, so that farmers or any other person who is not so much familiar with such technology can use it smoothly. **


I understand that working with this community is a serious commitment. I ensure that I can devote the required time, 30 hours per week (or more if required) since I do not have any other such commitments during the summers.



Hi @perfectytindia, we’d appreciate a wireframe/mock-up of the design you have in mind for Infragram. Thanks!

Reply to this comment...

Login to comment.