Public Lab Research note


Outreachy proposal: PublicLab.org UI Improvements

by Getty | March 26, 2019 12:28 26 Mar 12:28 | #18862 | #18862

About me

Name: Getty Orawo

Affiliation (Podii Software academy and Consultancy)

Location: (Kisumu, Kenya)

Project description

Abstract/summary (<20 words):

UI design enhancement of publiclab.org

Problem

Publiclab.org being a functional and well informative site needs a few touches on it's UI displays to bring out the best in it's presentation to first timers visiting the site and even day-to-day users. There are various pages that need UI attention taking that they aren't as presentable as they could ultimately be.

Timeline/milestones

Having No solid professional background in design or graphics. I will maximize my time on the implementation using the many good looking ready-made wire frames from the UI designers. This will involve breaking down the milestones into smaller manageable chunks so as to cover much ground with maximum understanding of the concepts used.

Milestone 1) Profile Page

The profile page currently looks like this fro a new user:

image description

The wire frame we could use for the design revamp is:

image description

Timeline (Profile Page)

For the highlighted period below; The following milestones can be accomplished on this page:

Time Allocation Tasks
May 20th Brainstorm on techniques and approaches to use during the week and fully setup to kick off
May 21st - May 23rd Replace Activity Bar with subheads as a list, each adjacent to the count of how often it has been worked on
May 24rd - May 26th Add ‘Most Active Topics’ section on the page. This will contain the most discussed topics together with the relevant tags. There should be an ‘unsubscribe’ button on each topic in case the user does not want to follow the topic anymore
May 28th - May 30th Put up tags for ‘followed topics’ and ‘most active topics’ each with a ‘more…’ link to toggle the other hidden tags
May 31st - June 3rd Add layout tests for the added features and fix up overall styling while test driving the page for any bugs or missing features.


Milestone 2 (Dashboard Page)

The dashboard page is the default first encounter when a user logs into the site. It should be good enough to keep the users interested in what Publiclab.org has to offer. This is how the Dashboard looks as at now:

_
_

image description

image description

The Dashboard appears too crowded by the tags,

The activity section is quite informative but also cluttered and not as presentable.

The social media section is a bit hidden.

Here is the wire frame we could use to style the dashboard and make it look amazing.

image description

Timeline (Dashboard Page)

For the highlighted period below; The following milestones can be accomplished on this page:

Time Allocation Tasks
June 4th Find the perfect image to use for the hero background section at the top with abit of opacity and overlay text as shown in the mockup.
June 5th - June 7th Add the ‘Ask a question’ section and below them, 4 of the recent topics in a card like display that a user can click on and be redirected to each of the topic’s page.
June 8th - June 10th Research on the most appropriate way to place the three pillars, ‘The Problem, The Collaboration , The Solution’ , also with relevant images and a brief description  that brings out the meaning of each of them
June 11th- June 14th Address the Recent Activities section. Here we could put activities into a card like HTML display. Also we could paginate for efficiency since the list scrolls up to the bottom of the page.
June 15th Read on new UI hacks and tips that may better my Ui approaches
June 17th -June 18th Add layout tests for the added features and fix up overall styling while test driving the page for any bugs or missing features. Also add FTO issues that may be first timer friendly.

Milestone 3(Questions Page)

It is cluttered with tags at first view

The question text box is too small and may discourage longer questions

The display of the questions is detailed but the look can be made better.

Here is how the questions page looks now:

image description

For the Questions page, her's the UI wire frame that we could use:

image description

Timeline (Questions Page)

For the highlighted period below; The following milestones can be accomplished on this page:

Weekly Time Allocation Tasks
June 19th - June 25th Design the top most part of the page. Should have an avatar on the left and a brief description on the right of the avatar. Below these will be a text box to enter your question and the ability to post it by pressing a button.
June 25th - June 28th Have a section for featured questions that give a preview of the questions in cards. The card display should be responsive on smaller screens and vary in how many featured questions to be displayed in what screens.
June 28th - July 5th Do Mobile design. Introduce service workers and AMP(Accelerated Mobile Pages) to cater for the PWA part for responsiveness and variety of screen sizes
July 6th- July 7th Test drive the site and see if there are any bugs or missing features.
July 8th - July 10th Create FTO issues from any missing features that could be first-timer friendly.

Milestone 4(peoples page)

As at now, this is how the people's page looks:

image description

_
_

This page could be better displayed using cards rather than rows.

Timeline (Peoples Page)

For the highlighted period below; The following milestones can be accomplished on this page:

Weekly Time Allocation Tasks
July 11th - July 18th Configue the page design to look like the provided UI. This will include using cards to display people rather than rows of data
July 19th - July 22nd Create FTO issues on any remaining bugs and add layout testing.
July 22nd - July 23rd Read more on UI design and new approaches to take when thinking about a User Interface.
July 23rd - July 26th Write blogs on the various new things I have learnt and share with others the things I would have accomplished so far

Milestone 5 (Subscription stats Page)

I worked on the backend functionality of grouping the subscription stats(that were in JSON format) into common subscriber count. This is how the page looked.

image description_
_

It's to be grouped and fixed into this layout:

image description

Timeline (Subscription Stats page)

For the highlighted period below; The following milestones can be accomplished on this page:

Weekly Time Allocation Tasks
July 27th - Aug 2nd Research and settle on a 2D javascript Engine that will help in displaying the subscription stats with 2D shapes as expressed in the mockup. This will involve a series of deep research in order to get a hold of the Javascript Engine.
Aug 3rd - Aug 9th Implement the design using the Javascript Engine. This will involve creating objects, mapping them to the given values. Displaying subscriber count for each tag and on clicking the circles, a pop up with the related tags
Aug 10th - Aug 13th Blog about the Javascript Engine I will have used.
Aug 13th - Aug 20th
(onwards)
Finalize on my Outreachy internship. Creating FTO issues and blogging on the various things I learn plus my experience as an intern. Thank my mentors and continue contributing to publiclab.org

Needs

I would need all the assistance and guidance I can get from my mentors in everything I do. _

I would also ask for resources on UI design so that I can better my design approach

Would love guidance with what 2D javascript engine best works for the final milestone

First-time contribution

closed PR: https://github.com/publiclab/plots2/pull/5224

open Issue: https://github.com/publiclab/plots2/issues/5229


Experience

While starting school I learn HTML and CSS with a side of JavaScript but it wasn't my cup of tea back then. In 2016 I was an intern at a coding boot camp where I started learning Ruby on Rails; After the boot camp I drifted from coding once again due to impostor Syndrome. I was getting really discouraged by how much people around me know that I don't. Beginning 2017 I began the journey once again and swore not to quit no matter the circumstances. I went back to coding in Ruby which is the prettiest language ever laid my eyes on. I do Javascript and love to play around with Jquery animations. Earlier this year I began learning a functional paradigm called 'Elixir on Phoenix' alongside Ruby and the experience is fantastic. _

Github profile: github.com/gettyorawo

Gitlab Profile: gitlab.com/gettyorawo


Teamwork

Mozilla Community

Podii community

Agile Ventures Community

Passion

Public lab projects are amazing to work on since they are not just bound to one strategy of doing things. The personnel is welcoming to new ideas and they are very inspiring when it comes to collaboration. I'm passionate about graphics and motion, no wonder my attraction to JavaScript and Jquery libraries.

Audience

There are millions of people who visit the public lab website on a daily. I want them to feel the welcoming Ora whenever they visit the site. It's to reach out to people with impostor Syndrome like I used to have, those who don't feel they could achieve much but have so much potential. They need to know that they can actually be part of a community like public lab that welcomes everyone with open arms. This will be a stepping stone for them as it is fro me since they get to learn so much while having fun too.

Commitment

From reviews and alumni blogs, I understand that joining Outreachy takes one's full commitment to the project's contribution and collaboration. I am a tonne excited to be part of this journey since I have seen other people grow so much from this, and I'm also excited to grow both skill wise and social wise.


14 Comments

Nice proposal Getty! I liked that you included creating FTOs in your timeline. We would love if you try to open some FTOs now for newcomers, and help them in completing them too.

Regarding the testing part and re-organizing the timeline, you can refer to https://publiclab.org/notes/lekhidugtal/03-23-2019/soc-proposal-enhancing-the-ui-of-publiclab-and-relevant-changes-to-server#c23398

Although, changing the timeline is necessary.

Thanks!

Reply to this comment...


sure @guaravano! I'll get to creating some FTO issues. Thank you.

Reply to this comment...


Hey @Getty, I read your proposal and found it pretty interesting. Great job! Can you please use headline for First time contributions? Rest looks great :)

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

hello @divyabaid16 . oh yes! I missed that. Thank you.


Reply to this comment...


Hi @Getty! This looks pretty neat and the stats revamp is really amazing! I'd love to use this feature on the website as soon as possible! 😃

Quoting myself from @gautami_gg's proposal,

Just a question though, how does your model cater to the engaging needs of the newer members of PublicLab, both technical and non-technical?

Quoting myself from @tonchuks's proposal,

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. 😃

Thank you for sharing your proposal with us! This is fantastic! 🎉

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

Hey @rexagog thank you. And yes I could try make it a little more convincing. For the first question at what point do I express this?

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


Reply to this comment...


Hey @Getty! Nothing specific, just wanted to get to know how exactly would your proposal, in your opinion, once implemented (as a whole) into effect, would help attract newer members and keep them engaged? What do you have in mind?

Thanks!

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

A better UI and UX is key to anyone visiting the site. Most of what is in my proposal is to better the sites UI in general that first timers or even already existent users can have a better interaction with the site. It's good to give a welcoming feel as the implementations above will. Also for the FTO issues, first timers should have an easy time starting to contribute to the project. I aim at making the Open Source experience worth it too.


Reply to this comment...


Hi @Getty nice proposal though. The small little optimisations you have used in your proposal is really good like the increasing of the size of the input bar of the question.

Just wanted to tell, can you just explain the changes you are doing in people page a little bit more. That would be really convincing for those who see your proposal.

Thank you!!

yes of course. Let me make that more clear. Thanks fro your review.


Reply to this comment...


😃 Did you notice your page is live? https://publiclab.org/stats/subscriptions

Introduce service workers and AMP(Accelerated Mobile Pages) to cater for the PWA part for responsiveness and variety of screen sizes

I like how you're thinking ahead to the whole experience, especially page load times. I haven't used AMP in a Rails project before, and would be curious to learn more about how to do it! For the screen sizes and responsiveness, the Bootstrap library which we use is really great -- http://getbootstrap.com and we are upgrading quite soon to v4!

Write blogs on the various new things I have learnt and share with others the things I would have accomplished so far

I truly appreciate that you are factoring this in. It's so easy to forget once we learn something, to show others and lend a helping hand with our new skills!

Finally i wanted to say, I think I've pointed this to you before but given your interest in graphics and motion, this is a really cool platform for making interactive JavaScript visualizations: http://p5js.org

I think you'll enjoy it!

Thanks for your proposal!

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

Thank you @jywarren . Yes it's been a passion for quite some time and would love to explore more on the p5js library. Thanks much!


Reply to this comment...


Hi, Getty! I wanted to reach out to say that we really appreciated your work and your proposal. You're doing great work, and we'd love it if you'd consider applying with us again in the future. If you're interested in continuing to work with us, please know that is welcome!

Thank you so much Warren. It was such an awesome experience though. I sure will try again next time!


Reply to this comment...


Login to comment.