Create section on on /code_schools describing scholarships

[kylemh]

Feature

Why is this feature being added?

Users who navigate to our /code_schools page are often people eligible for scholarships that we can provide, but they are unaware. By placing this knowledge in view on our most frequented page, we can influence more of our target audience positively with financial aid.

What should your feature do?

Add a section to the /code_schools page (after the intro section) called "Scholarships" and fill it with descriptions of past scholarships and instructions on how to apply for currently available scholarships.

As a small reminder, please be sure to alternate the section color scheme (that component has a theme component that can equal "white" or "grey". You'll have to alternate every section under the new section as well.

While other sections have a corresponding scroll button, I would like for there not to be a scroll button for this section, as it should be relatively small.

[kylemh]

Content will be posted ASAP

[talbshoam]

I would like to take this issue if possible.

[kylemh]

Feel free. We don't have copy on it yet, but you can prepare the section, and I'll assign you the issue.

[talbshoam]

Hey Kyle, The section is ready, waiting for the content.

[hollomancer]

Current scholarships (Copy)

RMOTR - RMOTR is offering online coursework in Python to the Operation Code community! Full and partial scholarships are available. Python is a skill in high demand right now, especially for data science roles - and it's useful for anyone seeking to learn more about coding and the tech industry.

Fullstack Academy - Fullstack Academy is offering three scholarships for their Web Development Remote Immersive, to the veteran and military community! They are also providing 10 free scholarships to their Remote Bootcamp Prep course.

[hollomancer]

Startup Institute is offering the Operation Code community in Boston and NYC a $2,000 Veterans Scholarship to attend their full- and part-time programs! They’ll also donate $1,000 to Operation Code for every member who completes their program curriculum and requirements. http://go.startupinstitute.com/partners/operation-code/

[hollomancer]

Bloc and Operation Code are offering all veterans a $1000 tuition credit toward Bloc's Web Developer Track. All active duty military members and veterans are eligible! http://try.bloc.io/operation-code-bootcamp-scholarship/

[hollomancer]

Galvanize is now accepting the GI Bill for their web development and data science programs in Denver, CO - learn more at http://www.galvanize.com/!

[hollomancer]

Inventive.io self funds full ride scholarships for veterans and women. Every 10th paid student opens a scholarship slot! https://inventive.io/

[hollomancer]

edX has extended a special limited time 20% discount on verified certificates to the Operation Code community. To take advantage of the discount, enter the code EDXOC20 at check out. Visit edx.org and start learning today!

[talbshoam]

Thanks @hollomancer

[hollomancer]

I'll need to find graphics - not sure the best way to integrate them design-wise.

[talbshoam]

How about a clickable box with the school logo and name which opens up a modal with all the details once clicked?

[hollomancer]

Oh, that's cool. I like it!

What resolution image should I provide?

[talbshoam]

I was thinking about something similar to the Partnered Schools Section

[kylemh]

@tal87 are the images currently in assets too low of resolution?

[talbshoam]

I think they are ok.. I'll let you know if I need another resoultion. Thanks!

[talbshoam]

Do we have a logo for Inventive.io?

[kylemh]

Hmmmm I was imagining that this section would be a simple section describing the nature of the scholarships, how often we get them, and who is eligible. Basically letting the user that - if they're a veteran - registering can have perks!

This list of scholarships and graphics likely belong the container that @jmayergit pulled in a few weeks ago for scholarships.

How should we proceed, @hollomancer ? Do you still want them displayed on /code_schools

[kylemh]

@tal87 regardless we need an image for inventive.io and I need to document the process for bringing in said image... I'll get on that tomorrow morning.

[talbshoam]

Hey everyone, this is what I came with so far. I was thinking on adding the logo of the school to the modal as well and centering the text as well. I'll be more than happy to hear your thoughts. Thanks!

[dmarchante]

The logo would be a great addition. Is there a way to restrict the modal width? If so, then you wouldn't have to center the text. It may be a good idea to pull in the data form the card as well as the address and contact info (I believe all the pertinent data that we wanted to communicate is in a json file).

[talbshoam]

Sounds good.. I think the text centering is necessary anyway or some left margin

[kylemh]

I can't quite tell what's going on with the interface. People click on the card and get a modal pop-up detailing all scholarships available for that school?

[talbshoam]

Exactly

[jjhampton]

I think the UX/UI requirements here should be thought through before additional development continues.

The large modal is overkill for the small amount of content that we're displaying here. It results in an extreme amount of whitespace and a context switch for the user that seems unnecessary

It's also not a consistent experience for the user to suddenly add click actions to some of the cards (these new scholarship schools cards) on the page, but clicking on the other cards on the page don't work the same way, although they appear very visually similar.

The content text is so small - why couldn't we display it immediately below the logo and other info, in the card?

[talbshoam]

@jjhampton make sense... I guess we could try that. @kylemh @hollomancer @dmarchante what do you guys think?

[kylemh]

I think this also touches on an idea that I wanted to flesh out with @thedeany

Essentially, between viewing scholarships, contacting school representatives, and the future ability to review code schools, I don't believe our current SchoolCard component is reusable enough to compromise.

I believe we should put this, #364, and #489 on hold, and create a new component soliciting open design ideas for a new UI that adequately handles the UX of all features.

[jjhampton]

@kylemh I agree with that. The current SchoolCard component is fine for the read-only displaying of a small amount of info, and does that well. If we want to display other info on this page (scholarships, school reps, reviews) and allow users to interact with that info in a more advanced manner, new design would be best. That way we're not shoe-horning in other features into the SchoolCard component.

The modal Ui that @tal87 showed here could be of use, but only if we're going to display the other info per school (scholarships, school reps, reviews, etc.).

[thedeany]

@tal87's modal idea is what I was going to suggest. Perhaps there could be multiples "tabs" in the modal each containing different aspects of the institution. For instance, a "main" tab which shows more of the school's information including the "Contact" link (#364), a "Scholarships" tab, a "Reviews" tab (#489), etc.

[dmarchante]

IMO the only way that the modal makes sense if we add the additional information to all the cards. I know we have a lot of info to add, and I remember conversations about reducing the info to put on the cards. However, @tal87 idea to implement a modal m address the issue of adding that additional info that end-users may want. Additionally, it keeps those users on our site and doesn't make them navigate to an external page, or another page of the OC site.

When adding tabs to the modal I think we would be adding too much functionality, and would necessitate more clicks which is not what I'd want to see. Also, I don't know if the information is that extensive to merit that. But we are all open to any comments to improve at this stage. Thoughts?

[talbshoam]

@thedeany I do like the tabs idea a lot

[thedeany]

If not tabs, what about if the modal content is scrollable and the information could be listed in sections? Less clicks to access the information.

[kylemh]

That is definitely an AB testing candidate - I have no idea which is best. I think wireframing both examples is on my to-do tonight.

[Adeiye]

I would love to handle this issue. As a beginner, where do I start from

[jjhampton]

@Adeiye This issue is currently assigned to @tal87 , who submitted a PR for it some time ago. It hasn't yet been merged in, as requirements for what's needed haven't been clarified yet.

If you're interested in contributing, please review https://github.com/OperationCode/operationcode_frontend/blob/master/CONTRIBUTING.md .

[kylemh]

WONT DO