Planning implementation of new UI designs (work in progress!)

[jywarren]

(this issue is not ready yet, as we're still finalizing UI design work!)

Coming out of a range of UI analysis and design projects from the past 6 months, Public Lab is now ready to begin implementing new designs across major pages of our PublicLab.org collaborative platform. This project will build on the Bootstrap 4 UI library and our upcoming Style Guide to implement new HTML templates within the Ruby on Rails website at PublicLab.org, focused on the following pages:

• Dashboard
• People page
• Tags/topics page
• Individual tag pages
• Questions page
• Profile page

The design work to date can be found in a series of mockups listed on this page: https://publiclab.org/tag/ui-designs.

[jywarren]

Very tentatively starting to create a checklist:

This project includes a variety of tasks, many of which are simpler, making them a good place to get started. These include simpler pages like the People page, the Tags/Topics page, and parts of other pages. These will help you get oriented before taking on a larger project.

We would be happy with any subset of these tasks being completed, and if you finish them all, we can definitely come up with more to keep you challenged!

Specific tasks include (divided among the different page designs listed above):

• Creating an HTML version of the “card” designs shown in several of the UI mockups
• Testing these at different screen widths and on different devices
• Modifying the People page to show cards of people instead of rows
• adding tools to a less obtrusive popover menu using Bootstrap UI components
• Modifying the People page to show a map on the right side
• Modifying the Tags/Topics page to show cards instead of table rows
• Modifying the Questions page to display an introductory text area
• Creating a secondary Dashboard template to shadow the first, and getting initial topics to appear on it
• Adding a “new topics” area to the dashboard page
• Adding a map of recent nearby content (larger project) to the dashboard page
• Displaying topics on the dashboard based on subscriptions
• Connecting “close card” button to “unsubscribe” function
• Adding “recent and trending tags” section to dashboard
• creating template partials from people and topic card designs for use in other arts of the site
• displaying active topics on the profile page
• restructuring the profile page column layout to follow the new UI design
• compressing profile page tools into a smaller fold-away interface design
• integrating a map of recent content onto the topics page
• developing a map popup interface to display individual recently posted pieces of content on a map

Stretch goals

• closer integration with new layers UI from Leaflet Environmental Layers
• search for locations box within maps (as shown in UI designs)
• integration of alerts to guide subscriptions and welcome to new users

[karunagoyalk]

Hello @jywarren
I would like to work on this issue! Please help me to get started

[jywarren]

Hi, actually we aren't quite ready for this to be implemented yet, but we will be soon! Can you check out some other issues for now? Thank you!

…

On Wed, Mar 6, 2019 at 11:16 AM karunagoyalk ***@***.***> wrote: Hello! I would like to work on this issue! Please help me to get started — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4922 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJyMPhbuMfcKlS2W8spADdwOVVLg-ks5vT-mugaJpZM4bfuiQ> .

[karunagoyalk]

@jywarren No problem!
Do you have any other issues for this project or I have to look for some different project

[jywarren]

You can check at https://code.publiclab.org/#r=all -- thanks! And some issues may be claimed, but not worked on recently - you can ask if people are OK with you jumping in to take them up!

…

On Wed, Mar 6, 2019 at 11:23 AM karunagoyalk ***@***.***> wrote: @jywarren <https://github.com/jywarren> No problem! Do you have any other issues for this project or I have to look for some different project — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4922 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ_varcOkiSPXd0tr9CEXLacoabBFks5vT-tagaJpZM4bfuiQ> .

[jywarren]

We will probably be starting with the People page redesign at https://publiclab.org/people -- following the mockup at the bottom of: https://publiclab.org/notes/edie_blues/01-16-2019/what-do-you-think-about-this-design-for-the-people-page

However we are going to wait on the Bootstrap 4 upgrade by @Souravirus in #3937 -- thanks!

[gautamig54]

Hello @jywarren!! Looking forward to contributing to this issue!

[ananyaarun]

Hey, @jywarren ,So at the moment i notice a lot of scope for UI/UX improvements/faults on the Public Labs page.
To name a few :-

1. Cluttered arrangement of text and buttons
2. Lack of color consistency among various buttons
3. Certain pop up messages going outside screen
4. Certain messages beginning with a capital letter while certain do not
5. Missing pop up messages for some buttons

Since these UI changes require discussion and debate, can i go ahead and open individual issues ? Or can we discuss some improvements and implementations here first ?

Some of the changes i would like to make in the application period are

1. Space out text and buttons on the dash board and all other pages.
2. Make pop up messages consistent and fit on screen everywhere and add pop up messages where they are missing but needed.
3. Keep the color of buttons used across pages consistent .

Just wanted your guidance and opinion on how to go about making them. That is can i open issues regarding these and then send out a PR for review ?

Thanks :)

[jywarren]

Yes, perhaps you can make an issue collecting up in a list a lot of detailed ones? But be aware that some might be resolved if we completely revamp the relevant page in this big redesign. Still, several may make good issues for new contributors! Have you made a first-timers-only issue, or solved on yourself? https://code.publiclab.org/#r=all

…

On Mon, Mar 11, 2019 at 2:19 PM Ananya Arun ***@***.***> wrote: Hey, @jywarren <https://github.com/jywarren> ,So at the moment i notice a lot of scope for UI/UX improvements/faults on the Public Labs page. To name a few :- 1. Cluttered arrangement of text and buttons 2. Lack of color consistency among various buttons 3. Certain pop up messages going outside screen 4. Certain messages beginning with a capital letter while certain do not 5. Missing pop up messages for some buttons Since these UI changes require discussion and debate, can i go ahead and open individual issues ? Or can we discuss some improvements and implementations here first ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4922 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6MgZGsccrhAnXjyyIp1x6bStNQZks5vVp4PgaJpZM4bfuiQ> .

[ananyaarun]

@jywarren , Sure thats a good idea , perhaps i can take a particular section of the webpage at a time , for example the dashboard, about us sections etc and give a detailed description of the UI/UX changes possible/needed. This can further be discussed on the issue thread and once finalized a PR can be made :)

Regarding FTO issues , i have opened and solved quite a few already.
https://github.com/publiclab/plots2/issues/created_by/ananyaarun

Yes, as you suggested certain easy changes, i shall open as FTO issues in the repo.
Thanks for your feedback !

[jywarren]

:-) awesome. Thanks so much! And indeed, it'd be great to start copying and dividing up the specific steps it would take to implement the designs -- making checklists!

…

On Mon, Mar 11, 2019 at 5:31 PM Ananya Arun ***@***.***> wrote: @jywarren <https://github.com/jywarren> , Sure thats a good idea , perhaps i can take a particular section of the webpage at a time , for example the dashboard, about us sections etc and give a detailed description of the UI/UX changes possible/needed. This can further be discussed on the issue thread and once finalized a PR can be made :) Regarding FTO issues , i have opened and solved quite a few already. https://github.com/publiclab/plots2/issues/created_by/ananyaarun Yes, as you suggested certain easy changes, i shall open as FTO issues in the repo. Thanks for your feedback ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4922 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJyPyYg-5Lzs2xma_w23wAO7aH52vks5vVssYgaJpZM4bfuiQ> .

[karunagoyalk]

@gauravano Hey! can you assign me any issue for this project!

[grvsachdeva]

Hey @karunagoyalk, this project is to be solved in Outreachy so please take look at other issues of https://github.com/publiclab/plots2/issues/ .

Thanks!

[vaarigupta]

hello @jywarren I am an outreachy applicant and excited to work on it. How can I start contributing ?

[jywarren]

I'm going to close this as we've completed or broken out all tasks! Thanks, all!