openfoodfoundation / design Goto Github PK

Design's involvement in supporting design volunteers through their shopper research exploration.

Research planning located here: https://docs.google.com/document/d/1zBGD4UlTu1VPzPAys3TxL32aHMl4tH4Gu4H5LotFQzw/edit

Connected to this papercut issue:
https://github.com/openfoodfoundation/openfoodnetwork/issues/6219

Creating here so designers can assign themselves!

Connected to: openfoodfoundation/inception-pipe#10

As we have more and more conversations about how to provide great user experience when creating your enterprise, shop or hub on OFN the more we discuss how other services provide this.

As a designer, we'd like to do a kind of Competitive Testing and Value Opportunity Analysis (VOA)

This would be a good first issue for a design contributor volunteer.

Great for user researcher designers!
Use this as a good first design issue to ask user research designers to help better understand the motivations and drives of the OFN users, both current and future.

http://bit.ly/OD-Empathy-Map

You can find some great advice and templates here for a companion exercise of Personas.

• https://okthanks.com/persona-builder
• https://simplysecure.org/resources/persona-template-tech.pdf
• https://simplysecure.org/resources/persona-threat-model.pdf

We currently have a lits of Personas for OFN users, not all of which are filled out with information: https://www.notion.so/openfoodnetwork/Audiences-and-personas-cd7a2d86c6fc4656b4567acf0c94fe91

OFN has a certain set of icons and styles but has never had a detailed look from an illustrator or visual designer.

Mathew has been working on this for the Canada team infographic report here: https://drive.google.com/file/d/16N_RQIQoplpAAzb0SxQAOdFJ193PDmcX/view?usp=sharing

Great for UX designers looking at finding opportunities to improve your OSS by fining usability gaps that are difficult to find unless you are evaluating against a set of clear criteria.

Heuristic analysis can be done visually on design software, in spreadsheets, slide decks or written in tables in markdown in a github/gitlab issue. There are lots of ways to open source this process :).

Find a great article on this here: https://www.nngroup.com/videos/heuristic-evaluation/

Example - via https://uxdesign.cc/ux-case-study-heuristic-analysis-of-yuppiechef-com-c92098052ce4 FYI this is not and OSS tool, it's a regular tech tool but a good example of the Heuristic Analysis process.

Here is the started spreadsheet for OFN:

See a heuristic analysis spreadsheet from another OSS project for structure: https://docs.google.com/spreadsheets/d/1dX37Az3G0NLzthpISJz7A_5JdYOq3tGJcU17yBrfJn4/edit?usp=sharing

We have a number of different UI brand colours across the digital OFN product.

Not all of these are:

1. Consistent hex colour codes
2. Needed due to very similar shades or colours
3. Fully WCAG AA accessible: https://www.w3.org/WAI/tips/designing/

We need a designer to look over the colours currently catalogued: https://www.figma.com/file/A1RDmHC9dMxhjF7JTtiMuB/Components-library

https://www.figma.com/file/6cmWYJjLbCsuj4YPoPpEN2/logos

Use: openfoodfoundation/wishlist#1 as a reference for info and background

We currently have a list of personas here: https://www.notion.so/Audiences-and-personas-cd7a2d86c6fc4656b4567acf0c94fe91

A number of which are not yet filled out. We'd like contributors to begin to fill out this information :)

Some information can be gathered through desk research and other information can be hypothesized and later confirm through research studies.

Steps to start this work

• Add a comment on the issue and assign yourself

• Read through our existing personas: https://www.notion.so/openfoodnetwork/Audiences-and-personas-cd7a2d86c6fc4656b4567acf0c94fe91 (some are blank)
  Make sure you read: https://www.notion.so/openfoodnetwork/Moderately-Complex-Food-Enterprise-manager-Manny-McFee-941edfcc07f7401db7a95d1776040984

• And also do some general persona research: https://www.nngroup.com/search/?q=personas
  https://simplysecure.org/resources/persona-threat-model.pdf
  https://simplysecure.org/resources/personas-non-grata.pdf
  https://simplysecure.org/blog/personas

Great for UI designers and OSS products where lots of people have worked on UI development over many years and it's beginning to look inconsistent. This might be good if you've changed frameworks or created custom components in frameworks but not sure where and when!

A designer will go through every single part of the OFN OSS tool and screenshot all the individual components and categorise them. You can then clearly see how to 'harmonise' components and even begin to build a design system.

Brad Frost created and wrote about the interface inventory: https://bradfrost.com/blog/post/interface-inventory/

OFN's slide deck for interface inventory: https://docs.google.com/presentation/d/1iKrGGx0cJdSe3fkh6vggRqZnoxhhVXBGmCOr41oOE3c/edit?usp=sharing

Folder for screenshots of UI: https://drive.google.com/drive/folders/1V_BXoDfzAqt-OsTVnL2ocaePDuZ2FA3h?usp=sharing

An example interface inventory from another project: https://docs.google.com/presentation/d/1qsMpZ8oGIFgSWwlHQJ-qZGK-KSNF2qjjL0RleFQwIE4/edit?usp=sharing

This issue is about a standardized spelling of prices, unit prices, weights etc. Currently there are different ways mixed up in our software and they don't always comply with standards (see screenshots).

According to the International System of Units (SI-System) it is a standard to write amounts and units in the following way:

Weight, volume etc.:

• 3.5 kg (with a blank space before the unit)

Division (Unit price):

• 3.95 €/kg (with a blank space before the unit and no blank spaces before and after the "/")
• £3.95/kg (no spaces after the currency and no blank spaces before and after the "/")

Prices:

• 3.95 € (with a blank space before the unit)
• £3.95 (no blank space after the unit)

There are some open discussions about topics around this, like wishlist issue openfoodfoundation/openfoodnetwork#9160 and unit prices (which also takes into account the reading by screen reading software).

It would be great to have a general proposal by a designer how to do it in a formally correct and unified way that is commonly used and accepted by users.

After that we should have the proposal confirmed in a Product Circle meeting and implement it in our software.

We currently use Figma but to be open source we should make our product UI components and libraries accessible across other design software to be inclusive of all designers in an OSS centred way. We're also wroking on a front-end style guide library that would be the 'code version' of our components whereas this is the 'design file version'.

A component library is very useful if not essential for growing design contributions and including designers that can work on shorter issues that don't require weeks and months of dedicated contribution time.

A component library should be a design file in the software of your OSS tools choice or the tool that designers can and will feel comfortable using. Saving this file as an open format like s.vg will help the cross-compatibility of your file.

The component library is a design file of all the UI elements individually and as 'ecosystems' and should ideally include pages of the user flows. As many pages as are possible to create will help other designers see parts of the OFN tool/app they might struggle to see if the tool/app requires a local environment to be setup.

You can find the example we made for TenFour OSS here as a file that can be opened with Adobe XD: https://github.com/ushahidi/tenfour/blob/develop/design-contributions.md

Tools matrixes are great for better understanding a complex ecosystem of tool usage from users.
https://docs.google.com/presentation/d/19aEyUvH7IhGDAFMyICw13_MaY75P1IC0Irq1z1IPcQo/edit?usp=sharing

OFN design team uses a component library in figma to build design work for features that go into product management and development.

The current component library is incomplete and messy: https://www.figma.com/file/A1RDmHC9dMxhjF7JTtiMuB/Components-library?node-id=0%3A1

We need volunteers to help maintain components and add existing UI components to the file and update new ones.

How might we designers talk about what we researched, how, why and deliver this to the developers in an interesting and engaging way!
https://miro.com/app/board/o9J_l9YJomI=/

https://github.com/openfoodfoundation/openfoodnetwork/issues/1797

A hub is managing producers profiles.He put in "notification" field for the producers their own email, believing they would receive a notification each time some of their products are ordered, which in my understanding is not happening, only the hub notification address receive those.

I propose, as soon as the work on email confirmation is finished and the workaround using "notification" to add a new manager has found a solution, to delete that field in the entreprise menu for entreprises whose package is producer - profile only, and also hub - profile only (same case, no use), in order to avoid confusion and improve UX.