Public Lab Research note

Outreachy proposal: Design a new full-screen user interface for

by shubhangi_student_eee20 | April 14, 2022 12:31 14 Apr 12:31 | #30376 | #30376

About me

I'm Shubhangi, an Electrical Engineering undergraduate at IIT (BHU), Varanasi.

Here are my details:

Full name- Shubhangi Choudhary

University- Indian Institute of Technology (BHU), Varanasi

Course Major- Electrical Engineering

Year of Graduation- 2024



Contact No- +91-7895870753

Slack handle- Shubhangi

Primary email -

Secondary email-

Location- IIT (BHU), Varanasi, U.P., India

I am an avid developer and love playing CTFs. I started out with development on May '21 with the basics. Later, over the months, I explored various technologies. Via a course I undertook, I practiced the MERN stack and by being a part of the website teams of various college bodies and hackathons, I got my hand dirty on other technologies, like Django, and Vue.js, Angular, etc.

From writing code that runs applications to the manipulation of code, I've come a long way with programming. I've been contributing to open-source projects since June'21. Along the way, which was full of coding, learning, and contributing, I contributed to a diverse range of projects, including security applications and end-user applications.

I am currently a part of the Club of Programmers, IIT (BHU), where I got selected because of the quality of code I wrote during CSoC (COPS Summer of Code).

Project description

The Infragram project brings together a range of different efforts to make Do-It-Yourself plant health comparisons possible with infrared photography. enables people with Infragram-modified cameras to upload photos for analysis and conversion using techniques like NDVI (used in satellite imaging analysis). It also allows for live streaming from a modified webcam. This project will overhaul the UI of Infragram to be full-screen and create space for new features like multiple resolutions of video, dragging in a recorded video instead of a still image for conversion, and pop up panels with Q&A, tips, tutorials, and more, so that they can feature more helpful guidance text.

Abstract/summary (<20 words):

To create and implement a new and improved full-screen UI for Infragram with cross-browser drag and drop.


To make Infragram reach a wider audience, we need to aim for it to be both user-friendly as well as developer-friendly. Both of these revolve around how well the Interface of the application is. As a user, I felt like the generic blue color palette looks very bland and unpleasing to the eyes. There are other issues as well. For example, the contents of the footer are not center-aligned, whereas the rest of the application is center-aligned. There is uneven padding and the fonts used are not user-friendly.

The application is currently not responsive and this is a major problem as can be seen :


With my approach, I've tackled all the 3 major changes suggested in the idealist ( ):

  • I have designed the entire UI, keeping in mind Bootstrap v4. I have added a welcome modal that guides the user.
  • I have shifted the QnA into the help bubble that would be ever-javpresent on every window of the application
  • I have added cross-browser drag-and-drop instead of just selecting an image. It can be noted that I've worked with cross-browser compatibility of the drag and drop feature earlier in my project as well ( )

An implementation of which can be found here:

( this is just the code snippet, you can find the entire file and other relevant files here:

return (
    <div {...getrootprops()}="" classname="box p-6 w-full">
        <input {...getinputprops()}="">
        <div classname="flex flex-col items-center justify-center border-2 dark:border-white border-purple-900  rounded-xl">
          <img src="/images/folder.png" alt="folder" classname="image" draggable="false">
  isDragReject? <p>Sorry unaccepted file format</p>
      <p classname="dark:text-gray-300 text-gray-800">DRAG AND DROP HERE!</p>
        <p classname="mt-2 text-base dark:text-gray-300 text-gray-800">Drop you files except PDFs :(!</p>



I used the npm package . This is supported by the browsers mentioned here : We can discuss with the community and decide which library or framework we'll be using for the implementation of cross-browser drag and drop.

A good reference could be :

image description

How does my design make Infragram accessible to all?

Well I know the importance of accessibility myself and read more about it from here: Let us look at how my design is accessible by breaking the concept into parts:

  • Learning: The welcome modal has the purpose of welcoming the users and making the application less intimidating. By being descriptive with the instructions, we can make the application 'intellectually' accessible to more people. An extended goal could be to translate the modal into different languages so that the application becomes more inclusive
  • Sight: The colors are not straining to the eyes and the fonts are impactful. I can implement text-to-speech for the welcome modal if needed. It can be noted that my design has visual cues that are subtle and very visible.
  • Hearing: Since currently, there are no audio cues in the application, the application is already accessible in this sense.
  • Mobility: The application has subtle triggers to open a certain function. The mobile port is touch-friendly. The drag and drop is an example of less mobility with maximum output


Week 1

May 30- Jun 4

  • Discuss and get a review on the pending pull requests
  • Write a blog and post it
  • Discuss how communication would be carried throughout the internship period
  • Update the Bootstrap version to 4 by using an online converter like ( ) or entirely create a new UI by starting with v4

Week 2

Jun 5- Jun 11

  • Get feedback on and discuss the mockup prepared
  • Discuss use cases for the updated mockup
  • Create a repository for the new UI and start setting up the environment


July 12- Jun18

  • Set up the HTML and CSS for the mockup
  • Add basic elements like the footer and sidebars
  • Create FTOs wherever possible


Jun 19- Jun 25

  • Discuss the text content of the welcome modal and other helping modals
  • Set up other elements like the help bubble and the corresponding pop up
  • Add Javascript wherever needed
  • Create FTOs wherever possible


Jun 26- Jul 2

  • Create final non-functioning mockup using minimal JavaScript and mostly HTML and CSS
  • Document the UI changes to make hooking with JavaScript easier


Jul 3-Jul 9

  • Implement final mockup and start hooking it with JavaScript by collaborating with possible GSoC accepted student
  • Start with src and hook ui first
  • Discuss with the community and fix bugs
  • Create FTOs for the bug fixing wherever possible


Jul 10-Jul 16

  • Hook io and processors and complete these functionalities
  • Allow cross-browser drag and drop
  • Fix bugs and create FTOs when needed


Jul 17- Jul 23

  • Clean the code and use a uniform casing system to name files
  • Hook the rest of the UI with the JS
  • Fix bugs in the cross-browser drag and drop


Jul 24- Jul 30

  • Buffer week for hooking JS and completing the mockup
  • Make the mockup functional completely


Jul 31- Aug 6

  • Collaborate with the GSoC intern to discuss final functional UI


Aug 7- Aug 13

  • design a new colorize popup modal window to describe each colormap
  • Implement thumbnails

Week-12 & Week-13

Aug 14- Aug 23

  • Complete all pending tasks and get pending Pull Requests merged


I will need :

  • People: a diverse group of people who can review my suggestions and help me improve on them


I did go through the welcome page of Public Lab and have made my first contribution. My first merged Pull Request in Public Lab is #10775.

In fact, I have contributed to both the documentation and the UI code of Infragram. I have the following Pull Requests Merged/approved in the Infragram repository:

Pull Request
Description Merged

Aligned the images in the Readme to the

center and added corresponding alt text Merged

remove the “thumbnail generation” code

and corresponding stale code Merged removed the unnecessary and vague logs Merged as per this discussion, added the FTO template Approved corrected the text in the quickstart modal

I have also already made a few UI changes which are on hold:

Pull Request

Added the QnA in a panel in order to make

it more mobile-friendly

redesigned footer without any additional


I have also opened issues while contributing to Infragram:

Status Open
Open Open Open Closed Closed

I've also been actively involved in the community and have helped contributors who reached out to me to get them started. For example:

Apart from these, I have contributed to security applications as well.


I started out in competitive programming wherein I used to code in C++ and C. After that, I got fascinated with CTFs and Machine Learning, for which I had to use Python3. Eventually, I ended up developing an interest in Software Development. Starting off with basics (HTML, CSS, and JavaScript), I later moved to frameworks and technologies built around Node.js. Following are the frameworks, technologies, and languages I've used, apart from the aforementioned:

  1. React
  2. MongoDB
  3. Express.js
  4. Node.js
  5. Django
  6. Angular
  7. TypeScript
  8. Next.js
  9. Figma

I have worked with CSS libraries and frameworks like Bootstrap and Material UI as well. I have been working with Figma for over a year now and it is my go-to tool for designing and implementing mockups.I have made high-fidelity prototypes using Figma as well.

You can find them here:

Here you can find all the projects I've been working on and contributing to:

You can find my resume here:

I am a quick learner and very keen on expanding my horizons to newer technologies. If the project requires a skill I need to learn, I will give my 100% to practicing it.


I have been a part of many project teams and know how to work with different members on software development projects. To name a few:

  • Added the very crucial Degree Verification page on the Student Alumni Interaction Cell's website. The page has many visitors and helps the alumni to get their degrees verified. I was motivated to make the website as friendly for the alumni as possible.
  • Worked on the front end of COPS Hackalog. A platform for conducting hackathons. While I was in my 1st year, I saw how important hackalog was for the institute. With absolute zero experience in TypeScript, I volunteered to be a part of the team that was migrating code from JavaScript to TypeScript. My pull request got merged and later, I worked with several projects on TypeScript, which I learned by myself.
  • With a team of other sophomores, led by the seniors, built the entire frontend of the website of Prastuti (The technical fest of the Department of Electrical Engineering, IIT (BHU), Varanasi) from scratch. It was after 2 years that Prastuti was being organized and we had this motivation to make the website, the face of the fest, as good as possible.
  • As a member of the Club of Programmers, IIT (BHU), I've undertaken tutorials as well as workshop sessions for which I, along with my team, had to curate assignments as well. As someone who learned various programming languages and tools by myself, I know what a beginner needs and I utilized this while making assignments for the students.

I have been contributing to various open-source projects which have taught me a lot about teamwork and how to 'code and collaborate' as well as build on the feedback given by the community.


I have been passionate about open-source projects since the day I started contributing. It's a healthy community that promotes mutual learning and growth. When I came across Public Lab, I was intrigued by the activity on its Gitter. I have never seen such a community that actively helps the contributors and promotes discussion.

I started my contribution to Public Lab by opening issues and Pull Requests on the Infragram repository. Later while tackling an issue assigned to me as a beginner-friendly issue, the mentors were extremely helpful and patient with me, while I made mistakes with indentation, they were the ones to be patient and teach me. The pull request got merged and I decided to give back to this lovely community.

The area I live in is predominantly dependent on agriculture and plant health. While growing up, I've seen struggles as well as happy moments being dependent on crop health. Infragram as a project encompasses plant health and the very prominent 'DIY (Do It Yourself)' strategy. It is built on simple JavaScript and runs complex image manipulation very easily. I am passionate about effective software design, user experience, and giving back to the community. So, Infragram is the one for me. :)


Plant health plays a vital role in literally everything we do. From breathing to consuming food, it all revolves around how healthy plants around us are.

"Threats to plant health pose challenges to population health, productivity, and prosperity across the globe. " This is an extract from the case studies I read while reading about plant health. One can find these here.

Most of Asia and Africa depend on staple crops and to make it easier for them to use such an application, it becomes really important to have a user-friendly interface that makes navigation easier. I have used a color palette that is less straining to the eyes and fonts that are impactful. The design overall is really focused to make Infragram a go-to stop for every beginner who wants to take benefit from its applications.

I believe in first becoming the user of an application and then the developer who can improve the user experience. When I used Infragram, I felt like it is an application with a lot of potential that goes unnoticed because of the way it is presented to us. How I have designed the interface is to make it more friendly for the users as well as the developers.


I do not have any commitments for the entire summer. I will be dedicating the vacation to contributing to making Infragram a user-friendly application so that it can be utilized to its maximum potential. I have been a part of many college societies and clubs since my first year and managed my love for programming, academics, and club activities pretty decently. Since now I am in much fewer clubs, I will use the time management skills to structure my day such that I will be able to dedicate maximum time to Infragram.


Could you review this once ? @mathildaudufo and @warren

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Hi @shubhangi_student_eee20, I love how detailed your proposal is. I also love how you've broken down your tasks into smaller pieces. I have a question about the design for smaller screens. In the diagram, you added two menu buttons. Do you think it'll be confusing to users if they have two identical menu buttons on the page?

Also, while preparing these mockups, did you consider accessibility? We want Infragram to be accessible to everyone.

Thank you!!

Is this a question? Click here to post it to the Questions page.

Thankyou @mathildaudufo ! I tried to make the tasks approachable and concrete hence broke them down. Also, the two collapsible menus can be integrated into one with a drop-down. If you have a suggestion, I'm more than happy to include it. About accessibility, Yes, I've used colors that are differentiable and impactful fonts ( i.e Poppins ). I did my research on the accessibility part because I realise how important that is. I've made sure to not include any color that strain the eyes. I was inspired by how Figma is so approachable for even new designers, it has a unique and minimalist color pallete that makes it welcoming. For reference ( ). I've tried to make the application welcoming for all. An extended goal could be to have the welcome modal in various languages ☺️ Thankyou!

Just a note on accessibility - if we (continue to) use Bootstrap, it has accessible HTML features designed for screen readers built-in, as long as we follow their examples. So this makes it easier for folks who use screen readers to use our software, when compared to completely custom HTML features (although if we use those, we can manually implement such screen-reader compatibility as well!).

I am enthralled with the amount of importance accessibility and inclusivity is being given in everything the community does! Inspiring 💖

Reply to this comment...

Hi @shubhangi_student_eee20 thank you for your proposal, it's excellent and detailed! I especially appreciate how you've used a responsive layout to really make a lot of space for things to fit without feeling crowded. The Help popup looks great, too, although i wonder what it will look like with a full table of questions in it. It might be good to test out or think about whether it's enough horizontal space. Maybe the Q&A should be a full sidebar, to make for more space?

Also, it's a small thing but i think in the "editing" interface on Infragram, we can probably drop the footer, so it can go full height with no scrolling. That way some tools or items could be stuck to the bottom of the screen as well! Does that make sense?

Thank you!

Is this a question? Click here to post it to the Questions page.

Hi @warren ! Thankyou for a detailed feedback. I appreciate how you've gone through the details of my design. And yes, I did try out the implementation of help bubble and the questions' table. You can find it here :


the likes and comments are hidden initially and as a user, I think it makes sense. 😅 because the questions are hyperlinked.

Yes, dropping the footer sounds valid. I added it because I wanted to give the current one a makeover.

Reply to this comment...

Hey @cess could you review my proposal please?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Login to comment.