Public Lab Research note


Outreachy proposal: New UI design for infragram

by takurofisayo | April 20, 2022 08:46 20 Apr 08:46 | #30515 | #30515


About me

Fisayo is a creative and excellence-driven individual who is transitioning into tech. She has a track record of applying knowledge to achieve corporate goals, as well as a passion for using her software development, design and managerial skills to add value to organizations. She loves to work within a team and has worked with a team from different cultural backgrounds. Which has helped to improve her collaborative skills, problem solving skills and helped to gain new perspectives.

Location: (Nigeria)

Project description

Infragram assists customized cameras users with to upload photographs for analysis and conversion using techniques like NDVI (used in satellite imaging analysis). In the project, I added a modal to the Infragram page, changed the layout of the page and moved the Q&A section to the help button.

Problem

  • There is a confusion on how to use the app and navigate it, so a modal can be added to welcome the user and to inform them how to navigate the page

www.figma.com_file_NPxEm0dDHU4XrskbIvUZ9i_Public-Lab---New-UI_node-id_3_3.png

  • The logo and name of the can be restructured and the purpose of the app can be stated with like two or three lines. To also remind users of the purpose of the app.
  • The upload video section needs not to be enlarged while being clicked on so as not to overwhelm the user and there has been difficult on how to exit the big screen. A drag and drop section can be added to the upload video section
  • The layout of the Infragram heading could be more structured in way that when the screen is responsive it can be easy to align it or move it to another section
  • The footer can also be redesigned and more structured

www.figma.com_file_NPxEm0dDHU4XrskbIvUZ9i_Public-Lab---New-UI_node-id_0_1_(2).png

  • The Q&A section distracts the user from the purpose of app, so the Q&A needs to be moved to a different page entirely and re-designed so it can be more appealing.

www.figma.com_file_NPxEm0dDHU4XrskbIvUZ9i_Public-Lab---New-UI_node-id_3_3_(2).png

My Solution

My solution helps the user to easily understand how the app functions and makes them concentrate on the purpose of the app.

Needs

I would need to do more research on how to be a valuable contributor to open source projects and also on the programming language being used in the course. I would also would upgrade my Laptop's capacity so it can carry out swift operations. I would also need a mentor to guide me throughout my journey, to know I am on the right track.

First-time contribution

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

You can use links like these to see activities:

Timeline/milestones

Week 1(May 30- Jun 4)

  • Settle in as an intern to Public Lab
  • Get to know my mentors and talk about meeting times.
  • Make changes to my user interface designs depending on the comments I've received.
  • Create my very first blog

Week 2(Jun 5- Jun 11)

  • Thoroughly read and comprehend the web page's source code.
  • Investigate ways to change the app's interface without impacting its functionality.
  • Create issues where they are needed.
  • Based on the prior feedback, submit my fresh user interface designs to check I did the correct thing.
  • Keep my blog up to date.

Week 3(Jun 12- Jun18)

  • Enhance the mentors' proposed lo-fi with additional features.
  • Plan ahead of time how I'll incorporate the functionality into the app.
  • Make issues where they're required.
  • Discuss the contents of my blog with my mentors.

Week 4(Jun 19- Jun 25)

  • Find out how to add the modal class and when it should be active by doing some research.
  • Based on my research, I'd would implement codes of the modal to app
  • Make a pull request and solicit comments from my mentors.
  • Make any necessary changes.
  • Ensure that my blog is up to date.

Week 5(Jun 26- Jul 2)

  • Work on the app's logo alignment, header, and intro message.
  • Separate the buttons and the video div into separate parts to make it responsive.
  • Work on a responsiveness of the layout implemented for the webpage.
  • Verify that the implemented codes haven't harmed the app's operation.
  • Consult your mentors for guidance.
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 6(Jul 3-Jul 9)

  • Research how to incorporate a drag-and-drop capability into the program.
  • Based on my study, add the drag and drop feature to the video section.
  • Keep my mentors up to date on my progress.
  • Seek advice from your mentors.
  • Change the look of the video section based on the Low-fi.
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 7(Jul 10-Jul 16)

  • Work on the layout of the buttons according to the UI design
  • Ensure the design doesn't affect their functions
  • Re-design the buttons according to the Low-fi
  • Create a layout for the hidden buttons
  • Ensure the button section is responsive
  • Keep my mentors up to date on my progress.
  • Seek advice from your mentors.
  • Change the look of the video section.
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 8(Jul 17- Jul 23)

  • Work on the help button that would lead to the Q&A section
  • Ensure the link is working
  • Start working on my Hi-fi
  • Get feedback on the Hi-fi from my mentors
  • Seek advice from your mentors.
  • Change the look of the video section.
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 9(Jul 24- Jul 30)

  • Work on layout the footer
  • Ensure the footer is responsive
  • Make adjustments to my Hi-fi based on the mentors feedback
  • Get feedback on the Hi-fi from my mentors
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 10(Jul 31- Aug 6)

  • Work on the Q&A page
  • Implement the header and footer code to the Q&A page
  • Change the layout of the Q&A section according to the Lo-Fi
  • Ensure the Q &A and the footer links section still functions
  • Add a link to the logo to make it possible for the user to go back to the home page(video page)
  • Start implementing the Hi-fi designs on the modal
  • Implement the Hi-fi designs on the Q&A page
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 11(Aug 7- Aug 13)

  • Start implementing the Hi-fis on the video section
  • Start implementing the Hi-fis on the button section
  • Start implementing the Hi-fis on the footer section
  • Start implementing the Hi-fis on the header section
  • Test the responsiveness of the app
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 12(Aug 14- Aug 20)

  • Get feedback on the implemented designs and make corrections
  • Ensure the app functions properly
  • Keep my mentors up to date on my progress.
  • Seek advice from your mentors if there are any bugs or whatsoever.
  • Test the responsiveness of the app
  • Submit a pull request to the repository.
  • Make sure my blog is current.

Week 13(Aug 21-Aug 22)

  • Finish up pending tasks
  • Update my resume and portfolio
  • Communicate with my mentors and get feedback based on my performance during the program
  • Make my final blog post.

Experience

I began learning to code in December. It's been a difficult experience. With the aid of various lessons from FreeCodeCamp and W3schools, I began learning HTML and CSS. I began learning JavaScript earlier this year with the aid of various videos on 'Javascript.info,' YouTube, and Udemy courses. With a team of software developers, product designers, and project managers, I worked on a React project. The project taught me about agile methodologies, particularly scrum. I also used Trello boards to keep track of my stand-ups and sprints. Link to the repo: https://github.com/Mfonn/Colab. Following the project, I enrolled in a one-month Girls in Tech bootcamp, where I learned how to use Bootstrap. Because I was able to meet and collaborate with prospective software engineers in a Hackathon Competition in Lagos, Nigeria, it was a really interesting and inspirational experience. Following the training, I wanted to work at a public lab and contribute to open source while also learning new skills. I'm presently learning Vue.js and used it to create my first Todo List App. It's available at (https://ifetakuro.github.io/todo-list-vue3/). I'm eager to learn new things, give back to the community, and further my profession. My GitHub page: https://github.com/Ifetakuro

Teamwork

I collaborated alongside a software developer, a product designer, and a project manager on this project. It was a closed-source undertaking. I felt driven because I knew I was tackling a real-world problem, and my teammates were counting on me to complete my portion of the assignment. I also regarded any bugs I encountered while coding as a learning opportunity.


Passion

As a software engineer, I am enthusiastic about contributing to open source projects. I discovered that the public lab provides a safe environment in which I may pursue a career as a software developer without fear of prejudice because of my background.

Audience

I want my work to assist members of the public who are having trouble navigating the website and understanding the app's purpose.

Commitment

I'd plan my day as if I were working from home. I would organize my daily duties for work every day, for example, 9 a.m. to 4 p.m., and then set aside time to continue studying and conducting research so that I could develop high-quality codes.


3 Comments

Hi @takurofisayo and thanks for posting The mock-up image is not fully visible. You could maybe separate it into multiple images for each page and add them on the proposal itself. I also noticed you do not have the milestones/timeline schedule and also the explanation on how you plan to tackle the project. As deadline is near, please do finish these sections so we can give better feedback. - not a big deal: I noticed you also used italics in places where you maybe didn't mean to, you could check that too. Thanks

I was only able to post one picture, I added my ui design as an issue on public lab. Do you mean I make the pictures of the UI pages in a collage of 3? I thought I was supposed to use italics. I’d work on the corrections thanks

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


@cess please I've implemented the appropriate changes can you please review it. Thank you


Reply to this comment...


Login to comment.