Redesign the campaign page

[svenfuchs]

The campaign page doesn't make the best landing page at the moment.

I've tried coming up with a cleaner layout. WDYT?

[alicetragedy]

we have an issue about this here, hehe: rails-girls-summer-of-code/rgsoc-campaign#26

I agree that it looks cluttered and the text is all over the place and that we can improve it a lot. I like the idea of moving the progress bar above the donate field, and maybe a change of icon too (even though I find the tiny photo from the landing page a little creepy) 👍

[anikalindtner]

hej @svenfuchs there is even a PR from me about this (#47), but i like yours better, so go ahead. I'd just not use other icons than the ones we have. I also think it looks a bit creepy to use real life women for this. Also we had this whole discussion last year already about that using a photo like this for all teams excludes all the other women who don't look like the ones we use in that photo. That's a tricky field and in the end we went with these icons because that was the best we could do not to be too discriminating and also not objectifying women.

[svenfuchs]

The problem with the current team icon is that it is being seen as a "close talker", which is pretty creepy. Once seen I couldn't "unsee" it.

[sareg0]

I see... Well I do agree that it's hard to unsee, and it could be creepy, but we wanted to fix the most broken things first.
I think the design above is nice, but let's come to a consencus, as we don't want to start work on something unless the design change is 'set'.

I think we could even get rid of the banner image at the top, and just have the ticker, front and center, then donate, then sponsor packages.

I wouldn't mind getting @ApertoClaudi to give us her opinion. Then once decided we can proceed with changes. If we are going to do it, it needs to be done fast, as we are already a fair way through.

[ApertoClaudi]

Hey @ALL, I will have a look next week and will make a design proposal. I think the site is really cluttered as @alicetragedy mentioned and there is no real structure which leads the user through it. Also I'm going to make a new progress bar without creepy women in it. ;)
Thank's @sareg0 for giving me a ping! :)

[sareg0]

okay great. @ApertoClaudi what day do you think you might have something done by?

[sareg0]

Okay, so the 'creepy women' are removed from the progress bar which is excellent.

Now onto the next step of redesigning the campaign page.

@ApertoClaudi do you think you could do up a wireframe, which we could then task to someone for implementation?

[ApertoClaudi]

Hi @sareg0, you mean a wireframe for the campaign page, right? http://railsgirlssummerofcode.org/campaign/ Should I make a wireframe or a layout? I think, I could do that by the beginning of next week. :) (And I'm now back again for work here, because my moving is over and my new home is no longer a big mess ... )

[sareg0]

Yes, oh layout would be excellent.

I don't know the designer words, so I use the buzzwords I have heard before ;)

The beginning of next week would be wonderful, say Tuesday?

[ApertoClaudi]

Hihi, it's alright, also buzzword is a buzzword. :D
Tuesday sounds good!

[ApertoClaudi]

Well, here are two versions for a campaign site rebrush. ✨

• I made the structure a bit clearer by changing the headline formats and gave the whole layout more space, so that users can easely scan the page.
• The News is now marked with a little star, so that it's more an eye catcher!
• The sponsor section is highlighted with a grey area behind it in both versions.
• Also, I made two suggestions for the progressbar (which can be also adapted for smartphone view). V1 is more classic, V2 was inspired of the designs @sareg0 mentioned on Slack. 😄

And now: Feedback please!

V1

V2

[lislis]

@ApertoClaudi amazing! Because I hate tables: Do you also plan on brushing up the list of people/ companies who/that sponsored?

[alicetragedy]

I think it would actually be great to have the progress bar from V1 for desktop, and V2 for mobile and tablet, as it would work quite well on small screens.
Also like the way you cleaned it up and made it look less cluttered, the progress bar definitely looks better with just one icon! And I really like the idea of the star to bring attention to the news, so no complaints there. ✨

[anikalindtner]

👍 for cleaning it up and working on this 💖

i feel we could clean it up even MOAR. Less text still and maybe adjust the sponsor packages so that they are in line with the text or the other way around? because this space seems a bit odd to me still:

I also like the new progress bar! And +++1 for using the circle for mobile! I'm thinking if we want to stop showing the funded teams as team icons? I feel that this was a real personal and quick way to see how many teams are being funded and how many are still to go? also i felt attached to the teams and was super happy to see them filling up. but maybe that's just me being weird :D

any opinions on that?

[sareg0]

I like the circular progress bar for mobile.

I see what Anika means; lining up the sponsor packages with the gray boxes, or some other element to kind of keep the layout continuinity.

I really like V2, and think it would be excellent on both big and small screens :)

My vote is for V2

PS thank you so much @ApertoClaudi

[anikalindtner]

I kinda would like to see a merge between sven's first version

and the latest ones from you @ApertoClaudi <3

[ApertoClaudi]

Thank you all for yor feedback! 😸 I've got a few questions before I start over.

@anikalindtner Text lengths are up to you, I'm not really sure, what you want to keep and what's not so necessary. So I leave them in the designs and you cut off what you don't want to say, when it goes to the world wide internet thing. ;)

I didn't get the thing what you mean with the icon and the person. 🙈

Which aspects of the merch between Svens and my design do you mean? Can you explain it a bit more?

@lislis Sure! I will brush you a fancy pancy new table.

#happylittleclouds

[ApertoClaudi]

Hi Fans! Long time no see, but here are the results of the german votes ... errrmmm ...

I made a new design for the campaign page. I thought, it would be better, if it's more like the home, so I centered the content and included your feedback, e.g. that the four donation teaser use the whole space of the side and not just the left one.

Also, to do @lislis a favour, I killed the table and made it a bit more appeling with big logos of the donators and a new structure. I thought it would be nice if we show maybe 10 donators first and the others appear by lazy loading. I know, there are a lot, but as the donators are so important, we should celebrate them even more. What do you think?

[ctrlaltjustine]

Hey gang!
@anikalindtner pinged us to give some feedback on the design work going on here. A couple things I notice in the above mockup:

• There is a lot of text in the "above-the-fold" section that could be either broken up in terms of space or in variations in text-size. Currently it just melts together and comes off as intimidating to those who'd rather skim through information quickly.
• The "Secure payments by Stripe" disclaimer should be a little bit bigger for those who have sight problems and centered horizontally with the window instead of aligned to the text-field.
• The "Partner" "Platinum" and "Gold" callouts look more like buttons than titles of sponsors. Perhaps each type could change color based on the status or try calling it out in some way.
• Sponsors look kind of odd with the white backgrounds, I think you're either better off making the whole section have a white background or finding the eps vectors for these logos and making them a solid color with a transparent background.

[ApertoClaudi]

Hi @saltinejustine , thank you for all your input! :)

The logos in the sponsors section are just a mock up, I put them "quick and dirty" in their new order. But yeah, you're right, if we want it that way, the logos have to be vectors or have a better resolution.
Also a good point with the sponsor callouts. Now I see buttons as well. >.<

I keep your comments in mind for further changes! :)

[ctrlaltjustine]

@ApertoClaudi happy to help! if you want any further feedback, feel free to ping me! <3

[alicetragedy]

We've done a bit of work and improvements on this last year, but I believe we could make it look even better. As far as I know we haven't really incorporated any of @saltinejustine's feedback into the page. I'm keeping this issue open for now and adding it to one of the milestones.