Open mouxdesign opened 2 years ago
After having a call with the devs yesterday, we discussed two things:
A minimum viable product (MVP). This would ensure that the build process is starting with some core fundamentals and then moving into the complexity as we move forward.
To build a MVP, I asked the question which part of the userflow could we best focus on. The devs mentioned in this initial phase it would be good to focus on:
In the create wallet options an idea was to focus on:
Primarily there are 2 options to layout the menu, a horizontal menu layout as well as a vertical menu layout.
Christoph created some design ideas around both and we had a small discussion around which menu options would be available.
While both menu layouts have their strengths and weaknesses, at this stage all ideas are still being explored. We also discussed the layouts and the strengths and drawbacks of each layout.
Christoph has come up with some variations of the block clock which he has shared on Youtube for some feedback. During the onboarding process the block clock is introduced showing the blocktime. There is a circular display indicating the clock and there are 2 variations of this. One variation has the blocks as individual units and the other variation has the clock as a continuous circle.
Link here to the video walkthrough
Mo created a user flow and we jointly worked within this flow yesterday exploring it and expanding it mostly within the send section.
Link to userflow
We discussed issue #158
This issue addresses a cleanup of the available screens. From that discussion is was decided on to focus a bit more on:
At the moment within this screenstate there are two settings:
This is essentially an error during the initialization phase. We had a discussion around re-designing this screenstate and at the moment have some rough modal designs.
We did an initial design exploration around this screen today with the idea of presenting some ideas to the devs on the next call.
Christoph has worked on the how to contribute page and has added alot more content to it. Suggestions to the content can be added here.
During the last 2 calls; one of which was with the devs and the 2nd was a design focused call. We discussed the following:
We discussed the design documentation website which is live. The goal of this documentation is for new design contributors to have an overview of the project as well as the design principles as well as how design decisions were made. This is fully open for contributors and feedback.
There are currently 3 screens focused on storage, there is an idea to perhaps remove the 3rd screen.
We reviewed the multi sign signing screens which were designed by Gene
Some initial designs were created and an initial user flow for the create wallet flow. This is still in its very early stages and many further iterations will be made based on the feedback from the devs as well as some technical considerations which we will research.
During the last 2 calls we discussed and made decisions on the following:
Christoph created a roadmap to track all the tasks within the gui that are being worked on at the moment. This is a nice easy tool to use when there are multiple people working at the same time and keeps for easy clear collaboration
We decided now at the initial stages it would be best to go for the design of the blockclock that is the easiest to implement for the devs
There are some duplicates in some of the settings. It will be worked on in the future as to how to work with these.
It was discussed to create a clickable prototype two parts of the userflows which have been designed; onboarding as well as the create wallet flow.
Shashwat has created an initail iteration of how the block clock could show up in the gui.
Some design decisions were made around the focus states. The designers agreed that: Design decisions:
The Focus outline would be in purple
There would be an offset with the outline. Filled and outlined buttons would have an offset, free buttons the outline would be inset.
List items: Hover: Orange light 1 Active: Orange light 2
Error messages would show a red outline as well as red text under the input box with a warning icon.
Our last 2 calls were very good, quick summary below:
We discussed cross linking the design documentation with the developers documentation. We looked at the information architecture of the designers website. Below a quick look at the possible information architecture of the website.
We focused on the user flows for both onboarding as well as creating a wallet. During our second call we looked at the user flow of both and got some valuable input from the devs.
With the creating wallet flow we also looked more at the userflows for creating:
We had a discussion around how to manage user expectations during the onboarding and create wallet process. Two things that affect the initial user exp are 1) The internet bandwidth it takes to sync to the network 2) The amount of hard drive space it uses on the users pc
We also discussed 2 things that a user could do during the IBD, at the moment there are only 2 things a user can do; 1) Seeing how much of history is downloaded 2) Seeing who you are connected to
Do we need to educate users about 1) That the initial download might slow down their pc. 2) There are some there tasks they can do (read the whitepaper) while waiting for the initialization process to continue.
We spoke about the create wallet flow which was further worked on by Micheal. We all commented on this flow idea and found it good as an initial iteration. The design can be seen below.
We also looked at the copy on the screenstates themselves as well as the copy on the labels and agreed that the copy itself needs a good thorough look to adjust it for consistency and understanding. Having good copy is going to be essential to the users exp of the gui.
We also discussed whether in the future it might be relevant to create a screen for a peers. The purpose of this screen would be so that users can 1) Add more peers 2) See how many peers the currently have
Shavaan has coded the block clock which now very closely resembles the original block clock design made by Christoph. The now coded design shows the different fractions of how the clock is broken up/fragmented.
Christoph worked further on the onboarding flow and we would say it is about 90% finished now. Some items that are still being discussed are:
Copy: With regards to terminology used we will during the process of looking at the designs also ensure that the copy amongts all the screenstates are related and connected. So for example using the word passphrase on one screen should then be used across the other screenstates as well to maintain consistency,
Dashboard time: This is another concept we discussed as to how that time with syncing with the network will be shown on the interface.
Design decisions and explorations are now also being made for the top navigation.
Yesterday's call was focused on the Storage screen states.
Look at the option to change this to Default and Custom
This screen is allowing the user to decide on how much data they want to store Choices:
Added in some text to the design that with Store all data (they support the network) and with reduce storage (they are using it as a regular wallet)
Main topic is preparing for the first release of V1
There is a plan to have a soft launch of V1, create awareness that this is happening and spread some awareness via various channels that we are looking for feedback on V1.
There might be some limitations wrt the model of android phones which V1 will run on. Maybe mention something about the android version that it can work on.
Airtable, Github, Twitter
Testing will be done on
Media plan
If you are using the QT Gui you cannot replace it, it is very simple, it is not running a node. The mission of this app is to get people to run a full node.
Channels where we will do the announcements and ask for feedback:
1) Community call on November 30th we can do a soft release there through the community
2) Twitter:
3) Jarol long form blog post
December 9th - have the app out there
Coding to do:
Some initial usability tests were done on V1.
During the call with the devs we discussed the following:
The block clock is further in development and the initial view for the clock has been developed as well as the pause screen.
This has now been fixed. The devs have come up with 2 different options. This is the automatic re-sizing that happens when the GUI is viewed on mobile.
To do: Test 193 on android
The proxy settings screen would be for someone who wants to use these settings. However it might be an option to include this in V1.
The original peer window contains alot of different information. This screen has now been simplified to contain just a few headings.
Christoph created a new view with buttons selection options, where the data can be sorted on Version, IP, Network and Ping
Might be an idea to add in sorting data by direction. Default sorting is by age of connection.
To do: Test out the peers window in the current version of the GUI.
Main design file has been cleaned up.
Peers screens have also been added and some different screen variations has been created.
The color of the circles is showing how much of data has been downloaded (small dots at the bottom, if user clicks on that then it will show connectivity to peers, will show in red if there is a peer connection problem)
[Block Clock interactive states](https://stupefied-jones-dd209f.netlify.app/)]
Use both avenues to collect user feedback as it might hep to inform the design more (First have to wait for block clock to be integration to be further implemented)
The devs can instead build a separate binary and rename that something a bit easier.
Test option 3 and provide feedback
During this call mainly the input fields were discussed as well as the blockclock.
[Link](https://github.com/bitcoin-core/gui-qml/pull/148](https://github.com/bitcoin-core/gui-qml/pull/148) to download blockclock
[ ] Peer screen: Make the selection criteria horizontally scrollable instead of 2 layers one under the other.
[ ] Error states and behavior to the design system
Add to the design documentation, if you go into a setting screen and you tap a field and you type in text. If you enter 10 billion. If it goes beyond the max value value that we allow. does it show an error message?
Add these to the design system. The logic only exists in code, but adding in the logic about these error states into the design documentation as well
[ ] 1. Come up with a proposal on how we can organize the release
[x] Create a UX Research plan 3 circles of research
Initial audience (the initial circle ore of people who are initially active) (week 1)
2nd circle (bitcoin design community)
3rd larger community
To do:
[ ] Ideate on application release notes
[x] Open up a PR for the spelling of the file name to change it from insecure to unsecure.
[ ] Graph toggle: There is a graph that collects network data and you want to see a graph, the app needs to have collected the application. An option is to only start capturing the data from when you start using the graph.
Toggle: By default do not always collect this history. (Start with 24 hours)
A question was asked; what would the devs like to know once it's launched and what would we like t know from the design perspective?
We want both groups of people: those who have run a node and those who have not run a node.
Will use the above to create a list of questions which will inform the research questions we as first time testers.
Why?
How? We hosted a call within the bitcoin design community. During this call one of the Bitcoin Core developers were present as well as the Christoph and Mo. Two people tested milestone 1 on Macs.
Tomorrow 13 April at 14:00 UTC we are going to be having a super fun UX Research call. We will be doing some live testing of Bitcoin Core App. It's going to be really hands on. We will onboard ourselves and walk through the interface together. The only prep before the call is to install it on your device of choice. :arrow_right: Check out the Github link where you'll find the latest download links. The team have been working away to bring this new design to the ecosystem and we are really keen to see how you the community experience it.
Installation process
Syncing screen:
Block clock:
Settings screen:
A repository has been created where all of the user feedback can live and be captured from milestone 1 Why?
How? A public repository was created in Github. Link to repository
Quick update after the last call. During the last call Christoph suggested a more structured way of working towards the future milestones.
In addition to the screens which are already designed, V2 will have additional screens added to the user flow. The additonal screens are highlighted with a star in the below diagram and figma document.
Link to document
Christoph has further bucketed the design process into mini buckets:
The navigation is being built out atm.
Development needs atm:
App can also be built without:
Jakub created a clickable prototype in Figma for the navigation explorations.
Christoph has done some widget design explorations here.
Christoph has also created a repo for project management which covers milestones and a roadmap.
We will be kicking off a research initiative which is in the process of being developed. The goals of the research initiative are to;
So far a research plan has been created and together we are reaching consensus on what would be the best approach.
Mapped out the current research initiative as well as past research initiatives that have been done on core. The purpose of doing this was to:
Michael presenting import wallet flow work Figma file File figma: Wallet Import 1.3
View only and Multisig designs will be worked on later Since we are focused on this user flow right now, we’ll try to cover future feature additions as well and not just the first implementation.
(Figma)
(ChatGPT summary, raw transcript, Figjam)
(Figma)
To open up milestone 4 wallet creation
There has been a re-introduction of the build artifacts. . Designers can now grab the binaries and build the wallet to test it. Basically download and install the application. It automatically builds based on the current master file. This will allow many people to test on android.
Data directory picker is finished. Proxy, you can set the proxy on the proxy screen we might want to revisit that design. Currently in implementation Tor and regular proxy.
The UX research that was done was a great collaborative effort supported by many people. The next phase of the process is now bucketing the insights and presenting it. Updates on the process can be found here.
Update on the research
There is a write up being created about the past research efforts done on Bitcoin Core App. This will be added as an additional page to the website. It is currently a WIP but we can see that there's been some discovery research that has been done as well as qualitative and quantitative research done. This shows that there could be some more experimental research that could be done in terms of A/B testing current designs before they move to development.
Qualitative interviews were conducted with current and potential bitcoin core users. A report is now being created based on those interviews.
The following research report was created after doing a research sprint to try to understand the users of bitcoin core.
Link to affinity diagram where we sorted through the data and bucketed it.
Love it @mouxdesign !!!
Chart with wallets needs a scale. I suggest showing exact number (it's better for low amounts than %) and a total somewhere eg: (N=30)
Love illustrating here, especially the plane part!!!
When we gather screenshots from Sparrow we can add those parts that are in insights as screenshots there to better communicate what people like about it
I think report feels a bit cut off at this moment. Maybe missing some straight recommendations for the design? Maybe this is something I can expand it with, as per our chat with @GBKS on Discord :)
I'd also add directions of further research, eg:
If you share your Figma file I can help with expanding it! I also wanted to look at the data and diagram one more time to see If I can find anything worthwhile to add (I feel bad I didn't take part in the analysis process too much)
While there are many users of the current Qt Widgets GUI for Bitcoin Core. We currently do not understand this user base and have not connected with them to establish their needs.
This feels a bit unnatural when the sentence stars with "While" the second sentence should be a part of first one (although it's a bit long) eg:
While there are many users of the current Qt Widgets GUI for Bitcoin Core, we currently do not understand this user base and have not connected with them to establish their needs.
Is the GUI called "Widgets"? Haven't had an idea about it
Bitcoin Core users are fairly experienced in the bitcoin space, they have been using a wallet for many years now.
- Should be either: have been using "the wallet" or "bitcoin wallets" for many years
Last slide typo: "The second larget group"
The Jobs to be done framework from the UX Research toolkit to speak with a bitcoin miner to understand if it would be useful for the project to speak with more miners.
During the interview a few questions were asked to identify the "jobs" that bitcoin core app would need to do to meet with the needs of miners.
Q: When was the last time you opened bitcoin core with reference to mining? A: Last week
Q: Why did you open it and what was the context? A: Testing V2 so we needed a bitcoin core node and get it up and running. For me to to mine SV2 you need a bitcoin core node.
Q: When do you typically use bitcoin core? A: Usually just for mining. That's it.
Q: What do you generally love about bitcoin core? A: It's what we as a bitcoin community agree on it's the best bitcoin out there. its the best code out there so I'm happy to use it.
Q: What do you find frustrating? A: Nothing
Q: What settings are the most relevant for you as miner? A:
The bitcoin core has a template provider. So Stratum version 2 pool you're gonna need Bitcoin Core running locally on your comp because you'll need block template creation. Solo miners: So for a solo miner to build their own block template they will have to run their own node. Great for decentralization.
Bitcoin core has a rule as a recommend set up which is it adds the transactions which has the highest fees, that's an important setting for us as miners.
Open ended conversation: Efficiency for pool mining: The miner creates a block not a pool for decentralization efforts. You'll need a node to do this. You don't want to lose efficiency with money.
When you are connected to a pool you send shares and if those shares are late or stale. Then you don't make any money. Bitcoin running on your system is a better way. Its much more efficient. There's miners in far away places. They are in the middle of the jungle. They really want to use the pool. But they will need to run their own node.
Solo mining vs pool mining; Pool mining you have a payment system, they aggregate all the miners and shoot that at bitcoin which increases the chances of finding a block.
Solo miners are those trying to reach the block on their own, we provide the infrastructure for them. People would rather connect to a solo pool.
It's two different pools. The solo mining is more of a community thing. The pool mining that's where money is made. That's the main emphasis.
Does it require a graphical interface? It will require a GUI, it will require a dashboard. Stratum V2 is already open source.
GUI connected to a pool. The software which is another service. Every miner has a different UI.
Interview Findings:
Miners typically open Bitcoin Core for mining purposes, and the last usage was reported to be within the past week.
The primary use of Bitcoin Core for miners is to support the mining process, solo and pool miners would need to run their own bitcoin core node.
The most relevant settings for miners include
Efficiency is essential for miners both with solo and pool mining to prevent losses in revenue.
Miners use a dashboard depending on which mining tool/pool they are connected to.
Conclusion:
Jobs to be done:
getblocktemplate RPC An improved method is the Bitcoin Core “getblocktemplate” RPC. This provides the mining software with much more information: The information necessary to construct a coinbase transaction paying the pool or the solo miner's bitcoind wallet.
Second PR for peers details - help test (one, two)
PR 388 is the most recent one and would be the best to test.
Michael: Some explorations for Miniscript capabilities, based on the how it works page and the time-based recovery reference design.
During the last call we discussed the project roadmap. Points discussed:
To dos:
Prototyping and quality testing prior to the release in a staggered format would ensure that when it's released to the wider public the user exp is as smooth as possible.
There is also currently a case study that is in progress which describes the importance of this project as well as the process.
A developer has requested that some guidance be created around the different interactive states. Specifically the wallet selector was requested.
Ideally then the interactive states in the various forms would also reflect in the prototype. Prototype: Bitcoin Core App Prototype (lively-kashata-cfde7e.netlify.app)
Milestones progress as well as what's being worked on atm
The send flow and receive flow are being worked on now in sync. The activity flow is mostly wrapped up however there are still some states that are being designed as we speak.
The MVP scope for the send flow is being designed
Thought it might be an idea to document the process that has been done so far.
1. Screen discussions
Screen discussions: We met virtually and all jammed on figma. This was done over a few calls where we looked at the individual screenstates of the current GUI and discussed various aspects of that. Some comments were made around certain features, as well as whether to move certain features to different screens and so forth. Figma file
2. Created an initial design document
Christoph created an initial planning document, outlining the possible steps we could take as well as things we would have to think about during the design process.
Planning document
3. Created user stories
Christoph created some initial user stories where he tried to think about the different user groups and how these groups would use the gui. He created 4 different user stories.
Within the design document some initial sections were created which might exist within the interface.
4. Grouped user stories
Mo then grouped the user stories under the various categories (mentioned above). The purpose of this was to see which user story fitted under which area of the interface design. With a goal possibly being of when the initial designs are iterated we can go back and look at if the user stories are fulfilled by the design itself.
Figma file
We also thought about prioritizing the user stories and will be thinking more about that as well. We also thought about interviewing the devs to ask them about what user stories they would like included.
5. Collaboration guidelines
Christoph had an idea on how to collaborate on the design process, that can be found here https://github.com/BitcoinDesign/Bitcoin-Core-App/discussions/23