KodaDot V3 Redesign + Guidelines

[XyloDrone]

Is your feature request related to a problem?

Hello everyone, let’s escape the Craigslist pit and turn KodaDot into a slick NFT Explorer. 👯
If you need me to respond, I am usually available Mon-Fri, and at my computer from 9am-6pm CET, whilst working 3x days per week.

Buckle up because this is a long document which aims to:

• Organise all issues in a large mind map which will serve as a guide on where to place each PR/issue

• eliminate double work, outdated PRs/issues and double PRs/issues

• construct a way for all of us to easily communicate with each other and move rapidly forward

I have started redesigning page by page, so far I’ve finished the “Nav Bar”, “Gallery”, “Jobs” and “Checkout” designs. I would suggest either starting with the “Gallery” or waiting for me to finish further designs.

Please tag me in any new PRs/issues being opened that have any relation to UX/UI so I can keep adding these to the mind map accordingly + providing designs so that devs don’t have to bother with this, as it is my duty to sort out UX/UI so you can focus on what you do best.

Redesign file is here

Further Notes:
I would suggest holding off on any tutorials and FAQ before the redesign is complete, however, I'd assign @cryptodamsky and @onerawartist to do these once the redesign is done. In order to fast track this process I will focus on redesigning the landing page and minting user journeys next.

Mind Map Legend

Cyan color: Pages
Black: Unresolved issues with design
Orange: Resolved issues with design
Note: some blocks are duplicated due to having a pressence on multiple pages

All of your suggestions are very much appreciated, let me know how you'd like to proceed and please assign yourselves to issues/PRs you see fit.

Describe the solution you would like

Note: As I continue to research user journeys, some things are subject to change, I will update as I go.

General changes:

• - Change color to E6007E
• - Update background color to: 0A0A0A
• - remove glow from images
• - remove zoom in from images

The design will sort out the issues/PR's per page, as in the list below:

Nav Bar
#910
#1337

My proposal is to remove these from nav bar:
"Collections"(these should be easy to view in gallery, not needed in NAV at all)
"Spotlight" (I think this should be merged with "series" as a separate tab and I suggest renaming "series" to "leaderboad", as the term is confusing)
I suggest adding "credit", "transform", "admin", "settings" under a new page called "My profile" where the user will be able to edit and access multiple features; see the works/artists/collections they like/follow, what they have collected, active data on the works they purchased/created. Additionally, the page would have a "dev" dashboard where we can also track all of our Github contributions and activities(have a look at the mind map for a breakdown of the page). Thsi page will take a while to researh but I am confident we can have the redesign of the entire platform done within the next 2 weeks.

Personal account zone: My Profile

• kodadot/ideas#15
• Buy me something random / loot box #1432
• Gaming dashboard - Traits oriented #1526
• Buy me something #1516 once Passion feed #744 adjusted
• Discovery weekly for collectors grants#19
• History for user #1172
• Recent Sales for Creator #1285
• Create user preference screen #942
• History browsing component of user history #1439
• Developers sub-page #361

Tutorial would be turned into "Help" and it would consist of both tutorials + FAQ's

Landing

• clarification needed for creator in FAQ #90
• kodadot/ideas#7
• Smart article about KodaDot to hello  #1489
• Onboarding experience v0 #1445
• GM route on kodadot  #1564
• Curation feed #876
• Landing refresh v2, avoiding Craiglist pit #899
• Extend Entrance points for users #145
• Extend Entrance points for users #145
• Show categories of NFTs on landing #319
• Basilisk v0.1 #660
• Login process for user #837
• Landing refresh v2, avoiding Craiglist pit #899

Activity(a new page in the navigation to track activity in real time)

• Recent NFT sales & Listings #1236

Leaderboard/Series
Add as tabs:

• Add hall of fame for bug/security reporters #1440
• Payout leaderboard for KodaDot #1477

Gallery+Search Engine

• Brutal NFT search v2 for kodadot NFTs Explorer #348
• When users has strict search, offer hint to drop some preference #859
• kodadot/ideas#8
• Smart filtering on new mass-mints #903
• Show NFTs based on content rating - (N)SFW mode #285
• Show only collection which has NFT with various properties/attributes #1023
• Show only collections with traded volume #1088
• kodadot/ideas#22
• Gaming dashboard - Traits oriented #1526
• Show NFTs by most emoted  #1174
• Add traits to mass mint #991
• Sort & Search & Toggle #49
• Add buy now from gallery feed when there is grouped NFTs #1050
• Add to search last five searches #802
• Filter on Gallery/Market #35
• Hide empty collection on users profile #1367
• 1-1 Collection-NFT #42
• Add to show number of recent searches to input field #1294
• Sort NFT by most sales asc/dsc #979
• Hide empty collection on users profile #1367
• Infinite Scroll on collection #1411
• Sort NFT by most sales asc/dsc #979
• Infinite scrolling on demand  #1582
• Add the Option to search for the name on the collection #1231

Create(Minting)

• Writing interface for NFT novels ✍️ #378
• Add field for referrals at simple minting #460
• Save draft of NFT while making NFT #419
• Mass mint UI for collectibles // old #614
• kodadot/ideas#12
• Explainer screen for creating mints #847
• Mass mint UI for collectibles // old #614
• kodadot/ideas#15
• Add traits to mass mint #991
• Own at least NFT from exact NFT collection #1005
• Set airdrop recipients list based on owning of other series #1094
• Ask for access #1330
• Shopatainment - partybid like #1406
• Gaming dashboard - Traits oriented #1526
• Add traits to mass mint #991
• Custom metadata // Bring your own Metadata #575
• Royalties, make and accept offer add to faq #1015
• Clarify simple mint #401

Profile(this is what others view when they ladn on your profile, the "My profile" section is private)

• kodadot/ideas#9
• Show me owned NFT from collection detail and collections #1190
• Collection Size / Unique owners ratio column in Series #880
• Timed Score #825
• Distinguish on Creators profile between Sold and Sent/Gifted #898
• Smart filtering on new mass-mints #903
• kodadot/ideas#14
• Dashboard for NFT drop #716
• Favourite artists feed #612
• Distinguish between NFT collected vs obtained #678
• Passion feed #744
• Artist dashboard #571
• Sort & Search & Toggle #49
• Add highest sale #877
• Royalties, make and accept offer add to faq #1015
• Recent Sales for Creator #1285
• Put dotscanner into profile #1029

NFT + Collection view(I need to separate these accordingly as issues are bundled together at the moment)

• Unlockable Content  #219
• Add download button to the NFT detail #357
• Views counter #901
• Ask for access #1330
• Buying que 🛒 checkout  #910
• kodadot/ideas#19
• kodadot/ideas#21
• Change price of your NFTs under one collection #1606
• Made in simple edition numbers default #936
• Go to next random NFT  #1252
• Service to verify provenance of each NFT #14
• Add random gen pick from mass-airdrop list #1010
• kodadot/ideas#22
• Show NFTs by most emoted  #1174
• Series sales insights for recent NFT transactions #878
• Support for Glass material maybe ?  #1323
• Create repository for curating deny list of artists #1423
• Add new sharing icon #1012
• Add H-spread to the chart #1483
• kodadot/ideas#7
• Show on Item Detail BUY events in charts #1122
• Add traits to mass mint #991
• kodadot/ideas#40
• Brutal NFT search v2 for kodadot NFTs Explorer #348
• Add Collection view #1019
• New gallery item detail 3.0 #958
• App should handle canceling tx correctly #594
• Add show/hide collection description to vuex #1118
• Show actions only whenever can DO some action #957
• Favourite artists feed #612
• Passion feed #744
• Show total amount of collected/sold items #1238
• Clarify double spends on RMRK to FAQ #737
• Add to vuex various user preferences #1160
• Show collectors chart under collection #962
• Royalties, make and accept offer add to faq #1015
• Total emotes per collection #1175
• Sharing button needs more love #1065
• Put dotscanner into profile #1029
• Sort NFT by most sales asc/dsc #979
• kodadot/ideas#33
• Add difference from previous trade into history chart #1111
• Show whale collected nfts from particular creator #1390

Leaderboard(previously Series)

• Dashboard to see KodaDot creators & collectors #827
• kodadot/ideas#16
• kodadot/ideas#16
• Total sales dashboard #1496
• What's hot dashboard #1386
• Sort & Search & Toggle #49

Help: FAQ+Tutorials

• Explainer screen for creating mints #847
• Mass mint UI for collectibles // old #614
• Finish tutorial for Mass Mint #725
• Make Tutorial how to mint from Mobile wallet on KodaDot #915
• Royalties, make and accept offer add to faq #1015
• Revisit FAQ and add new  #1604
• Royalties, make and accept offer add to faq #1015
• Adding more information about NFT for new Users. #648
• Clarify double spends on RMRK to FAQ #737
• Add to faq what's difference between classic simple permafrost #1220
• Why did you choose to build on Kusama/Polkadot and not Ethereum? #529
• Adding more information about NFT for new Users. #648
• Clarify simple mint #401

Footer
Quite a few things added in the design, but only 1 linking to issues, which is #702 : jobs

Describe alternatives you have considered

I suppose there will be plenty once we start unpacking page by page, these will be added here once we encounter obstacles.

Screeenshots

Designs are on this link, if you have any questions or require exports, just respond to this thread and tag me.
https://www.figma.com/file/GeVzZKVORd9L8kAWrlKtZv/KodaDot-UX%2FUI?node-id=0%3A1

[roiLeo]

Hey!
Dope work, love the new design!

Few things:

• I have a concern about accessibility color contrast: text => #E6007E on background => #1F1F1F
• can we have a light theme page example?
• is "checkout flow" possible feature wise?
• I find search filters hard for the UX, would it be possible to rework a version less harmful? maybe create a sidebar filter
• Not a fan of gradiant button. What would be hover/active state?

What are your thoughts on this?

[XyloDrone]

Hey! Dope work, love the new design!

Thank you!

Few things:

* I have a concern about accessibility color contrast: text => #E6007E on background => #1F1F1F

I've changed the pink color to #FF47AC and bacground to #090909, see new design here. Ran it through a contrast checker plug in which approved it :D

* can we have a light theme page example?

Here we go

* is "checkout flow" possible feature wise?

I suppose this is a Q for @yangwao, but the suggestions was mentioned in #910

* I find search filters hard for the UX, would it be possible to rework a version less harmful? maybe create a sidebar filter
* Not a fan of gradiant button. What would be hover/active state?

Any particular reason why you dislike the gradient? I've positioned the filters at the top so that the images have more space, here's an example with the sidebar and solid buttons.

In regards to the UX of filtera, @cryptodamsky just submitted a proposal to add info to certain sections in #1637 , I think this would be a great addition if we agree on it.

[yangwao]

I have no words for this amazing issue and effort someone goes through all of the issues and trying index them into one and whole kodadot v3! A really impressive amount of effort and thank you in the first place!

eliminate double work, outdated PRs/issues and double PRs/issues

if there are, it's bc they left of old process and some of might be reinforcement by logging twice which is good, also be aware that some issues sound similar, they are not. Definitely would chop on our backlog, but some older issues are gems which just weren't implemented fully :)

construct a way for all of us to easily communicate with each other and move rapidly forward

github made discussion boards, where information doesn't lost as in realtime chats

I would suggest holding off on any tutorials and FAQ before the redesign is complete

Rather have tutorial and onboarding material, because migration to new beta took us over 3 months tbh and can't afford loose that amount of time. Rather have outdated onboarding material and as separate process we can upgrade them and learn by doing new one.

"Collections"(these should be easy to view in gallery, not needed in NAV at all)

yes this should be merged as functionality in the gallery I guess, as collection could be enabled there, but if collection is interesting, would be nice users have dedicated entrance point to that

"Spotlight" (I think this should be merged with "series" as a separate tab and I suggest renaming "series" to "leaderboad", as the term is confusing)

Yes and no. Leaderboard is actually term I'm trying steeraway as it put artist into competition bit which is not aim of Spotlight. Rather would be good name to have Spotlight renamed to Artist Directory.

I suggest adding "credit", "transform", "admin", "settings" under a new page called "My profile"

yeah would be nice to have something like "Control Center" I guess

Re design in firma, I would strongly require to have this time some sort of atomic components, before we go for v3
Seems we had tons of issue double fixed or missing somewhere which introduced lot of incosistency across codebase and wasted pretty lot amount of time adjusting components per each instance.

Re design process I would advise starting it as mobile-first design, this seems way much as desktop only so till we will have decide on mobile it can take time.

Plus I don't see anywhere AR/VR/XR buttons tho for our XR efforst

[XyloDrone]

I have no words for this amazing issue and effort someone goes through all of the issues and trying index them into one and whole kodadot v3! A really impressive amount of effort and thank you in the first place!

Thank you! Hopefully it will help us build stuff faster!

eliminate double work, outdated PRs/issues and double PRs/issues

if there are, it's bc they left of old process and some of might be reinforcement by logging twice which is good, also be aware that some issues sound similar, they are not. Definitely would chop on our backlog, but some older issues are gems which just weren't implemented fully :)

Fair enough and understandable.

construct a way for all of us to easily communicate with each other and move rapidly forward

I would suggest holding off on any tutorials and FAQ before the redesign is complete

Rather have tutorial and onboarding material, because migration to new beta took us over 3 months tbh and can't afford loose that amount of time. Rather have outdated onboarding material and as separate process we can upgrade them and learn by doing new one.

Alright, I believe @onerawartist made a tutorial for minting, so that can be added and @cryptodamsky said he is also willing to make some materials. I've updated the landing page design and created a dedicated section for newcomers. I'll keep working on the entire user journey for new useers and we can add the videos etc there.

"Collections"(these should be easy to view in gallery, not needed in NAV at all)

yes this should be merged as functionality in the gallery I guess, as collection could be enabled there, but if collection is interesting, would be nice users have dedicated entrance point to that

It could also be in a drop down from "Gallery?"

"Spotlight" (I think this should be merged with "series" as a separate tab and I suggest renaming "series" to "leaderboad", as the term is confusing)

Yes and no. Leaderboard is actually term I'm trying steeraway as it put artist into competition bit which is not aim of Spotlight. Rather would be good name to have Spotlight renamed to Artist Directory.

Understandable, but I do believe that any kind of table suggests competition, regardless, the term was suggested primarily for easier UX.

I suggest adding "credit", "transform", "admin", "settings" under a new page called "My profile"

yeah would be nice to have something like "Control Center" I guess

Cool!

Re design in firma, I would strongly require to have this time some sort of atomic components, before we go for v3 Seems we had tons of issue double fixed or missing somewhere which introduced lot of incosistency across codebase and wasted pretty lot amount of time adjusting components per each instance.

Fair enough.

Re design process I would advise starting it as mobile-first design, this seems way much as desktop only so till we will have decide on mobile it can take time.

I'll start working on a mobile version of already designed pages so we can have an idea of how it looks like.

Plus I don't see anywhere AR/VR/XR buttons tho for our XR efforst
This will be on the artist profiles and NFTs themselves+ in the filters for search.
If we have some pre-built galleries we can add this to the Nav Bar and/or emphasise in landing.