New design proposal and differentiation from the existing Open Food Facts app

[stephanegigandet]

I'm proposing a differentiation between the Open Food Facts app (the native iOS and Android apps that) and a new "unnamed food app" that we could build with all the cool features that have been / are being implemented in Smoothie.

https://wiki.openfoodfacts.org/Open_Food_Facts_mobile_apps_differentiation

Here is a mockup of what the new app could look like:

What do you think of it?

[monsieurtanuki]

@stephanegigandet I like:

• the look of the lists - I'll try to code that
• the brown bear in dark mode
• the display is more fun!
• the simplification

I'm not a big fan of:

• the bottom scan buttons and their labels - to be compared with a FloatingActionButton
• the difference between the two modes

I don't see how the end-user switches from one mode to the other. Perhaps keeping only the "choose" mode with a "food pantry" flavor?

• adding a "My food pantry" with 5 products in the first screen?
• making the search automatically work both locally and on the server

Then comes the question: what is the added value compared to other food pantry apps? (I don't know, I don't use them).
Part of the answer may be: automatically compute the "scores" of the food pantry / shopping list, and possibly share it: "you see, it's possible to shop nice and healthy food, here's my shopping list with the scores"

[M123-dev]

I like the bear and the wiki entry is good. I would just say that we will talk again about the color choice.

What I ask myself now (I see @monsieurtanuki also), you sent three mokups from three different sides that are somehow the same.
How do you open them or keep them apart, it's not like a user only uses the app for one of these things?

As I suggested before, I would say that we have a homepage just like you built it. Where you can see everything nicely and have a good overview and in addition to this a proven navigation method, I would rely on an app bar here, so that the various functions can be accessed directly from there.

[stephanegigandet]

I don't see how the end-user switches from one mode to the other. Perhaps keeping only the "choose" mode with a "food pantry" flavor?

How to switch from one mode to another is a very good question, for which I don't have a very good answer at this time. It could be a nav bar or a bottom bar I guess.

Another possibillity could be to have 1 screen before that only presents the different modes. So you would get a back button on the "My choices" / "My food pantry" top bar, that would allow to get back to the mode selection screen.

I'm not a big fan of: the bottom scan buttons and their labels - to be compared with a FloatingActionButton

Regarding the floating action button for the scan, it's definitely a possibility. One thing is that I think this screen should be entirely visible (no scrolling), so nothing should be underneath the floating action button. Which kind of removes the need for it to be floating. I think the Scan is really the main action on this screen, the one used most often, so that's why I thought it would be more obvious with a bigger button. But we can try to do it differently.

I would just say that we will talk again about the color choice.

Yes, that's just a quickly drawn example, to show we can have different animals, each with a different theme and colors. I certainly hope that we'll have also an owl, a manatee, a koala, a panda, a penguin and a dinosaur. :)

[monsieurtanuki]

My suggestion is not to split between modes at all (if possible), it's just that we handle 3 distinct types of lists: with unique barcodes (like history or favorites), with barcodes and int quantities (like a shopping list) and with barcodes, quantities and expiration date (like a food pantry). And make it easy to copy product from any type of list to any type of list.

Anyway we'll have to implement the 3 types of lists, regardless of the final UX.
The first step would be to implement them, and then as a draft to display them at the same level (like in the current home page). Then we'll see if it's convenient, UX-wise.

[monsieurtanuki]

A suggestion (I didn't waste time on cosmetic details):

[M123-dev]

I'm also in the process of creating a design, I'll probably send it in here tomorrow too.
I really like your "Rank your food" section and the searchbar.

[monsieurtanuki]

Cool! I'm looking forward to seeing that!

[M123-dev]

Took a little longer than expected and had to do something else.
Especially @monsieurtanuki and I had already had a lot of conversations about the design, so to show my vision I put together a small prototype in Adobe XD. With the focus more on UX.

To find here (is interactive)

It still corresponds to the "smooth design" started by @PrimaelQuemerais

I don't know if anyone here is familiar with Samsung Health, it's worth a look.
I built the start page based on there. The upper area with the personal message would do well as a Sliver App Bar.
There were complaints from testers about the bottom action bar for interacting with items in lists etc. I think a procedure like with Whatsapp messages would work well. Also included in the example.

I went back to the bottom navigation bar design here, as this is a very proven navigation method and since we are going to change the bottom action bar anyway, we have the space for it anyway. Of course, these disappear on the product page, for example.

Track is still a placeholder. We should think about that later.

What do you think of this proposal, I am open to suggestions

[monsieurtanuki]

Thank you @M123-dev for those suggestions!

My raw comments on page 1 (home):

• I'm not a big fan of the "good morning / breakfast time" message, as it takes space and I don't think the time you use the app matches the time you eat (I'd rather say "using the app" while "preparing my shopping list")
• I think the "My preferences" label stinks - I know you did not invent it. It sounds like "day/night", "favorite colors" or other options, it's not strong enough as it's supposed to be a key feature of the app. "Parameters" as well would be too vague.
• "Scan" would be better off at the same place as where the other product search are - on top - instead of a FAB. What would we do on other pages / pages that don't have the product search sliver effect? Good question...
• I'm still not 100% convinced by this bottom navigation bar - or at least I would replace "home" with "product search". And remove "tracks": we have enough questions with the UX and the current features, we cannot afford to overthink the UX adding unknown extra features "just in case"

My raw comments on page 2 (lists):

• I'm not that convinced that the basic end-user will use that many lists, especially with the possible confusion between list, shopping and pantry
• I like the idea of (apparently) being able to scroll right to left in order to see more products without having to go on the list page

My raw comments on page 3 (tracks):

• already commented...

My raw comments on page 4 (profile):

• interesting page - how should we get the user to contribute / earn points

My raw comments on page 5 (fridge):

• OK

My raw comments on page 6 (multi product selection):

• interesting page too: how do we select multiple products, and what can we do with them

I think the key question is - what are the goals of smoothie (especially compared to the current Android/iOS OFF apps)?

1. food search (text search, barcode lookup, fixed lists, ...)
2. personal food ranking
3. personal food lists
4. food suggestions
5. food comparisons
6. more contributions
7. tracks
8. gamification with scores

My own interest as an end-user is for instance on only the first 5 features. Which of course impacts the way I imagine the UX.

[M123-dev]

 I'm not a big fan of the "good morning / breakfast time" message, as it takes space and I don't think the time you use the app matches the time you eat (I'd rather say "using the app" while "preparing my shopping list")

That is understandable and was more of an idea than a real concept, but I still think that a kind of headline would be good. But a bear like the one suggested by @stephanegigandet would be enough.

 I think the "My preferences" label stinks - I know you did not invent it. It sounds like "day/night", "favorite colors" or other options, it's not strong enough as it's supposed to be a key feature of the app. "Parameters" as well would be too vague.

I think we should discuss this problem in another issue and agree on a uniform title and icon for them.

* I'm not that convinced that the basic end-user will use that many lists, especially with the possible confusion between list, shopping and pantry

Yes, that's right

* I like the idea of (apparently) being able to scroll right to left in order to see more products without having to go on the list page

👍🏻

* interesting page - how should we get the user to contribute / earn points

#20 I would first install it passively. Just like on stack overflow, so if you load something you get points later, but we can also build in an active area for active users. For example, checking the extracted data

* interesting page too: how do we select multiple products, and what can we do with them

You said yourself it is smart to orientate yourself on other apps. I think whatsapp/ file explorer would be well suited to interact with individual entries. I would mainly go for delete and to solve the problem with copy and paste, maybe "move" and "copy and move" would fit better.

I think the key question is - what are the goals of smoothie (especially compared to the current Android/iOS OFF apps)?

1. food search (text search, barcode lookup, fixed lists, ...)

2. personal food ranking

3. personal food lists

4. food suggestions

5. food comparisons

6. more contributions

7. tracks

8. gamification with scores

My own interest as an end-user is for instance on only the first 5 features. Which of course impacts the way I imagine the UX.

Yes, I agree with you, some are more in focus then others. For me especially this are the most important ones:

5 (including 1) for a quick comparison in the supermarket.

3 espiecially for what is in my fridge and a shopping List.

and for the future 7, but not for the UX in the app, more so I eat my portion cereals and will transfer it into my fitness app.

 "Scan" would be better off at the same place as where the other product search are - on top - instead of a FAB. What would we do on other pages / pages that don't have the product search sliver effect? Good question...

I don't really care how we install the scan button at the end. It should just always be easily accessible, because it is one of the main functions of the app. Nobody wants to type in a barcode by hand.
However, since the mobile phone screen sizes are increasing, and this already in mid-class devices, the buttons at the top of the screen are difficult to reach.

 I'm still not 100% convinced by this bottom navigation bar - or at least I would replace "home" with "product search". And remove "tracks": we have enough questions with the UX and the current features, we cannot afford to overthink the UX adding unknown extra features "just in case"

Yes, we can leave out track and keep an eye on this feature as an option for the future. How do you imagine Search in the Bottom Navigation bar. Should a separate page be opened for this and if so, what should be shown there if nothing has been typed in yet. I imagine this to be unfavorable.
But I could also make friends with the idea without a navigation bar. I understand many arguments against it. But then it should be at least "adaptable". Take a look at the Samsung Health app. There you can hide parts that you are not interested in (for me, women's health, for example) and sort the displayed ones for yourself.
Hiding is probably not that relevant for us, but sorting would bring a lot more order and clarity to the app.
What do you think of this idea @monsieurtanuki ?

[monsieurtanuki]

@M123-dev Thank you for your review.
Currently I focus more on https://github.com/openfoodfacts/openfoodfacts-dart than on the UI/UX.
That will give more room for UI/UX experimentations.

[M123-dev]

Thank you, I am currently busy myself personally and at school. I'll try a few things in the near future. I'll let you know.