Want to talk about soil? Join us for Open Call every Tuesday until Mar. 30 and our kick-off call on this topic on Feb. 2! Click here for details on how to join!

Public Lab Research note

Outreachy proposal: PublicLab.org UI Improvement

by madeofhuman | March 17, 2019 07:50 17 Mar 07:50 | #18750 | #18750

About me

Name: Chukwuka Odina

Email: josephodina@gmail.com

Github, Gitter, Twitter: @madeofhuman

Location: Lagos, Nigeria

I love the feeling that comes when I've successfully stared down a bug and won XD. This is my first open source contribution and I've had a really wonderful experience so far. In my leisure, you can find me watching sci-fi movies or reading fanfiction.

Project description

Using Bootstrap 4 UI library and Public Lab's new Style Guide, implement new HTML templates on the Dashboard, People, Tags/topics, Individual tag, Questions page and Profile pages of the PublicLab.org Ruby on Rails website.

Abstract/summary (<20 words)

Implement new designs of major PublicLab.org pages.


The current UI of the PublicLab.orgwebsite is not (new) user-friendly and welcoming. This redesign aims to not only declutter the pages and make it more welcoming for (new) users but to introduce a modern look, using a modern tool (Bootstrap 4).


The UI improvements will be made across the following pages (implemented on shadow routes to avoid messsing up existing routes):

  1. Dashboard ('/dashboard2')
  2. People page ('/people2')
  3. Tags/topics page ('/tags2')
  4. Individual tag pages ('/tag2/:tag')
  5. Questions page ('/questions2')
  6. Profile page ('/profile2/:userid')

The specific tasks are divided among the pages listed above, and I've divided them into milestones, spread across the duration of the internship (May 20 to August 20). I plan to allocate the last three days in a milestone period for testing the implementation. My timeline for work is as follows:

Milestone 1: Redesign 'People' Page

Design notes: https://publiclab.org/notes/edie_blues/01-16-2019/what-do-you-think-about-this-design-for-the-people-pageimage description

image description


20 - 24

  • Create shadow route '/people2' to work on
  • Create an HTML version of the "card" designs shown in several of the UI mockups
  • Modify the People page to show cards of people instead of table rows

27 - 31

  • Modify the People page to show cards of people instead of table rows
  • Add tools to a less obtrusive popover menu using Bootstrap UI components

3 - 7

  • Modify the People page to show a map on the right side
  • Test the implementation

Milestone 2: Redesign 'Tags/Topics' Page

Design notes: https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think

10 -14

  • Create shadow route '/tags2' to work on
  • Modify the Tags/Topics page to show cards instead of table rows
  • integrating a map of recent content onto the topics page

17 - 21

  • integrating a map of recent content onto the topics page
  • Create template partials from people and topic card designs for use in other parts of the site
  • Test the implementation

Milestone 3: Redesign 'Dashboard' Page

Design notes: https://publiclab.org/notes/edie_blues/12-13-2018/public-lab-dashboard-new-design-ideas

24 - 28

  • Create shadow route '/dashboard2' to work on
  • Create a secondary Dashboard template to shadow the first, and getting initial topics to appear on it

1 - 5

  • Display topics on the dashboard based on subscriptions

8 - 12

  • Add a "new topics" area to the dashboard page
  • Connect "close card" button to "unsubscribe" function

15 - 19

  • Add "recent and trending tags" section to the dashboard
  • Test the implementation

Milestone 4: Redesign 'Questions' Page

Design notes: https://publiclab.org/notes/edie_blues/01-07-2019/the-new-questions-page-design-is-ready-to-be-reviewedimage description

image description

22 - 26

  • Create shadow route '/questions2' to work on
  • Modify the Questions page to display an introductory text area

29 - 2

  • Implement the rest of the designs for the profile page
  • Test the implementation

Milestone 5: Redesign 'Profile' Page

Design notes: https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.gfb2aa1b7ddf791c_5image descriptionimage description

5 - 9

  • Create shadow route '/profile2' to work on
  • Restructure the 'Profile' page column layout to follow the new UI design

12 - 16

  • Compress the 'Profile' page tools into a smaller fold-away interface design

19 - 20

  • Display active topics on the profile page
  • Test the implementation

Resources: this presentation, design notes


Bootstrap 4 documentation which is easily obtainable from the Bootstrap website, mentors and reviewers, of which Public Lab has a lot of kind and helpful ones.

First-time contribution

1. https://github.com/publiclab/plots2/pull/4981 (subsumed by new designs)
2. https://github.com/publiclab/plots2/pull/4984 (Merged)
3. https://github.com/publiclab/plots2/issues/5021(FTO, assigned)
4. https://github.com/publiclab/plots2/issues/5059 (FTO, assigned)
5. https://github.com/publiclab/plots2/issues/5065 (FTO, assigned)
6. https://github.com/publiclab/plots2/pull/5081 (Merged)
7. https://github.com/publiclab/plots2/pull/5068 (Merged)
8. https://github.com/publiclab/plots2/pull/5197 (In review)


I was introduced to software development on a basic and theoretical level in the university and spent some time self-learning to augment that knowledge. I have also participated in a coding bootcamp where I gained practical knowledge using Javascript (Node and React) to build some applications.


1. Maintenance Tracker (API, Client) (a maintenance and repairs application where users can log requests and an admin attends to them)
2. Authors' Haven (API, Client) (a community of authors and readers. Like Medium.com)


I've worked in a team at tecnov.net where we built an e-commerce application in Rails. I've worked in another team where we built a closed-source learning tool that helps learners keep track of their learning, output quality and feedback using Rails.


The mission of Public Labs, which is to empower communities with open-source DIY technologies to own their own environmental monitoring and advocacy as a tool in combating environmental justice issues is something I find interesting, coming from a part of the world where environmental issues are swept away because of the high cost of researching and materials, which has led to a sense of apathy.

Another thing I love about Public Labs is the support and sense of community that I have experienced in the time I've been contributing to this project. It's not something you find everywhere and I'd love to be a part of that; play my part in ensuring that people have access to the tools they need to ensure their environment is better for them.


This project is going to make it especially easy for new users to find their way around the PublicLab.org website, and encourage them to be a part of the community and drive change in their communities.


@warren @cess @gauravano @bansal_sidharth2996 here's my proposal. Your review and feedback are highly welcome. Thanks.

Reply to this comment...

Hi @madeofhuman great to see your proposal. I loved your mockups but some of the mockups have sidebars on the left while others have sidebar on the right. When user changes url it may appear weird. What do you think?

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

Reply to this comment...

@bansal_sidharth2996 I got the mockups from the notes under this topic. I have updated my proposal to include the latest designs for the Dashboard and Questions pages. Thanks for the feedback.

Reply to this comment...

Hi! This is a great start, thank you so much! I did notice that not every design you've referenced here is the latest design for that page. Could you copy in the more recent designs for each? Thank you!!! I hope to review in more depth soon.

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

Reply to this comment...

Sure thing, @warren. 😃 I'm quite grateful that you took the time to review given your current health conditions.

Reply to this comment...

@warren I've updated it and I think I got the most recent design from here and this spreadsheet. Please let me know if I missed anything. Thank you.

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

Reply to this comment...

I love the feeling that comes when I've successfully stared down a bug and won XD

this is so great. I really appreciate how you dove right into making FTOs for others! I'm glad you had a good experience! 👍

For some input on timeline ordering, I want to point you to the comments i made on @lekhidugtal's post here: https://publiclab.org/notes/lekhidugtal/03-23-2019/soc-proposal-enhancing-the-ui-of-publiclab-and-relevant-changes-to-server#c23398

Also, you may notice that the new "card" UI is used repeatedly across the new designs. What do you think about a re-usable partial template and what pages would be able to use a common template for those sections?

Thanks a lot!

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

Thanks a lot for your feedback, @warren, I really appreciate it.

I've gone through the comment and I'm going to re-order my timeline to work on the Dashboard before the Profile and Questions pages. I'm already working on the People and Topics pages first based on information I got from the project description on Outreachy that they'll be simpler to implement.

I love the idea of re-usable templates, I've worked with them on several of my tasks here and the ability to do that is one of the things I love about Rails. I think the card design from the Topics page can be re-used on the Profile page and Dashboard and one of the tasks I listed to work on when implementing the Topics page is to create a re-usable template for that.

Reply to this comment...

@warren I have updated my proposal to show the shadow routes I'll be working in, per your feedback.

Reply to this comment...

Hey Chukwuka, nice proposal. I think you should give some time to testing too in your timeline. Like, @warren mentioned here - https://publiclab.org/notes/lekhidugtal/03-23-2019/soc-proposal-enhancing-the-ui-of-publiclab-and-relevant-changes-to-server#c23398.

Also, really liked your contributions and enthusiasm for helping newcomers.

Thanks for your feedback, @gauravano. I factored in testing when drawing up the timeline, just that I did not state it explicitly. I plan to allocate the last three days in a milestone period for testing. I'll go ahead and do that now, but it's only going to reflect here since I can no longer modify my application on Outreachy as the deadline has passed.

Reply to this comment...

That's not an issue. You can make the modification here. Thanks!

I've done that, @gauravano. Thank you. 🙇

Reply to this comment...

Hello @madeofhuman, I wanted to reach out and say thank you for your work and your proposal. We have to make difficult choices each year about what projects to select and aren't able to support as many as we'd like. Please consider applying with us again next cycle; we'd love to continue working with you. Thank you!

Reply to this comment...

Login to comment.