openfoodfoundation / inception-pipe Goto Github PK

Description

As an instance manager / PM I would like to track metrics for specific ratios over time (weekly or monthly base) using Metabase.
This will help to compare how these numbers develop our time, making it easier to detect changes.

Currently ratios are in SQL, but this seems to not allow to use the Metabase functionality to group (e.g. by completed at per week) and filter (by specific time range).

This issue includes the setup of these KPIs

• Orders per Customer
• Items per Order
• Average Order Size (Total Sales / Total Orders)

Acceptance Criteria

• Query is created in Metabase, Title “Orders per Customer”, Description “This query returns the Number of Orders per Customer / Items per Order...per specified time period”
• User can specify time duration of interest, e.g. “last month”, Jan 1st 2020-March 31st 2020"
• Metric is included in “Global Metrics - Test for FR Instance"
• Query can be reused for any instance of choice

As discussed with @Erioldoesdesign and @jiibes, we will break down the epic needs in junks of 'molecule size' (following the Atomic Design Methodology) that ca be used to build components for the Style guide.

The Molecules are defined here:
https://www.notion.so/openfoodnetwork/Product-List-Page-Components-Breakdown-3856439705104bfd8f5ff233987f38c9

Together with a voluntary contributor, we will try to set up a basic way of tracking metrics for the new checkout process

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.

Once the Unit prices work has progressed through the development pipe into our live product we should conduct user testing to confirm any theories and hypothesis about user behaviours that we discussed early in this process.

Rough questions to inform usertesting once in live:

Shoppers

• Do shoppers understand the difference between price and unit price?
• If yes, is there a clear difference between countries and/or culture?
• Do shoppers use the unit price to calculate savings and if yes, how and what?
• Do shoppers expect to see unit prices anywhere other than where we have placed them?
• Do shoppers expect to see unit prices on invoices?

Back office users

• Do back office users find unit price beneficial once understood?
• Do back office users want the ability to remove unit price IF not a legally compliant requirement in their country?
• Do back office users expect to see unit prices on invoices?
• Do back office users expect to see unit prices anywhere we have not currently placed them?
• Do back office users read the documentation associated with unit prices? is no, why?

Please add more questions we want to test for.

This will be blocked by openfoodfoundation/product-pipe#2 until it's completed.

[This is a placeholder -> pasting things from Product Curation Meeting Discourse Post]

https://community.openfoodnetwork.org/t/trace-order-amendments-through-invoice-lines-and-generate-legally-compliant-invoices/1502

Notion document located here: https://www.notion.so/openfoodnetwork/Splitting-the-checkout-Usertesting-0aee53b69b8847acab8c28742cb0d635

Ready for review and comments.

Description

This is a placeholder for "Super Epic" around reporting.
All Issues related to reporting shall be linked to this.

To investigate in more detail how hubs are using shipment states, we need to identify the hubs that are using shipment states per instance the most.
By running number of orders with shippment state= shipped against total number of orders per hub, we can narrow down to hubs that are using the feature for (almost) all orders

• Jana Brauch to define queries and run in Metabase for FR, UK, AUS

• @andrewpbrett to run queries for US & CAN

https://community.openfoodnetwork.org/t/core-non-core-instances-and-sysadmin-support/2068/47

1. Work out a roll out plan with instances
2. Confirm completion
3. Remove Stripe Connect

Located in this PR: #18

Though there is still some information here that needs to go in our Wiki:

#3 (comment)

Especially around how product/design make decisions on what actions/processes the issue needs to go through e.g. 'Does this request need usertesting/user research?'

Placeholder for an issue, that was decided in product curation:
explore what can be done to improve performance.

Goal (tbd)

• Detecting what is causing biggest performance issues
• Lowering the timeouts on reports
• ...

Potentially from this spike could come some issues on reports, but Matt was also mentioning that reports are not among the pages causing the biggest performance troubles

https://community.openfoodnetwork.org/t/improving-user-discovery-on-ofn-map/2013

Stage 1 - Ready for inception: Title & assigned to a product person & product curation has been prioritised and will have resource allocated.

Stage 2 - In Inception: Product team have discussed and refined the acceptance criteria. Can be assigned or labelled 'needs design input' or 'needs tech input'

Should we create a task board where we keep track of things that people could do?
[] Review potential papercuts and confirm (noting on issue) whether they are valid / still a problem

What is the problem we are solving

As part of #5888 products can now have units of pounds and ounces. However, on the Bulk Order Management (BOM) interface, the weight column is in grams, so to adjust an order, a user would have to convert from pounds/ounces to grams. See discussion on #5888 for additional details and screenshots.

Success factors = expected outcome

We could solve this a few different ways - it's not an easy problem! One solution would be to have the column just be weight and the units of the product indicated in each row, since now they might not be similar units (a shop can have some products in pounds and others in kg).

Useful information for inception

Plans to create a simple, always open application process for devs and potentially other delivery roles.

This will involve a form (probs google) embedded in the website and an automated email that follows explaining what happens next (eg get involved in the Welcome New Developers Board)

Exploring how to enable our pipe to accommodate funded features.
Exploring how features might be crowdfunded by the community.
Exploring how the API product fits into this.

https://community.openfoodnetwork.org/t/a-proposal-for-fundraising-for-features/2236
#36

https://community.openfoodnetwork.org/t/backoffice-product-list-table-user-interface-uplift/2098

prototypes:

producer - create first product
producer - columns management
producer - edit fields inline (see lemons to edit tags)
producer - filter by categories and tags

Mobile UX is steadily being deployed across instances and there is a need to ensure that it is performing how we expected when we decided on the improvements. This is best done, from a designer point of view, through a mix-research approach including metrics/number analytics and user research, potentially best facilitated through user testing sessions.

A decision on the Personas we test with will help inform the user research portion of this work.

Some initial measurement criteria (metrics/numbers based)taken from the Mobile UX epic:

• Increased number of orders via mobile
• Decreased drop outs / cart abandonment via mobile
• Improved conversion measure of shop visits > orders place on mobile

Some (WIP) elements to explore through user testing:

• Test impression of new mobile UX visuals from a 'never before seen shopper'. Do these meet the general expectations of users/shoppers.
• What key actions does the new UX entice from users e.g. are shoppers interested/distracted by images.
• Test impression of new mobile UX visuals from an 'existing shopper'. How does the new view compare to old design.
• What are the biggest stand-out parts of new UX
• What are the 3-5 remaining problems that help a shopper complete a task that need focusing on to improve.

Notes for testing:

• Need to pick a 'good shop' e.g. nice photos, clear descriptions, easy to understand Order cycles, existing payment methods.
• Need to pick a 'not good shop' e.g. no images or poor images, confusing order cycles etc.
• Need to test key instances in multiple languages
• Need to ensure not just designers are present at user interviews
• Interviews have an agreement that interviewee's sign with proper data protection policy and PII care.
• Interviews are recorded, notes are taken and translated.
• (anon'd) User research is published 'openly' on github issues for the OSS community to see and understand.

UPDATE 29.11.2018
After PR openfoodfoundation/openfoodnetwork#3047, on mobile when I click on "next" I am correctly taken to next section BUT too low, I see the bottom of the section apparently and not the top, it's confusing.
Ex after address section when click on next:

After shipping section when click on next:

Description

UX at checkout is confusing, both on desktop and mobile.
On desktop, navigating through the 4 sections is not consistent, when I click on next sometime it doesn't bring me to the next section but jump some sections. Sometimes it goes too "low" on the page and I have to scroll up to be able to fill in info. It complicates checkout and frustrates shoppers.
On mobile panels are closed and require Customer to click on 'expand', which is in small text and on the right hand side of the screen. So people get stuck.

Expected Behavior

I can navigate easily through checkout sections both on desktop and mobile.

Proposed behavior: when a Customer goes to the Checkout, any panels that require information to be filled in will default to open so that it is obvious that they have to enter information.
If the Customer is already logged in or logs in, and has shopped previously, this will most likely be the Shipping and Payment panels
If they are a new Shopper it will also be the Details and Billing Info panels

Actual Behavior

I can't navigate easily through checkout sections and it's hard to fill in checkout info both on desktop and mobile.

Steps to Reproduce

On desktop and mobile

1. Put products in a cart on any shop (I tested with a registered user).
2. When you reach checkout page, fill in content of first section of checkout (if registered user and info saved, unhide the info and redo the process as if no info were saved) and click on "next", it brings you to the second section.
3. Fill in and click again on "next", it brings you directly to the 4th section, skipping the shipping method !
4. On mobile, see that some panels are closed and you need to click small link to open them - not obvious

Animated Gif/Screenshot

Desktop behavior:
https://www.useloom.com/share/4dc286a795fe44ad847aa3be66d0e268

Context

I regularly hit this issue, and especially today Irene from Sicily starting to use OFN hit it again in front of me and was distrurbed, she didn't understand how to checkout as she was sent directly to Payment and didn't see she had to choose a Shipping option, then got the error, etc. Pretty bad UX touching checkout.
For mobile that was also reported by Kirsten in openfoodfoundation/openfoodnetwork#2485

Severity

S3, but pretty annoying S3 as most users are concerned at every checkout. They do with it but it's disturbing checkout.

Your Environment

• Version used: V1.18 French instance
• Browser name and version: Chrome
• Operating System and version (desktop or mobile): Ubuntu 18

As part of the product vision process we identified a number of focus problems that are core to our primary user the 'Moderately Complex Food Enterprise Manager'. The research focuses on understanding these focus problems and validating with those representative of our core user (MCFE) that they consider this high importance and key pain points for OFN to work on too
Discovering other focus problems and pain points don't invalidate these focus problems, but they may help us better understand and order the focus problem..

You can find a WIP persona document here

You can find the working design document for research notes here

You can find the understanding process of focus problem here

Final user interview list TBC

Final script TBC

Final forms/documents for interviewees TBC (But templates here)

Problem

As described in this issue https://github.com/openfoodfoundation/openfoodnetwork/issues/2830#issuecomment-725643672, the "Next" Buttons in the current checkout flow might be confusing for users, as they possibly distract from the actual Call-to-action "Place Order now".
Also, the when a user click on the "Next" Button the animation is jumpy, leading to a bad User Experience.

As a first step we would therefore like to track the usage of those buttons in order to have evidence if we could remove the buttons.

Product Area / Page

https://openfoodnetwork.org.uk/checkout

Hypotheses:

• Users are less likely to abandon the checkout if there is only one Call-to-Action on the bottom of the page - possibly users are more likely to scroll down then because they look for some way of to confirm after entering their data
• Users are not heavily using Next-Buttons to move between the sections on the checkout page

Questions:

• how heavy are "Next" buttons used to move from section to section vs. users just scroll down the page?
• how many users exit the checkout page after they hit (one of) the "Next" buttons?

Proposed Method

• Create an event when user clicks "Next" button

• Create a funnel

1. User enters /checkout
2. User clicks "Next" button
   3a. User clicks "Place Order now"
   3b. User exits page (before having placed order

Facilitate a process for defining our API product strategy

Have a meeting on Thursday.

[] Can people call on Jana to help them get papercuts specified well enough for consideration - product support to instances

Create a welcome new designers board that is similar in structure and process to the welcome new developers board.

• Needs to exist on github - but what repo? dev? or inception? https://github.com/openfoodfoundation/openfoodnetwork/projects/27
• Needs to exist on .org website https://www.openfoodnetwork.org/become-a-contributor/
• Needs to exist in docs:https://ofn-user-guide.gitbook.io/ofn-handbook/working-on-the-ofn-governance/team-organization/onboarding-process https://github.com/openfoodfoundation/openfoodnetwork/wiki/Pipeline-development-process
• Needs a pinned(?) or easily findable community post in forum: https://community.openfoodnetwork.org/
• Possibly an intro channel for new designers on slack then pushes to design circle et all: https://www.openfoodnetwork.org/slack-invite
• Onboarding process for designers is slightly different and usually needs a synchronous call and critique process for contributions as design PR's don't exist! Maybe Calendly or a regular running call for onboarding

The Kickoff Call brought up the discussion of in which step in the checkout process the user gets forwarded to PayPal or Stripe

New proposal is:

Option A

• 2nd Step "Payment Method" is purely for the user to select their payment option and see related fees but not enter any details
• 3rd step Order Summary: both for Credit Card and Paypal users are asked to enter their information only when placing the order in the final step and then getting forwarded to the respective payment provider

Mockups here

Old:

New: 

Option B:
More Standard E-Commerce, but @Matt-Yorkley mentioned that users might not be able to review their credit card details in the 2nd step because we do not save them (but Stripe)

Step 2: User selects payment method

• Credit Card: User enters their credit card details and verification takes place in the payment step
• Paypal: User selects radio button and info text “You´ll be forwarded to Paypal after you reviewed and confirmed your order in the next step” is displayed

Step3: Order Summary page
User places order

• Credit Card: Stripe payment gets processed
• Paypal: Paypal Modal opens up and user enters their paypal data for payment to be processed

Examples of E-Commerce Checkouts with an Order Summary step

https://docs.google.com/presentation/d/1fqdXSzXAuQRFtMKbc7pUW7aNkkbJnS64gh8Vz7Lvcus/edit?usp=sharing

Problem Description

Currently there is no OFN CSS library or style guide where all UI styles are documented in one place.
This leads to inconsistencies of styles across the product (both shopfront & admin), that are confusing to shoppers and admin users.

Solution

A library that includes all styles in use across different elements

• Fonts & Font Sizes
• Button Styles & States (Active, Disabled etc.)
• Dropdowns
• ......

This will help

• discovering inconsistencies across the product and unifying styles
• developers & designer which styles to choose when developing new features

We cannot wait Backoffice UI Uplift to release the PR but we want to investigate if there are some improvements possible (that do not require design work), that could be done rather soon by JB

This is work in progress

Description

Together with the release of Full-Width Admin Layout (openfoodfoundation/openfoodnetwork#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

[This is a placeholder -> pasting things from Product Curation Meeting Discourse Post]

Version 2 of the tax report is out for community review! See reports channel. A chat will be organized to validate the final version and move this forward to something ready for dev.

Discourse Post
https://community.openfoodnetwork.org/t/reports-project/1935/44