Consider design changes to the application header for mobile devices.

[entrotech]

Overview

John Huang suggested that the mobile header as shown in the Resources below might be better if we used the normal Food Oasis logo, instead of the "stacked" one, and possibly eliminate the "Locate Free Food In Los Angeles" text as well.

• The logo in this view doesn’t match the logo used elsewhere on the site
• This version of logo (white text knocked out of green background) saves horizontal space, but is rather illegible at this small size.
• The text looks clumsy with awkward line breaks. Competes with logo.

We should make this header feel in-line with headers on the desktop version and on the landing page.

Action Items

• [x] Consider these suggestions and propose a new design

Resources/Instructions

Current mobile header

Desktop header

[fancyham]

Thanks everyone for the discussion.

• The logo is different from the desktop, so confusing branding. Looks like a mistake.
• The problem with the existing is that the logo is so small that it’s pretty illegible.
• The text looks clumsy, often with a weird line break, and a bit like an ad.

Based on our conversation, I put together four variations (please feel free to add more)

I tried to find a balance between the logo, feeling modern with some whitespace, and if possible, explaining/hinting what the site is about.

A: Fades text to make it less prominent B: Removes text C: Changes text to region name only D: Reduces logo to carrot only (looks like Instacart logo, though)

One of my concerns is the subhead text “Locate free food…”. seems useful to describe the website… on the other hand, it’s on the landing page, so most people will figure it out by then.

Take a look! @sei1122 @JohnHaoHuang @entrotech @staceyrebekahscott @itserindean @rylantalerico

Quick comparison (click to enlarge)

Full comparison matrix (click to enlarge)

Figma link: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6504%3A11110

My favorites in order are: A, C, B, D (I currently think that the text is helpful for first-time viewers, and may be helpful for when we’re embedded in other people’s websites. )

[staceyrebekahscott]

I like B, A, C, D.

The carrot alone looks too much like Instacart's logo. Not sure if that might become a problem.

[staceyrebekahscott]

Approved and moved to Prioritized Backlog, pending assignment by UI-UX team.

[itserindean]

In order, I prefer: B, C, A, D. (I think the use case of the “find free food….” text is an extreme edge case.)

[sei1122]

I like B, C, A, D

C could be good if we were scandalized by each location have own area name beside logo like in Hawaii and Santa Barbara.

[fancyham]

Thanks, keep ‘em coming! @entrotech @rylantalerico @JohnHaoHuang @GigiUxR and anyone else I missed

[fancyham]

Thanks everyone for your votes — here are the results:

B - John H (from earlier designs) A, C, B, D - Bryan B, A, C, D - Stacey B, C, A, D - Erin B, C, A, D - Seiko

So the ranked-choice voting results are: B (standard logo, no small text) C (standard logo, region name) A (standard logo, lighter text) D (carrot logo only, lighter text)

So @entrotech, please let the dev folks know that B it is! That’ll make the site look lighter and cleaner on mobile. 🤙

[nkiwan]

I'm late to this but B is also my top choice. My ranking: B, A, C, D.

[fancyham]

@entrotech, The design is done here — we're removing the descriptive text and using the standard Food Oasis logo.

Not sure if this should be marked done or what, so please close out once you've created a new task for it? Thanks!

[staceyrebekahscott]

Moved back to Questions/ In Review, awaiting response from John D. re: dev tasks.