Public Lab Research note

Outreachy proposal: New Dashboard Implementation

by stace | October 26, 2020 15:49 26 Oct 15:49 | #24814 | #24814

About Me

Name: Stacy Tonui

Location: Kenya

Project Description

New Dashboard Implementation

Problem Statement

The current dashboard implements some of the components from the Bootstrap Library but the user interface is not intuitive and might cause confusion to a new user. The proposed design uses more Bootstrap components improve this to ensure to make it so that a new team member can easily join and understand exactly what to do and where exactly everything is.


Regarding this discussion created by Cess Wanjiru, the implementation phase can be divided into the following tasks:

i. Creating an "All Posts" Page using the tag page as the model

The new dashboard design will replace the posts with a list of topics hence the need of new place to display all posts.

image description

The "people" tab will be replaced by a "comments" tab which will display the comments in a card format like the way the notes are displayed above which show the author, link to node, permalinks, no of comments on parent node and time ago.

->Suggestion<-image description

  • Tweak the standard card component code to avoid misalignment of the cards as seen on the tag page. Bootstrap properties like d-"flex" and "flex-fill" maybe used to achieve this.

ii. Implement the new dashboard design

image description

As an improvement of the dashboard which is currently in use, the new one, as shown above, will have the following changes:

  • It will display the topics followed with some of the titles of the posts of that respective topic as the main content.
  • It will have a recommended/topics and all topics below the section.
  • A "Welcome to Public Lab" section on the sidebar which is more user friendly and minimalistic as compared to the one currently implemented.
  • A location section on the sidebar which will also let you add a location.
  • It should have a link to the 'all posts' page created preferably next to the "topics you follow" link.
  • The dashboard will also display a Blog topic at the top of he dashboards list and will exclude blog from the subscribed list below to avoid double display.


  • Unsubscribe button should be visible on the topic's card header for affordance purposesimage description

iii. Ensuring the page renders well in mobile viewimage description

The page in mobile views should be as shown above.


  • A 'get started' link before the 'add location' button on mobile view which brings up this section as a modal. This will be helpful for new users. image description


Week 1

  • Interact with team members in the Public lab community.
  • Review the mockup designs and make changes if necessary

Week 2

  • Get started on the all posts page design starting with visual implementation first.
  • Create FTO issue

Week 3

  • Implement functionality of the all posts page.
  • Create FTO issue

Week 4

  • Get started with implementing the dashboard design. Use the bootstrap 4 elements to implement the design.
  • Create FTO issue

Week 5

  • Finish up on implementation of the design.
  • Start working on the functionality of the dashboard i.e make sure the links, and buttons and working as expected.
  • Create FTO issue

Week 6

  • Ensure the dashboard is working as expected, displaying topics followed by a specific user
  • Create FTO issue

Week 7

  • Pin the blog topic and exclude blog topic from the subscribed topic below it.
  • Create FTO issues

Week 8

  • Add trending topics.
  • Create FTO issue

Week 9

  • Connect topic search to autocomplete dropdown.
  • Create FTO issue

Week 10

  • Ensure the map functionality is working as expected.
  • Connect "Nearby activity" button to display once a location is added.

Week 11

  • Work on how to allow notifications of blog updates using the subscribe system
  • Ensure that the page is responsive on mobile devices.
  • Create FTO issues

Week 12 - 13

  • Implement changes to the project if necessary
  • Create FTO issues

First-time contribution.

I started contributing to Public lab this October and these my contributions.


I just completed my degree in Computer Science, awaiting my graduation from Moi University, Kenya.

I enjoy problem solving through code and my expertise is mainly in web development. Some of the projects I've built include:

Tawala- An E-Commerce Site built with Bootstrap, JavaScript and Laravel.

Auctioneer- An E-Commerce Site built with Bootstrap and Laravel.

My Github has more projects that I have enjoyed working on.


I was highly impressed on learning about PublicLab, what it does and what it stands for. I loved the way it uses its platform to share information and address environmental issues. This is a cause that I've always try to participate in and bringing that and technology together is a dream for me.

The past few weeks that I've contributed to PublicLab have been nothing but amazing. It was my first time contributing to open source and I was and still am fascinated with how they have created a very welcoming and supportive environment especially for first time contributors. I'm excited to continue contributing and belong in the PublicLab community.


Hello @stace - thank you so much for your proposal! I do want to note that we have a pretty well-developed design already and that we are aiming to stick to it for the big changes -- however your input and design thinking skills are very welcome on specifics that aren't covered by our mockups! You can see the mockups in, for example, the proposal by @ruthnwaiganjo -

My apologies if this was unclear in our proposal posting. I like your ideas a lot and hope you'll find ways to put your creative thinking to work on the unresolved portions of the design! Also please see the style guide posting at for more on specific styling conventions we're planning to stick to. Thank you again!

Thankyou so much for the feedback and clarification @warren. The mistake is totally on my part, I missed the link to the rest of the mockups. I'll go through all the mockups and create a new proposal.

Update: I've started drafting a new one in reference to an issue I've linked on the proposal and I would like to know if this is okay. Thankyou

Reply to this comment...

Hello @cess , @warren . I've made changes to my proposal and would like a review. Thanks

Reply to this comment...

Login to comment.