BitcoinDesign / Bitcoin-Core-App

Tracking the design process for the Bitcoin Core App.
https://bitcoincore.app
MIT License
52 stars 11 forks source link

Documenting the process #24

Open mouxdesign opened 1 year ago

mouxdesign commented 1 year ago

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.

  1. As a user, I want to…
  2. As a casual user, I want to…
  3. As an experienced user, I sometimes want to….
  4. As a developer, I want to… The document with the user stories can be found here

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

mouxdesign commented 1 year ago

Initial direction

After having a call with the devs yesterday, we discussed two things:

1) Minimum viable product

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:

Onboarding -> Create wallet -> Send and Receive

In the create wallet options an idea was to focus on:

2) Menu layout options

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.

image

mouxdesign commented 1 year ago

Block clock design

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

User flow

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

mouxdesign commented 1 year ago

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:

Connection Screen settings

At the moment within this screenstate there are two settings:

Init Error message

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.

Group 9815

Proxy Screen + Disabled screen settings

We did an initial design exploration around this screen today with the idea of presenting some ideas to the devs on the next call.

How to contribute page

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.

mouxdesign commented 1 year ago

During the last 2 calls; one of which was with the devs and the 2nd was a design focused call. We discussed the following:

Design documentation

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.

Storage screen

There are currently 3 screens focused on storage, there is an idea to perhaps remove the 3rd screen.

Multisig signing screens

We reviewed the multi sign signing screens which were designed by Gene
Group 9834

Create wallet: Regular wallet

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.
Group 9816

Create wallet: Regular wallet: User flow

Group 2412 (1)

mouxdesign commented 1 year ago

During the last 2 calls we discussed and made decisions on the following:

Roadmap

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

Blockclock

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

Storage location settings

There are some duplicates in some of the settings. It will be worked on in the future as to how to work with these.

Clickable prototype

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.

Blockclock

Shashwat has created an initail iteration of how the block clock could show up in the gui.

Focus states

Some design decisions were made around the focus states. The designers agreed that: Design decisions:

Alternative button states Alternative input states

List item states

mouxdesign commented 1 year ago

Our last 2 calls were very good, quick summary below:

Designers documentation

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.

Information Architecture Bitcoin Core Design Docs

Onboarding & Create wallet

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:

Group 9846

Group 9816 (1)

mouxdesign commented 1 year ago

Blockclock

User expectations

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.

Create wallet flow

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.

Group 157

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.

Peers window

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

mouxdesign commented 1 year ago

Block clock implementation

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.

Onboarding flow

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.

Top navigation

Design decisions and explorations are now also being made for the top navigation.

Group 9817

Create wallet flow

Group 9818

Some additional designs/iterations have been made to the create wallet flow as well:

mouxdesign commented 1 year ago

Yesterday's call was focused on the Storage screen states.

Storage settings screen

Storage location:

Look at the option to change this to Default and Custom

Storage amount screen

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)

mouxdesign commented 1 year ago

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.

Main tasks to be done:

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

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:

mouxdesign commented 1 year ago

Some initial usability tests were done on V1.

Usability testing V1

mouxdesign commented 1 year ago

During the call with the devs we discussed the following:

Block clock

The block clock is further in development and the initial view for the clock has been developed as well as the pause screen.

Scroll view

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.

Scroll View Github

Re-usable Settings

Re-usable settings Github

To do: Test 193 on android

Github

Proxy Settings Screen

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.

Peer window

The original peer window contains alot of different information. This screen has now been simplified to contain just a few headings.

Node - Peers

Christoph created a new view with buttons selection options, where the data can be sorted on Version, IP, Network and Ping

Node - Peers (1)

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.

mouxdesign commented 1 year ago

Design file cleanup

Main design file has been cleaned up.

Peers screens

Peers screens have also been added and some different screen variations has been created.

Block clock progress

5 dots is the connectivity

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/)]

image (8)

User feedback/UX Research

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)

Naming of the downloads:

[gui-qml/src/qml at main · bitcoin-core/gui-qml](https://github.com/bitcoin-core/gui-qml/tree/main/src/qml)

The devs can instead build a separate binary and rename that something a bit easier.

Options handling

Test option 3 and provide feedback

mouxdesign commented 1 year ago

21 December call notes:

During this call mainly the input fields were discussed as well as the blockclock.

Input fields:

Good practices of Input fields:

Blockclock

[Link](https://github.com/bitcoin-core/gui-qml/pull/148](https://github.com/bitcoin-core/gui-qml/pull/148) to download blockclock

mouxdesign commented 1 year ago

Tasks

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

Release planning

  1. Initial audience (the initial circle ore of people who are initially active) (week 1)

  2. 2nd circle (bitcoin design community)

  3. 3rd larger community

[[DO NOT MERGE] Review current state by jarolrod · Pull Request #267 · bitcoin-core/gui-qml (github.com)](https://github.com/bitcoin-core/gui-qml/pull/267)

mouxdesign commented 1 year ago

To do:

Toggle: By default do not always collect this history. (Start with 24 hours)

UX Research

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?

Devs questions: What are they interested in knowing

We want both groups of people: those who have run a node and those who have not run a node.

Design questions: What is interesting to learn more about from the design side of things?

Will use the above to create a list of questions which will inform the research questions we as first time testers.

mouxdesign commented 1 year ago

UX Research: Milestone 1

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.

Link to call

Image shared

Group 2331 (1)

Post that was shared:

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.

Where was the post shared?:

What we discovered?

Installation process

Syncing screen:

Block clock:

Settings screen:

Repository:

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

mouxdesign commented 1 year ago

Quick update after the last call. During the last call Christoph suggested a more structured way of working towards the future milestones.

What are our goals?

V1 Screens

Group 1 (12)


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.

V2 QT Parity Screens

Group 1 (13)

Version release plan

Link to document

mouxdesign commented 1 year ago

Christoph has further bucketed the design process into mini buckets:

V2 Parity Mini buckets:

image (14)

mouxdesign commented 11 months ago

Navigation explorations

The navigation is being built out atm.

Group 9817

Development needs atm:

App can also be built without:

Clickable prototype navigation

Jakub created a clickable prototype in Figma for the navigation explorations.

Widget design explorations

Christoph has done some widget design explorations here.

Bitcoin Core App prototype widgets 210914

Project Management

Christoph has also created a repo for project management which covers milestones and a roadmap. Screenshot 2023-08-03 094618

UX Research

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.

mouxdesign commented 10 months ago

Mapping UX Research done on Bitcoin Core

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:

Research project plan

Github project board

mouxdesign commented 10 months ago

Dev update

UX Research update

Wallet import

Michael presenting import wallet flow work Figma file File figma: Wallet Import 1.3

Import wallet screen

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.

mouxdesign commented 10 months ago

Wallet import flow update

(Figma)

Group 9817 (1)

Node runner/Wallet user flows

Research update

(ChatGPT summary, raw transcript, Figjam)

Top nav bar update

(Figma)

To open up milestone 4 wallet creation

mouxdesign commented 8 months ago

Dev updates

Build Artifacts

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.

Proxy & Data entry picker

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.

Design documentation

Research

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.

mouxdesign commented 7 months ago

Update on the research

Bitcoin Core App website

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.

Group 1 (19)

Bitcoin research summary

Qualitative interviews were conducted with current and potential bitcoin core users. A report is now being created based on those interviews.

What's next?

mouxdesign commented 6 months ago

UX research report

The following research report was created after doing a research sprint to try to understand the users of bitcoin core.

1 2 3

4 5

6

7 8

9

10 11

12 Bitcoin Core App (4)

14

15

Bitcoin Core App (5)

17

18

Link to affinity diagram where we sorted through the data and bucketed it.

stackingsaunter commented 5 months ago

Love it @mouxdesign !!!

Some feedback from me:

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)

Minor typo/copy:

mouxdesign commented 5 months ago

User needs: Bitcoin Core Node Runners

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.

Questions asked and the replies

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.

Summary User Needs: Bitcoin Core Node Runners (Preliminary)

Interview Findings:

Frequency of Usage:

Miners typically open Bitcoin Core for mining purposes, and the last usage was reported to be within the past week.

Use case:

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.

Relevant Settings:

The most relevant settings for miners include

  1. The ability to use Bitcoin Core as a template provider for mining pools
  2. Recommended set up of adding transactions with the highest fees is of the most value

Efficiency Concerns:

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:

  1. As a miner I want to use the block template creator so that I can provide the mining software I use with information. This info is used to construct a coinbase transaction.
  2. As a miner I want to add transactions with the highest so that I can prevent loss in revenue.

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.

mouxdesign commented 4 months ago

Peer screens

Second PR for peers details - help test (one, two)

PR 388 is the most recent one and would be the best to test.

308503028-7b3b8f7f-f490-4233-a540-736e34760116

Miniscript explorations

Michael: Some explorations for Miniscript capabilities, based on the how it works page and the time-based recovery reference design.

Assume UTXOs prototype

Error messages

mouxdesign commented 3 months ago

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.

mouxdesign commented 4 weeks ago

Design Specs

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)

Planning

User testing and UX Research roadmap