Improve webdesign and usability. about www.freedomsponsors.org

[kinow]

It seems people are a little tired of the "default Twitter bootstrap" look.

Agreed :-)

I believe we could work more on the landing page. Define which actions we want the users to take after they come to the main page, etc. Maybe a logo too?

[tonylampada]

I believe we could work more on the landing page.

Definitely. I'm just clueless when it comes to front-end design.
Do you wanna give us a little help with that? :-)

Maybe a logo too?

Ohhhh the logo. I think I'll start a bounty myself on that one! (#2)

[tonylampada]

This sounds like a good lesson too --> http://blog.spark59.com/iterating-on-unique-value-proposition-cloudfire-case-study/

[kinow]

Definitely. I'm just clueless when it comes to front-end design.
Do you wanna give us a little help with that? :-)

Sure thing! I'm by no means a specialist, but I can suggest a few things, and maybe we can come up with some good ideas. And I never used Django, so maybe I can learn a bit helping FS too :) (tl;dr: yup!)

This sounds like a good lesson too --> http://blog.spark59.com/iterating-on-unique-value-proposition-cloudfire-case-study/

Bookmarked! Will help me redesign Speak Like A Brazilian :D Thanks!

[tonylampada]

Hey @kinow

Define which actions we want the users to take after they come to the main page, etc

Please see the refactored landing page at the test environment --> http://ambtest.freedomsponsors.org/.
Is this something like what you had in mind?

[kinow]

It's looking better :D

I've highlighted what called my attention when I looked at the new page: http://imgur.com/ZQX3P

But there wasn't a link that really called my attention, I had to read them all :-) (/me -> lazy heh). Here are few points that I think could help us to find a new layout to FS :D

• I like the top right icons. Easy to access, a lot of web sites keep the login button there too.
• I clicked twice or thrice in about, and it opened a new window :-/ What do you think of removing the _blank target? (I'm being really annoying, I know heh)
• What do you think of moving the about + feedback icons to the bottom?
• I think the idea of the about is to give users an idea of what is and how to use FS, as well as the Learn more link.
• But what would be darn cool (IMHO) is a video. (Yeah, I'm lazy and like to watch quick videos explaining about the web site). What do you think?
• I think the footer didn't need to be static. This would call less attention to the bottom of the page, and give us extra space to show things on the screen
• I like to see some testimonials about the website, but in FS case we don't need testimonials. We could include a section near the footer with (faded out? maybe) icons of projects that are either using FS (Jenkins! :D) or projects that have had issues sponsored in FS
• Regarding categories/taxonomy, how can issues be classified? Only per project right? Maybe we could bring a list of projects and let the user browse through them. What do you think? And then remove the projects link from the top menu, as it would already be accessible through this list.
• I think it would be good to make the website less Bootstrap :-) Maybe patterns and typography could help. As well as work responsiveness. The issues table gets weird in devices with small screen (do you have the stats of how many mobile users access FS? :-)

Here's a website that we could use as model for some changes: https://www.taskrabbit.com/

There you post small jobs/tasks/errands, and other people accept these tasks and get some money. A bit similar to FS idea I think. Sorry for the long message, going to bed now, but really excited about a new layout for FS :D

Thanks for the hard work!
All the best, -B

[tonylampada]

That's fantastic feedback @kinow, will be very useful for sure!
Thanks

[kinow]

Thanks @tonylampada, we don't have to follow everything in there, really, no hard feelings :)

This weekend I have to work redesigning another web application. Probably I will have some spare time and will try to get a prototype with some of these ideas, so we can talk more about it :-)

[tonylampada]

We're finally working on a well deserved better design for FS.
@rafael-santos is building the htmls and I'm putting them into the app.
@rafael-santos is commiting to this repo which makes it available at http://freedomsponsors.github.io

I already started to put the new htmls in the platform, but they are kinda "hidden" for now.

If you hit URL "/core/toggle_layout" you'll be redirected to the home page, with the new layout.
Hitting the same URL again will switch you back to the current layout.

In the new layout there are issue cards that need a project image.
So there's another "hidden" functionality: uploading project images.
Here's the image for LibreOffice
http://www.freedomsponsors.org/core/project/149/

Clicking the edit link on that page lets you upload new images for projects.
Requirements for image sizes:

• must not be too small
• width >= height

The LibreOffice image is a good size.

A big thanks to @rafael-santos and @jarlarntzen who are helping with this!

[tonylampada]

@rafael-santos is telling me another thing about project logos.
It's better if they have transparent backgrounds!

[tonylampada]

It's now possible to scroll issue cards in the new home page. check it out!
PS: AngularJS rocks! :-)

[iurisilvio]

👎 to the scroll. This is the important part of the page, it should not be hidden by default. People don't click to slide!

[tonylampada]

This is the important part of the page

After the new design is in place we'll try to push the marketing for FS.
The home page (which is not finished yet) has a strategic role in that. Its main goal will be to communicate very fast what is FS and what it does.
There will be a (much better) search page and a project page to look for issues - so displaying issues won't be the main responsibility of the home.

That said, the issue-scrolling aspect of the home might still have room for improvement. Do you have any suggestions?

[iurisilvio]

I agree home page should allow the user to understand FS really fast and this new page is really better.

My complaint is about the issue scrolling. It just doesn't work. I already did a lot of these sliders and we decided to delete all of them because people just don't click. If you want to show more issues, show them. I prefer something like 2 or 3 lines of issues, maybe a smaller line with proposed issues. If it is not really important, remove the scroll and add a "view more issues" link.

[tonylampada]

TODO (minimum b4 switch to new layout by default):

• #198
• #199
• in-site about/faq

[tonylampada]

ok, I think we can close this now, thank God! :-)