Explore Backoffice UI Uplift alongside Full-Width Layout

[jaycmb]

This is work in progress

Description

Together with the release of Full-Width Admin Layout (https://github.com/openfoodfoundation/openfoodnetwork/pull/6070) we would like to explore the scope for a backoffice UI Uplift. These can be small fixes that go with the release of #6070 for a "Minimum Professional Release" 😅 and bigger chunks, that will follow in later versions to improve the UI iteratively page by page.

Questions / Areas

(this is an extendable list, just starting to document ideas from Slack discussion)

• Working on Fontsize

  (it seems really weird to me that it is now using full width with a font so small

• changing main menu colors?

  Now` that we are not dependent on spree anymore we could get rid of the blue and green Spree?

• Consistent Styles / Styleguide (unify colour codes (button states etc.), font sizes)

• what does it mean for Uplift from a framework choice perspective

• testing environment needed to view UI + need to make sure design files and dev environment are both accurate grids/size/behaviour wise

[Erioldoesdesign]

current PR is staged here: https://staging.coopcircuits.fr/

Design tasks are:

1. Go through the PR and catalogue biggest UX/UI offenders (I can use UX s-1 to s-4 ratings)
2. Split into things that need simple tweaking vs things that might be bigger pieces
3. Complete 'written design' on simple fixes.
4. Do X limited time of design work on complex things which might be half a day max on how to make something UX better e.g. Button sizes, font sizes, better contrast of table lines/bg colours, etc.

[RachL]

@Erioldoesdesign we were not sure with @jaycmb do you confirm that your are good to go here or are you still waiting on Matt for something?

[Erioldoesdesign]

Not waiting on Matt @RachL I might drop him some DM's if I have questions but the next step after design has finished the google slides/review/recommendations and then any design work is to talk through those implications between @Matt-Yorkley myself and a Product person :)

[Erioldoesdesign]

Hey folks! here's the design sweep/QA of this: https://docs.google.com/presentation/d/1D0nqGRMhPaadgVd7KgS99gq2WqSvjgbKhaUKd4CZeYk/edit#slide=id.gb1b5274d1d_0_660

we'll be chatting out it in product curation today 11.01.2021