Redesign Two Tutorial Dialogs

[jonfroehlich]

I find both of these tutorial screens super busy and hard to read/understand (especially the second one). I would like a much cleaner, simpler design for both.

1. 

2. 

If someone works on this, please focus on the latter dialog first as its the most problematic currently.

One idea for 1. is rather than have the white arrows pointing at the problem, instead, have an animated gif showing a user labeling those problems (so shows a cursor dropping appropriate labels on each). This could be a possible @chishankar or @sbower213 task (given that they have been doing some UI redesigns for us already)

[sbower213]

Do we have the original images used in these dialogs? I can't find them in the git repo. While I can probably use the patch tool to get rid of the arrows, it would be easier and cleaner if I had access to the original images without arrows.

[jonfroehlich]

Not sure. :(

However, it's not like those images are perfect anyway.

You can view more examples here: https://www.dropbox.com/sh/bihfogrg7mf4c9k/AAAqRJTme7sNgnebc3LLWxu7a?dl=0

The screen recording tool I used for this is Camtasia: https://www.techsmith.com/video-editor.html.

You could clip and edit some of these into animated gifs. The key here, though, is that we want glanceable understandability. That is, we should be highlighting exemplar cases that are super easy to digest since the user is still learning what we are talking about.

Also, I worry that a simple update to these two dialogs is insufficient and that they should be completely redesigned (there is a phenomenon of design fixation where the team gets focused on trying to improve a "bad" idea rather than starting over and coming up with a completely different approach).

Finally, whatever approach you take, you should come up with lightweight mocks first to get feedback and approval before investing time/energy into higher-fidelity designs. :)