openfoodfoundation / openfoodnetwork

Connect suppliers, distributors and consumers to trade local produce.
https://www.openfoodnetwork.org
GNU Affero General Public License v3.0
1.11k stars 723 forks source link

[mobile ux] Direct links to shop products #5105

Closed daniellemoorhead closed 4 years ago

daniellemoorhead commented 4 years ago

Description

- As a: enterprise with a shop - On page: product detail modals, attached to each product on the shop tab - I want: to be able to link directly to the product detail within the shop so that my shoppers can go directly to that if I promote the item.

Acceptance Criteria & Tests

Note: We'll need to do a little bit of inception on this to understand how it will work from a user's perspective. Where will they display, etc.

@luisramos0 mentioned on Slack that it was a small change, which is great, but more detail required on the solution he is thinking of so we can understand the acceptance criteria for it.

luisramos0 commented 4 years ago

This is not as straight forward as I thought initially :-( Anyway, lets try to do the inception here:

I was thinking about not developing anything extra apart from a redirect to the modal already present on the shop page.

For example, for a shop like https://staging.openfoodfrance.org/ugandan-spices/shop/ where there is a product for sale with permalink "apples" we can make the URL https://staging.openfoodfrance.org/ugandan-spices/shop/apples load the shop and open the modal automatically. This should be straight forward if there is only one open OrderCycle.

I am just not sure what we should do when there are multiple open OCs to choose from because the product in the URL may be in one OC and not in the other. Because of this problem I am not sure about this approach...

Another approach, more difficult, would be to load the about page of the enterprise and open the product modal on top of it and load the product description independently of whether it's on sale in a given Order Cycle or not. This would create space for us having a normal PDP independent of Order cycles. A very important dimension for SEO is to have a stable page, not a page that appears and disappears in different versions (the shop page with different products) all the time according to Order Cycles. So this second approach would be to have this URL https://staging.openfoodfrance.org/ugandan-spices/apples that would load https://staging.openfoodfrance.org/ugandan-spices/about with the product modal for apples. In this case we would need to see where we would pick the product from! We would need to use any open OrderCycles OR otherwise we would have to look for products in the list of all the products the enterprise can sell (all the products in all enterprises that this enterprise can sell products from).

I think it's extremely important to have a PDP if we want our shops to have some meaningful SEO presence. That makes me want to go with this second approach although it is not so simple.

Matt-Yorkley commented 4 years ago

What about a new product show page, that shows the product details and a list of the order cycles it's in? Or some other info, like whether it is currently on sale or not, and a link to the shop?

luisramos0 commented 4 years ago

yes, that would be the extra on top of my second option :ok_hand: in my options I keep the modal just to keep it simple and small, but it would make it possible to create a proper PDP as you describe :tada:

The challenge I am now seeing with the second option is what PDPs will be active and what PDPs should be blank? For example, a hub with access to 6 farmers with 10 products each: 60 products. The hub only sells 40 of these products and has overrides for 20 of these 40 products, the hub never sells the other 20 products. What products will have a PDP?

lin-d-hop commented 4 years ago

What does PDP stand for? :blush:

Considering different perspectives:

From a shopper UX perspective I want to avoid long lists of unavailable products existing anywhere on the system. Thus from a shopper UX perspective the best option is the 31 products out of the example above.

From a Hub UX perspective I want the user to be able to intuitively understand how to create and find their product URL. This would most intuitively be found within the product/variant itself - not within the OC. To me this implied that having a PDP for all 60 products is the best option. Even better if the PDP can be hidden by the hub manager.

From an SEO perspective we want 'object permanence' (SEO has the intelligence of a 4-7 month old baby? :joy:). This means that having all 60 products or all 40 that have been in an OC before is best.

Proposal: To me this suggests the best option is that all 60 products have a PDP. However, I would say that the shopper should only be able to access PDP by a direct link or from the open OCs. This would mean that all perspectives have a good experience... I think.

luisramos0 commented 4 years ago

ok, so we are listing any product on the catalog, 60 products. So it really becomes supplied products of an enterprise that can be on sale or not. I think it will be easy to show the product modal the problem is where, I mean, show the product modal over what page?

I could open the modal over a page with the producer, but we dont have a producer page and the producers list page already has a long URL...

Maybe the best way is build on top of the shop URL like http://0.0.0.0:3000/fredo-s-farm-hub/shop/garlic

And just load the product modal over the page even if there is no open OC or there are multiple OCs, etc.

Initially we can even make it so simple it will not cross check the hub name in the URL with the product name in the URL. It will just display whatever product in whatever shop (users need to build the URL correctly).

In a second step, we can then improve it to validate if the product has ever been sold (or can be sold) by the hub.

Even if we assume the product in the URL matches the hub in the URL, if the user is coming from outside, we may get her looking for the product in open OCs and realizing the product is not for sale right now. As another extra step we can improve the PDP to list all OCs where product is sold or add a message "product is not currently for sale".

Thoughts?

mkllnk commented 4 years ago

show the product modal over what page?

The issue says: "link directly to the product detail within the shop". I think that means the shop product listing tab. But that doesn't define the order cycle. It's also not easy to use the URL fragment because that's already used for the tabs (and login modal).

I like your idea of putting it in the URL request part. But I can already see problems when people have a full cart in one order cycle and then click on a link to a product in another order cycle. I think this needs more inception.

Users needing to craft the URL and people seeing a product on a shop front that is not in the product list will be very confusing otherwise.

RachL commented 4 years ago

What does PDP stand for? 😊

Pacific drums and percussions :) More seriously, I don't think I know either :/

I'm not sure I'm following what it means to "build on top of the shop URL". Does it means shop URL + permalink of the product = product URL?

I think I agree with Maikel. I wonder if this isn't the way to design a full product page, instead of a modal... Modal don't display way in mobile anyway. Maybe something for the next round of mobile work?

Matt-Yorkley commented 4 years ago

I guess this product page will not show the price, right? As that can be modified by order cycle, distributor, or per-user via tags?

I think I agree a non-modal page would be good.

daniellemoorhead commented 4 years ago

Given the complexity and additional discovery this needs I'm pulling it out of the mobile ux work. This will go back into all the things for now, we can decide to make it a priority later.

And we rephrase this to be "How might we make products more easily discoverable for shoppers? And maybe also "How might we allow shops to better promote products to their shoppers?"

luisramos0 commented 4 years ago

@RachL PDP is the Product Detail Page, it's the pair of the Product Listing Page (PLP) (what we call the shop page) and the Category Pages. It's how these things are called in the ecommerce industry.

I think it's extremely damaging for OFN to not have PDPs for quite a few reasons: SEO (the number of indexed pages would be much higher and thus increase the relevance of all the websites), UX and product marketing.

Looks like everyone agrees this should be postponed, but this is still very important so we can continue to close the specification here.

I dont think we should build a PDP outside the modal, I think that will require a LOT of work (design dev etc). I think we should get the URL/modal thing working. I agree landing on a modal with a product that is not in the listing below the modal is weird, I think we should find alternatives.

My proposal is to open the existing product modal over the shop's About page where the user can close the modal and click Shop. In a second, also easy step, we can add the list of OCs to the product modal where the product is currently for sale that will enable the user to jump directly to the OC where the product is. I think this simple feature would improve the very poor situation a lot.

lin-d-hop commented 4 years ago

Oh dear. I'm quite concerned about this falling out of scope. The two main things people want in shopfront are PDP and images on mobile. PDP is crucial for shopfront marketing on social media... and that is going to be a crucial part of shopper retention when things start to go back to normal.

I would be inclined to say let's do the most simple version of this asap. If we can get a little design/UX input that would be great. I vote to go for Luis' proposals.

daniellemoorhead commented 4 years ago

We can prioritise this to be done, separately to the mobile work.

In terms of experience, I don't actually think what you're describing @luisramos0 is the best solution. If the goal is to have the shopper buy, why would we take them to the modal if they then can't buy the product? The extra clicks to then get the shopper onto the shop list, to see the product, and then to purchase it is far too big a barrier to conversion.

So, I think this requires to be taken up a level - what is the problem we are trying to solve, and then we start talking about solutions. I think this will be prioritised by the global community, but the thinking about how it will work has not been done, and wasn't included in the mobile shopping original scope (as per @kirstenalarsen's slack response, we'd added it because it felt like a quick win but in hindsight it wasn't actually that).

@yukoosawa curious about what you think of all this...?

yukoosawa commented 4 years ago

As much as I would LOVE to have PDPs (Pacific drums and percussions!!!), I don't think hacking the modal is the right way to get us there.

As a user I would get to the PDP and not be able to buy, nor see the price, nor see the availability of the product -- and then be forced to navigate to another location and search for the product in a list :cry: + :angry:

I think it's worth at least scoping the need properly to understand what a more long term solution would look like (logic + dev) and I'm happy to bring preliminary designs (yes I have them - in this instance it's the easier part!).

luisramos0 commented 4 years ago

The modal would be a quick intermediary step to get SEO benefits and a link for direct marketing. Not a part of our main user flow. The modal with the list of OCs will make the user land on a page with a link to the right shop, I dont think it would be too bad.

We can add the product variants and price next to the OC but I think that would be better after migrating the modal to a page and proper design. For now I'd suggest the modal with the links to the OCs, just that.

I vote to get this done now with URL and a PDP on the existing modal because it's easy and will get us very good value. Not doing it now it means closing this issue, going back to discourse for Inception and design: the year will be 2021 at least.

daniellemoorhead commented 4 years ago

Doesn't need to go through the full process so much as be agreed as a priority in the roadmap. We can bring this to the next product curation session.

On Wed, 6 May 2020 at 23:19, Luis Ramos notifications@github.com wrote:

The modal would be a quick intermediary step to get SEO benefits and a link for direct marketing. Not a part of our main user flow. The modal with the list of OCs will make the user land on a page with a link to the right shop, I dont think it would be too bad.

We can add the product variants and price next to the OC but I think that would be better after migrating the modal to a page and proper design. For now I'd suggest the modal with the links to the OCs, just that.

I vote to get this done now with URL and a PDP on the existing modal because it's easy and will get us very good value. Not doing it now it means closing this issue, going back to discourse for Inception and design: the year will be 2021 at least.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/openfoodfoundation/openfoodnetwork/issues/5105#issuecomment-624644226, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACTRDPB3UVF6THHW7M46DYLRQFPWPANCNFSM4LWKDNOQ .

-- Open Food Network Australia www.openfoodnetwork.org.au Our software platform https://about.openfoodnetwork.org.au/software-platform/ - User Guide https://openfoodnetwork.org/user-guide/ - Our services https://about.openfoodnetwork.org.au/open-food-services/ - Sign up to our newsletter http://eepurl.com/bYYCDj

Open Food Network respectfully acknowledges the traditional custodians of the unceded lands on which we meet, work and live. We pay our respects to their Elders, past, present and emerging and acknowledge their deep spiritual relationship to country.

luisramos0 commented 4 years ago

ah, yeah, this is a good item for product curation meeting :ok_hand: For clarity, in terms of dev estimates, estimates are for each item: 1 - the URL to the product modal is not difficult to do - XS 2 - adding the list of OCs is a little effort that becomes bigger if you want to have the price - S+ 3 - moving the exiting modal to an equivalent/simple page on it's own is also not difficult in terms of dev (it just requires design) - M 4 - adding the classic "add to cart" button will be another design challenge (multi OC) and also a bit of a dev challenge to make it work properly - M+