Closed ta-lind closed 4 years ago
ta-lind
commented
4 years ago @morphymore not sure how this is going, but perhaps you could share the progress of the works here for archiving and close this issue as it's a quite old one now. Also feel free to break up any current or follow-up work into an updated issue to keep track of.
morphymore
commented
4 years ago The new design is completed as well as implementation, and should appear in the next release. Kudos to all the raedahgroups devs 🎉
I'm currently working on some missing screens, and preparing for the coming features (e.g. ticket buying, vsp config, proposal viewing, etc.).
Simple app structure
Overview
Balance
Recent transactions
Wallet status
Transactions
Wallets
Accounts
More
Settings
Security tools
Help
About
Debug
Send
ReceiveScreenshots
Preview Android: https://sketch.cloud/s/epQej iOS: https://sketch.cloud/s/LWO45
Specs We use Material Gallery for specs. Simply use a google account to request to view. Android: https://gallery.io/projects/MCHbtQVoQ2HCZZTQVworZ4Kv iOS: https://gallery.io/projects/MCHbtQVoQ2HCZXGcfotOfnw9
Icons Android (.svg): https://drive.google.com/drive/folders/1wUWTyXlrw285N92edJRz2zkXTKfJTkcn?usp=sharing iOS (.pdf): https://drive.google.com/drive/folders/1wW5UJwFn2JmOTVOYapxMjF08ilLt6VWR?usp=sharing
ta-lind
commented
4 years ago Nice work!
Assigned for @morphymore, also ref. to @raedah.
Brief The design tasks include ironing out critical interaction issues and a visual design overhaul as well design support/supervision on implementation. Goal is to reach a well functional and visually solid release. That should then serve as a basis to further refine the experience on (rather than fighting with inconsistencies or quality issues).
The visual design should be based in material design framework.This way the app stays true to the native os. Also working with an established design framework will be quick and practical. The produced design should be DCR identity themed. This is done by introducing the correct colorscheme, iconography and typography. Review various brand expressions on material design: https://material.io/design/material-studies/# https://material.io/articles/material-partner-studies.html#01
Tasks
Start by reviewing and scoping the current views of the app. As a result, generate a worklist of app structure and all views to be addressed. Include notes on the interaction issues and any specific needs (e.g new icons/motion).
Top interaction issue to tackle is the wallet setup phase of user onboarding. Both blockchain wallet and bitpay have set decent benchmarks on making this a reasonably smooth experience. Review both for takeaways: https://play.google.com/store/apps/details?id=piuk.blockchain.android https://play.google.com/store/apps/details?id=com.bitpay.wallet
To consider: communicating the importance of sequence, re-entry interaction, visual effects on layout, type sizes and repetitions (e.g. word order: all, some or single word at a time), possibility to re-confirm, possibility to find and fix mistakes. A rough outline of both new and existing wallet flows should be prototyped out with lo-fi wireframes. This way any higher level problems can be solved through quick iterations.
Visual design should cover all key views and relevant states or element variants. All of the designed views should be individually posted as issues to /dcrandroid and include preview, practical specs and any comments or notes to be aware of (e.g. refer to /decrediton implementation issues). Please also establish a reviewing process with the developer(s) working on implementation. MD customization should be limited only to introducing the DCR color scheme, typography and iconography. For motion design pieces refer to existing MD assets (found in this repo) and refer to @kyleFirethought and new icons @koosake.
As a secondary deliverable, a UI component library will be helpful for implementation as well creates a possibility to apply material design to other DCR outputs if found needed.
Keep workflow in AdobeXD, Figma or Sketch+Zeplin (https://material.io/tools/theme-editor/).
This repo and issue is to be used for design development, feedback and archiving.