Question: What do you think about this new design sketch for a Welcome page?

warren is asking a question about ui
Follow this topic

by warren | February 21, 2018 22:32 | #15796


Hi, all - i'm taking a crack at a new visual organization of a Welcoming Page, starting with the existing content but then starting to think about content a bit after the basic visual organization of the page works.

I'm also riffing on the kind of welcoming tone -- specifically for newcomers -- from two sources:

  1. our Barnraising "welcome" posters
  2. our software Welcoming page

Here's a rough mockup making use of design patterns from the Froala design blocks:

image description

See this document to remix or work on your own!



50 Comments

@zengirl2 @pdhixenbaugh @kgradow1 @sarasage what do you think of this? :-)

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

Reply to this comment...


My thought, as a recent newcomer who was unfamiliar with Public Lab and Citizen Science, is that the How to Participate section in particular is what I was looking for before I started wondering about specific topics. With that in mind perhaps consider moving the How to Participate section up a notch... Also wondering what's going to happen with the Interests section...Just a few curated highlights, something more dynamic, a launchpad into a easy to browse index? Bottom line is I love that you're sketching this out... Could make a huge difference in engaging newcomers. I like it!!

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

Thanks, Craig! Great feedback.

For the "interests" we want to be sure not to pigeonhole people as "scientists" "activists" as PL is all about building bridges across. So the idea of a collection of "interests" derives a bit from work @liz is doing on #evaluation -- and related a bit to the idea that people "walk in the door" with skills, interests, projects, questions, etc -- see #13886 -- rather than with set "roles".

So, interests could be, like, "making something" "testing something out" "documenting a problem" "telling a story" "finding collaborators" -- or maybe a bit more general than that?

But it's a nebulous idea so far. Happy to hear input on this specifically!

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


Hi, all - getting back into this real quick -- if folks have input, it's really useful to think about offering feedback under three headings:

  1. Issues or problems you've identified with the current system/design
  2. Goals you'd like this interface to achieve - big or small
  3. Ideas you have for how to address the issues or goals you've identified

This helps us separate out what your "pain points" are from specific design proposals to consider. Thanks!


Reply to this comment...


Got some good input on placement of the Code of Conduct link and text via @shannon -- thanks!

Reply to this comment...


Can someone add in both the "Why write research notes" quad that we printed into notebooks, and Molly's graphic? I don't have time to find them. Thanks!

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

Reply to this comment...


Yeah i was looking for that too... i forget in what thread we came up with that!

Reply to this comment...


@warren I like how you are funneling people to where they are trying to get. I think so far my only issue is that it looks long from a scrolling perspective. I was trying to figure out a similar site that has to funnel, but so far only Instructables is coming to mind. Their sort happens on the top of their page, but they have an easier time since they've already established the person is a maker. We have makers, people that need remediation, and people that like to write/research. It makes me wonder if we can clarify by two buckets--those that wish to engage in citizen science, and those that need citsci help? It's an interesting dilemma.

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

Thanks @zengirl2 - yeah, i agree there are these two "attitudes" people might bring, and this particularly resonated with me on the "Ask a Question" prompt. On the one hand, groups facing pollution don't need to "ask a lot of abstract questions" to articulate something they already know is a problem. We definitely don't want to cast doubt on their experiences, so that idea of "Ask a question as the first step" in that sense may be more for those seeking to get involved in community science.

But then we definitely want people who just need support with a problem to be able to simply ask for it, and that also makes sense as a question. So I was trying to capture some of that duality in the "Get help. Ask anything" area.

The two leading calls to action of Give help and Get help are also an attempt to get at this idea of an exchange -- sometimes you're offering, sometimes you're requesting; both are important, and people may do some of each.

Also +1 on its a long page. I wanted to kind of "skip" the "what is Public Lab" as much as possible (hopefully this is clear on PublicLab.org, and if not we can continue refining that page), and focus on making sure people know they're welcome (part of WHO is PL), and what they can DO.


@warren I do really like the Give Help/Get Help. I was just talking to an artist the other day and they said that exchange/barter is something that is really important to them in giving and getting work from other people. So, def +1 all around for this idea.



Haha, of course! #whyIlovePLfolks


Reply to this comment...


Froala also has a "webpage design tool" where you can drag and drop their blocks, kind of awesome!

https://www.froala.com/design-blocks/webpage-builder

Screenshot_2018-04-05_at_12.39.05_PM.png

Then you can (if you give your email) get the resulting code emailed to you... kind of amazing! They're obviously using it as a promotional tool to get emails, but it is a really neat idea :-)

Reply to this comment...


I tried it. You get an HTML download upon entering your email address (or maybe any email address).

https://gist.github.com/jywarren/b98899a55822bd6756ae747a0d4dfc89

Reply to this comment...



And copied it into a test wiki page here: https://publiclab.org/sandbox-4

Reply to this comment...


On the landing view-port a user should be able to know what Public lab is all about. Maybe your tag line and short description about public lab should be on landing view-port.

Apart from the description on the view-port we should also have the call to action button like the sign up button instead of it being down the page since you need more users signing up.

Your site should also have color themes.

These are some of the projects I've worked on https://podiihq.com http://abhsound.com/ https://baselinkgroup.com/ https://academy.podiihq.com/

Hi, I’m not sure all of these are UI focused, but related anyway. Some of these are big, and things we know about, but wanted to hold a spot for them here. Other ideas? Feedback?

Issue There are many entry points, and many ways to organize information, it’s confusing to newcomers

Goal The welcome page should be an easy page to navigate to help people understand what PL is, what’s available and see where they can jump off to do what they are interested in doing

Ideas I honestly dont have great ideas for this one, but we’ve talked about categorizing types of knowledge sharing and linking out from there. I think it could work, but the materials to explain these things need to be concise, approachable from a visual standpoint, and easy to understand.


Issue The OpenCall isn’t prominently featured

Goal Open Call is the lowest barrier for contact for most people. It should be easy to find

Ideas Can we put info on this somewhere people will see it when they first come? It would be great if there was also a link to add it to your calendar.


Issue We don’t show people how to do things

Goal People can easily understand how to post to Public Lab, navigate the site, and find others from demonstrative walk throughs available through navigating the welcome page.

Ideas we could offer video walkthroughs, hover over popups, or others?


Issue Users can’t see the versatility of the features

Goal This is probably another page, but there should be an off-ramp for those who aren’t newcomers, but are looking for features to navigate the site and post in a more detailed way.

Ideas For example, a place that describes or shows the tagging system, powertags, inline features on research notes, different ways to search etc.

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


Hi @stevie!

Thank you for your suggestions, let me know what you think about the current design (https://edieblu.github.io/pl-welcome.io/). Is it straightforward enough? Is the open call featured enough? Do you think it would help if we added icons to the 4 calls to action?

Kind regards, Eva

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


Hi @stevie, to your comments from many months ago, we've just pulled together something that may partially begin to address your last issue, that people can't see the versatility of the features: https://publiclab.org/wiki/sandbox-sitemap#Website -- do you see the start of anything that could be made more useful to address this issue?

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


Hi @stevie, to your comments from many months ago, we've just pulled together something that may partially begin to address your last issue, that people can't see the versatility of the features: https://publiclab.org/wiki/sandbox-sitemap#Website -- do you see the start of anything that could be made more useful to address this issue?

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


Reply to this comment...


Maybe under "How to participate" -- we could try a 3-column thing for:

  1. Ask a question: https://publiclab.org/questions
  2. Post an issue brief: https://publiclab.org/issue-brief
  3. Create a project page: (although we need a page describing this: https://publiclab.org/wiki/wiki-templates)

designed like https://code.publiclab.org's 3 steps.

Reply to this comment...


Hello everyone! I'm Eva and I'll be working on the design of this page. I would love to hear your input so I'll be posting designs and asking questions - either here or at the chat - as I work on this project! I'm very open to any suggestions and would love to learn from you.

Awesome!!! Welcome! 🎉


Reply to this comment...


Hello team,

The first version of the new welcome page design is ready. I would really love it if you could tell me what you think (@warren, @liz, @stevie, and everyone else!) 😃

The design can be found here: https://edieblu.github.io/pl-welcome.io/

I've based my design on Jeff's template, but after spending some time researching (and reading your annual reports, ha ;), I've also added and changed some things.

Please know that this is early days and I have absolutely no problem re-doing entire parts of the page if that's needed.

I still have a couple of questions:

  1. who exactly are we sending to this page and what is the outcome we want to achieve? I know it's newcomers, but how much do they know about public lab? Why are we telling them to sign up? Is this their first interaction with publiclab?

  2. there's a section of the page called "Find a cause" that I've added. I've chosen the three causes: air pollution, plastic waste, water pollution because they seemed most popular (most often tagged). Does anyone have a more precise way of measuring this?

  3. given that the site's tagline is "DIY environmental science community" I believe that we should feature the tools and kits somewhere as well. If you have any ideas, please let me know.

  4. I've done minimum css, haven't added the custom font etc, that will all come once we agree on the layout of the page :)

Let me know what you think! :)

Thank you,

Eva

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

Hello again :)

I've added some styling on the page, added the right font, also added the social media buttons, so the page should look a little bit more "public-lab-like".

Let me know what you think! Any suggestions are welcomed:)

https://edieblu.github.io/pl-welcome.io/

Thanks! Eva


Hi @edie_blues! It's so energizing to see this page come to life! Thank you for pouring attention into this. You asked some numbered questions above, so here goes:

  1. There will be newcomers from a variety of backgrounds seeing this.

Some may be new to science and technology but who are seeking some way to start addressing concerning environmental issues affecting themselves or others; generally speaking, historically this group has been faced with unwelcoming experiences when reaching out to science and tech for help. Some may be professionals with technical or scientific knowledge who have never participated in an open source community (so they may be unaware of the norms). * and a whole range of folks in general!

In terms of why are we telling them to sign up... we might be highlighting this page to people who aren't logged in, or on people's dashboard who have not posted anything yet. Signing up is how to subscribe to stay updated on topics you care about, and we could suggest that new joiners subscribe to the newsletter tag so get our nicest monthly newsletter.

  1. For topics, it's nice to have images, and your use of the word cause is interesting. I've never heard us use that terms, we usually use topics issues but cause has a nice ring in that it links the issue to advocacy right away. I'm wondering how to offer people a limited tag search box like what we have on https://publiclab.org/questions. In there, you can just type air and all tags that include air pop-up -- It's a great way to browse. Also see the main tag page https://publiclab.org/tags. For other areas of the site where we've started featuring tags, we made an easy way so staff could adjust the list to highlight emerging or time-sensitive topics. Just sharing in case this helps you get a good idea for how to handle this section.

  2. https://publiclab.org/methods might be a good way to show collections of methods that people are using to work towards their causes. It has a sort of cool "sort on page" function at the top that's unique on our site (so far). Otherwise, the Store does have an entire standalone link on the top menu bar, so it is getting a lot of real estate.

Some other thoughts:

  • I like the feeling that comes from the statement "You're the expert" but i have mixed feelings about this phrasing overall. Expertism is so problematic that i'm hard-pressed to be excited to further encourage it vs other frames like "beginner's mind" (no matter how advanced) and "solidarity - we're in this together".
  • i'm not sure where the link our network of organizers will go, perhaps /people? i think we should not use the term organizer because its use is decreasing in our community and local community organizers are active in PL without opting to take on the role of "PL organizer"
  • the mix of circular and square images kind of hurts my eyes, but i'm not a graphic designer.
  • it's a little daunting to see pages we wish we had but actually need a lot of work so prominently featured -- /requests and /projects but we'll get there :)!

Not sure if any of this is helpful, but thanks for reading, and i'll be following your next steps with interest!

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


Hi @liz!

Thank you very much for your response! :) It's very helpful and I was anxious to hear what you think!

  1. Yes, I think the "cause" would be great for people that are particularly passionate about a certain environmental issue. And given that the questions are nicely tagged, it's very straightforward to send people to articles tagged with "air" once they've clicked on the air pollution image. Do you know who I ask about the copy (the text under the images)?

  2. I'll think about where to feature the kits and the tools. My impression from following Public Lab on social media is that people are very keen to showcase their new kits and that many like the really hands-on approach of doing something themselves. Would it be possible to get the information on the most popular products from the store so that we can feature those?

  3. I like "we're in this together", will change to that (instead of You're the expert)

  4. I think the copy about Public Lab needs some work and could be clearer. I showed the website to a couple of people that have never used Public Lab before and they were unsure about what the organisation does. I'll work on that too.

Liz, your input was of great help. Is there anywhere else that I should ask about the feedback? The chatroom? (any specific time/specific place?)

Thank you again!

Eva

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


Hello again!

I've added a store section as well, let me know what you think. :)

@liz I've tried with the square images instead, but the circular ones look much better I think...

@warren any ideas so far? @stevie? :)

https://edieblu.github.io/pl-welcome.io/

Thank you! 👍

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


Hi, just catching up today. Thanks for your posts so far! Exciting! Let me go through and leave some concrete feedback now :-)


Just on a couple of Liz's comments:

  1. causes -- i like this too. Perhaps just below it, instead of a search box, we could list 8 or more additional popular ones and a link that says More issues or More causes as you prefer, leading to /tags (which is the subject of an upcoming UI project. For an example of such a list, see the newest front page, at https://publiclab.org/home, where there's a list of blue "labels" for different issues.
  2. re: store, I guess I agree with Liz that this space might be used for Methods although in general I think Methods may have lower priority than Causes/Issues.
  3. Could the 3 "causes" each have a heading like "Air quality" "Water quality" ... not sure of the third, maybe "Waste"?

More in a sec.

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


Just going through here to offer a bit more input on the evolving design!

Do you know who I ask about the copy (the text under the images)?

I think you could probably take the top line of each topic page - so try #air-quality or #water-quality -- although some of these may need editing to be honest. They could be pretty short text, though - the images are powerful.

On the tools, one reason to emphasize /methods instead of the store is that it highlights many more projects than we have in the store, but includes the ones in the store. I think we should emphasize "finding a place to get involved" or "a project to help out with" perhaps in directing people to this listing.

+1 "we're in it together"! Great! ❤️

This has come some ways and I know you're eager for input. I'm going to ask a few others to pass their eyes over it and offer some input!

@zengirl2, @nshapiro, @ann -- might any of you have some thoughts on @edie_blues design work here? Thank you if so!!!

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


I was thinking also - several people have recently approached me asking "I'm in India, how would I start a Public Lab group there, or start working with people near me?"

I wonder if we could try to answer that question on this page!

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


Thanks for the input @warren, I will work on it and come back soon with updates 😃


Hi @warren and all,

Following your suggestions, I've changed a couple of things.

  1. I've added headers to the "Find a cause" section. I've also added some tags underneath. Let me know if that looks good to you.

  2. The methods section is now called "Get the right tools". I moved it down a little bit so it's now featured after the cause section.

  3. Regarding the "how do I start something where I live", we could add a banner section that would just have one big button saying "Start a movement" or something like that. Where would that link to?

I will focus on the text and linking next 😃

As always, the design can be found here: https://edieblu.github.io/pl-welcome.io/

I would love to hear your thoughts everyone!

Eva

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


Hi, just catching up after a busy Barnraising event!

I jotted down some longer textual responses to some common questions at this page: https://publiclab.org/basics

It's not to play the same role as the welcome page but maybe the language and word choice is useful.

OK - "browse other issues" is great, and perhaps that line could end with just a regular link with text See more >> leading to https://publiclab.org/tags ?

The tags list will ultimately be the one currently shown at https://publiclab.org/home, although it doesn't matter a great deal in this mockup.

I like Get the right tools but one issue is that many tools at Public Lab are in prototyping and not yet "ready for field use" so to speak. I wonder if it should say Get the right tools but below it ...or help improve in-development ones (although any help in figuring out a better/smoother way of saying that would be great).

I guess I still think the Tools section should be below How to Participate.

One more thing - "Find a team to join" might be more like "See who's working on related issues"

But I feel like we're delving into text a lot here. I'm kind of interested in your thoughts on the code.publiclab.org welcome page and the images it shows.

Finally - I wanted to hear from @joyofsoy and @stevie about this design so far. Do you two have some ideas to offer? Thank you!

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


Hi! Just checking if you have a new iteration of this to share? Thank you!!!

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


Hi @warren and all,

Sorry I was away for a couple of days and couldn't access the Internet.

yes indeed, there is a new version available here: https://edieblu.github.io/pl-welcome.io/

I've worked on the copywriting, changed the layout a little bit and added the links.

Let me know what you think.

For the last section, should I just work with the existing text (1. The Problem, 2. The Collaboration, 3. The Solution etc)?

I think the page is coming together nicely :)

Let me know your thoughts!

Kind regards, Eva

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


Looking great. I'll reply in more depth on Monday. We may need to do up some text for the Community Science part, but we'll see... i'll connect with the others! Thanks!


Is there anything you could think of along the lines of "join a project near you" where we might direct people to look at https://publiclab.org/people, or another page with a map, where (and we are redesigning those pages too) they might be expected to soon find regionally relevant projects and people to work with? I'd love to hear your thoughts on this even beyond the scope of this page!

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


Hi @warren, good point and I agree.

Thinking about it, I think it's likely that the visitors to the page will be interested in either a specific cause or looking to get involved locally. The third one would be the DIY tools, which link to both the causes and the local projects. I've changed the first section (the one after the sign-up button) to feature a Find a project near me button.

Let me know what you think.

As always here: https://edieblu.github.io/pl-welcome.io/ :)


Awesome work @edie_blues! You're doing a great job!

Just a few ideas—not sure that they'll all be good ideas:

-Under "Find a cause," I love how the three topics look with the round thumbnail and brief description. There are then 8 others included below as buttons/tags. To view the full list of topics, you have to click out to another page (the helpful-but-not-pretty /tags page). What do you think of adding the functionality to scroll left/right through causes, so all topics would have a round thumbnail and description like "Air Quality," "Waste," and "Water Quality" currently do?

-Under "Community Science," not a big concern, but wondering if it would make sense to standardize the look of the three blurbs a bit more. Maybe by putting I, II, and III on tiles or formatting differently, we can end up with the headlines all on one horizontal line, and all the blue buttons below them also straight in a row. I sometimes push too hard for symmetry, so take that with a grain of salt.

-My instinct is that I'd like to see an About Us and Donate button somewhere, but I think that would probably be better solved in future Top Bar Navigation discussions.

Thank you for all of your hard work!

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


Hi @joyofsoy,

thank you very much for your feedback :)

For the About Us and Donate, you are right, that will come on top in the navigation bar.

Regarding the community science bit at the bottom, it should align perfectly when viewing it on the laptop (this is how I see it: https://www.evernote.com/l/AEHMv8aIWx9GtZtbQpNcD07DCqhM8zFCdAw). When the screen is resized (to smaller), it will start collapsing. At what screen size are you viewing it? Can you share your screenshot as well?

Regarding the carousel, @warren do I just go with a plain bootstrap one with controls? Would someone be able to provide the text for each tag?

Thank you to both!

Kind regards, Eva

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


Hi @joyofsoy and @warren!

I've added a carousel (not finished), to give you an idea of how it would look like. Let me know what you think :)

As always, the design can be found here: https://edieblu.github.io/pl-welcome.io/

Kind regards, Eva


Reply to this comment...


Hi again @warren,

I've just realized that Froala uses bootstrap 4.0 and not bootstrap 3. I assume I should be using bootstrap 3 as we discussed in the beginning - if so, which version exactly - or are you planning to move public lab to version 4 in the future?

Kind regards, Eva

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

Hmm, i see. I think they'll be close enough that we can make it work... I did a test here: https://publiclab.org/wiki/sandbox-3

We will be upgrading to v4 in the next six months. But how feasible do you think it is? https://duckduckgo.com/?q=differences+bootstrap+3+4&atb=v141-5&ia=web

On Tue, Nov 6, 2018 at 9:38 AM \<notifications@publiclab.org> wrote:

Hi! edie_blues responded :


Hi again @warren, I've just realized that Froala uses bootstrap 4.0 and not bootstrap 3. I assume I should be using bootstrap 3 as we discussed in the beginning - if so, which version exactly - or are you planning to move public lab to version 4 in the future? Kind regards, Eva


You can reply to this email or visit this link:

https://publiclab.org/questions/warren/02-21-2018/what-do-you-think-about-this-new-design-sketch-for-a-welcome-page#a1283

If you think this solves your question mark it accepted by logging in

You can comment on the answer at: https://publiclab.org/questions/warren/02-21-2018/what-do-you-think-about-this-new-design-sketch-for-a-welcome-page#answer-1283-comment

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
Reply with the email you use at PublicLab.org and your comment will be posted to the website.

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


Good question @warren. I think in terms of how it looks, v3 and v4 are similar, but v4 is obviously more powerful. Biggest changes are flexbox and better custom font support, easier spacing, 5-tier grid system in v4 (but no glyphicons).

It will take some time to get it all sorted, but it will also be an opportunity to drop pages that aren't needed.


Hm. I wonder how close we are on a v4 upgrade. It'd add some chaos, but it's essentially "now or later" chaos.

https://github.com/publiclab/plots2/issues/1716 is where we'd been discussing it. I'll pick that convo back up...

Did you want to try pasting everything into a demo wiki page as I had done on 'sandbox-3' and see how close we can get with minimal tweaks? Especially with the relatively narrower set of components that you've used in your welcome page design.

Sorry about this, I hadn't noticed it was v4!

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


Hi @warren,

Yes, would love to test out the page as it is now.

Would it be possible to upgrade my account to a moderator? Right now I can't publish or edit a wiki (because mine is a new account) and I don't want to be sending another question out there for no reason (in order to get rid of the "newcomer" flag) - I'm sure you are all busy answering pertinent questions already :)

If you can't, let me know, and I'll make sure to post a question.

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


Hello again @warren :)

Two quick questions:

  1. is it possible to upgrade my account to a moderator so that I can publish a wiki (see above)?
  2. any preference on the carousel for the tags? Should I work on it, or should I remove it and keep the site as it was before? Please see here: https://edieblu.github.io/pl-welcome.io/

Please note that the project deadline is November 15. and I'm very eager to finish it on time :)

Thank you!

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


Reply to this comment...


Log in to comment