Redesign School Card UI

[kylemh]

Feature

Why is this feature being added?

https://github.com/OperationCode/operationcode_backend/issues/281 https://github.com/OperationCode/operationcode_frontend/issues/948

Currently, some code schools have multiple locations. Some code schools even have multiple campuses within the same city and state. The current card only displays a code school's city and state. There is no way to differentiate between code school campuses within the same city, state.

Additionally, code schools have the ability to offer free housing, but we dont give code schools the option to highlight that differentiating fact.

What should your feature do?

1. Do not display multiple cards for a code school if it has multiple locations in the same city and state.
2. Indicate "Many Campuses" somewhere on the card when the code school has multiple locations.
3. Indicate "Housing Provided" somewhere on the card when the code school offers a housing stipend.

[jjhampton]

It would be nice to be able to click on the 'Many Campuses' text, and then the card could possibly expand somehow to show all of the campuses. Perhaps the text could be colored as a link, and be something like 'Multiple Campuses▼' - the down caret would be an affordance clue to the user indicating that the text was a clickable UI control.

[AllenAnthes]

I should be able to take care of this.

I'm thinking @jjhampton's suggestion with a simple expansion panel with the addresses?

Do we want this added to any school that has multiple campuses or to just consolidate those that have multiple locations in the same city?

[jjhampton]

I'd say only for those within the same city - it's pretty useful to list separate campuses individually that are in different states, so people can find a school near them with the state search. Any ideas @kylemh ?

[AllenAnthes]

I guess I have two different questions.

1. Consolidation. Just same city or all campuses in the same state. I agree that having a separate card for at least each state is useful.

2. Multiple campus link/panel. This could be added to any school that has multiple campuses (while still creating a separate card for them) or only when consolidating what were previously different cards.

[kylemh]

@AllenAnthes I missed the question in those 2 bullets 😂

Personally, I'm even fine with just text saying: Multiple Locations. The link will get them to the appropriate code school where they can determine further information.

Implementing either @jjhampton or my idea will satisfy this issue 👍

[dearhakeemdavis]

Hello, may I work on this issue?

[AllenAnthes]

Go for it. I had thrown together a fix for the duplication but I felt like my solution was really ugly/hack-y. I got swamped with other work before getting a chance to play around with it. https://github.com/AllenAnthes/operationcode_frontend/commit/cc85f3eb4c5e365aec20f6e32ca27296c870b3ec Feel free to use that if you don't feel like going in a different direction. My thinking was just to keep track of each school's locations using a hash table and adding a new property to the object if multiples were found.

[kylemh]

I've updated OP and unassigned this issue.

I'd like to see new designs before moving forward.

[ambergkim]

Proposed new card style:

• vertical,
• only lists features (gi bill accepted, full time, hardware, housing) if they do have these available. Otherwise, don't list them at all.
• All locations for schools at the bottom. if all locations don't fit, truncate and add 'more locations...' which would turn on an overlay to show more locations (see bottom most card)

@kylemh

[ambergkim]

2nd version

[Wimsy113]

I designed a new school page a few months ago when we first started kicking around ideas about redesigning it. I'ma leave a link here cause I'm not sure if anyone saw it or not.

https://invis.io/C5FGCJU4YSB

[dmarchante]

@kylemh @jjhampton can we get a consensus on the direction we want to go in?

[jjhampton]

I like @ambergkim 's first design and explanation of the functionality (dropdown to show 'more locations'). @Wimsy113 's design is nice, but as a user, I'd like to see the details on the initial view of the card (GI Bill accepted, Full-time / Part-time, etc) without requiring a click on the card. That way a user can visually scan the cards and compare to see which schools are a fit for them.

[jjhampton]

Whoever takes on this issue, keep in mind the requirements for code school logos:

• https://github.com/OperationCode/operationcode_frontend/wiki/Adding-a-Code-School-Logo#image-modification
• https://github.com/OperationCode/operationcode_frontend/blob/master/CONTRIBUTING.md#code-school-images

[Wimsy113]

So I went through the entire page (on both web and mobile) before I did my design and there were alot of things that I noticed that I sort of felt like I alleviated in my design, I noted that there were:

There's an explosion of information

A lot of schools

A lot of schools with a lot of locations

A lot of schools with a lot of locations that were all listed individually (there's 17 listings for General Assembly's online program y'all)

Schools that work with Operation Code (has scholarships, discounts etc)

Schools that are accepted by the VA

I was trying to make it clean and concise while also cutting down on the amount of space needed on the page. I felt this would also help with mobile, seeing as a lot of folks outside of opcode do access the site on mobile the minute they hear about it (I'm speaking from experience), and so having the boxes collapsable as opposed to just blam out there, would make it so if said person wanted to know more about a school, they could select it, instead of having to scroll through a bunch of boxes to get to it, they would all be there, and then could open and close as many boxes as they want to or see fit to.

I was also thinking about accessibility, the more information we have to fit on a small space, the smaller the letters have to be, the harder it is to see it (I'm half blind, my glasses are basically microscopes, and I still have to squint to see the words on what we have now), especially on mobile, and the more cards there are, the smaller they have to be to fit on the screen, the harder they are to read.

I even added the "search by location" at the top to try and circumvent any unnecessary scrolling or combing through the page for information to also save time, again as opposed to scrolling all the way through the page, and then getting to the search bar.

This is just what my thought process was when re-designing the page is all.

[jjhampton]

@Wimsy113 Those are all valid suggestions, but a complete redesign of the card (involving hiding all details completely until clicked) and redesigning the code school page layout (such as changing where the search bar is at) are outside the scope of this issue. The original feature request was:

• Do not display multiple cards for a code school if it has multiple locations in the same city and state.
• Indicate "Many Campuses" somewhere on the card when the code school has multiple locations.
• Indicate "Housing Provided" somewhere on the card when the code school offers a housing stipend

Doing the above will solve the main problem (illustrated by having 17 listings for General Assembly's online program.) I'd prefer to incrementally add the features above and move forward from there.

Other improvements that you mention (improving readability/accessibility via font size changes, the idea of hiding all code school details completely until clicked, and improving the way users can search/filter for code schools) are different changes and should be addressed in new feature requests.

[Wimsy113]

Okay so this page that I submitted was actually from when there was a call to redesign the entire page. I submitted this because I did want you guys to see what I'd had in mind as far as the cards for the schools. The explanation was just that, an explanation as to what went into my design.

I do think that we do need to keep accessibility in mind when redesigning the UI for the cards, because the ones we have now are very hard to read on both monitor and mobile, and maybe we should try to curate a solution where adding more information to the cards doesn't make them harder to read.

[Wimsy113]

With that in mind, here's a revamped version of the cards, it's open, and it displays the information clearly, I figured to circumvent the schools with many campuses, we just add a link to the location pages for said school sites, and that'll cut down on the information that has to be displayed on the card. The symbols are pretty cut and dry, if it offers the service it's colored in, if not, it's grayed out.

[kylemh]

How do I interact with Various?

Also, is there any chance we can get the SVGs for these icons?

[jjhampton]

related to the above question ^ @Wimsy113 This preliminary idea of yours was posted a few days ago in Slack's #feed-github, I'm reposting here so it doesn't get lost in the Slack chat ether. Feel free to update as needed.

[Wimsy113]

I’m going to change Various from a link to just part of the span for location and then “Expand for locations” will be where one will have to click or tap to open up the locations on the card.

I’m still trying to work out the interactions for the card i.e how to handle the transition for the locations, I’m thinking they’ll either flip over or slide from the bottom or top......

[jjhampton]

@Wimsy113 Please keep in mind that we're currently linking to the code school website by clicking on the card. We'll need some way to link to the school website moving forward with the new design (either by clicking on the card, or a child element within the card).

[Wimsy113]

Of course! I'm pretty sure I can figure something out with this interaction.

Also I do have all the icons as svg's just tell me where I can send them.

[dmarchante]

@Wimsy113 just following up with you. Are you still making progress? Do you have any roadblocks (besides time of course)?

[Wimsy113]

I'm still just working out the interaction for the locations. I'm thinking just a link inside the card and an overlay.

Also school stuff, I'm still working on it though.

[dmarchante]

@Wimsy113 no worries just want to make sure it is active

[Wimsy113]

Okay so I feel like this is too much but I'm gonna let y'all decide.

I have a prototype set up on invasion too and you can find that here, but there's no animations yet as I'm still trying to figure out now to go about doing it but basic steps are:

https://invis.io/YPNDPDHQZAK#/312955447_OpCode_Codeschool_Cards

Locations link is clicked, opens up regions, click region, shows location in said region, click arrow to return to regions, click x to return to face of card.

[kylemh]

I'm thinking something like this:

(excuse the hasty mock-up, there'd be some more breathing room between the card's border and the big button)

and [Various]() flips the card to a simple scrollable list of all locations. Breaking things down by region adds a lot of complexity visually imo

With this, cards wont hover anymore on hover.

Additionally, we could flip the card when "various" is clicked, or just overtake the content temporarily.

[kylemh]

This should be very simple to make accessible as well

const name="Online Instruction"; 

...
alt={`${name} ${props.active ? 'available' : 'unavailable'}`}
...

[Wimsy113]

I saw where you were going and I ran with it. I think that a flip would be an awesome idea for the locations. However I did say that we should link to the website and that Idea got shot down because I think there's an issue with maintaining links and whatnot

[Wimsy113]

Also, I'm aware those are not east coast cities...I am lazy, and it is late lol

[kylemh]

Keeping the logo up top is a good idea. We'll just ensure it's the same.

I think that's my favorite mock so far.

Looking to hear feedback from others! If it's good, I'd like to press for a pixel-perfect mock for somebody to work off of 👍

[dmarchante]

[dmarchante]

building on your design @Wimsy113 lets move forward with your layout tweaked to reflect the above sketch

[LauraUX]

Hey guys! Really good work so far! I'll be joining this project after Tuesday. Looking forward to helping in any way I can!

[kylemh]

This ticket could be re-opened in the new repository and is not blocked 👏

[kylemh]

Working on this in the new repository. Make an issue for me at some point @dmarchante !

I have all of the assets in and am working to mix your latest mock with a bit of @Wimsy113 's latest mock.

[Wimsy113]

@kylemh I already finished it yo lol. It might need a tweak because of the survey but I'm done. I didn't post it because of the redesign.

[kylemh]

Great. I mashed together some FA icons to make a custom icon for GI Bill ✅ and ❌ , but I was on the way to exactly this 🎉

[kylemh]

Most of the work is done for this https://github.com/OperationCode/front-end/pull/137

This issue is documented here