Final mobile carousel

[bdresser]

Designs for the mobile carousel need to be updated to keep in line with the rest of the design system. Illustrations from our contractor will go in the center.

Current WIP in Figma here

[omnat]

Any more work shared from the illustrator @cjeria ?

[bdresser]

dev implementation isssue: https://github.com/MetaMask/metamask-mobile/issues/929

conversation with illustrator in #metamask-illustrator

@omnat @cjeria let's pull this in to next sprint?

[omnat]

Sprint 18 goal: Dev-handoff

[cjeria]

Final illustration provided and incorporated into the 3 screen carousel. See below:

Looking for feedback on:

• Copy
• Illustration size
• Thoughts on the Next and Skip button placement (could make these swipeable?)
• Should we add a back button on the 2nd and 3rd screen?

Note on the transition between screens: the top bar and bottom bar should stay fixed including dot indicators (highlight the correct dot per the page).

cc @omnat @bdresser @rachelcope @danfinlay @brunobar79

Clickable Figma

[bdresser]

Where do you see this fitting in to the larger flow? Does "next" on the last screen take me to an "import" vs. "new wallet" option?

We have a full wizard to step users through the app, so I think the purpose of these illustrations is additional color, context, and detail. I personally prefer the option to "get started" right away, rather than forcing everyone to tap through these three screens as part of onboarding.

[omnat]

Sweet!

• I think we could remove Next and Skip buttons, and make these swipe-able and like a screenshow. And have the 2 action points (Start / Sync-Import) like below already here.

Edit: I see Bobby comment now, my point is similar to that.

• We then replace this screen with the carousel for the first time flow, and we could keep this screen in the flow when user Logs out and 'Go Back' - for the possibility to starting over or importing another wallet

[cjeria]

So I just updated the prototype where you can see how this would fit into the entire onboarding flow which I highly encourage folks to click through. Figma

"Skip" (top right corner) would take the user to the "start exploring" / " Sync" page (the screen Omna posted above).

Re: Removing the next button: my assumption is that not everyone will know to swipe through these screens, so that's why I added a "next" button as affordance.

The last screen's "next" button will drop the user in the "start exploring" / " Sync" page.

There's a lot of research and best practices for mobile onboarding flows online, which I looked at to come up with this suggestion. Totally open to exprimenting here more though.

[omnat]

For my rationale on above suggestion, this common pattern of swipe-able carousel + slideshow & Sign-up or Log-in actions are shown here with 5 examples https://uxplanet.org/5-classic-mobile-onboarding-examples-from-top-apps-of-2018-cdbeebcb2a38

[cjeria]

Cool. In switching from a "next" button to the two main action buttons "start exploring" / " Sync" in the carousel, we lose a bit of the nice real estate we had (4th screen from the left in the above screenshot).

Here's a new iteration: I had to shorten the "Sync or import your wallet" button copy to "sync a wallet" to make it fit in the side-by-side button layout from a previous mockup. Didn't want to loose the terms and condition line so I added that just below the two main action buttons. Any more copy might just make this carousel wayyy too clutterred IMO. WDYT?

[bdresser]

I agree on the vertical real estate. We included the word Sync based on some user feedback from the private beta (https://github.com/MetaMask/Design/issues/73).

We could go with something like Import or Sync ? Or could do a vertical stack but remove the New to MetaMask / Already a MetaMask user? questions? Or could do anything else y'all dream up?

[omnat]

Tried a slightly different layout, copy and illustration sizes. Thoughts?

I am not confident on the Sync or Import. (sync import what?).. The screen we have now in beta gives good context (already a user? etc.).. but all that will crowd the screen..

[cjeria]

Here's another iteration that Ryan help us with that does a really nice job of guiding the users through onboarding while decluttering each screen. User can swipe through to learn more without giving too much away (pique interest) or "Get started" to jump straight into syncing or creating a new wallet. The Get Started page here has a dedicated space to better explain a user's choices (no more "welcome..." and tagline like previous version).

Click through the figma prototype

[bdresser]

carousel looks perfect!

• should the first "Get started" be a primary button, or any reason it's secondary?
• the "Get started" screen (4th screen) feels a little rough
  • perhaps making it consistent with the following screen (full width buttons, left-aligned text, background graphic) could make it feel more a part of the same flow?
  • tons of text on this screen, but if you & content designer think this is best, i'm good

[omnat]

the "Get started" screen (4th screen) feels a little rough

Christian and I had spoken about this, and his judgment was to update the following screen and make that center aligned, like all the previous screens. @cjeria is the plan still to make all center aligned?

The copy on the 'Get started' page is 3 lines per option but I think it addresses the 2 types of users here pretty clearly, so I'd vouch for this.

For dev-handoff, note the breakdown of 1st onboarding wizard screen we have today to the 2 screens shown here - I think this explanation is a great continuation from the carousel, and sets users' expectation for dapp interaction well.

[cjeria]

• should the first "Get started" be a primary button, or any reason it's secondary?

Not 100% sure why Ryan chose the secondary button, but I think it works visually. This style of this secondary button is visually lighter weight than the primary (solid) button. When there's only 1 button on a screen (especially big bold buttons that draw attention to it itself), users tend to tap without putting too much thought to the action. Using this secondary button reduces the visual weight of it while also drawing focus on the illustrations/carousel. "Get started" can also be considered one of two actions on this screen: swipe or get started. So using this button style on this screen seems appropriate to me.

@cjeria is the plan still to make all center aligned?

Yes, making all screens consistent and center-aligned. I think adding the graphic treatment in the bg is also a good call.

The copy for each option feels friendly/human, so I'm good with keeping it as-is. We could also consider adding short labels to each option for eg "Have a wallet?" and "Create a new wallet?", but that, of course, would add more copy (which isn't always a bad thing as long as it's clear what's being asked). See sample below

[omnat]

Next steps:

• review copy order for the Get started screen
• center aligned screen for sync/import screen
• dev-handoff

[bdresser]

@cjeria to link most updated version (with new center-aligned screen) and copy wizards to do the copy :)

[cjeria]

review copy order for the Get started screen

This was referring to the order of the two CTA's on this screen:

I had also suggested a third option (below), but the same question as above remains.

Here's a screenshot of the center aligned sync screen.

cc @bdresser @rachelcope any strong feelings here?

[rachelcope]

@cjeria @bdresser +1 for primary CTA on the top. This seems to be the most common pattern used by other applications for signup and brings immediate focus to the primary call to action

I also made several copy suggestions in Figma for simplifying and making the content more action-oriented