Name : Ananya Arun
Email : email@example.com
Location : Hyderabad, Telangana
Github : ananyaarun
Gitter : ananyaarun
Twitter : ananyaarun8
Affiliation: International Institute Of Information Technology, Hyderabad
Public Labs UI Improvements
Abstract/summary (<20 words):
Improve the UI/UX of publiclab.org to make it more user friendly and usable.
The current publiclab.org page has bugs and lot of scope for UI Improvements.
To list a few:-
- Certain pop up messages going outside screen
- Certain messages beginning with a capital letter while certain do not , certain messages not clearly understandable
- Missing pop up messages for some buttons etc making it hard to understand
- Navbar doesn't have a home page option for unregistered user, Process of navigation is tedious and number of click counts of a user is high in this case
- Alignment of certain elements on the page are ambiguous leaving a lot of white space on certain parts whereas there is crowding on others.
- Cluttered arrangement of text, buttons and images
- Lack of color consistency
UI improvements are all about improving user experience and interaction with a website.
This project aims to achieve that.
This project will build on the Bootstrap 4 UI library to implement new HTML templates within the Ruby on Rails website at PublicLab.org, focused on the following pages:
- People's Page
- Tags/Topics page
- Individual Tags page
- Questions Page
- Profile Page
A detailed description of page wise problems, bugs and UI improvements follow
Currently the dashboard page looks like this
- Welcome message can be more prominent with a new line added.
More info in this issue https://github.com/publiclab/plots2/issues/4977
- Change UI of subscribe button. It presently isn't very visible to a user.
Adding a blue color to this like the other buttons would help
- Dashboard is only a feature for a signed up user, so a user who has not registered cannot see it on the navbar
More info in this issue https://github.com/publiclab/plots2/issues/5218
- The Topics section looks very cluttered in the present UI design
- The ask a question and wiki tabs can be aligned better
- The order of comments, questions, notes etc displayed on the dashboard for all users are the same in reverse chronological order
- It has to be personalized for each user since all of this may not be relevant to every user
- The dashboard must feature and focus more on the subscribed topics of each user and highlight those.
NEW DASHBOARD PAGE
- This dashboard is personalized for a user
- Shows location map of a user and updates regarding activity in that area and other users near by which are matters of concern to a particular user.
- Along with recommended and trending topics based on user history even updates on topics the user follows are displayed
- The recent activity of a user is also displayed to keep track of ones activity on a website. Like activity log of a user
- Clicking on topics on the trending and recommended section users can follow or subscribe to a topic
2) People's Page
Currently the People's page looks like this
- The Page has too much black space and needs to be better arranged
- It is irrelevant to display so many layer options on the map here
- The table display can be changed to a card display to stand out
NEW PEOPLE'S PAGE
- It had a centered map to show user locations
- Displays users in the form of card
- Also arranges the user according to recent activity
- On hover displays the comments and questions and posts by the user
3) Tags/Topics Page
Current Tags/Topics page
More info on issue https://github.com/publiclab/plots2/issues/5090
Changes to make
- making it 2-column
- adding https://publiclab.org/stats/graph in an iframe to the 2nd column
- adding the links below the graph
- Redesigning the search bar
NEW TAGS/TOPICS PAGE
4) Individual Tags Page
- The page looks cluttered and is not understandable to a new user
- No consistency in coloring of buttons.
- Subscribe button is not standing out on the page
- Nav bar looks crowed
- Card design can be used here for a clutter free neat arrangement
NEW TAG PAGE
- Display is using card design
- A read more button that explains more about the tag rather than crowding info on one screen like before
- Shows related tags for interested users
- All buttons are consistent in terms of color and stand out
5) Questions Page
Current Questions Page
- The current UI is too cluttered and has too much information in one page
- Both asking questions and viewing other questions etc happen all on the same page which doesn't have much clarity
- 2 search bars on the same line doesn't look good and is too crowded
- Editor too can be centered and tooltips can be added to give instruction regarding all formatting options
NEW QUESTIONS PAGE
- Adds more info regarding how to ask a question on clicking learn more
- Less cluttered and easily understandable UI
- Complexity in posting a question reduced with just a textarea to type out the question
- Also add featured questions and recent questions section to show a user the latest updates
6) Profile Page
Current profile page
- Profile page is the most important page for a user and needs to be appealing
- Its too cluttered and not spaced out evenly
- The present design offers too much content in one page
NEW PROFILE PAGE
- Shows all the relevant content in a neat manner
- Highlights the user profile picture and about and map sections on top
- Below follow tags according to user activity and most active topics
- Then the user can filter based on research, questions, comments etc and output is in a card format
TIME PERIOD TASKS
May 20 - May 26 : Basic Dashboard
May 27 - June 2 : Personalize the Dashboard
June 3 - June 9 : Questions page
June 10 - June 16 : Editor part of questions page
Testing and feedback of phase 1 due
June 17 - June 23 : FTO's, Documentation, Reviewing PR's
and other small UI changes in other pages
June 24 - June 30 : Start Profile Page (basic) and testing of developed features so far
July 1 - July 7 : Finish Profile Page (tabs,tags,topics)
July 8 - July 14 : Tags Page and testing of developed features so far
July 15 - July 21 : FTO's, Documentation, Reviewing PR's
and other small UI changes in other pages
Testing and feedback of phase 2 due
July 22 - July 28 : Individual Tags Page
July 29 - Aug 4 : People's Page
Aug 5 - Aug 11 : Other Leftover pages and testing
Aug 12 - Aug 20 : Other small pages and testing
Final Testing and feedback of phase 3 due
I would need the guidance and help of my mentors and community members in reviewing my work and finishing the project.
- I have contributed to public lab repositories both frontend (in HTML CSS and JaveScript) and backed in ruby.
- As a contributor i have worked on solving bugs and fixing functionalities and reporting bugs and improvements as issues.
- I also helped create FTO issues to welcome newcomers into the community.
- I broke down big issues in 2-3 FTO's to encourage community growth and participation.
- I guided and reviewed the work of new comers to help them start contributing to public labs.
Issues created by me in plots2:
PR's raised by me in plots2:
PR's raised by me in Leaflet-Environmental-Layers:
- I have been actively contribution to open source in the past one year.
I am a member of the opensource development group in my college (OSDG)
and a member of the Lean In circles to encourage
growth and participation in the women in tech community.
- I'm a member of the coala organization.
I have fixed issues and reviewed issues in this org.
I have also helped new comers and am an active contributor.
Here are some of my work.
- I'm a core member of the Virtual Labs organization known as VLED
which is an MHRD project to make Virtual online labs for all subjects.
I have reviewed over 70PR's in this community across the Labs and was
a mentor of the VLEAD bugathon held for collage students to help find
and fix bugs on github.
- I have also contributed to systers community and sugarlabs in the past.
I was mentor for the one million women to tech program this 2018 summer.
I helped and guided and worked with women all over the world to introduce
them and guide them to make small contributions to open source. Some of My projects:
I have worked on a project for Open Street Maps organization.
A complete documentation of what i did can be found here.
I have a strong hold of frontend development in HTML CSS and Java script
and have a strong knowledge of C, C++, Python, Reactjs, Nodejs Go , React native, OpenGL, WebGL
News App in Flask
- Quiz app in react and go
- 3D adventure game in OpenGL
- WebGL clone of subway surfers
- Jet pack Joyride in OpenGL
- Mario game in Python
I have also worked on the following internships and projects in teams before
- VIRTUAL LABS
Built a virtual Data Structures Lab for MHRD.I worked with a team of 20 interns.
libraries to deliver a working app in 2 months. Hosted links http://exp-vlabs.iiit.ac.in/demo.html
- BUTTERFLY EDUFIELDS
Worked in a team of four to design a mobile application tool which parses information
such as data or an image through a template e.g. Excel or Jpg and outputs a clickable Html-5 format concept map.
Due to copyright agreement with the company, Source code is not available.
- SCHROCKEN INTELLIGENT MACHINES
Working with a team of 3 and my mentor to Implement a Proof of Concept for demonstrating
"anonymous communication" from one-to-many parties on Hyperledger Fabric Blockchain using
Zero Knowledge Proof (ZKP) technology.
I am inspired by the motive of Public Labs to provide a better and cleaner world to live in. From childhood i have strongly felt the need for environmental conservation. I also love science and the very idea of DIY experiments to learn stuff excites me.
Improving the website for public labs would encourage better participation and promote a wonderful community to unite and discuss problems and make a change to this world. If i can be a small part of this change it would definitely mean something :)
The target audience ie mainly of the age group 13-60 are perhaps the end users of publiclab.org. Improving UI has a direct impact on user experience and the end result of this project would achieve a easily understandable and usable version of the website along with changes to make the UI more appealing after considering various design aspects and choices. This forum is a perfect example of technology meets nature and science and I would love to see people benefit from it.
I have no other academic commitment in the months of may june and july and am ready to be fully dedicated and committed to this project and do my best in finishing it.