Ensure a great mobile experience

Recidiviz / justice-counts-components

A set of React components powering a web app for exploring centralized, standardized metrics on the performance of justice systems across the United States

GNU General Public License v3.0

1 stars 0 forks source link

Ensure a great mobile experience #14

Closed jessex closed 3 years ago

jessex commented 3 years ago

Is your feature request related to a problem? Please describe. Data visualization and exploration can be tricky on mobile, but are important to get right for apps and tools that are available to the general public, as this one will be.

Describe the solution you'd like Ensure that the component works as mocked and described in the PRD on mobile devices.

Describe alternatives you've considered N/A

Additional context We are specifically interested in:

Chrome on Android
Safari on iOS

We should test in Browserstack or other equivalent tools.

Wmaileq commented 3 years ago

I think this issue is no longer the issue, as no mobile mockups present in the Figma and mobile UI was made previously in #18.

jessex commented 3 years ago

Good point. I just double-checked with Product to see if they ever developed mobile-specific mocks. If not, we'll just close this and let final testing determine if any further UI/UX changes are needed. Will follow-up here once I've heard back.

jessex commented 3 years ago

@Wmaileq, just a heads up that I spoke with Product and they do have mobile-specific mocks coming to that PRD soon. If the PRD and mocks haven't been updated by the time you get started on Thursday, then here's a quick note about what is to come in case it's helpful, "The main thing I think we'd still want to fix is the flowchart -- basically making it a single column (P0) and leaving room on the sides for the arrows (P1)." If that's not enough to go by, then I'd wait until the PRD and mocks are updated before getting started.

hobuobi commented 3 years ago

@Wmaileq , I've tagged you in a comment on the document! As Josh mentioned, the major change here is with the flowchart, which should be implemented as a single column with arrows occasionally going out to the sides, as shown below. The header for the section (the current month and time range) are also to be arranged slightly differently.

Additionally, the key insights mobile implementation should change slightly. I've created two options, depending on time/effort: 1) (PREFERRED) The cards are in a side scrolling container; takes up less space.

2) (ALTERNATE) The cards and captions are just stacked on top of each other in a single column.

Note that we have added this (Key Insights) back into the scope for delivery, so we will try to send over data requirements for this soon.