Public Lab Research note

Outreachy proposal: UI Improvement

by madeofhuman new contributor | | 86 views | 8 comments |

Read more:

About me

Name: Chukwuka Odina


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 Ruby on Rails website.

Abstract/summary (<20 words)

Implement new designs of major 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:

  1. Dashboard
  2. People page
  3. Tags/topics page
  4. Individual tag pages
  5. Questions page
  6. Profile page

The specific tasks are divided among the pages listed above, and I've spread them across the duration of the internship (May 20 to August 20) as follows:

Milestone 1: Redesign 'People' Page

Design notes: description

image description


20 - 24

  • 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

Milestone 2: Redesign 'Tags/Topics' Page

Design notes:

10 -14

  • 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

Milestone 3: Redesign 'Questions' Page

Design notes: description

image description

24 - 28

  • Modify the Questions page to display an introductory text area

1 - 5

  • Modify the Questions page to display an introductory text area

Milestone 4: Redesign 'Profile' Page

Design notes: descriptionimage description

8 - 12

  • Restructure the 'Profile' page column layout to follow the new UI design

15 - 19

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

22 - 26

  • Display active topics on the profile page

Resources: this presentation, design notes

Milestone 5: Redesign 'Dashboard' Page

Design notes:


29 - 2

  • Create a secondary Dashboard template to shadow the first, and getting initial topics to appear on it

5 - 9

  • Display topics on the dashboard based on subscriptions

12 - 16

  • Add a "new topics" area to the dashboard page

19 - 20

  • Connect "close card" button to "unsubscribe" function
  • Add "recent and trending tags" section to the dashboard


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. (subsumed by new designs)
2. (Merged)
3., assigned)
4. (FTO, assigned)
5. (FTO, assigned)
6. (In review)
7. (Merged)
8. (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


I've worked in a team at 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 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...

Login to comment.

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