search

austintgriffith / burner-wallet

🔥👛Burner Wallet to move crypto quickly in a web browser. Sweep to cold storage when you get home. 🏠👨🏻‍🚒
https://xdai.io
MIT License
609 stars 198 forks source link

Style and Design #5

Closed austintgriffith closed 5 years ago

austintgriffith commented 5 years ago

The current design/UI is very ugly. It was a quick proof-of-concept. Please create and implement a gorgeous and intuitive design.

We want it to look great and work intuitively even in different languages.

This is a big task and will take a lot of thought and style.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 100.0 DAI (100.0 USD @ $1.0/DAI) attached to it.

shailysangwan commented 5 years ago

Hi, I have applied for this issue on Gitcoin but it seems like the corresponding comment from @gitcoinbot hasn't showed up here yet.

I'm planning on these lines - Since the application is built in react, we can consider using a responsive component library like Material UI or Blueprint JS. I'll prepare a mockup in one of those, discuss improvements with @austintgriffith and complete the design accordingly.

joshpitzalis commented 5 years ago

@shailysangwan if you need any help, let me know. I was considering taking this on but it looks like you're on it.

There is no need to use a component library. There are so few components you can write them custom.

I found 2 nice references that I thought would be good for the project https://dribbble.com/shots/4134552-Masternode-Crypto-Coin-Wallet-Redesign https://dribbble.com/shots/4134609-Phore-Crypto-Coin-Wallet-Preview

...and potentially this logo to replace the emoji https://thenounproject.com/term/flame/344414/

Just thoughts.

Stuff I found when I was considering taking it on.

Also, I think this is a great project to use vh units. So that you can get the whole app in a single screen, no scrolling. The fun bit would be adapting the screen to mobile so there is also no scroll on mobile.

Anyway best of luck with it.

I had a look at the source and its looks like you have quite the refactor ahead of you.

austintgriffith commented 5 years ago

Thanks for the interest guys! I would love to see some mockups for how we can make this app look stunning. Please hit me up here, or on twitter/telegram @austingriffith with any questions.

If we have two mockups going in parallel I would be happy to reward that optionality with $25 DAI to the one we don't select just for a thank you for your efforts. It's important that this design be incredibly intuitive even for non-english speakers.

Also, yes, the code is all in one big App.js file right now because I wrote most of it in the airport on the way to devcon :) There is another bounty to refactor it and I'm confident it will be solid soon.

With that in mind, ideally, the designer who creates the mockup can also implement it into the React code. Thanks guys! Reach out to me on twitter/telegram and let's talk more!

willsputra commented 5 years ago

@austintgriffith I love the concept! Excited to see this being worked on ❤️

Just wanted to throw a couple of possible user questions worth thinking about regarding UX:

  1. Can I only send DAI to the address? Can I send ETH? What happens if I send ETH?
  2. Since 'Burn Private Key' is such a 'destructive' button, we might want to put a bit more description for the users on what the button actually does. It might also be a good idea to add a second confirmation step ('Are you sure you want to burn your private key? Your wallet will be gone blah blah' [Yes] [Cancel]) to prevent users from accidentally tapping on the button.

All the best to whoever's doing the design 🙂

joshpitzalis commented 5 years ago

Didn't realise design and implementation were two separate bounties. The bounty description made it sound like the same gig. The comment above makes it sound like its two different jobs. I'ma little confused. Either way here is a mock up of what I was thinking.

xdai

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 3 months ago. Please review their action plans below:

1) shailysangwan has started work.

Since the application is built in react, we can use a component library like Material UI or Blueprint JS. I'll create a mockup using one of these, discuss improvements with the mentor and complete the design accordingly.

Learn more on the Gitcoin Issue Details page.

2) figure8labs has started work.

I can do either or both design and implementation (or just assist those who are already on it). I'll post a couple ideas on the github issue.

Learn more on the Gitcoin Issue Details page.

3) starkblaze01 has started work.

I can make components responsive and user Interactive using react-strap.

Learn more on the Gitcoin Issue Details page.

4) mattybgits has started work.

Can provide UX/UI designs.

Goal is to produce an end to end InVision prototype that covers the existing flows of the current application and adds a few additional things from the issue log.

Will also look into creating definitions / descriptions of key functions that can be easily translated.

Learn more on the Gitcoin Issue Details page.

5) seichris has started work.

My goal is to come up with a self-explanatory design. The wallet should guide a user who is new to crypto through the whole process needed to pay in crypto.

Learn more on the Gitcoin Issue Details page.

figure8labs commented 5 years ago

I'd like to throw my hat in the ring if I can be of use! I've been looking for a place to get started on this project. If it's getting too crowded of course I'll find something else. I also don't mind just brainstorming on design ideas. I'll post something later : )

joshpitzalis commented 5 years ago

@austintgriffith I'm guessing zero feedback on my initial sketch means you don't like it. Do I still get the 25 DAI for not being selected like you said?

austintgriffith commented 5 years ago

Oh no! Sorry! Everything is all good. I've been staying away from Git for the weekend :) I like the design but I'd like to see more too. I'm happy to send 25 USD for your efforts! One thing to keep in mind is this is a mobile first app. We should design it to look best on a phone and then expand it out to Desktop use.

joshpitzalis commented 5 years ago

Thanks @austintgriffith my address is 0xD9b74f73d933Fde459766f74400971B29B90c9d2

Here is a mobile example of the same:

mobile

The plan is to adjust the QR code so that that screen always equals the height of the screen.

The UI is a little longer because it includes the alert, which would temporarily push the screen down while active.

I'll stay in the loop incase you want me to build this out. If I do end up writing this out, I'll have to take the refactoring gig as well because it would be super hard to do one without the other.

You have a hoard of if/else statements. State machines are particularly good for situations like this.

If i do end up working on this, how do you feel about using a finite state machine to handle react state for the refactor? I'd probably use xState https://github.com/davidkpiano/xstate or react-automata https://github.com/MicheleBertoli/react-automata#readme. I don't have to, it's just a really good fit for this scenario.

Have you ever worked with state charts or would you prefer I don't add the extra library?

If you have no idea what I'm talking about this is the best intro to statecharts I've found https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ A little long but there's a talk of the same here https://www.youtube.com/watch?time_continue=1264&v=VU1NKX6Qkxc

If you don't already use them, I think you'll enjoy statecharts, the approach is very similar to the array mechanism you're currently using, just a little more robust.

austintgriffith commented 5 years ago

Sorry for the long delay over the weekend. I've approved multiple designers and I'd like to get multiple designs pitched to this thread. There are new funders joining the project and it is very important that the product be both beautiful and intuitive. Having the optionality behind different designs will enable this. We will try to reward everyone accordingly for their work!

gitcoinbot commented 5 years ago

💰 A crowdfund contribution worth 50.00000 DAI (50.0 USD @ $1.0/DAI) has been attached to this funded issue from @mikemcdonald.💰

Want to chip in also? Add your own contribution here.

gitcoinbot commented 5 years ago

💰 A crowdfund contribution worth 100.00000 DAI (100.0 USD @ $1.0/DAI) has been attached to this funded issue from @mkosowsk.💰

Want to chip in also? Add your own contribution here.

mkosowsk commented 5 years ago

100 DAI from the ECF Web 3.0 Infrastructure Fund! Looking forward to the results :)

gitcoinbot commented 5 years ago

💰 A crowdfund contribution worth 100.00000 DAI (100.0 USD @ $1.0/DAI) has been attached to this funded issue from @.💰

Want to chip in also? Add your own contribution here.

gitcoinbot commented 5 years ago

💰 A crowdfund contribution worth 0.48000 ETH (102.47 USD @ $213.48/ETH) has been attached to this funded issue from @gianni-dalerta.💰

Want to chip in also? Add your own contribution here.

austintgriffith commented 5 years ago

Lot's of funds for this issue! I'm very excited to see designs! Feel free to post early mockups here in github to gauge community reaction!

gitcoinbot commented 5 years ago

@starkblaze01 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

starkblaze01 commented 5 years ago

@gitcoinbot, working on it.

mattybgits commented 5 years ago

Unfortunately I don't have a lot of coding experience but wanted to throw a design together. Most flows will be the same as the existing application.

One thing we might want is a small explanation that can be easily translated for a couple of key things:

MobileWebxDai

Don't seem to be able to 'Start Work' on GitCoin which is slightly odd.

austintgriffith commented 5 years ago

Just updated the bounty so you can start work :)

figure8labs commented 5 years ago

Whoa there's a lot of activity here, cool. Sorry for the delay, this week was overwhelming, going to post later today!

austintgriffith commented 5 years ago

Yes! Please post designs here! Even if you are unable to implement them into React we'd love to see your work. Perhaps we can split this into two bounties; one for design and one for implementation. If you are interested in getting started with implementation, checkout the starter guide I tweeted about: https://twitter.com/austingriffith/status/1062488114948595713

mattybgits commented 5 years ago

Tidied it up. No idea what posting etiquette is on Github, tell me to cool my jets if I'm spamming. Starting on interactions now, aiming to have something up on InVision by Friday.

V2

(are gradients still cool?)

seichris commented 5 years ago

Made a design, specifically to make it easy to use the wallet for a new user, without reading medium posts or watching videos- They are great, but I think a product should aim to explain itself.

The design guides the user through the whole life circle of a xDai wallet.

Also I am giving the user the choice to switch between sender and receiver, since that saves space on the screen. (And explains what the app can do, on first view.)

Sender

send

Receiver

receive

Notes on implementation:

send scroll example

PS: Let me know what you think. I don't plan to implement, but you can built on top of my figma file.

joshpitzalis commented 5 years ago

@seichris This is cool. I thought about adding new functionality to the app in my designs but then I wasn't sure if that was part of the brief. I wanted to add a tx history to my designs, I thought that would be useful. Persisting the data would be tricky, we have to add a db to the mix and then decide on an authentication strategy. We could just do local storage to try the feature out first though. Ultimately, I decided to only design for features that were already coded. @austintgriffith whats the brief here? If we can just draw in new functionality that opens things up quite a bit.

seichris commented 5 years ago

Also thought about keeping the code changes minimal - so i only added the switch on top and the feature to save the position.

You are right though. Maybe we can design a minimal one for the gitcoin issue and discuss advanced ones for advanced uses some place else.

jakerockland commented 5 years ago

@seichris This design is really nice, very rad. Any way to export from Figma -> Sketch? Would love to play with the design a bit.

seichris commented 5 years ago

@jakerockland Thanks! Figma -> Sketch is not possible. Only svg export. You could copy-pasta my figma into a new figma file though.

austintgriffith commented 5 years ago

Extending this bounty to make sure we have adequate time to both design and implement. There is a new merge to the master branch that breaks the monolithic React file into easy to use components. Let's try to get designs submitted here soon so the community can choose and tweak and then let's start making moves toward implementing in React. If you have any questions or concerns feel free to hit me up directly on telegram @austingriffith. Multiple people will be paid on this relative to their contribution and what we end up using. If you are actively designing or implementing a design, please callback here so we can collaborate.

joshpitzalis commented 5 years ago

@austintgriffith is there a deadline for when you will want to start the design work? I don't have time to work on this any more. I'll be available again on the 14th of December. Any chance you could put a rough deadline down and then we can schedule around it?

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 100.0 DAI (100.0 USD @ $1.0/DAI) has been submitted by:

  1. @seichris

@austintgriffith please take a look at the submitted work:

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 100.0 DAI (100.0 USD @ $1.0/DAI) has been submitted by:

  1. @seichris

@austintgriffith please take a look at the submitted work:

seichris commented 5 years ago

Oops. Shot too early. Didn't implement anything yet.

joshpitzalis commented 5 years ago

We're supposed to start work? I thought one of the design is going to be picked first?

seichris commented 5 years ago

Ah k. Then a deadline definitely would make sense.

austintgriffith commented 5 years ago

Yeah let's get a couple good designs and let the community/collaborators/contributors decide what works best. Then, phase two will start and we can implement the design in React.

Designers will be paid a portion of the bounty once we select a good design and the implementor will be paid the remaining amount to get it in React.

austintgriffith commented 5 years ago

I think @mattybgits' design is my favorite so far but I would love to see some feedback from the community. Should we reward him and continue on to implementing? Anyone out there want to start the second half of this bounty and start implementing the design in React?

gitcoinbot commented 5 years ago
⚡️ A *Magical Unicorn* Kudos has been sent to @mattybgits for this issue from @austintgriffith. ⚡️ The sender had the following public comments: > rad design Nice work @mattybgits! Your Kudos has automatically been sent in the ETH address we have on file.
mattybgits commented 5 years ago

Apologies for dropping off the grid. Just moved to Berlin. If everyone likes it, happy to finish up the screens and get them uploaded tomorrow!

On Mon, 26 Nov 2018, 22:49 Austin Griffith <notifications@github.com wrote:

I think @mattybgits https://github.com/mattybgits' design is my favorite so far but I would love to see some feedback from the community. Should we reward him and continue on to implementing? Anyone out there want to start the second half of this bounty and start implementing the design in React?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/austintgriffith/burner-wallet/issues/5#issuecomment-441811785, or mute the thread https://github.com/notifications/unsubscribe-auth/Aqpquvag068cVWV_MutINGvQ9QwZNWhVks5uzGHZgaJpZM4YTJlB .

shailysangwan commented 5 years ago

@austingriffith I'd like to do the second half!

johngrantuk commented 5 years ago

I would say go ahead and award @mattybgits, the design looks cool and it would be good to get something implemented 😀

mattybgits commented 5 years ago

@austintgriffith + everyone else. InVision prototype for the 3 sending processes. Hotspots should be working. Working out copy for saving and deleting, a little info modal + an explanation of the xDai Bridge. Let me know what you think, would appreciate some feedback.

https://invis.io/NFP3H7LUK2T

gitcoinbot commented 5 years ago

⚡️ A tip worth 50.00000 DAI (50.0 USD @ $1.0/DAI) has been granted to @mattybgits for this issue from @austintgriffith. ⚡️

Nice work @mattybgits! Your tip has automatically been deposited in the ETH address we have on file.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This Bounty has been completed.

Additional Tips for this Bounty:

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This Bounty has been completed.

Additional Tips for this Bounty:

austintgriffith commented 5 years ago

This issue is back open again. Sorry, I don't know how to use Gitcoin. I'd love to see the second half of this bounty! I think @shailysangwan might be working on getting the design implemented in React?

shailysangwan commented 5 years ago

Yup! I'm working on it.

mattybgits commented 5 years ago

@shailysangwan If you need anything, let me know! Can send through style info and should have the rest of the screens uploaded to InVision by tomorrow early afternoon at the latest.