Public Lab Research note


Outreachy proposal: Public Lab UI Improvements

by tonchuks | March 26, 2019 03:45 | 142 views | 13 comments | #18851 | 142 views | 13 comments | #18851 26 Mar 03:45

About me

Name: Anthonia Okafor

GitHub: @AnthoniaOkafor

Twitter: @twinkle_toni

Location: Lagos, Nigeria

Project description:

New User Interface (UI) design implementation of the Public Lab website.

Abstract/summary (<20 words):

Implementation of UI will be done using Bootstrap 4 UI library and the Style Guide provided by Public Lab.

Problem

A well designed user interface is simple to use and improves user involvement of any system. Some pages in the PublicLab.org website need a better user interface than it currently has to make it easily understandable to the user. For example, some issues to be improved on are:

  • Colours of elements are not consistent across pages
  • Some pages are cluttered and need to be spaced out
  • Tags/Topics page should show cards instead of table rows
  • Navigating the pages should be easy

Timeline/milestones

Below is my project timeline. I have a day each week to review Pull Request (PR) and

make some FTO issues so as to involve new contributors to my project. At the end of each milestone, I plan to test the implementation using lookback.io

1. Dashboard Page Designimage description

Date Task


May 20 -22: Creating a secondary Dashboard template to shadow the first, and getting initial topics to appear on it


May 23: Adding a "new topics" area to the dashboard page


May 24: Write a blog post, review PRs and create First-Timers-Only (FTO) issues


May 27 -28: Adding a map of recent nearby content (larger project) to the dashboard page


May 29: Displaying topics on the dashboard based on subscriptions


May 30: Creates a modal box to confirm if user wants to unsubscribe when the 'close card' button is clicked.


May 31: Write a blog post, review PRs and create FTO issues


June 3-5: Adding "recent and trending tags" section to dashboard


June 6: Testing


June 7: Write a blog post, review PRs and create FTO issues


2. People Pageimage description

Date Task



June 10 -- 11: Creating an HTML version of the "card" designs shown in several of the UI mock-ups


June 12 -13: Testing these at different screen widths and on different devices.


June 14: Write a blog post, review PRs and create FTO issues.


June 17 -- 20: Adding tools to a less obtrusive popover menu using Bootstrap UI components.


June 21: Write a blog post, review PRs and create FTO issues


June 24 -- 26: Modifying the People page to show a map on the right side


June 27: Testing


June 28: Write a blog post, review PRs and create FTO issues


3. Tags/Topic pageimage description

Date Task


July 1 -- 3: Creating template partials from people and topic card designs for use in other parts of the site


July 4: Modifying the Tags/Topics page to show cards instead of table rows


July 5: Write a blog post, review PRs and create FTO issues


July 8 -- 10: Integrating a map of recent content onto the topics page


July 11: Testing


July 12: Write a blog post, review PRs and create FTO issues


4. Question Page

image description

image description

DateTask


July 15 -- 17: Modifying the Questions page to display an introductory text area.

July 15 - 17: Add suggested questions based on user's topic


July 18: Testing


July 19: Write blog, review PRs and create FTO issues


5. Profile pageimage description

To ensure uniformity and consistency in the design, the above image with the map at the left should be made to have the map at the right as shown below

image description

DateTask

July 22 -- 23: Displaying active topics on the profile page


July 24 -- 25: Restructuring the profile page column layout to follow the new UI design


July 26: Write a blog post, review PRs and create FTO issues


July 29 -- 31: Compressing profile page tools into a smaller fold-away interface design


August 1: Developing a map popup interface to display individual recently posted pieces of content on a map


August 2: Write a blog post, review PRs and create FTO issues


August 5-7: (cont) Developing a map popup interface to display individual recently posted pieces of content on a map


August 8: Testing


August 9: Write a blog post, review PRs and create FTO issues


****

6. Conclusion

DateTask


August 12 -- 13: Implement search for locations box within maps (as shown in UI designs)


August 14: Testing


August 15 -- 16: Integration of alerts to guide subscriptions and welcome to new users


August 19: Testing


August 20 : Submit the final internship report.


Needs

Guidance from mentors, support from the community, documentations and relevant resources are welcome.

First-time contribution

Here are my contributions to Public Lab :

https://github.com/publiclab/plots2/pull/4961

https://github.com/publiclab/plots2/pull/5335

__

Experience

I am a graduate of Computer Science with Masters degree in Information Systems Management. Most knowledge I had of Information Technology were theoretical, my practical journey into software development started 10 months ago. I have worked with HTML, CSS and JavaScript. I have built a Pixel Art Maker, which uses JavaScript Code to let a user create a grid of squares representing their design and apply colours to those squares to create a digital masterpiece https://github.com/AnthoniaOkafor/AnthoniaOkafor.github.io._My contribution to Public Lab is my first involvement with Open Source. I am also one of the assistant organisers of Google Developer Group (GDG) Ojo-Festac, Nigeria.

Teamwork

Most of my coursework and University projects were performed in teams. I am a team player and I exhibit right attitude when in a team. As an assistant organiser of GDG Ojo-Festac, Nigeria, I work effectively in a team to plan and organise events.


Passion

I am excited to be part of Public Lab, I love technology and display enthusiasm wherever I find myself. Open Science holds strong interest to me because of the belief that****_"science must be done in an open, and reproducible fashion where all components of research"__such as hardware, software tools and methods, are open.

Audience

Since a good User Interface improves user participation, my work would be beneficial to all users of PublicLab.org, especially new users.


12 Comments

Hi Anthonia, I think you can improve the readability of the timeline but if the Outreachy application contains more organized timeline, then it's fine.

Also, you haven't mentioned any First-timer issues, we encourage applicants to break some part of their work as FTO issues too, to include newcomers in their project.

Thanks!

Thank you for looking at my proposal, I made the changes you specified.


Reply to this comment...


Hey @tonchuks!

In the description of the problem, you correctly pointed out that PublicLab.org website needs a better user interface than it currently has to make it easily understandable to the user. I would love if you were able to better describe how the designs proposed by you will enhance the user's experience. It would also be great if you did a comparison with what we have implemented today.

Reply to this comment...


Thank you for your feedback @milaaraujo. I will work on your suggestions.

On Wed, Mar 27, 2019, 6:56 AM \<notifications@publiclab.org> wrote:

Hi! There's been a response to your research note 'Outreachy proposal: Public Lab UI Improvements'. You can reply to this email or visit this link:

https://publiclab.org/notes/tonchuks/03-26-2019/outreachy-proposal-public-lab-ui-improvements#c23471

milaaraujo wrote:


Hey @tonchuks! In the description of the problem, you correctly pointed out that PublicLab.org website needs a better user interface than it currently has to make it easily understandable to the user. I would love if you were able to better describe how the designs proposed by you will enhance the user's experience. It would also be great if you did a comparison with what we have implemented today.


Look like spam? Flag this for moderators

Reply at: https://publiclab.org/notes/tonchuks/03-26-2019/outreachy-proposal-public-lab-ui-improvements#c23471

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

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

Reply to this comment...


Hey there, @tonchuks! This is off to a great start!!

There are some things I'd like you to consider.

  • First off, can you share with us some code snippets (map integration, tests, etc.) and designs to have a more "in-depth" idea, so that we can visualize things better from your perspective? This will also make your proposal undoubtedly more convincing. These don't have to be much, just the least number of illustrations you believe that clearly communicate the message across. 😃

  • I do want to point out the fact that candidates may need to deal with a bit of back-end as is mentioned on PublicLab's outreachy page (quoted below).

    It will involve some new JavaScript and Ruby on Rails code to create database calls and collect records for display in those parts of the new page designs that call for new content.

Just skimming through your proposal I noticed that you've taken care of including most of the "bullet points" on the PL outreachy page, so kudos for that! 👍 However, I doubt that all this UI revamp maybe in need of some backend manipulation to display data in the desired form in its respective altered UI component, whatever that might be. Therefore, can I ask you to include some details about such manipulations, given that your project spans and takes into account some (or any) of such server changes? Again, not much but enough to drive the point across!

  • Openness and a welcoming environment for the "first-timers" means a lot to us, and we'd love if you can extract out a bit on how your implementations will help out our newer members (by making the website more user-friendly and engaging) -- technical and non-technical?

Please don't hesitate to share your thoughts, if this might seem a bit too much, or any other concerns, either here or with the mailing list if you feel like it, we'd love to help you out in shaping this into a top-notch proposal!

Thank you so much for sharing your proposal with us, this is commendable! 🎉

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

Thank you for your suggestions @rexagod. I am working on them


Reply to this comment...


Off to great start. @tonchuks . Your comment made me curious , so here I am 😃
Maybe you used different username in Github 🤔

Walking into main topic, I liked everything being specified into points.
Especially, all the work is divided along the timeline.

@warren suggested in the proposal regarding the addition of search page. Maybe you can look into it. 🤔
There is another additional design for another section of dashboard in one of the comments of one of the notes. You can look into that. It would be great to have those features added into your proposal.

Thank you @lekhidugtal. Your feedback is quite helpful :)


Reply to this comment...


I have a day each week to review Pull Request (PR) and make some FTO issues so as to involve new contributors to my project. At the end of each milestone, I plan to test the implementation.

🎉 this is really nice. Thank you!

June 12 -13: Testing these at different screen widths and on different devices.

A great idea!

Also, we have a subscription to this service: http://lookback.io which may help to identify further UI issues and bugs if we can do some outreach and test each page with a reasonable number of testers -- say 7-10. Perhaps this could be part of the plan too!

Thank you so much for your proposal, and to everyone who left useful comments!

Thank you for looking at my proposal @warren. I think testing the implementation using lookback.io is a great idea and I have added it to my plan


Reply to this comment...


Hello @tonchuks, thank you so much for your proposal. I wanted to reach out to say that due to the limited number of slots, we must make difficult choices each year, but we deeply appreciate your work and your proposal. I hope you'll consider applying with us again in the future and we are happy to work with you in whatever capacity going forward. Many thanks.

Thank you @warren, I do understand. I am better than I was before joining Publiclab because I have learnt a lot these past few months - and that means a lot to me. Thanks again for your kind words.


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