Design footer of embedded map

[fancyham]

Overview

Let’s come up with some designs for the footer of the embedded FOLA map — how it looks and how it works.

In the initial version there are both logos and text (which may be redundant) and it kind of crunches up at small widths.

The role of the footer is to give credit to the local brigade that put together the map, perhaps their partners(?), as well as Hack for LA, along with links going to each.

We also want it to take up minimal space (to maximize the map) and to be responsive / work with small screen sizes.

Also, we’ll need to support different versions for different tenants (LA, Hawaii, etc.) which might mean slightly different heights depending on logos, etc.

Considerations: Branding, flexibility

Action Items

• Mock up variations for the footer of the embedded map
• Talk about branding and priorities
• Choose one
• Design versions for each tenant
• Implement

Resources/Instructions

Current version:
https://www.hackforla.org/projects/food-oasis (at the bottom)

Wide screen:

iPhone 8 screen:

[souronion]

Hi team, I made a few mockups for the footer. Feel free to make any comments or suggestions. Thanks! :)

Food Oasis + Local brigade

Version 1

Clickable icons + hyperlink

Version 2

Clickable icons only, slightly neater than version 1

Food Oasis + Local brigade + External partner

I used L.A. Works as an example of external partners

Version 3

Version 4

Version 5

"powered by Food Oasis" icon + a "collab" sign

Version 6

[fancyham]

Thanks @souronion — all these variations are really helpful!

To make it easier to compare on a single screen, I cut off the bottoms and stacked them: (I put these on the Figma doc under your mockups)

I like # 6, 3, 2 — the ones that read well and have some text to make a bit more clear about what’s happening.

I like the “Powered by Food Oasis” on # 5 but I didn’t catch the “Powered by” in the logo until looking at it closely.

Also, looking at these, I think that if I were to come to it on someone else’s site, the “Food Oasis” logo by itself doesn’t quite explain what’s going on quite enough, so:

Another variation to consider would be:
“Map powered by Food Oasis. A project by Hack for LA.”
“Map powered by Food Oasis. A project by Code for Hawaii.”

Also, right now the footer is competing with the content (which should be the user’s primary focus). Perhaps fade back the text color to grey and/or dim back (via opacity for now) the footer altogether?

I’d also suggest reducing the height for the same reason. Doesn’t have to be tiny but just not as big, as it’s valuable real-estate.

[fancyham]

Thoughts from Hawaii, @stdyrm @sthapa ?

[stdyrm]

@souronion @fancyham they look great! Awesome job

I like 2,3, but also like the 'powered by' in 5. Just thinking about flexibility for future tenants, I think 2,3,6 can all be included in the same code - single (2) or multiple (3) logos, if logos are missing we can replace with text (6)

Just making sure, these are just wireframes? If so I can make those changes in the code and PR by tonight or tomorrow

[fancyham]

@stdyrm Yes, these are concept wireframes for us to discuss. But since Aloha Harvest is helping pilot and the footer breaks a bit currently, perhaps roll out a variation of # 2 for them immediately?: "Powered by [Food Oasis logo] A project of [CfH logo]” And if there’s time to do FOLA’s version, too. It’s also crunching up as seen above.

That brings up a good question though:
Do we want to credit data partners in the footer? My gut is no? We should discuss offline and come up with our strategy on this topic as it can be harder to remove a group’s name from something later than to not show it at all, and we’ll want to support multiple data partners eventually.

[fancyham]

Just was talking to @entrotech and want to throw some additional options that may be useful in the future:

The map itself has a tiny line of credits in the corner:
Ours could read “Map and data provided by Food Oasis, a project of Hack for LA” in text, in the lower corner of our embedded:

We could also abbreviate our current footer — remove the logos and keep the line of text in the middle:

And another option that moves away from the footer altogether:
A ‘more info” or “credits” link that shows a new layer on top with credits. That could show Food Oasis logo, our brigade(s), data partners, etc.

One benefit of these options is that it allows the food-seeker to focus on the content than the branding.

[Benbaillou]

Hi
Well done @souronion as usual

• For Food Oasis + Local brigade => I like version 2 for clarity
• For Food Oasis + Local brigade + External partner => I like version 3 idem, for clarity

@fancyham for map credits => I really like your idea!

[souronion]

Thanks for the great suggestions, everyone!

I created two more variations based on @fancyham's latest comment.

7. No logos

8. Remove the footer to give more space to the map content.
   Add an info icon on the header + a top layer to display more information

[stdyrm]

@souronion @fancyham Looks good, so looks like we'll move forward with these most recent changes?

7. No logos

8. Remove the footer to give more space to the map content.
   Add an info icon on the header + a top layer to display more information

[souronion]

Hi @stdyrm, I believe we still need to have Bonnie take a look at this since it's related to the project's branding and publicity stuff, etc. :)

@ExperimentsInHonesty Hi Bonnie, do you mind taking a look at this thread and the different variations of the footer design? We think you may be the best person to decide what logos/organizations to be included. Thank you!

[fancyham]

@ExperimentsInHonesty Yes, we’d love your input. Still need to balance it with other things, but trying to find the balance between credit for ourselves, for the brigades, for Food Oasis, perhaps for other partners… while getting out of the user’s way.

While it’s important to us that we get credit, our food seekers are still our primary audience, and usability is most important.

Some of the large logo ones are distracting from the primary content — the map and listings. Also, at these sizes, "Hack for LA” in logo is already illegible.

The single line of text might be enough. Perhaps making logos smaller or less bold.

[stdyrm]

@souronion @fancyham Sounds good! I'll stand by for Bonnie's thoughts

[ExperimentsInHonesty]

@souronion @fancyham @stdyrm @Benbaillou
Version 2 and 3 seem like elegant solutions,

Version 2
Clickable icons only, slightly neater than version 1

Version 3

I definitely think the food oasis logo could get smaller to allow for more logos on mobile.

I feel pretty strongly that we should have the logos, even if they are tiny, although I do understand Bryan's points about conserving space and purpose.

So to that end, let me say the purpose is to provide visibility for our organization (and the other brigades that partner with us locally to provide this resource to the community). Ideally, the brigade would look for placement on various community or government sites locally. And ultimately, in the long run, provide the user with confidence in the data and applications as they see the logo on a variety of applications and sites.

[fancyham]

@souronion, based on all this feedback, do you have a favorite or new design that @stdyrm can implement as a first revision? :) We can always make revisions later as we learn more. I think it should be pretty easy once the logic is put in place.

For reference, this is what the HfLA logo looks like on my old non-retina computer screen:

—

Other updates:

• LA’s FoodCycle website has embedded our map! https://www.foodcyclela.org/find-food/

• Hawaii’s Aloha Harvest is in-progress but will be up, soon. Probably after the holidays.

—

And optionally, if there are some directions anyone might want to explore for the future as we put it out there and get feedback, please note it here so that we can refer to it in the future.

The future feedback could be:
For food-seekers: What’s going on in the footer and what do you think it means / does it make sense to you? Does it get in the way? Anything missing?
For orgs that embed our map: Are the logos and credit okay with you and is there any confusion among your audience? Anything missing?
For Hack for LA: Does this meet your goals, does it make sense
For Us: Does this meet our goals?

[sthapa]

Just a comment, minimizing the logos would be the least confusing. Also, as @entrotech mentioned in the meeting, having other partner logos would probably be confusing to the end user and may rub partners the wrong way.

[stdyrm]

@fancyham @sthapa Almost finished, need to rebase and make sure no conflicts. Can probably do a PR tonight

[entrotech]

@fancyham Are we ready to create a development issue for this?

[fancyham]

Let’s go with option 2 and 3!

[fancyham]

@stdyrm Hey hey, we’ve come to a decision on the footer design, if you’ve still got time to work on it.

I think you have enough here to get started but lemme know if you’d like additional detail and happy to meet up with you or at CfHI time. If you need a development issue and can’t create one, lemme know and I can try ( JD’s out for a few weeks.)

[stdyrm]

@fancyham Hey sorry I've been MIA, still overseas and it's been difficult to make extra time ... we can talk this over at the CFH meeting if you're available, I may need a refresher on what additionally needs to be done after PR 1130

[fancyham]

Got in touch with @stdrym — he’s got #2 working locally and will look at getting #3 next 🤙

[stdyrm]

@fancyham I think changes for option 2 were already merged in Dec 21? but have a PR for option 3; if you have multiple maintainers in the TENANT_CONFIG, they will show up side-by-side on the widget footer. #1210

[fancyham]

@stdyrm excellent!

[fancyham]

Yay!