Add gallery of screens to the daily spending case study page

[GBKS]

Adds an image gallery of the screens in the prototype so they can be more easily analyzed.

[pavlenex]

8e89d04
I like it. Really makes the page pop.

For the context, it's related to this particular part of the page, and here's how it currently looks.

@GBKS Thoughts on making these visuals consistent. I really like when it's slightly colored as in the onboarding page, or is the goal for this to be more of a wireframe/mock

[GBKS]

@pavlenex so @danielnordh created this prototype specifically in this wireframe style. Sometimes you don't want people to focus on design details, but on the overall flow, and this is a good method to get that effect. We could have a group discussion to see what the consensus is, but I think that's beyond this PR.

[danielnordh]

Agree, separate discussion. Let's not hold up this PR.
(I have started playing with using the UI Kit for these case studies, but that is on a different track)

[GBKS]

@danielnordh I copy/pasted the description text of each screen in that the image gallery. Some of them got a bit long. Would you want to revise the copy (and other copy one the page)? If so, this PR or a new one? What do you think of the header?

[pavlenex]

ping @danielnordh ^
@GBKS LGTM, ready for review?

[danielnordh]

The header ads some visual interest. It loaded slowly for me, not sure it's that heavy.
My only thought is that if we add a header on this page, the other case study pages feel quite different.
I would try to add them all in this PR, or make headers separate from the other changes.

[GBKS]

@danielnordh agreed. I'll remove the header from this one and split it out into a second PR that we can iterate on. Not convinced that the header I proposed here is that great.

[GBKS]

For a review, would be fantastic to get eyes on the captions of the newly added prototype screens. They are straight from Figma and I find them very long.

[GBKS]

Tightened up the caption copy. Good to go from my side. Text review would be great.

[danielnordh]

All the caption texts now look good to me.
Some thoughts, that don't necessarily need changes:

• Should the header before the carousel change from 'Design details' to 'Screen wireframes' / 'Wireframe mockups' to make it uber clear these are not detailed designs
• The carousel kind of reads as a continuous flow, which is (almost) true for the first few screens but then not. Not sure how to improve this, and it's a minor point

[GBKS]

@danielnordh good points. I don't like "Design details" either. Better if that carousel has a specific purpose that captures the core experience of the prototype. For example, we could call it "Onboarding sequence", only include those first screens, and add a very short summary in between the header and the carousel. The Figma link can then be the place to see all the screens in the prototype.

[GBKS]

@danielnordh I split up the carousel in two, focusing the first one on the onboarding experience via automatic cloud backup, and the second one on importing a wallet. They have more specific titles and descriptions. Check it.

Looks like we're going to get a little bit of overlap between this page and the upcoming onboarding pages (here and here).

[danielnordh]

I'm happy with this, makes the page more valuable without having to visit the Figma file.
Looks good to go.