Public Lab Research note

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

by sara_rx | April 19, 2022 00:19 19 Apr 00:19 | #30480 | #30480

About me

I am Sara, a second year Computer Science student. I got to know about open source this year and this is my first time contributing.

Affiliation: Ghulam Ishaq Khan institute of Engineering Sciences and Technology

Location: Pakistan

**contact : **+92 3339806096

**email: **

Project description

The Infragram project brings together a range of different efforts to make Do-It-Yourself plant health comparisons possible with infrared photography. Basically, users upload the image and can also use infragram webcam, infragram uses different techniques to help people analyze the image. The infragram UI design needs some improvements to make it more user friendly. Furthermore, it also lacks some features that can make the site look more organized.

Abstract/summary (<20 words):

Enhancing the UI design of Infragram, while keeping users good experience and needs in mind.


Front Page:

image description**

* I changed the color combination, in terms of focusing on visitors attention.

* I think logo text needs some adjustments so I rearranged texts to give it a better look.

* I think picture upload page should be separate from the editing page so I come up with this design. User can upload and drop file or use infragram web camera.

* On dropping and uploading picture, the new window will open.

* It will have a login and sign up option on the home page.

* On the Nav bar there are three options.

1. Learn

Its execution is explained in the picture above.

2. Report an issue

It will take the user to Infrgram github repository

3. Infragram
**image description

Infragram will have all these options so user can directly learn infragram from this page, so there will be no need to got to public lab page first

I designed this page as it will contain all the information about how to use infragram and about filters and math expression etc. On clicking the options it will display all the relevant details about that topic.image description

**4. **FAQs

**** I think Q& A section is very wide that it is difficult to scroll through the website as Q&A section comes in between. The FAQs in the Nav bar can directly take the user to this section. I think there should be a search option as it will be a lot easier for the user to filter through questions. I would also like to add the filter between "answered and answered" question but I haven't add it in the design. There is an expand option on the right side of question, it will show the answer and the likes and replies will be written under the answer .

image description

Ask question section will right below the Q/A section

image description

Editing window:

This window will open once user upload an image or open webcam.

image description

On clicking convert icon:

A small side window will expand and it will show functionalities the icon provide

1) Convert/ Analyze

I think the convert tool should be more specific on what the user should enter as input as it is a little confusing. While using infragram I was inputting digits in the start so I think users can also make the same mistake. For that I designed it this way, where user can get a menu of expression to choose expression and can also write their own expressions. Furthermore, we can add details of expressions little description but since I m not an expert in this so I left that portion empty. The image is attached below. The preset option will also be in the convert menu as it is also the part of conversion, but there will be no write your own expression option in it.

2) Colorize

I find colorize option a little intimidating as well, so I changed its style a little to make it more simple and easy to user.

3) Overlay

The current overlay tool is not well organized as the slide bar is very far so its confusing wether the slide bar is associated with overlay or not. I tried to give it a little simple yet understandable look.

image description

Timeline/ milestones

Week                         Task
week 1 May 30 - June 5
  • disscus time line with mentors
  • understanding the codebase in detail
  • learn about infragram features 
  • discuss the suitable online work mode and time zones
  • discuss the software development method that suits
  • feedback on my current proposal and what it lack 
week 2  June 6 - June 12 
  • finalize the UI design 
  • make a list of activities that needs to be done first
  • start working on the Nav bar and the color theme

  • note: I will not be able to work more in this week as I will have my exams in this week ( june 6 to june 12)
    other then that I am fully available and free through out the period.

    week 3   June 13 - June  19
  • complete  “image upload” page
  • add sign up/ log in option
  • test the current progress
  • making FTO
  • interact with fellow developer

  • week 4   June 20 - June 26
  • creating editing window
  • discuss the functions implementation approach with mentors
  • implement toggle home and show original option

  • week 5   June 27- July 3
  • testing all the feature 
  • test for users experience so far 
  • asking for mentors review
  • making FTO

  • week 6   July 3- July 10
  •  implementing colorize, convert and overlay functionality 
  • creating expand window
  • testing the changes
  • week 7   July 3- July 10
  • getting mentors feedback 
  • test all the functions 
  • take users feedback
  • collect data for infragram blog page

  • week 8  July 11- July 18 
  • adding infragram blog page and all the helpful material in it
  • discuss Q/A section functionalities with the mentors
  • write a blog on my work and experience so far

  • week 9  July 19- July 26
  • making Q/A section 
  • adding all Q/A data accordingly
  • testing the features

  • week 10  July 27- July August 4
  • getting mentors and users feedback
  • implement the changes required 
  • making a video tutorial for how to use Infragram

  • week 11  August 4- August 11
  • completing pending tasks
  • making illustrations for users understanding for infragram uses and features if possible
  • creating FTO

  • week 12  August 11- August 17
  •  working on documentation
  • updating images data on git hub according to new infragram UI
  • using infragram to analyze plant health and add interesting images on page
  • merge the code

  • week 13  August 17- August 25
  • writing a blog on the project and complete the documentation
  • creating FTO

  • Needs

    I will need help from mentors where I get stuck. Especially while understanding the current codebase I might face challenges as its written by someone else.

    First-time contribution

    My first contribution:

    You can use links like these to show recent activity:


    I started my computer science journey 2 years ago; I learnt C++ during my first year in university and made several projects in C++. During my second year and I learnt HTML, CSS, Javascript and reactJS. I took software development course this semester in my university and I will be done with this course by May 30.


    I have worked in team several times throughout my 2 years in university. Mostly my projects are group based, which includes both CS and non CS bases projects. I am a part of Microsoft Student Club; moreover, I was a part of ICPC management team and arranged codding competition in my university.


    Firstly, I really appreciate the Public Lab mentors, the way they supported us through out was really welcoming. I also want to be a part of such organization so that I can welcome the new developers the same way. Also I see this opportunity as my way forward to opensource. I personally think though this opportunity I can learn a lot especially under constant guidance. I worked hard drafting my proposal and understanding Infragram; I want to gain experience by working with community.


    I am from a village background and I have interacted so much with farmers and I know how much they get worried about their crops health etc. I didnt know that there is a software exists that can do this task. I would like to introduce more people to infragram so that they dont have to pay for this.


    I understand that this is a full-Time commitment. I have a semester break from 12 June to 1st October. I am fully available throughout the internship period.


    Hi @sara_rx, thank you for your proposal! I really like the dark background choice -- it makes sense since we're working with light, right? :-)

    The full-width fixed navbar and sidebar work really well, very minimal footprint and efficient use of space. Would the logo and all disappear once you drop an image in? Maybe it'll be helpful to make a mockup which includes the uploaded image, so we can see how it'd look. I wonder if the first step should be open already. Many of the tools could create a pop-up modal window too which could include more explanation and such, so I like how compact they are to start, but how flexible they could be once activated.

    Have you looked through the Bootstrap library a bit? Do you think it'll take a lot of customization or that it could be themed to achieve the dark look you're going for?

    Overall I appreciate the proposal, thank you very much!

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

    hello! thank you so much for your feedback. Yes, I looked into Bootstrap library and this theme will require customization but we can achieve it using SASS to create utility API, then using SASS compiler extension we can compile sass file into CSS.
    The "upload image and webcam section" will be a fixed landing page (home page). No logo and all will not disappear, I will add a sub page (nested sub page) for editor. I hope it makes sense, I'll edit my proposal for better understanding

    Reply to this comment...

    Login to comment.