Android App

[denyszayets]

Design Specs: https://xd.adobe.com/view/336d6bf4-d220-4388-a795-4012bab46cee Revision 2.0 2018

• [x] 0.0 Loading Screen
• [x] 1.0 Start
• [x] 2.0 New Wallet
• [x] 2.1 New Wallet (confirm)
• [x] 2.2 New Wallet (2nd confirm)
• [x] 2.3 Starting New Wallet
• [x] 3.0 Recover Wallet
• [x] 3.1 Recovering Animation
• [x] 4.0 Overview Home
• [x] 4.0.1 Menu (needs revision)
• [x] 4.1 Accounts
• [x] 4.1.1 Account Details
• [x] 4.1.2 Alternative Account Details
• [x] 4.2 Send (default)
• [x] 4.2.1 Send (filled)
• [x] 4.2.2 Send (filled, send pressed)
• [x] 4.2.3 Send Completed
• [x] 4.3 Receive
• [x] 4.4 History
• [x] 4.4.0 History Filters
• [x] 4.4.1 Transaction Details
• [x] 4.4.2 Transaction Full Details
• [x] 4.5 Settings
• [x] 4.6 Help
• [x] 5.0. Chain Connected
• [x] 5.1 Fetching Headers
• [x] 5.2 Rescanning Chain
• [x] 6.0 History Alternative
• [x] 6.1 History with filters (alternative)

[denyszayets]

added revisions to 2.0, 2.2, 5.1, 5.2, 5.0

[ta-lind]

On a higher level I see a myriad of issues regarding how unified the common visual elements and logic flows are.

I would recommend dropping the dark/light combo color scheme. This makes things needlessly difficult. There was a specific reasoning using it in Paymetheus as well Decrediton initially, but as things developed further, became obsolete and has been phased out.

Components wise – if this release is intended to use a "Decredified" Material design (w/ Decred colors and type etc), should use the latest pattern libraries from http://material.io and apply the color/type/icons and whatever other common changes for that. If the intention is to use only DCR UI elements, would have to manually refer from Decreditons latest releases. I don’t have an updated component library ready to share yet. Currently it’s in-between, and will likely lead to a lot of inconsistencies if not specified and sticked with.

Regarding colors – should use the latest scheme from the .ai attached. There’s some dated blues and odd greys in there. Also red/green/light blue or yellow don’t work very well on grey tones.

There's logic errors regarding use of color as an indicator of interactions. The blues, reds and greens have too much variation in their meanings (default interactions, cancel/confirm/clear etc; pending/confirmations/statuses etc). A sensible choice for default/key interaction colors is blue; second level or lower hierarchies can be worked out with greys, tonalities or other elements. Would not recommend relying on other colors for interactions, or at least keeping it minimal esp. if they have multiple other meanings. Can lead to number of issues from color blindness to cultural differences. Red should be essentially for warnings and some notifications in a limited manner. Would not mix green with a default interaction.

https://xd.adobe.com/spec/66df1bf8-1112-4c15-ab6e-0c6fe71318f4/#screen/dd04c2d0-9e2b-45fa-8806-8595f19c2f60/3.0%20recover%20wallet The interaction pattern for entering seed keys should certainly be replaced. Will be a painful experience to type 33 words w/o any corrections on a mobile device. Opt. for the interaction pattern used by copay wallet or something similar.

Regarding type – would recommend to drop Inconsolata and just use Source Sans Pro (or introduce Source Code Pro if really needed). Not using that in any new designs. Overall can probably do with a smaller amount of color/size styles and work out the vertical alignments and spacing in a more detailed manner.

decred - colors - rgb.ai.zip

[denyszayets]

This is a first design release of android wallet. Posted a few months back in our (design_ops) channel but never heard back from anyone. All of the components you see here were used from Google Materials https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#

DCR UI Ideal, would be to utilize the same DCR UI elements we have in decrediton. Currently, it's in-between based on what you're saying. Do you have an idea of when a stable release of components will be available? Until then, I agree, it will lead to a lot of inconsistencies.

Colors: definitely, that RGB file you shared will be helpful.

Type: Let's stick to Source Sans Pro only. In some instances experiment with Source Code Pro.

Moving forward: I'll be revising the entire app design with suggested changes, type, colors, and elements. Please keep this topic updated especially if you're adding new visual elements for decrediton. I'll follow style and guidelines of http://material.io/ but utilizing our type, colors and visual elements.

Thanks DZ.

[ta-lind]

I meant the android wallet being in-between sort of vague decred designs and material design framework, as there’s the odd-men-out as described above.

Though I agree that approach of doing a dcr material theme is sound. That is roughly what forum.decred.org ended up as.

To clarify, both visual and interaction design decisions should be more strictly constrained to the material framework (ui components, interaction patterns and general flows and common practices) and keeping true to that as much as possible. As material is flexible enough to easily handle a wallet app design, making a "Decred Material" release can be limited to only applying the relevant Color Scheme, DCR Icons and Source Sans Pro. This way it'll be clear what's what.

Decrediton component library is something for the second half of the year – releases, implementation fixes, fine tunings etc are prioritised atm, so all of the bases would be covered beforehand.

[ta-lind]

Also would be useful to apply the dcr updates on the elements library used (materials clone).

[denyszayets]

agree, thanks for clarification.

[denyszayets]

Sounds like a plan. Focusing on Material Theme/Framework + incorporating DCR color scheme, icons and typography.

@linnutee I think there are a few pages we can get rid off entirely. For example 2.2 Double-Confirm. Thoughts? Looking at the entire prototype do you see any screens that are missing or must be removed to simplify UX? Thanks

[ta-lind]

Simplifing that seems sound, the warning is quite clear. Consider adding a return option in the seed key entry or clarify if "clear" intends to do that.

Otherwise I don't know the details behind this wallet, whether built from scratch or a clone of an existing wallet framework. These add constraints to what's feasible to design in regards of the interactions or general structure. Should generally prefer to sort this out before the visual design.

[denyszayets]

moving forward on this. Thanks for the feedback

[denyszayets]

@linnutee revision 2.0 should be ready soon ;) making good progress.

[denyszayets]

will post rev 2.0 design the end of the week.

[denyszayets]

Revision 2.0 Completed. Feedback is welcome! https://xd.adobe.com/spec/75bfaef5-157c-4d53-6fb2-2a5e989edb7d-038e/

[ta-lind]

1. There's a some inconsistent colors come in from material. Also notably use of #0C1E3E which is obsolete and should be replaced with #091440 in all instances.

2. Navigation, in-app and headers have visual discrepancies, roughly put they're like two different apps atm. Should also look into improving the ergonomics of navigation.

3. Previous feedback about use of colors as indicators for interactions has not been addressed. Read up on the post May 25. There's 3 different colours for key interactions, 3 different colours/styles for cancel, etc. The way green/red are used over titles and amounts will lead to conflicts with different values, as well use of turquoise in context where it may be conflicting with very similar color green.

This may be harder to pick up in static design, but will quickly lead to conflict in actual app when moving around and working with differing values. Instead of reling this much on the use of color, work out hierarchies and feedback with button stylings, form as well the surrounding context.

[ta-lind]

Also please keep track of the previous versions and lists. Overwriting the same post/file makes it difficult.

[denyszayets]

@linnutee thanks for you feedback. Points 1, 3 and last paragraphs are clear. I will also go over you comment from May 25 to revise missed items.

Can you please be a bit more specific about your colors preferences for items like confirm, cancel, next, recover, create new address, send, clear? Would you prefer to completely exclude the use of #41BF53 and apply #2DD8A3 as primary green?

Thanks

[ta-lind]

The main issue around the buttons is consistency in the definitions and hierarchy. Key buttons color can be blue as that doesn't interfere w/ green or orange that's used in other contexts. Secondary can be grey or turquoise. Also:

• Consistency and application around button styling – solids being highest in the hierarchy, text lowest and if anything inbetween.
• Placement – cancel/close shouldn't jump from left to right.

[denyszayets]

Thank you for your feedback. I will have an updated version next week. @kyleFirethought I'd like to integrate those on-boarding slides you've been working on. Can please keep me posted and when they are ready. Thanks

[kyleFirethought]

^ https://drive.google.com/open?id=1_i32tK8No0CptWJVzI2Ha_pEQ-WKiCmi

[denyszayets]

Thank you! I will add some of them as placeholder and pass the entire folder to raedah and his group.

[denyszayets]

Hey guys, here's revision 2.1 for Android app.

1. The use of #0C1E3E was replaced with #091440 as per @linnutee suggestion.
2. Navigation issues. I agree it looks like w have 2 different apps, so I replaced headers on all screen to match. Now we don't have that awkward difference.
3. Revised button colors and sizes based on our guidelines, feedback and google material standards.
4. From my understanding, we will have 4 onboarding screens/animations. @kyleFirethought I added some images as a placeholder and will forward the animation folder to @raedah and his team.
5. @linnutee I also fixed that cancel/close position.

Prototype https://xd.adobe.com/view/336d6bf4-d220-4388-a795-4012bab46cee/?hints=off

Design Specs https://xd.adobe.com/spec/75bfaef5-157c-4d53-6fb2-2a5e989edb7d-038e/

Feedback is welcome! Please let me know if I missed anything or we can adjust something. Thanks

[kyleFirethought]

@denyszayets Ah ok. So just to clarify will there be space for text between the animation slides as on the front it might not be 100% clear to a new user what the animations signify - context is really necessary here. This will also draw parity with decrediton as well. apart from that looking forward to seeing this come together.

[denyszayets]

yes, of course. I was thinking that during each animation, we can have a description at the bottom. As of right now I don't have any text there. We can come up with the appropriate language.

@kyleFirethought I will include the package you sent me with animations, to the final package. So our developers have everything they need. Thanks again.

[denyszayets]

Final Prototype https://xd.adobe.com/view/336d6bf4-d220-4388-a795-4012bab46cee

screenshots2.0.zip

[denyszayets]

@linnutee can we move to the dev stage with this? Thanks

[ta-lind]

Some items need to be worked on further:

1. Unclear how the onboarding slides work. As the animations have no voice-over, there needs to be accompanying copy text, as well a way to navigate.
2. General navigation should be worked on further, as only top-left hamburger + android back button isn't very ergonomic or quick.
3. Full seed key backup entry via re-writing isn’t an optimal interaction, esp. on mobile devices. Tapping and/or partial confirmation would work better – e.g. copay, decrediton. Suggestions would work for restoring a wallet, though not certain if it can be implemented via the keyboard – that's more likely in-app function.
4. Smallest type styles are illegible, e.g. overview details, accounts.
5. The colour matter still relevant under TX details and succesful transaction modal.

[denyszayets]

1. I think we may need to create a simple set of onboarding slides for mobile devices only. Adding an animated version can make things a bit complicated, where on desktop version it makes perfect sense to have them. So, static pages with text and swipe left to go to the next slide should work nicely. What do you think? I have the package @kyleFirethought designed.
2. The top-left hamburger and android back button is relatively simple and easy to remember as it is used in pretty much any other app in the same way. Previous revision 1.0 has the same navigation. I'd recommend to keep it that way at the moment and explore other options in future reviews? I'm open to ideas.
3. I adjusted 3.0 slide to work as a partial confirmation. In this case, you only need to type in 3 random words to complete verification. Dev confirmed that partial confirmation is possible and can be implemented.
4. Overview page(4.0), Accounts (4.1) smallest type increased from 9 to 10. Tested on my device and the change definitely helps. You don't have to squint to read it.
5. In Transaction Details (4.4.1) & Transaction Details (4.4.2) adjusted DCR amount color to be in line with the rest of design and the rest of the copy to #091440. Successful transaction module, can you be a bit more specific on what needs to change?

Please feel free to leave your comment directly on the prototype. It will make it a lot easier to spot them. Prototype: https://xd.adobe.com/view/7173e3d9-42f8-4aea-74c8-020cea55d171-0742/?hints=off Design Specs: https://xd.adobe.com/spec/75bfaef5-157c-4d53-6fb2-2a5e989edb7d-038e/

Thank you.

[ta-lind]

1 Not sure why, these animations are an evolvement of the previous illustrations and work in high-level somewhat regardless of the device. Only one worth leaving out can be staking/governance if that's not included in the mobile wallet. The task is around scaling them accordingly to the mobile layout, same thing with static images.

2 It's not as ergonomic as having a full-screen app and replacing the android menu with a wallet nav.

3 Confirm with the developers that the suggestions can be implemented that way. I think something within the wallet UI will be more realistic.

4 How about two sizes for the cards? Ticket states could be on a same level with the amounts. Also should use the correct ticket states and icons.

5. Green title - "Successful Transaction" doesn't add up with the rest. If there's need to indicate further confirmation, opt in for icon instead of of color.

[raedah]

3. Needs to be in the wallet UI. Autosuggest via the keyboard will be for the OS dictionary, and we want to limit the word choices to just the seed words.

Other things I noticed:

• Page 11, 12 - (copy on click) text should read (copy on tap) for mobile
• There is no need for an unselected account state. The default account would be the default selection.
• Title bar says Receive, but the header following is Sending Decred ?
• Account selector at the top is also just labeled To: , could be clearer as Account.
• Page 15, Needs a Received option. Also not clear if the options are ordered. I would put Sent and Received at the top. Most of the voting based options will not be being used on mobile. Not clear there is a use case for them at all currently so they could be removed from the menu and added later if a use case arises.
• page 17, Transaction Details. I see Status 45 Confirmations, as well as Confirmations 644. That needs to be reconciled.
• All dcr amounts need the DCR suffix. The upper input is currently showing an account label, the lower outputs are showing just a txid. The outputs should be an address, not a txid. The txid is alread listed above the inputs and outputs. As well, the Outputs can have an account name associated with them, such as My Account, or -external- if its not our account. Can also be -change-. These should be styled in a way that distinguishes them being special cases rather then account names. The Inputs can show the Previous Outpoint, Addresses, Block, similiar to dcrdata https://dcrdata.org/tx/a059ce9f0f1ace08713fc1708ce256fe6a08703a1d95c739715bd93c3e962491 I would like a count of the number of inputs and outputs at the top of each section so you know the number of items before expanding it.
• page 25, send screen.. is DCR a button? needs to toggle currency choices. example USD. By default currency conversion is disabled so the button is locked. When the user enables currency conversion in the settings they can tap the currency suffix button to convert the amount entered. At the moment in the alpha build, this also adds two additional text rows for Exchange Currency and Exchange Rate.
• error msgs are displayed on this page if the amount entered is not valid, address entered is not valid. Could use another view for the error styling.
• Max is a button and could be styled, or an example given for the toggled on case. Could also visually indicate on the amount input box that the amount is locked when the max button is toggled on.

[denyszayets]

1. No problem. I will pass final animation package to devs so they can implement them. On this prototype, I will keep placeholders only.

2. Base on my conversation with @macsleven sounds like we can add footer navigation, but we can't remove standard navigation. Some new phone models allow you to do so, but older once don't. @raedah what do you think about this? Can footer navigation can be implemented or it's an overkill?

3. @macsleven confirmed that 3 seed words can be used to confirm phrase.

4. @linnutee be more specific about the screen you're referring too. Either use a page number or title. Screenshots are always helpful.

5. I will revise that page and add an icon for the confirmed transaction.

@linnutee can you please attach that yellow '%' icon you used in the new decrediton release.

@raedah I will go over your comment shortly. Thank you!

[denyszayets]

@raedah I went over your comments and feedback. Everything makes sense and is clear. I'll go over the app and make those changes and enhancements. Let's aim at the end of this week/weekend for the final review. Thank you!

[ta-lind]

4 is the continuation of last two comments – there's too many type sizes for each tx/ticket in Overview page (7)

fee.svg.zip

[denyszayets]

Revision 2.5 Completed

Hello @raedah and macsleven! Final design and files attached below:

XD File android-app-design-v2.5.xd.zip

Design Specs: https://xd.adobe.com/spec/08bd90ab-fc58-4f47-5423-569db1e94887-7e8c/

Onboarding slides & animations: decrediton.-.ui.v015.-.onboarding.updates.zip

Intro Application https://d.pr/f/CJElq7

Big thank you for Raedah's group valuable dev feedback and Design team's feedback!