[Tree Details - Design] Mobile Tree Default Preview

[ri0nardo]

Forgot to design the mobile version of the tree details information section. I wanted to use the general section of the tree section with the tree species, section tabs, and adopt buttons as a preview.

I wanted to just recycle what I previously designed, but also wanted to explore other options to make the tabs be obvious that they are tabs. See below my iterations.

Here is the initial design. See #493 for sticky ticket.

[ri0nardo]

Started redesigning the top section of the tree details naming and section tabs. I always had an issue with the section tabs not be obvious to users. My solution was to make them be buttons so users could swipe to select other section tabs. From that I went with an outline and colored button that appears as a secondary button/badge.

From my findings the adopt and liked button were not obvious and wanted to give them a name tag along with an outline to make it a button. What are your thoughts on this redesign of the buttons? Also what do you think of a preview for trees you select on the screen? The idea is that a user would swipe up or press a section tab to pull up the trees full details. I see this as a benefit for the user experience since you aren't force into the tree details on mobile. You can ease yourself in rather than constantly going back to the map to find a different tree. @zoobot

@mwpark2014 would this still work in the scope for the tree details container epic #433 ?

[ri0nardo]

Decided to make the liked and adopt buttons into radio buttons which will make it more fun. Also it will make the two actions more related to one another.

I am now thinking if we need to make the adopt button disabled or locked when someone already adopted a tree.

[ri0nardo]

Increased the size of the section tabs to be larger and easier to see. Also removed the nickname button since that wont be implemented anytime soon.

[mwpark2014]

@mwpark2014 would this still work in the scope for the tree details container epic #433 ?

This looks like it's replacing the tabs in the mock? We should absolutely include it in #433. We don't have any tabs right now, right? We shouldn't spend time on implementing tabs in the near-future if we're going to be using buttons instead in the end. Will these changes reach desktop?

Probably would require redoing #483

[ri0nardo]

This looks like it's replacing the tabs in the mock? We should absolutely include it in #433. We don't have any tabs right now, right? We shouldn't spend time on implementing tabs in the near-future if we're going to be using buttons instead in the end. Will these changes reach desktop?

Probably would require redoing #483

The idea was that you would click the name to get to the specific section, but I always thought it wasn't as clear for people. That's the reason for the change for the tabs.
But this is a new additional step for viewing trees on mobile due to mobile not be optimized for a good user experience. So you would click a tree and this preview would appear with enough info for a person to either be interested or move on, and view the tree location at the same time.
This also changes the like and adopt buttons to now be radio buttons which I like more than what I previously did (not having labels was confusing for even me). The idea is similar to youtubes like system (but youtube removed the dislike number)

I would have to redo the desktop version, but its really just a copy and paste.

[mwpark2014]

Ahh, thanks for clarifying. I missed the whole point of this ticket, but I think I'm on the same page now.

Hmm, I think this could be added to #433, but it would need to be in a separate milestone. I don't think it would be too much work (hopefully, it can reuse the same base UI components), but I would want to prioritize it last compared to the main tree details component.

I get why this is necessary for mobile - the tree details dialog takes up the entire screen! Previews would be very nice. I'd be very interested in what it'd look like in desktop or if it's even necessary for desktop tbh

[ri0nardo]

I see this as being more impactful, but implementation wise it would come after building out the the tree details. The current ux does not work on mobile. This only work optimally for desktop since you have enough screen real estate to have both the tree details and the map.
The whole idea is to see the map and what tree you chose before you look more into the tree if you are interested.

[ri0nardo]

Added the address to the bottom sticky section. Will be more impactful in this container.

[ri0nardo]

The first implementation will have no tabs as that wont be necessary for the first feature set.