EPIC - Concept for updated app visual design

[corywatilo]

By no means is this a completed, fully fleshed out design, but I've been playing with some ideas and figured they were worth highlighting. Notes below.

Navigation

• We all have wide screens. It's okay to use a little bit of space for navigation, especially if we're stacking most analysis UIs where horizontal real estate was at a premium.
• Nav items are grouped: analysis & platform features, and project & data management

Querying workspace

• Total volume of Pageviews is much easier to read as a sentence, vs Showing Pageview counted by Total count"
• Starting our own library of icons with a little more character
• Buttons don't need chrome (borders) in this context. Better to have visual distinction between the dropdowns and optional buttons to add more new things
• Reduced filter settings to a gear ("Filter out internal and test users", which should probably be on by default)

Results/graph area

• Display options are inside, with content-based options on the left and display options across (which would have tooltips)
• "Unsaved query" becomes a text string of the current query, in this case "Total volume of pageviews". Across is an option to save to dashboard. Save button makes more sense here, since this is the thing you're saving to your dashboard (the visual representation of the query).

[paolodamico]

Thanks for sharing this @corywatilo! I really like the overall aesthetics of this (though they do seem a tad to playful, if that makes sense), but wonder if right now is worth spending time on redoing the UI. That being said, I definitely think it's worth exploring further. Some specific comments.

1. I like the new navigation concept, particularly that we could now consider using a bit more horizontal space. One thing that comes to mind is that I'm afraid this will reduce the discoverability of the different types of analyses.
2. Related to the above, what do we do about dashboards, and particularly pinned dashboards?
3. Personally not a fan of the main blue, feels a bit too "default blue".
4. Not actionable. Love the spacing, feels super clean.
5. Re "Total volume of Pageviews is much easier to read". 100% agree that's easier to read, though we got feedback from pretty much every user we talked to that this ordering was more confusing.
6. "Filter out internal and test users" will probably be gone anyways with the test/live mode that Buddy is introducing. And actually would be useful to see how we would implement that toggle in this design.

[kpthatsme]

Hey @corywatilo did we move away from this horizontal layout purposefully? I think this was a great use of the space. #4479 (comment)

I really think it's important to have chart results and the events / filters in the same fold, I think it's difficult to do that when stacking the elements vertically.

[corywatilo]

I personally greatly prefer the side-by-side layout, but this was changed for certain analysis views at @paolodamico's request due to the concern about long event/actions that take up a lot of horizontal space (and would otherwise wrap).

It's probably worth a nice long exercise once we have a product designer on board who can put a lot more thought into this!

[kpthatsme]

Thanks for that context @corywatilo!

@paolodamico I'd love to hear more about your thought process here and how we can optimize for some of the edge cases you're concerned about. I really feel strongly the right way to move forward is to optimize for the 80% and have these things in the same fold. Would love to think about how we tackle the 20%, maybe we can have a session this sprint to discuss?

[paolodamico]

1. I'd like to ask if we can table active conversation on this for one sprint. I'll talk to @corywatilo tomorrow on Product & Design priorities for next sprint, but I believe there are other more pressing issues that will make a bigger difference today worth focusing on first (e.g. app performance, filtering, ) both on a design and engineering standpoint.

The above being said,
2. Would love to see how this design (above) works with property aggregation (which requires more horizontal space usage) to make sure it works well.
3. I think with this new design we can still have above-the-fold graphs while keeping the horizontal layout. Not strongly opposed (yet) to the vertical layout from #4479 (comment), but it's basically what we already had and the experiment on #4050 seems to suggest the horizontal layout is clearer for users.
4. Definitely keen on having a working session on this during the next sprint cycle (27-2) to optimize this further as suggested @kpthatsme @corywatilo

[kpthatsme]

Been thinking on this some more as well as playing around in other apps – I think most of the pain here would actually be solved by chart legends.

I'm going to spend some time going deeper on this and putting some more thoughts together and will share with you all for feedback during this sprint.

[paolodamico]

Sounds good @kpthatsme! We're also going to be working on #4594 this sprint so your input will be quite useful.

[Twixes]

I think we can close this considering that @clarkus is now heading the app's design and some big improvements have already been implemented.