Public Lab Research note

SoC proposal: MapKnitter Image Management & User Experience

by govindjeevan7 | March 31, 2019 18:00 31 Mar 18:00 | #18913 | #18913

About me

Govind Jeevan

Affiliation National Institute of Technology Karnataka, Surathkal

Location: Cochin, India

I am a third-year computer science student from Kerala, India.
Github: https://github.com/govindjeevan

Project Description

Abstract/summary:

Improving the user experience of MapKnitter through UX Research directed UI improvements and an Image Management/Version Control system.

Problem

  1. No Image Updation
    Currently, the only way to update the aerial view of a location is to delete the existing image and upload the latest one. Else the two images will overlap.
  2. No Past View
    There is no mechanism to see how a map region looked at a point of time in the past even though images of that time might have been uploaded but was replaced later.
  3. An Intimidating UI
    The UI of map knitter is not very first-timer friendly and falls behind in aesthetics.

I consider solving these issues these integral to improving the user experience of MapKnitter.

Timeline

I have divided the Project into two parallel flows. Image Management and UI.

FLOW I: MapKnitter Image Management

  1. Feature to replace an image with a newer one with a version number. (May 27-May 31)
  2. Allow multiple versions of an image to coexist ( Jun 1- Jun 10)
  3. Feature to select a time point and display images on the map corresponding to that time point. ( Jun 11 - Jun 18 )
  4. Loading images on zooming to a region. (Markers replaced by Images on zooming) ( Jun 19 - Jun 24 )
  5. Exporting a collection of images by multi-select ( June 28 - July 4 )
  6. Ability to set the version of an image to be shown by default ( Latest version not default ) ( July 5 - July 10 )
  7. Ability to create sets from groups of images. ( July 10-July 16 )
  8. Rearranging image order from the sidebar ( July 16 - July 22 )

FLOW II: MapKnitter UI

I consider the UX stage as part of the community bonding period. Getting to know the community and their needs and ambitions is what UX research stands for.

Understanding the actual users needs is vital for any software development project. Rather than focusing soleley on the developer commnity's suggestions in terms of issues, I intend to reach out to the user-base of mapknitter directly for their suggestions, feedback and further requirements of the application.

UX Stage:

  1. User Research ( May 6 - 20 )
    Conducting user research on all stakeholders of the Mapknitter through polls and forms. (in-site if possible). Issues raised on GitHub aren't all-encompassing.
  2. Analysis of User Responses ( May 20-26 )
    Understanding the needs of the user from the responses and analyzing requirements.
  3. Brainstorm ( May 27- Jun 14 )
    Brainstorming for all possible solutions and alternatives (disregarding feasibility) to solve the identified needs from UX Research.
  4. Must Should Could Document ( Jun 14-24 )
    A document classifying the brainstormed solutions into what "must be done", "should be done" and "could be done" in that hierarchy, after considering the feasibility and value of the solutions.

UI Design Stage:

  1. Creating wireframes and prototypes of proposed design changes based on user research. ( Jun 28 - July 8 )
  2. Consider and incorporate feedback on prototypes. ( July 8 - 12 )

UI Development, Testing, Feedback Stage:
Testing using Javascript end-to-end testing framework: Cypress

  1. Begin implementing all Must Requirement (July 8 - 22)
  2. Continuous frontend testing, feedback and incorporation of suggestions
  3. Begin implementing Should Requirements (July 26 - Aug 04 )
  4. Continuous frontend testing, feedback and incorporation of suggestions
  5. Begin implementing could requirements ( Aug 05 - 19 )
  6. Continuous frontend testing, feedback and incorporation of suggestions.

UI Prototypes

Subject to change after user research

MapKnitter Home Screen

image description

Needs

Resources I need are available on the internet in the form of documentation and tutorials. I will need active guidance from mentors regarding implementation details specific to Mapknitter.

First-time contribution

I've been trying to read/understand the MapKnitter codebase along with the other repositories on public lab.

https://github.com/publiclab/mapknitter/pull/423

Experience

I've learned software development through various means, including an academic course on software engineering. I have experience developing in MEAN as well as Ruby On Rails.

I have experience in UX Research and Analysis, having conducted brainstorming sessions, and prepared stakeholder maps, must-could-should documents, convergence matrices etc.

https://blog.iris.nitk.ac.in/enriching-user-enriching-experience/

I'm used to wire-framing and preparing mockups for development using tools such as Photoshop. Being a graphic designer and video editor for various media teams, I have an eye for aesthetics in anything I design or develop.

My thorough experience in Ruby On Rails comes from developing and releasing a wide range of modules and functionalities for the University Administration Portal (MIS system) of my institute.

The repository is hosted on a private institute gitlab server and my contributions can be seen from the above chart generated by gitlab. The system known as IRIS is similar to Public Labs in that it uses a Ruby On Rails core and a Js-Jquery frontend implementation. The similarity allowed me to quickly comprehend the codebase of MapKntter etc.

Similar to MapKnitter which is a leaflet based application, I have experience working on a very small scale Google Maps API based project built with the aim of aiding freshmen to get used to the locations within the campus. This was developed as a project under ACM NITK Student Chapter, of which I am a member.

http://nitk.acm.org/trails

A static website I developed for the off-road racing team of my institute that I am part of. http://baja.nitk.ac.in/

A static website I developed for the TEDx team of my institute: http://www.tedxnitksurathkal.in/

Teamwork

I have served as the UI/UX manager of the student team that designs, develops and maintains the University Management Portal of my Institute. It is a closed-source software which features modules such as attendance, course registration, course feedback, integration with Moodle, fee payment, on-campus internship/job portal/ hostel allotment, faculty appraisal, hostel complaints etc. An overview of this: https://iris.nitk.ac.in/hrms/pages/about

I have been selected to lead this team (Team Lead) of 30+ designers, developers and policy teams for the next academic year and have held and worked in similar positions of responsibility in the past.

Passion

Being completely new to the world of opensource contributions and GSoC, with a clean slate regarding which organization to apply for, there is a strong motivation behind why I chose to click on Public Labs alone. I understand what it does. I understand what it stands for.

With an aim to understand the pollution levels of a river near my home, I collected water samples from various locations in the course of the river starting from it's origin to the point before it merges with the sea.

As I had no experience in testing the water for CoD, BoD, Dissolved Solids etc, I had to depend on a laboratory to do the same for me. I understand why Public Lab does what it does as it would have enabled me to test and analyze even more such rivers back then.

https://drive.google.com/file/d/0B1K_PuYeHfSEYVoxVGxKUTBwalU/view?usp=sharing

I have been a volunteer for AIESEC Bangalore in their Earth5R project which aimed to understand and resolve pollution and environmental problems in the metropolitan city of Bangalore, parallelly holding sessions in schools of underprivileged localities about sustainable practises that they can adopt easily and about reducing the use of plastic substances.

As an organization working for environmental justice, with a codebase based on Ruby On Rails, and working in the spirit of open source, I believe I made the perfect decision in choosing Public Lab as the organization to apply for.

Audience

Public Lab is a platform that has the potential to reach out to millions of people with a similar aim. But not all of them can be assumed to be tech-savvy or to have used interfaces or a software sense that we take for granted.

With the UX and UI improvements I hope to make in the mapknitter interface, I hope to create a positive change in this respect.

Commitment

Yes, I understand the commitment required to work on this project and willing to spend a substantial amount of time in my summer contributing to publiclab.

4 Comments

  
Comment Author Profile Picture warren commented about 5 years ago

Hello! I like how you've looked to organize priority by "must" "should" and "could" -- a nice framework!

Feature to replace an image with a newer one with a version number. (May 27-May 31) Allow multiple versions of an image to coexist ( Jun 1- Jun 10)

These are great. Do you have some ideas about how the interface for managing versions might look? Would it appear in a timeline on the sidebar? Some ideas could be riffing on GitHub's versioning of comments?

image description

Feature to select a time point and display images on the map corresponding to that time point. ( Jun 11 - Jun 18 )

Even better than a time point might be a time range! I think there are some Leaflet plugins for this kind of thing that could be good to reference and model on: https://leafletjs.com/plugins.html#time--elevation

Loading images on zooming to a region. (Markers replaced by Images on zooming) ( Jun 19 - Jun 24 )

👍

Exporting a collection of images by multi-select ( June 28 - July 4 ) Ability to set the version of an image to be shown by default ( Latest version not default ) ( July 5 - July 10 )

This is a cool idea, and also i do wonder how we'd select the intended version in terms of UI. Thank you!

Ability to create sets from groups of images. ( July 10-July 16 )

Yes... we have "maps" which are collections of images, but it's a belongs_to relationship, not a many-to-many. So, we need to think about how a Collections model in Rails might enable us to do many-to-many collections!

Rearranging image order from the sidebar ( July 16 - July 22 )

Yes! There has recently been a reordering tool added to Leaflet.DistortableImage, and we are interested in how to pack in the various sub-tools 'bring to top' vs. 'push to bottom' and such -- into a compact UI, either in the toolbar itself or in the sidebar. Would be great to have your design thoughts on this too!

Thank you for your proposal, these are great directions to go in with regard to UI!

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

  
Comment Author Profile Picture govindjeevan7 commented about 5 years ago

Thank you @warren for the feedback and suggestions.

As you've noticed, design mockups for all the suggestions are missing as they're still in progress. I shall update the proposal with them as soon as I'm done with them.

But I'd like to have the time-point vs time-range concept clarifed. If we select a time-range, what images should we fetch? All images that were uploaded or updated in that time range?

My intention with time-point was, it would fetch all images that existed on the map at that point of time. Along with the correct version of the image that existed at that point of time. If the images were updated at a later time, it would be a way to see all the images as they were in that past point.

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


Reply to this comment...


  
Comment Author Profile Picture warren commented about 5 years ago

Ah, i see - interesting. I think we could explore different ways to sort by time, but "uploaded in this range" seemed the most relevant to me. Time-point is kind of like only the top end of the range, right? So potentially you could use time-range to achieve time-point? 

Thanks!

On Sat, Apr 6, 2019 at 11:28 PM \<notifications@publiclab.org> wrote:

Hi! You were mentioned by govindjeevan7 in a comment on the research note SoC proposal: MapKnitter Image Management & User Experience. You can reply to this email or visit this link:

https://publiclab.org/notes/govindjeevan7/03-31-2019/soc-proposal-mapknitter-user-experience#c23729

govindjeevan7 wrote:

Thank you @warren for the feedback and suggestions. As you've noticed, design mockups for all the suggestions are missing as they're still in progress. I shall update the proposal with them as soon as I'm done with them. But I'd like to have the time-point vs time-range concept clarifed. If we select a time-range, what images should we fetch? All images that were uploaded or updated in that time range? My intention with time-point was, it would fetch all images that existed on the map at that point of time. Along with the correct version of the image that existed at that point of time. If the images were updated at a later time, it would be a way to see all the images as they were in that past point.

Reply at: https://publiclab.org/notes/govindjeevan7/03-31-2019/soc-proposal-mapknitter-user-experience#comments

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

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

Reply to this comment...


  
bansal_sidharth2996 commented about 5 years ago

Hi, please upload your proposal at the Google Summer of Code website at the earliest. Please ignore this comment if already done.

Reply to this comment...


Login to comment.

Share

Public Lab is open for anyone and will always be free. By signing up you'll join a diverse group of community researchers and tap into a lot of grassroots expertise.

Sign up