Visual refresh/redesign of public Food Oasis UI

[fancyham]

Overview

Let's tackle a lot of issues all at once with an easy-to-implement design update for the external site (the part food-seekers use).

Explore and create visual and information design refresh ideas for the website that solve a lot of our outstanding problems. Use it to inspire and to get team member's excited and inspired.

It's hard to do this piecemeal, so we're going to zoom out a couple-thousand feet and see if we can solve multiple things at once — for example, making landing page more interesting/less cryptic (better visuals) AND more trustworthy (by showing About-Us-type content and partners) AND more self-explanatory (by making the purpose and call to action more obvious)

We've discussed ideas for solving a lot of these issues previously, and our site is looking rather dated and jangled, so let's clean it up.

Goal:

• Make visitors feel confident in us: that we're a trustworthy, reliable, and up-to-date site
• Improve usability of site
• Something we're proud of showing others
• Make it easier to find the right content at the right times

Action Items

• Design: Mock up a design to experiment with ideas
• Design: Share with broader team to get feedback, see if it's inspirational for them.
• Design: Deliver to devs: desktop and mobile flows and designs
• Design: Flesh out representative pages / screens to be built for dev team
• Devs: work with designer on implementation questions, details, adjustments as they build
• Devs: publish new version

Issues being addressed by this design

(review and close these out once this design is launched)

• Feature: Advanced filters for search #947 - showing the time in the org list
• Feature: Visually indicate which item in the results list matches with which map pin #1711
• Usability: No ‘enter’ button on location search field #1668
• Highlight pin when cursor hovers over a listing in organization list #1120
• Adjust spacing for the Org detail view #1261
• Mark user's current or searched location on map #929 - may need to add a pin for user’s manually-entered location. Also, that pin shouldn’t move as user pans or clicks ‘search this area’: Separate User location from map center. #995
• Feature: Visually indicate which item in the results list matches with which map pin #1711
• Map: Move GPS button from top rows onto map for better usability #1725
• New, more space-efficient menu along the top, which surfaces more links, and gives more space to results. #2245
• Design horizontal menu bar and decide what is displayed when #2244
• September 2023 Content Maintenance  #1586 - new content — may need some tweaking for landing page

Related Issues:

• Feature: For Mobile, Split Map/List View #1826

Updated version

Launched in very late 2023/early 2024!

Figma designs for updated specs, layouts, colors, and flows for desktop, mobile:
https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=640-125

(screenshots taken about 9 months after the initial public launch)

• (note this screenshot includes advanced filters Feature: Advanced filters for search #947)
  

[fancyham]

Gathered first week of feedback here:

My quick summary:

• Generally, there’s good support for both the landing page and map changes with some notes and requests for variations and look-and-feel.
• Some requests for testing our new landing page vs existing one to confirm improvement (perhaps research team can help? –B)
• Generally more support for the dark blue version (we should examine or discuss our ‘brand values’ or how we want to present ourselves – but that can come later, too -B)
• Research team: How to balance tension between ‘corporate’ and ‘non-profit’ feel – and how to build trust while also reflecting our real selves (and limitations, volunteer-run org, etc.) and setting appropriate expectations?

https://docs.google.com/document/d/1IqNkYwDeGHkyTqQXlOz_hZ_BQ-otS4gFpLrs8dIkCJA/edit

[fancyham]

On Oct 23:
John H made flow diagrams for desktop and mobile that explains the user flows and UI states and presented them to dev team, along with what he saw as high, med, and low priority.

Devs will break it into individual tasks and start tackling it.

We expect them to be asking questions as they're building.

• I'll be adding the many related issues (from the backlog) that are addressed by this design to this github issue so that we can track progress, and so devs can read more details about each, if needed.

[fancyham]

Since last update, John H has been continuing to work with devs in a light way. They’re planning it for their next sprint (probably Jan 2024)

In the meantime, John is working on illustrations. Some initial versions here:
https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=6473-16654&mode=design&t=UTac8ZYpn7UKvvqV-4

[fancyham]

This launched in late 2023/early 2024! Yay! Thank you John!

Closing this out as the design is complete and it's been broken down/"decomposed" into smaller pieces for easier development.

The design specs are all complete and there are still some lower-priority items that are still waiting development time — like the top menu bar and hamburger menu — some of those are listed in the description.