Hello Everyone, I'm Lekhika Dugtal. I'm a budding designer and developer.

About me

Name : Lekhika Dugtal
GitHub : CleverFool77
Behance : lekhikalaur7
Linkedln : lekhikadugtal
Blog : https://medium.com/@lekhikadugtal
Twitter : DugtalLekhika

Affiliation : Indian Institute of Information Technology, Allahabad
Degree : (Dual degree) Bachelors of Information Technology - Masters of Business Administration
Location : I belong from the place in a border area of India, Nepal and Tibet . Though Now,I live in New Delhi, India but due to my institute I'm living in Prayagraj.

Project description

Abstract/summary :

Enhancing the UI of plots2 while ensuring the consistency as per the information architecture of the project and do the relevant backend changes if required.

Ideas and How to solve them.

I tried to create some mockup designs. As being a designer and a developer, I usually came across easier designs than done on technical aspect. Its not that designing is easy , rather it needs a lot of work in thinking and analytical process. Many of the designs I used were designed by the publiclab's team earlier. The information was huge but the user centred approach with navigation and functionality in design didn't made it cluttered.Instead they were compact yet elegant. For those designs, I modified them a bit, I wrote down my approach and the method of implementation on how to solve them. All designs here are possible ideate-prototype-test process. I tried to keep the UI user friendly and as simple as possible.

Search Section

I tried implementing bootstrap ui and followed some the design blocks These are the two ideas I came up with after considering all the suggestions and discussions.

IDEA ONE :

IDEA TWO :

For comparison ?

I went for minimal searchbar with an added facility of filter available. Right now, we don't have the feature of search by filter at the beginning of search rather we can do it later after the results are displayed.

Result of search ?

Currently, The search on something is done after the results are displayed and then the tab is chosen. Instead I went for the vertical left bar, from the suggestions given in proposals of all the applicants. Here, we can have the vertical tabs as static ?

Implementation

It would be done using bootstrap search box and bootstrap vertical tab bars.

Profile Section

Current Problem

Regarding the profile, we had so much data that it took me a ton of hours to think than in actually applying. The information was huge and regarding architecture I had no clue. I needed to ensure that I don't miss out anything. And yet with so much data, the UI doesn't look messy.

Current UI -

I walked-through various designs to ensure the consistency. I used WYSIWYG concept to ensure that even mockup and prototype will be the same. In the end, the information architecture I decided was following :
So I came across a solution of controlling my information architecture with input-controls ie :toggle buttons.

Why toggle button group ?

With a toggle button group we can let user choose from two or more options available. Toggles are the best way to let users choose between two opposite options without the need of checkboxes and radio buttons.They are used for changing the state of system functionalities and preferences.

This one consists of map !!

This one have recent activity !!

For comparison

Two weeks ago, I wrote a note regarding the change in profile page through design : Full Link to the notes

These were some designs which were made for publiclabs team earlier and warren suggested me https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.gfb2aa1b7ddf791c_5

Both have it's own pros , So I'm planning on taking the best out of both of them on further discussion and implementing them.

Implementation

Considering the coding part, most of the work will be in css and html. The requests given are still the same. The key part here would be toggle-button-group, where if clicked on one icon, relevant group of items will be displayed and others will be hidden. and vica versa for others.The rest of the part will be almost same as only css will be worked on.
I'll be using bootstrap4 and grid will be used to arrange the items. Bootstrap cards for the relevant tag information.

People Section

Current Problem

The users are listed down in rows. It's usable but not user friendly.

Solution

Design of people section-

• The search by location on map feature would help us to show the users in that location.
• All the users will be in form of cards - Why ?
  * The data includes text, images, actions and card layout will help the user to read more easily.
  * Filtering will be done by map, So it will look better to have a card layout.

Wireframe

Here I tried to use full advantage of space given. The map spans whole width of screen. The very same map would be square in phones and rectangles in desktop with respect to screens showing the responsiveness.

Design by publiclab design team that I found -

We'll be discussing to get the design which is best from both of them.

Implementation

All the users will be shown in the form of cards. The information shown regarding the ui will be discussed. There would be a button linked to profile of a particular user. So If there is need to go to user's profile and see the recent activity , then it can be seen.

The positioning of map will be discussed with mentors and reviews. So for now, The implementation part is only for user list.

I'm working on this issue right now and some of the PR made are : Link to first PR showing basic structure of user in card format

Tags/Topic page

Implementation

The tags section will be divided into two column. The visualisation at right side will be shown in an iframe... I'll be using Bootstrap4 here. The card will be implemented for the tags. I'll be Modifying the Tags/Topics page to show cards instead of table rows.
credits to real owner for designs

Right now I'm working of some of the break-me parts of this issue #5090.
The links to my commits -

• making tags section two column
• adding stats graph in second column section

And the link to my PR is : tags/topic parts

Dashboard Page

Current UI -

What else is needed ?

• Map to search and filter ? Filter info by places ?
• Filter people by places ?
• trending topic with awesome interface
• trending questions ?
• An option to to participate through wikis/note

I was working to put some of my thoughts for dashboard then I came across this design in one of the comment section on notes. The best part of this design is that it's not less cluttered but it's less cluttered without sacrificing anything.

Implementation

For dashboard, It would grid layout into two-columns .The second column would be map where we can filter on the basis of location. The design would be compact but not cluttered. An elegant and clean design with a casual font is the solution. The discussions ,tags,questions followed , everything would be shown in form of cards. As cards are the convenient means of displaying content composed of different information and that's what our dashboard is doing .Its a feed to all the discussions.

credits to real owner for designs

The card in dashboard will have direct post button and there will be icon on top left corner of card for unsubscribing.

This lets us to have feature of unsubscribing without going to that tags page.
If clicked on new post of that tag, The modal will open which will have templates to choose from based on need user have.

There will be new bootstrap modal opening up for the follow more section.

Tags Page

The design is what I found in drive shared by warren in the comment of one of my post
https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.g3924eb58a4_0_0

The UI has been made keeping in mind the needs of users. First you provide information to user regarding the tag with a collapse read more button which hides that section keeping in mind that there are many users who might not read it.

After providing the information, the user is asked to ask a question and follow the tag below. The behaviour of user is observed here that if user will be interested,then there should be way to make engaging towards that tag with following and curiosity by asking a question.

New Design -

I modified the button group section with white buttons and light border.

Implementation:

The tags page will be implemented using bootstrap 4. The section will be arranged using grid and multiple buttons in the middle will be implemented using a nested button group with dropdown component. The buttons will be linked to respective url.

Questions Page

This was the latest design I found in the comment section for Questions page.

• It has a block design.
• The design is simplified yet cool.
• Input fields are sized according to their expected input they are both easier to read and to interpret for users. here the bigger size makes most of the filed values visible.
• It provides you information in the section above question area , thus making you clear of your aim to come in this url page. The Helpful information gives hints to users of the mottojust ask, we'll answer.

credits to real owner for designs

**
**

Implementation

To implement the UI mockup for the questions page, Bootstrap4 css and js will be used. The design itself is minimal with a form. The whole page will be placed inside a container and the profile picture along with basic description will be arranged in a single row by using grid. The description would be the info to make users realise that they'll get answers. The profile picture will have a tooltip implemented using bootstrap tooltip component. The questions data will be entered in a form which will have a single textarea input. The action for the buttons below the form will be executed by detecting their click event using jquery.

Shortcut keys

If you are a good typist, taking your hands away from the keyboard to move the mouse can use up a few seconds. I opened an issue for discussion regarding this topic link to issue
The applications like Facebook,Twitter,Gmail, Slack, Zulip etc. override the in browser keys like ctrl+s with their in application shortcut keys to provide a better user experience. And considering publiclab has notes ,blog ,subscribe and many more features. This would be very helpful in future course. So Instead of taking our cursor to the point where we need it, it would be better experience to provide a very own set of shortcut keys.

Implementation

As most of the OS has used alt for shortcut keys and browsers such Mozilla-Firefox ,Opera and Chrome etc have their own set of keys. I would be Implementing shortcut keys using javascript and might need to override the shortcut keys defined by the browser. These are some of the few examples on which I'll be implementing shortcut keys for -

• Search
• Creating a note
• Creating a wiki
• Opening Profile dropdown
• Next Research Note
• Next wiki

Approach :

Shortcuts mainly require implementation on the frontend using javascript. By using javascript, keypress will be detected to see which key has been pressed by the user, if the correct shortcut key is pressed then the function related to it will be executed by sending a request to the server if needed or by manipulating the website via js if only frontend is required.

Implementation

By using jquery framework of Javascript, first the keypress will be detected for the complete website by using window selector and keypress event. Using keypress event since it also detects special character keypress. ctrl, cmd,alt and shift key will be detected via .ctrlKey, .altKey, and .shiftKey attribute of the event argument passed in the function. All the other keys will be detected by their keycode using .which attribute of the event argument. A shortcut key including two or more keys such as ctrl and a key will be detected via nested if conditions.

Below is the bare skeleton of the keyhandler

$(window).on('keypress',function(e){
e.preventDefault();
// detect shortcut key combinations
});

It might happen to override browser's default behaviour for a shortcut key to implement the shortcut key for publiclab, to prevent browser's natural behaviour from executing, e.preventDefault will be used where e is the event argument passed in the function.

To make the code much better, instead of writing each shortcut key in an if block, a dictionary of keymapping will be maintained which will keep note of the keycode and a short name given to that shortcut key. Inside the keyhandler, a switch statement will be used to detect which key has been pressed and using the keymapping defined in the dictionary, final action will be executed directly or via a function call if required.

//dictionary mapping
directKeys = {
191: 'slash',
...

}

keyhandler function (e) {
e.preventDefault();
switch(e.which):
case 191: do the required thing
    return true;
       ...
       ...
}

For implementing the shortcut keys for ask a question, create a new research note and create a wiki, I propose the following flow: On pressing the designated shortcut key (say ctrl+k), a modal will open with the above mentioned 3 options, user can select one by navigating via keyboard and press enter to select that option. This will prevent implementing 3 different shortcut key for a create task of question,note and wiki. Remembering a single shortcut key instead of 3 will be easier for a user.

Add Interested people option beside RSVP in event

I opened an issue regarding this : Link to Issue

Whenever the person creates a event. There is only one option given which RSVP for attending event.
Rather there should be another feature for those people who are interested but unsure that whether they'll attend event or not.

Usually there are many people who are not confirmed that they'll attend but they are very much interested in the event. So we can add feature where it can be shown the number of people interested in attending.

Approach

A button interested will be placed alonside rsvp. Users interested in an event will use that button. In the backend a new field interested will be added to the database. Whenever a user clicks on the interested button, the interested field is updated on the database.

Implementation

The button will be added using bootstrap button with primary class. A new field interested in the respective table will be added alongside rsvp. On clicking the button, a request will be sent on the backend with the user detail who is interested in the event, the database will be updated accordingly for the user, finally a message "user is interested" in the event will be shown.

Timeline

The process followed will be Code - Test - Integrate

Phase 1 : 20 May - 3 June (People Section and SearchBar )

	Period	Work
	20 may - 26 May	Creating basic layout according to design Working on the card html layout of people section instead of table right now Working on search by user feature on map and other filter options
	27 May - 3 June	Working on searchbar with bootstrap ui Enhancing the results displyed page of search or query Complete any unfinished work and write unit tests for the work done during the phase.

Phase 2 : 4 June - 8 July (Dashboard Section)

	Period	Work
	4 June - 9 June	Creating the basic layout of dashboard section with 2 column feature, adding map on the right column and discussions on the left. Start working on the card layout.
	10 June - 16 June	Continue working on the card layout and showing recent discussions on tags. Show recommended topics, trending topics and the users nearby you.
	17 June - 23 June	Work on feature of new modal for choosing a template and fixing up other issues. Work on feature of new modal for trending and popular topics. Start working on the tags section.
	24 June - 30 June	Continue working on the tags section and features of button/rss/subscribe/stats Start working on results displayed in tags section.
	1 July - 7 July	Finish up the tags section, complete any unfinished work and write unit tests for the work done during the phase.

Phase 3 : 8 July - 20 August (Profile section and Questions section)

	Period	Work
	8 July - 14 July	Following bootstrap grid and card layout to create a prototype of design Create the sidebar for the page.
	15 July - 21 July	Add the tags, trending and most active tags by the user Enhancing the card layout and other details Working on toggle button group section which includes map, bio and recent activities.
	22 July - 28 July	Work on the tab pane which include research, questions,comments,liked and barnstars. Working on the card layout for the tabbed pane section.
	29 July - 4 August	Create a simplified block design prototype for questions page and a large text area for the user to input the question. Start working on the featured question card layout.
	5 August - 11 August	Complete working on the featured question card layout. Work on browse questions across a range of topics section.
	12 August - 20 August	Complete any unfinished work and write tests for the work done.

I'll review PRs , open FTOs and help other contributors all the time.

Post Outreachy

I will keep contributing to publiclab after the outreachy period ends. I'll participate in discussions happening over the gitter channel and help other contributors. I'll keep contributing to publiclab projects by creating new issues and fixing the already present issues. I will review PR's and help out new contributors towards their first contribution.

Testing

1. All the unit test for code will be written in the final week of every phase.

2. Shadow testing for new UI of all the pages created.

Documentation

All documentation will be done in that phase only.

First-time contribution

Comments, to show overall community involvement (like helping others): Link showing involvement

Open issues: Issues created By lekhika

Pull Requests: PR opened by lekhika

First-timers Issues : First-timer opened by lekhika

Experience

Tell us how you've learned about writing software; what languages you've been learning, if you've worked on other projects, links to GitHub or other code repositories or samples ?

How I learned about writing software

The projects in semesters and the hackathons was the kickoff factor.

Some languages and Tech-Stacks that I'm learning and working on

1. ReactJs - I have only worked on small projects like todo and forum till now and haven't made a fully-fledged project on React Js yet.
2. Mozilla's WebVR and Andoid Studio AR Core - I plan to work on a project based on AR/VR.
3. Dart and Flutter

Some Projects that I've worked on

Instead of going for fancy projects, I usually try to go for projects which solves some major problem faced by us and many other people in day to day life.

• Chiron - Link to source code
  Problem Statment : There is limited preventive healthcare and services to promote optimal health and wellness, and an avert worsening of one's healthy mind and body. Through this product we aim to make you "Not just disease free but also healthy".
  Tech Stacks Used :
  • The backend server is implemented in django's REST framework.
  • The forum is made using Hasura's GraphQL Engine and ReactJs.
  • The frontend is made in JQuery and Bootstrap.
  • The features of Webclient is present in the form of Zulip Bot.
• Athena-42 - Link to source code
  Problem Statment : The weaker students in schools and colleges face problems that cannot be solved by online resources and tutorials and needs a personal mentor. The portal lets the students upload their problems anonymously. The mentors bid for the problem. Thereafter the portal maps the student to the mentor for personalized sessions online/onsite. The services may be chargeable.
  Tech Stacks Used :
  • The backend server is implemented in django's REST framework.
  • The frontend is made in Ajax and Bootstrap.
• ECOP (Pocket Police Comapnion) - Link to source code
  Problem Statment : An android based application.Pocket Police Companion aims to facilitate a hassle-free FIR lodging experience. Built on a portable app platform, E-Cop provides you an easy, on-the-go alternative to fast-track grievance redressal.
  Tech Stacks Used :
  • The Lanugage used is Java
  • Software used is Android Studio 3.0.0-beta/3.0.1
  • Database used is SQLite Database.
• Dataset-Generator - Link to source code
  Problem Statment : Generate and Capture packets to create your own own dataset using jpcap and present it in raw or filtered manner through GUI.
  Tech Stacks Used :
  • The Lanugage used is Java
  • GUI widget toolkit (Swing) and IDE Netbeans was used.

Research Projects I've worked on (Due to research, the source code is not opensource)

1. Automoji - Emoji Suggester and Emotion Reader
   Automoji uses CNN and Bag-of-words Model to carry out sentimental analysis on natural language input to find its emotion and thus predict the corresponding emojis.
2. Estimation of Photometric RedShift using Machine Learning - (work in progress) Using many machine learning algorithms to predict the photometric redshifts from spectroscopic values with the help of Sloan Digital Sky Survey dataset.

Contributions in other opensource organisations

Organisation	Project	Contribution
Systers	Mentorship System (Python and Flask)	Link to PRs
Systers	Sysbot (Python)	Link to PRs
Coala	Coala-bears (Python)	Link to PRs

Teamwork

1. I've participated in various hacakthons in a team of four where I worked as a designer and developer for a team.
   Some of the opensource projects that we made are: Ctrl-plus-C Projects
2. I've made some projects in the institute in a team of three. Here, I worked more in backend and coding part.
   Some of the opensource proejcts are : Astoknot Projects
3. I was a member of Design team of technical society of our institute. I worked with a team of 40 people for more than 6 months.
4. I was part of Creative and Design team of the cultural fest of IIIT-A. At there I worked with a team of 50 for more than 8 months.
5. I was a part of boot2root ctf - A Cybersecurity technical Event's design team. I created various designs for them.

Achievements

• Winner of SheHacks Hackathon held at IIITA in Feb 2019.
• Second Runner Up in Hackathon called Hack36 at MNNIT in Jan 2019.
• All girls best team prize winner in Hackathon called Prototype organized by Headout.
• Top 3 in Nova - Designathon.
• Became the Girls's WInner Opensource Event called Opencode

Passion

What about our projects, and Public Lab, interests you? What are you passionate about? Open science, environmental justice?

I came across Public labs when I had to decide my project in wireless sensor networks/wireless networks and one of the project idea was measuring the water quality, or the air pollution. I took the project because it seems doable to me but when I saw that there is an organisation itself which helps people measuring pollution and other to environment. It was surprising to be honest. The concept of working for the protection of Mother nature through tools and techniques of environmental science is the most novel idea I've ever seen.

Audience

Whom do you want your work to help? We especially appreciate proposals which make technologies and techniques more welcoming and friendly to those who've often been excluded.

There are hundreds of people visiting the website of publiclabs everyday. I want my design methodology approach to provide a better user interaction and experience. The improvement in UI will be done by understanding the human needs. So it aims to make user stay more on the website. The audience of this project will be all the users using this website to explore more about the environmental justice through science and tools. The great UI will help the users as a best tour guide, showing them around and making them interested. The UI need not to be unique but it would be conventional and easy to navigate.

Commitment

Recently I joined PublicLab but I feel like I was already part of this since years. One of the many best part of PublicLab org that everyone is so enthusiastic to first time contributors that you are overwhelmed to be of such welcoming organisation. It makes you feel to remain working for them in future even though you are just a newcomer. I'm really glad that I found this organisations and recognized the same organisation in list of outreachy. I would keep on contributing to Publiclab and help other newcomers. The environment I felt while joining this org for first time, I want everyone to feel this. I really like taking participating in discussions, so would love interaction and debate over the channel.

---

Why so many vectors in proposal ?

The proposal is for design and ui improvements. The way we are trying to improve the website with better design to ensure better user interaction. In a similar way, I tried making proposal more interactive and understandable through vectors.