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.
Tasks
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.
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<-
- 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
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.
Suggestion
- Unsubscribe button should be visible on the topic's card header for affordance purposes
iii. Ensuring the page renders well in mobile view
The page in mobile views should be as shown above.
Suggestion
- 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.
Timeline
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.
https://github.com/publiclab/plots2/pull/8635
https://github.com/publiclab/plots2/pull/8599
https://github.com/publiclab/plots2/pull/8577
https://github.com/publiclab/plots2/pull/8550
https://github.com/publiclab/plots2/pull/8523
Experience
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.
Passion
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.
3 Comments
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 - https://publiclab.org/notes/ruthnwaiganjo/10-26-2020/outreachy-winter-proposal-new-dashboard-implementation-project
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 https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab 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...
Log in to comment
Hello @cess , @warren . I've made changes to my proposal and would like a review. Thanks
Reply to this comment...
Log in to comment
Login to comment.