Public Lab Research note


Outreachy proposal: Design a new full-screen interface for Infragram.org

by lewisnuikweh | April 21, 2022 16:52 21 Apr 16:52 | #30547 | #30547

Infragram_wireframe_.jpg

About me

Hello, I'm Nuikweh Lewis, a designer and developer. I am enthusiastic about technology, design, and everything in between. I design user interfaces, logos and brand identities, (I also consider myself a font nerd ), and I also code. I'm extremely motivated to learn something new, I always seek to improve myself and my work continually.

Location: (Cameroon)

Project description

Infragram is an open-source tool for analyzing plant data using infrared imagery. It enables users to upload images, and analyze images. This project aims to improve the design of the Infragram user interface, making it fullscreen, and improving the user experience.

Abstract/summary (<20 words):

Design a new full-screen user interface for Infragram.org and improve its user interface, and user experience. This details my proposal for the Infragram redesign, the issues I noticed while working on the project, and my changes.

Problem

The problem with the current Infragram user interface was its difficulty and complexity for new users especially. My main goal is to make it easier for first-time users to easily learn to use Infragram by providing a clear, well structured and organized interface while making it look beautiful.

After looking at the original website, I had some suggestions for the UI, I felt;

The home page looked dated. Lacks structure. Lacks proper hierarchy. Feels overwhelming to a new user. Feels too tight and doesn't have room to breathe. I also looked at the Analyze page, and I felt.

The top bar feels overwhelming and complicated, especially for new users

The lack of a navigation bar is also an issue. There's a lack of visual hierarchy, to direct the user on what to do and first-time users feel lost. I also felt that the logo needed to be refined, its typography feels lacking. So I tried to address the issues with this redesign. For the analyze page,

I removed the top bar and moved it to the side, to make proper use of the excessive whitespace that was there before. The controls are more separated, and have a sense of order, starting from the top to the bottom. The different sections are now more easily separated with big bold headings and enough whitespace

Infragram_wireframe_.jpg

Timeline/milestones

Week 1

I would like to get familiar with my mentors and learn how they work, and their preferred mode of communication.

Get familiar with Infragram, and try to find areas where their design can be improved with help from the mentors.

Set up the project environment and resolve any set-up issues.

Week 2 & 3

Begin working on the website redesign, in close collaboration with my mentors.

Discuss new features with the mentors and community that will be added and incorporate that into the new redesign.

Develop wireframes and designs for the new user interface using Figma, and request feedback from the mentors.

Implement required changes and resubmit the design for approval from the mentors.

Week 4 & 5

Proposal to update the current Infragram logo. I feel the current logo can be improved, and with permission from the mentors, I would like to work on that. This stage will also include the creation of a style guide, which will guide future developers and the community on how to properly use the logo, rules to follow, do's and don'ts etc.

Week 6 & 7

Start implementing the new user interface using Bootstrap. according to the final approved design. starting with the Infragram homepage.

Some of the changes I feel would have to be made to the homepage are,

Add a slider with call-to-actions Add a top navigation bar Add new images to the homepage Restructure the homepage Add a footer section.

Week 8 & 9

Continue working on implementing the new design, I would start working on the Analyze page,

Moving on to the image analyzer pages, I would

Move the top toolbar to the left side Add the menu navigation Restructure the toolbar to make it more clear and orderly Work on the FAQ section as per the design.

Week 10 & 11

I would continue with the Gallery pages and the FAQ sections of the website. I would work on the remainder of the website, and any uncompleted tasks in the previous week will be taken care of.

These can be adding helpful pop-up modals across the site to properly explain certain features and functions

Week 12 & 13

Final evaluation of progress, completing any remaining tasks and rounding up with the internship.

Needs

For this project, I would use Figma as my primary design tool for wireframing and prototyping.

I would also like to receive feedback and collaborate extensively with the mentors and community, during the internship.

First-time contribution

Being a beginner to open source, the mentors were able to help me make my first contribution, They assigned some first-timer issues for me to work on.

https://github.com/publiclab/plots2/pull/10906

I also submitted a design proposal for the Infragram redesign, I worked on improving the user interface, the user experience and the overall look of the site. I also tried to make the design a lot clearer and less complex for a new time user to use.

https://github.com/publiclab/infragram/issues/323

I also worked on improving the installation instructions in the readme docs. Providing solutions to common problems users might face when installing.

https://github.com/publiclab/infragram/pull/369


Experience

I am a self-taught designer and developer. Apart from design, I've been learning and writing mobile applications using Flutter/Dart. I have worked on projects that help solve pertinent problems faced by users in our community.


Teamwork

I have been part of teams that have developed solutions to solve common problems faced in our communities. We have built mobile applications, to help solve problems users commonly face around us.

Our community has faced constant water crises for a long time now, So our team worked on an application that helps users in our community easily find and locate sources of clean potable water. For this project, I worked on the user interface design and also worked on development.

We are also working on another project to help Sickle cell patients easily manage the disease. For this project, I worked on the user interface, and also on the development of the application.

These projects were driven by the desire to help people, and because of this, we have remained motivated to keep working on them.


Passion

I'm passionate about the environment. Climate change is becoming a massive issue for humanity. And with tools like Infragram that can help analyze plant health, the potential for its use in fighting climate change is endless.

I'm also passionate about all things design, I've always loved design, and improving my skills. And working on Infragram is a great way to both help build something great and improve on myself.


Audience

This project should help any and all users of the Infragram platform, It will make it easier for new users to get familiar and start using Infragram as well as make the user experience better for older users


Commitment

I understand that this is a full-time summer job. I'm prepared to work for the required number of hours a week. And I am committed to this project till the end.


0 Comments

Login to comment.