Design landing page about csol-site HOT 30 CLOSED

I worked on three different directions for the landing page. Depending on which direction we take, the rest of the site design might be modified. For example, if we chose option 3 - we might not actually need to differentiate the landing page from the "make" page.

Option 1:

Option 2:

Option 3:

from csol-site.

I like Option 1 best, at first glance – the CSOL logo is visual but not overly prominent; the question invites discovery and leads to the three sample projects. Q: Would the three rotate/swap out on any interim? Maybe every Xseconds or on page refresh?

Either this, or Option 3 – I like the way it has more project options – good for those eager to jump right in – and allows viewers to swap between featured / all programs / challenges.

from csol-site.

Just so everybody's on the same page:

• The current splash page at chicagosummeroflearning.org comes from a fork of this CSOL-site repo which is under Ocupop's GitHub account.
• The current splash page differs from what is currently in that fork, so I don't know if it a drag-and-drop’d copy of the source files or a copy of the repo that has been stored elsewhere. I can't find any of it in this repo.
• I imagine the current splash page will be trumped by what is in the works above.

from csol-site.

Hey @matthewmcvickar we're working closely with @coryshaw on evolving the splashpage. As what was initially built was simply a splash page, we're exploring and working on the further buildout of the site. We're on the hook for ux and foundational wireframes and @coryshaw is helping us layer in the look and feel and aesthetics generated from the initial splash site. What you see above are simply wireframe sketches by our creative lead @iamjessklein. Hope this helps to clarify.

from csol-site.

Sounds good! I connected with @coryshaw earlier today to go over things. Just wanted to let you know where the current splash page is checked in. Thanks! Looking great already.

from csol-site.

Thanks! 👍

from csol-site.

@matthewmcvickar and @coryshaw - these were some directions that we could go with the design for the landing page. Based on the UX of the rest of the site, can you iterate based on the direction of the first mockup above? I am going to reassign the issue.

from csol-site.

apparently I can't assign the issue to @matthewmcvickar or @coryshaw - however, this issue is now in the Ocupop court.

from csol-site.

thanks @iamjessklein I like the directions you've explored above. I agree that we'll need some kind of evolution of what exists on the current splash page, and what will become the new splash/home page. I'll give it some thought and discuss with the team here.

from csol-site.

To move this forward, I revised the mockup a bit so that @andrewhayward can start incorporating this into the landing page wireframe:

from csol-site.

Hi @iamjessklein , we've come up with a couple of design ideas for the landing page thats to the help of @nickkrusick (ps, can we add him to the repo so he can participate?).

Feedback welcome.

from csol-site.

@coryshaw @nickkrusick has been added to the repo.

from csol-site.

Hey all,

Just to keep everyone in the process loop. On the first badge earning go round, people can find & do two things: 1) projects 2) self-paced activities. After earning the requisite number of badges from round 1, they will earn one of the S-T-E-A-M city level badges and unlock the challenges.

So in the current homepage iteration above, it seems as though you can jump right into competing in city level challenges when you can't. In order to do so, you'll need to progress through the badge-earning round 1 stated above.

I know we're still working through content, but perhaps it can be something along the following:
What can you discover in Chicago this summer?
A) make projects B) do activities C) level up to challenges

C.

from csol-site.

I think we need to feature challenges at top level.

We can talk to it such that learners know that it's something they can look forward to.

Also, it links out to iRemix anyway. Happy to discuss if you think otherwise.

from csol-site.

I think that's what I wrote, @threeqube. We just need to be sensitive to wording and why I put verb in front of the nouns, projects, activities, challenges. :)

from csol-site.

Got it.

from csol-site.

@coryshaw - great progress here.

I think that the top half of the page is correct in layout. As @carlacasilli wrote, the 3 categories for the links should be:

• make projects
• do activities
• level up to challenges

The "What is a badge and why does it matter" section and the "earn your first badge" below actually is content that will be included on the "About" page ( issue #86 ) so it should be removed from here. Let's keep this page as simple as possible.

from csol-site.

@coryshaw - looking forward to seeing the icon design here as well.

from csol-site.

@iamjessklein - I'll be helping out @coryshaw with landing page icon designs. Is there any existing copy for each of the three sections? (1. Make Projects 2. Do Activities 3. Level Up to Challenges)

I was thinking that a little more information might be helpful while concepting. Thanks!

from csol-site.

@threeqube might be able to help you out with copy. thanks @nickkrusick - I will try to make sure to include you in future github issues.

from csol-site.

Thanks @iamjessklein.

Some additional info on the three categories might help lend some design direction.
@threeqube - please give me a shout when the copy is available.

from csol-site.

@nickkrusick Will do. We're work on it today. Will my copy delay be a blocker for you or can you work around it for now?

from csol-site.

@threeqube - Thanks. I'm basically just looking for a brief explanation of each of the three categories to base the icons off of. Shouldn't need much, but just something to get me started.

from csol-site.

Sorry I am joining in this late - what is "make projects"? Shouldn't it be "find programs" or something like that?

I think its:

1. Find Learning or Find Programs: finding information about various org programs available over the summer
2. Do Online Activities: do projects or activities on your own online
3. Level up to challenges: see what you need to do to earn the higher level badges

from csol-site.

I'm not even convinced that #1 and #2 are different, you might just look for learning?

from csol-site.

@erinknight: @carlacasilli and I were chatting that it might be good to differentiate between things where you have to go join a program or go to a place to do vs. self-paced activities you can do on your own. So I vote for separating out 1) and 2).

Also we starting feeling funky about the term "activity". While we have all agreed internally that this means "self-paced" stuff, that is not effectively communicated on an external level. People won't immediately know that activity means it's self-paced.

from csol-site.

so there are three "sections" in the site:

1 Learn
2. Badges
3. Challenges

Ideally we will use the three CTAs to connect to the three different parts of the site.

from csol-site.

Just to clarify : here is the landing wireframe (copy coming soon):

from csol-site.

👍

from csol-site.

closing this issue as the ux is done. Will create separate tickets for ocupop re: ui. cc/ @coryshaw

from csol-site.