akash-network / akash-network/console

Improve Settings UX

Open
#559 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
264
Forks
94
Avg merge
18h 49m
Merged PRs (30d)
297

Description

The current settings experience in Akash Console is a bit confusing, with different settings grouped into one screen and some settings accessible through separate paths.

This issue proposes reorganizing the settings into dedicated pages, improving navigation, and creating a unified structure to reduce user confusion and make the interface scalable for future additions.

1. Status Q:
Profile and templates (Accessible when signed in from the "Top nav" - right corner - dropdown)
Screenshot 2024-12-13 at 16 02 45

Settings (Accessible when wallet is connected - through the item "Settings" on the sidebar)
Screenshot 2024-12-13 at 16 06 04

2. Unify Settings Access
As we see above - currently, there are two different "Settings" paths:

  • From the sidebar (wallet connected)
    But, when users switches to CC payments, the "Settings" item disappears from the sidebar

  • From the top navigation dropdown (when signed-in)
    Where we also have three options "Settings", "Templates" and "Favourites" leading to the same "Settings" page.

Solution:
Unify the settings into a single path and consistent structure.
Ensure the "Settings" option is always available, regardless of the payment method.
Integrate "Profile settings" into the "General" page of the unified settings structure.

Proposed UI/UX Changes:
Split the current settings into separate pages, similar to how “Authorizations” has its own page. These pages should be accessible via a vertical or horizontal navigation menu, replacing the current arrangement of switches.

Screenshot 2024-12-13 at 15 53 42
  • If a majority thinks we should stay with "switches" - I would recommend making them more subtle and compact, like in the example from Shadcn below:
Screenshot 2024-12-13 at 16 12 31

link: https://ui.shadcn.com/examples/dashboard

3. Here are the proposed pages:

  • General:
  • Templates
  • Account (name, email, username, avatar URL link, GitHub integration)
  • Profile; Bio, website, Email preferences (Option to delete account - ?)
  • Appearance - (Theme selection)
  • Certificates
  • Authorized Spend
  • Wallet (if Wallet connected)
  • Finances (Billing - if CC payments)
  • Notifications (Alerts)

4. Mockups
A couple of mockups to see how a redesigned "Settings" experience would look like (with some new additions - just to see how it behaves if we add more options):

  • General
Screenshot 2024-12-13 at 16 32 37 - note, the sidebar menu is from the issue https://github.com/akash-network/console/issues/553
  • Ceritificates
Screenshot 2024-12-13 at 16 44 00
  • General
Screenshot 2024-12-13 at 16 45 10

These suggestions are just a starting point to spark some discussion and keep improvements in the pipeline. If you have any feedback, ideas please share!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing Settings entry points described in the issue: the signed-in top-nav dropdown and the wallet-connected sidebar. Compare their current destinations and payment-method behavior, then use the proposed pages and mockups to define a unified navigation structure. Done means Settings is consistently accessible and organized into the agreed dedicated pages.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.