Documenting the process

[mouxdesign]

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
#23

[mouxdesign]

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:

• Single sig
• Multi sig
• Watch only

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.

[mouxdesign]

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]

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:

• Database cache size
• Script verification threads
  There has been a discussion around possibly moving these to detailed/advanced settings.
  
  MASTER
  
  PR
  

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.

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]

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

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.

Create wallet: Regular wallet: User flow

[mouxdesign]

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:

• 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.

[mouxdesign]

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.

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:

• A regular wallet
• A view only wallet
• A multisig wallet

[mouxdesign]

Blockclock

• The Blockclock is further along in development.
• Shavaan needs to figure out a workaround with regards to displaying the segments
• Suggestion from Christoph is to use the gradient approach

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.

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]

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:

• Do we want to make it optional in the beginning to allow a user to skip the encrypt wallet part until they make a first transaction? Or do we want to design it in a way that the encrypt wallet is highly suggested but allow an option to skip it.

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.

Create wallet flow

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

• The create password section has been refined further which is now different to the previous design mentioned in previouos updates.
• Screen designs have also been added in for unsupported wallets as well as confirmation screens when imported wallets are recognized.
• Confirmation screen that wallet has been created

[mouxdesign]

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

Storage settings screen

• Storage space: Try a design with a slider and see how the different variations look

Storage location:

• Default directory (this is different for every operating system, will be stored in a folder)
• Custom directory (This is a custom location that they save)
  Will we need to show a file picker window? That would be the file picker from your computer

1. Does this happen as soon as they click? The file picker will automatically pop up. (the devs will try to code it so that it automatically opens the file picker on the persons computer)

Copy on the screen of Storage location screen:

• Main heading is: Storage location
  2 sub-options below would then read Default Directory and Custom Directory

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:

• Reduce storage (uses 1GB) - Pruned (Reduce storage)
• Store all data (uses 440GB) - Full archival node (Store all data)

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]

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:

• Website

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.

• Collect feedback

Airtable, Github, Twitter

• Testing will be done on

1. Desktop windows
2. Desktop mac
3. Android
4. Linux

• 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:

• Block clock

[mouxdesign]

Some initial usability tests were done on V1.

Usability testing V1

[mouxdesign]

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.

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.