Final Dapp Homepage

[bdresser]

Feature brief is here

Dev issue & background discussion https://github.com/MetaMask/MetaMask/issues/539

[omnat]

Insight from private beta & onboarding wizard (what makes you come back to Metamask and use it continually?)

dapp browser is key for driving usage!

• If there are dapps people go back to again
 and again (like Augur, Uniswap), they use MM. If there's no app they see interesting for day2day, then its hard to keep engaged with the browser
• Selecting featured apps crucial as in general dapps aren’t well known, and provides a great starting point to explore for new and experienced users.
• Questions the new users had looking at the featured dapp was; what does this app provide, is it useful to me? An idea would be to provide basic info about the dapps to give an overview to the users like category, popularity, value prop.

easier token management

• Users expect to be able to view all assets they own in wallet, 
and send it around. If we can make token management easier and fun to interact with dapps, this is another point of engagement.

[bdresser]

Apple doesn't like the "native app store experience" -- but as long as it's a webpage we should be fine.

[omnat]

From design sync:

• Omna to make it visual and setup a design jam with christian bobby on this later in the sprint
• Would we consider doing this for desktop too? (responsive design aspect)
• List of featured dapps: @cjeria has ideas inspiration (from Robinhood) about having fun interactive education nuggets through this

[bdresser]

on implementation side - could even store a copy of the page so it doesn't have to actually load when the user hits it

[bdresser]

next steps: add visuals to design brief and @omnat jam with @cjeria

[omnat]

quick form to see if these dapp list categories seem understandable by crypto-new people https://docs.google.com/forms/d/13N_1xDdiEkHeGXoaGKrvBIYnaXJWrHyTqud8ZZDHdFI/edit

[bdresser]

Mural here

[bdresser]

https://dap.ps/

[bdresser]

For when we actually have to select dapps, here are the top tx initators from Matomo:

Rinkeby

Ropsten

Mainnet

[cjeria]

Prototype https://www.figma.com/proto/ZjvqFYvSwB90oC81N0PMHjE1/Mobile-Browser?node-id=44%3A439&viewport=43%2C831%2C1.234328031539917&scaling=scale-down

[bdresser]

Looks solid @cjeria!

• What does "take a tour" do? The user has already done the onboarding wizard, yeah?
• What stage of wireframe/final mockup is this? Wondering if we will have enough space to communicate "featured dapps" or "favorites" on those small tiles while also making them visually interesting? Or what text treatment are you imagining?
• maybe on the Acquire Crypto list we could include a link to the request flow as well?

[cjeria]

Here's an updated iteration of the mobile browser per all the feedback received on Figma.

• Strong consideration for adding a bottom bar in the browser for Android (for general consistency between platforms)
• Floating native top nav buttons with a background image (web page) loaded behind it. Might be tricky to make happen.
• Discuss feasibility for customize experience and play with test eth options
• Background image comment from Bruno "I think the image might look weird to a lot of users because of the lack of context: The video is not live." It's a placeholder for now and not even sure if we would even legally allowed to use this. We should use a graphic motif that the illustrator creates.

Feedback welcome!

[brunobar79]

• Not a big fan of the Play with Fake ETH. Fake is a negative word IMO and even if we change the copy I'm not sure if it's possible for users to have a positive experience out of the testnets today.

• Customize experience might be a tricky one to do (not sure what do you have in mind), and could find a less relevant place under settings.

• The 2nd half of the page has a lot of black & white compared to the top & bottom. I think some colored icons might boost it a lot.

[estebanmino]

I guess this is because this is not a high fidelity design but on the second level screens (ex. my favorites) the view has 2 navigation bars, the browser bar and the specific section bar, I couldn't find any other part of the app where we do that.

[bdresser]

We should use a graphic motif that the illustrator creates.

@cjeria should we add this to his scope of work, or are you anticipating being able to re-use one of the other illustrations we've requested? pointing out that the onboarading screen designs will be tight by EOM so we may want to have another placeholder that's not blocked on his timeline.

Not a big fan of the Play with Fake ETH

Agree, how bout "Request some test ETH" and for public beta we can link out to the faucet and highlight some dapps on test networks?

@cjeria what are you thinking for the "Customize Experience" button? If this is a valuable path, it could be a project for V1, but for this stage we may want something that doesn't require a new flow / more design & dev effort. Could link to the wallet? or maybe have the "Give Feedback" button front and center since we really want to be gathering insights from this Beta?

[brunobar79]

@bdresser I agree with everything you said.

Let’s just make sure there are some dapps on test networks that are worth it (Personally I don’t know any)

[cjeria]

should we add this to his scope of work, or are you anticipating being able to re-use one of the other illustrations we've requested?

Aiming to reuse a graphic motif the illustrator creates however, I can find us a different stock placeholder or create one in the meantime.

what are you thinking for the "Customize Experience" button?

@omnat and I had discussed designing a survey-like experience where we ask the user a series of questions about their interests and we in return customize the landing page as a result. So for e.g. if the user answers in a way that indicates they like games, we suggest game dapps. That was the basic idea, but it may be a bit ambitious for the time being. We should revisit this later.

@bdresser

[bdresser]

love that idea @cjeria! but think it'd be best as part of V1. would be a lot to add to the milestone at this point.

for public beta, can we replace with one of the ideas above (wallet, or "give feedback"), or something else, or should we remove entirely?

[estebanmino]

About Strong consideration for adding a bottom bar in the browser for Android (for general consistency between platforms): I already mentioned this through slack but I just got a "it all makes sense now" moment, I guess other Android browsers don't have a bottom bar because Android has a bottom bar already built in the device and it looks like this

Something similar happens with cake browser

Just wanted to mention it since I didn't see that before because in latest Android versions you can remove it.

[omnat]

From design sync:

Next things to figure out in this one:

• Customize experience: push it to v1
• Play with fake ETH feature: push it to later
• Go back to 2 tabs version: with explore dapps categorized and favorites remain same
• List of dapps per category
• Update browser nav for Android to be consistent with iOS

[bdresser]

Play with fake ETH feature: push it to later

I think this is easy to include - we can just link to the faucet, no?

What about a "give feedback" link?

[bdresser]

Newest prototype from Christian here

[bdresser]

bobby to come up with list of dapps for each category!

[omnat]

Sorry for bringing these browser nav related stuff late. I didn't have enough reason to back this up earlier..

• When user is in a dapp, to go back to the browser, I observed people go to menu, and tap browser. Fumbling seems like a common experience (I've seen/heard from ~4 users, & bobby, myself). Tabs isn't the first natural thought. Can we have an easier navigation options for going to dapp homepage from a dapp site? Not sure how... a 'Home' button on nav bar? @cjeria What would be a good solution?

• On the browser homepage, tapping on 'Browser - network' opens network switcher, while in a dapp, it opens URL. Could we also show metamask dapps URL when on Metamask Browser homepage? Network I expect to be a secondary action for majority users.

1st one more important than the 2nd, if we had to pick...

[cjeria]

Great suggestions @omnat. I also stumble with getting back home so I think having a button on the bottom bar is a good call.

Also, I agree that switching networks should be made secondary action, although perhaps it also lives somewhere in the side nav drawer for quick access?

[brunobar79]

Agree about point number 2.

@cjeria @omnat Thought exercise: Open your most used mobile browser (Chrome / Safari or whatever you use). See how many TABS open do you have open...

In my own research everyone I asked about that (around 8 people) they NEVER go back to the homepage to "start again". They either change the current url or they just open a new tab, which is by default opened in the "dapp homepage", that's why I disagree with point number 1 .

• We currently have 3 ways of going back to the homepage: a) Press back until you get there b) Options => Home c) Open a new tab

To me that looks like enough options

@estebanmino @ibrahimtaveras00 Please share your thoughts if you want.

I guess the challenge for me is to understand why do people need to "go back to home" to continue using the app.

Note: I am an iOS user and I'm probably very biased so just take this as simple feedback.

RE: Android, we decided to introduce the bottom bar too so that would make my point "more valid" then, but we have enough room there if you wanna add a "house" icon like other browsers have on Android (brave)

[ibrahimtaveras00]

I'm an Android user, and in my normal day to day usage, I hardly ever go to home page (mainly use Chrome, and maybe 10% of time use Samsung native browser and Firefox here and there).

If I did go to homepage, it's most likely to see the news feed on Chrome, but to do this, I always just open a new tab which is just 2 taps away similar to how we currently have it in our browser.

FYI I have so many tabs open on chrome it doesn't even show the number anymore lol:

I wouldn't totally be against putting a home button on the nav bar (I know Chrome and Samsung do this on Android) and maybe it's "comfortable" for other users since they would be use to it. I guess one way of thinking about it is that if more users are unfamiliar with DApps they most likely would go back to homepage often to see what's there and try other DApps out.

So I'm not totally for or against having a sticky home button on the nav bar (I'm perfectly fine with two taps as that's how I've been doing it for the longest).

In terms of being cluttered, look how many things are on the bottom nav bar on Samsungs native browser:

[bdresser]

I guess the challenge for me is to understand why do people need to "go back to home" to continue using the app.

Since we're a dapp browser, and because dapps & ethereum are in their infancy, I think we have a higher obligation to help users understand what they can do with the app. A huge part of that is achieved through the home screen.

I also think the fact that it's come up in numerous interviews & repeated anecdotal feedback means that people do want to go back to the home screen, regardless of how you or I use other (non-dapp) browsers.

I'm in favor! On iOS I could see it going right next to the search icon (or even replacing the search icon, since you can also focus on the nav by tapping the URL up top - although maybe this isn't obvious enough to warrant removing the icon)

[omnat]

Super valid points Bruno, Ibrahim on how people use other browsers. With Chrome for instance, homepage is mainly a search bar, which people can access without going to homepage.

I guess the challenge for me is to understand why do people need to "go back to home" to continue using the app.

Reiterating Bobby, Ibrahim points.. We have a different case of browser here. Here, our homepage is helping people learn what are their options. Faster way to access apps they've seen previously in featured or favorited (which could be made easier to do too - but that's a different topic).

I had hoped this feedback would stop after tabs implementation, but it's continued + observing people stumble multiple times is a clearer sign than actual verbal feedback. So, also in favor of having a home button..

[cjeria]

Also, what do you think about adding descriptions to the "Featured dapps" side scrolling list? We could reuse the dapp list item component, just make it less wide.

Like so:

[bdresser]

@cjeria i prefer the smaller tile -- the description on each of those will be so short that it would be nearly useless, and greeting the user with a bunch of half-complete sentences might be a little messy. also think it looks simpler overall with the square icons

[cjeria]

Okidoke then, let's leave it as is for now.

[omnat]

Dev-handoff done. Ongoing Design QA, will focus on it next sprint a lot before public beta