[Design] Redesign the flag content workflow

[setch-l]

Overview On the ipad we've had trouble getting the 2nd screen of the flag content workflow to appear. After investigating, Josh discovered that our approach of using sheets as a wizard does not work with Apple's intended use for sheets. Instead, Apple would like the workflow to remain in a single sheet a la Apple Maps. See this ticket for additional details: https://github.com/planetary-social/nos/issues/1145

Design deliverables:

• Wireframe a new workflow in partership with Josh so it meets Apple capabilities -- include the the content reporting options, as well as the ability to tag publicly or send to nos.
• Share w/ Linda async
• Create UI designs for the new workflow

[Chardot]

I designed an alternative Flag Content flow based on the Apple Maps Report flow that Josh investigated. Instead of a wizard that spans across multiple screens, this flow is made of multiple sections that unfold inside the same form as the user selects the desired options. The submit button [Send] only becomes available at the top right corner of the full-screen sheet when the user selected all necessary options.

Here's an overview of the flow:

You can find this design on Figma: https://www.figma.com/design/s0qf4VmyQygydP8MIQazZc/Nos?node-id=8299-6805&t=RDmKbsDJwCiJJyAU-1

@joshuatbrown let me know what you think from an engineering perspective. I tried to replicate the same flow without using any custom UI elements.

[joshuatbrown]

@Chardot This is looking awesome! I love the single sheet for flagging and how new elements appear after you select a category. I'm a little concerned about showing a new sheet after the user hits Send since we had trouble before with hiding then showing new sheets. I wonder if we could just show the confirmation in the same sheet after the user hits Send. We could make it work the way Maps works on iOS when you Report an Issue. You can see screen shots of that process right at the top of this article. Maps doesn't show a new sheet -- it just pushes the "Thanks" screen from right to left over the "Report an Issue" one and shows the Done button in the upper left. I think that might be the simplest approach for us to implement on the engineering side.

[Chardot]

@Chardot This is looking awesome! I love the single sheet for flagging and how new elements appear after you select a category. I'm a little concerned about showing a new sheet after the user hits Send since we had trouble before with hiding then showing new sheets. I wonder if we could just show the confirmation in the same sheet after the user hits Send. We could make it work the way Maps works on iOS when you Report an Issue. You can see screen shots of that process right at the top of this article. Maps doesn't show a new sheet -- it just pushes the "Thanks" screen from right to left over the "Report an Issue" one and shows the Done button in the upper left. I think that might be the simplest approach for us to implement on the engineering side.

@joshuatbrown I updated the designs with the confirmation message appearing centered in the same full-screen sheet:

Is a good representation of what you were proposing?

[joshuatbrown]

@Chardot that looks awesome!

[Chardot]

I applied our styles to the new user flow. Here's how it looks:

After chatting with @joshuatbrown I understood that I could use some custom styles beyond what native iOS components provide for this flow. @joshuatbrown let me know if you see anything that would complicate the implementation of this screen.

Here's a link to these designs on Figma.

[setch-l]

@Chardot -

Overall looks good. I made some comments about the copy. Namely that we should use "tag" instead of "flag".

In addition, this is the content moderation workflow. There is a completely separate user moderation workflow with different tags that can be applied. I think that should also be documented in Figma as well as we've had a lot of confusion about the overlays and the copy on the overlays.

[joshuatbrown]

@Chardot @setch-l my main concern here is with the custom dots that'll create some additional effort for the developer, but I hope it won't be too much. If it turns out to be lots of additional work, I'd suggest that the developer just use the standard checkmark to indicate which item is selected. My recommendation would be that we try this out and see how it goes, and fall back to the checkmark selection only if this is too much work.

[setch-l]

@Chardot - Before we implement the custom dots - please look through the UI and identify other places where these could be used. I know we have checkmarks in the relay list, but those are switching to toggles. Is there another pattern we have in the app besides check marks and toggles that could work?

[Chardot]

@Chardot @setch-l my main concern here is with the custom dots that'll create some additional effort for the developer, but I hope it won't be too much. If it turns out to be lots of additional work, I'd suggest that the developer just use the standard checkmark to indicate which item is selected. My recommendation would be that we try this out and see how it goes, and fall back to the checkmark selection only if this is too much work.

@joshuatbrown @setch-l We already use the custom radio buttons in the UNS universal name registration flow. I just improved the appearance of the radio button, by removing the border and changing the background color, but the component is there already.

Here's a screenshot: